[thecashbagParticipant]

I’m trying to re-create a similar WooCommerce product page that was also made with X and Cornerstone.

See the example here I am trying to recreate: https://www.versame.com/product/starling/

They have kept the top part of the product page as normal. But the bottom part uses Cornerstone to style the product description tab.

I have attached a screenshot to show this with comments drawn on for clarity (top red area is normal product page, bottom blue area is cornerstone styled product description).

This is my website: https://elementpaints.com/shop/acrylic-paint-sets/

I have removed the “reviews” and “additional info” tabs, so it just shows the product description tab that I can edit in cornerstone. But how do I make the product description tab (the part I can edit in cornerstone) full width with no container, as shown in the example?

[RupokMember]

Hi there,

They are using 100% width for the container and limiting the width of first section.
You can add this under Custom > CSS in the Customizer.

.single-product .x-container.max {
  max-width: 100%;
  width: 100%;
}

.single-product .x-container.width:first-child {
  margin: 0 auto;
  width: 88%;
}
.single-product .entry-wrap {
  margin: 0 auto;
  padding-top: 5%;
  width: 80%;
}

Hope this helps.

Cheers!

[thecashbagParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add add following code :

.single-product .x-container.max {
  max-width: 100%;
  width: 100%;
}

.single-product .x-container.width:first-child {
  margin: 0 auto;
  width: 88%;
}
.summary.entry-summary {
    padding-right: 30px;
}

Hope that helps.

[thecashbagParticipant]

Hello and thanks for this CSS code!

I tried implementing it, but it doesn’t provide what I’m trying to create. Which makes me think maybe I have been going about this the wrong way.

Instead of trying to tweak the description tab with CSS, so that it removes all trace of the tab and spans across the bottom part of the page, maybe I should be creating a new WooCommerce single product page template.

Are you able to tell if the example page I gave you has made a new template? Or did they just tweak the CSS to remove the container of the description tab?

And if they did make a new template, do you know of any tutorials or resources I can look at that explain how to do that?

[Rue NelModerator]

Hello There,

What they did in the example url is not just tweak it with css. They were able to create a custom WooCommerce single product template which made it possible. All those section were not created with Cornerstone. It was custom coded within the single-product template. This is possible for him because he only have one product to display.

And in your case, it may only possible if you will have a static content. if you ever want to have a different unique section contents for each single product page, that would be a different story. Please check out the documentation on how you can customize WooCommerce templates;
https://docs.woothemes.com/document/template-structure/
https://woocommerce.com/2014/08/five-quick-woocommerce-customization-tips/

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you very much for your understanding.

[Author]

Posts