Displaying all product page content at once instead of in tabs

Hi Artem,

I am thinking of displaying all of the content on the product page at once, instead of tabs such as long description, tech specs, reviews, custom tab, etc.

I tried switching from tabs to accordion, but in accordion mode the long description does not take up the entire width of the screen. Additionally, the accordion tabs are closed by default and I would want everything to be open.

Is there a way to display all of the content in one long page?

Thanks,
Tom

Hello,

By default, Woocommerce does not provide the option and our theme does not either. You can disable all the tabs and insert the content in the main description.

Best Regards

Hi Elise,

I’m not sure how I can insert the attributes, reviews, etc. into the main description.

If I switch to accordion mode, is it possible to have the main description take up the entire width of the website, and for all of the sections (attributes, reviews, etc.) to be in the option position by default?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.single-product-page .woocommerce-Tabs-panel {
	display: block !important;
}
.single-product-page .wd-tab-wrapper:not(:last-child) .woocommerce-Tabs-panel {
	margin-bottom: 40px;
}
.single-product-page .woocommerce-tabs .wc-tabs {
	display: none;
}

Best Regards

Hi Elise, thank you for this code! It works perfectly for the long description. Is there a way to still have the content below it (attributes, reviews, custom tab, etc.) at the standard width? I would only like the long description to be full width. Apologies for making you work so hard 🙂

Hello,

Please add this code to the Theme Settings > Custom CSS > Desktop:

.product-tabs-wrapper .container {
	max-width: 100%;
}
.wd-tab-wrapper:not(:nth-child(2)) {
	max-width: calc(1222px - 30px);
	margin: 0 auto;
}

Please replace 1222px in the max-width: calc(1222px - 30px); for the value you have configured in the Theme Settings

Best Regards

Hi Elise, thank you for this additional code.

Regarding the value that I have configured in the theme settings, are you referrignt o General layout -> Site width? At the moment it is set to “Full width.”

Best regards,
Tom

Hello,

Please switch to the Custom width and set the value.

Best Reards

Sorry for the multiple questions, but what I should I set the value to? I’ve had it on full width since we launched our website.

Hello,

Choose the Custom width in the Theme settings > General layout and then insert this value: 1222px

Best Regards

[Author]

Posts