Hide the Product Tabs, Simply Show the Contents

WooCommerce natively shows additional product tabs with product related content on the product page. The basic tabs are related to the full product description, product attributes and the reviews. With that plenty other plugins are adding more to that. 

Tabs work for a lot of stores, but of course not all of them. Maybe you simply don’t like them, think that it makes your site look to much like the rest of the WooCommerce mainstream, or simply prefer to have the content straight out there. It may even be better for the search engines to index those contents. 

---

Before getting started, let me show the base that I’m starting with so you can compare it to the changes being made. I’m using the Storefront theme, in this the product tabs are displayed like this;

Hiding the Product Tabs

The following snippet is a simple CSS code snippet to add that will hide the product tabs.

.tabs.wc-tabs {
	display: none;
}

This CSS will only hide the product tabs, so it still doesn’t display the contents of the other tabs yet as you can see below.

Displaying the Content

To display the contents of the other tabs when the page loads, the following CSS snippet can be added.

.woocommerce-tabs .woocommerce-Tabs-panel {
	display: block !important;
}

Now all the contents of the tabs will be displayed automatically on the page;

In its current state I can still see some improvements that will likely also apply to other themes.

Adding Spacing Between Content

The content is kind of glued closely together. A bit more space between them would do some good. This can be combined with the prior CSS snippet.

.woocommerce-tabs .woocommerce-Tabs-panel {
	display: block !important;
	margin-bottom: 3em;
	/* border-bottom: 3px solid #eee; */ /** Additional separation between sections can be created with a border */
}

Full Width Content

This may not be applicable to your theme, but in my case the tab navigation was left aligned, meaning the tab content wasn’t the full width of the page. If you do like it to be with these changes, you can add the following to make it full width.

.woocommerce-tabs .woocommerce-Tabs-panel {
	display: block !important;
	margin-bottom: 3em;
	/* border-bottom: 3px solid #eee; */ /** Additional separation between sections can be created with a border */
	width: 100%;
	float: left;
}

The end result for my theme looks like this;