Woocommerce product tabs

This block renders the Woocommerce tab system.

It has three possible designs

Designs for Tabs

Tabs for woocommerce

Toggles for woocommerce

This type of design can be useful if you don’t have too much content on the page or you want to have an emphasis on images, so you need something more compact for tabbed content

Sections for Woocommerce

This type shows tabs as unstyled sections without scripts. All content is visible at once in a stacked view. You have full freedom to style tiles, sections, borders, shadows, backgrounds of panels

This is combination of tabs and sections. In short, you have tabs links at top, but all items are visible on page and link in tab will scroll to proper section. You can also use “Section” and “Links” items separately on page

Separate section

If you want to show separate section on page, use this option. This way allows you to put specific section outside tabs. For example, you can put specification near product description. Also, you can disable default tabs in tab block. For example, you can put all tabs in one place, but disable there rating tab and put it in another place.


Each element in tabs can be configurable via Design component

Managing custom tabs

Woocommerce has no inner system to add custom tabs, so we added such an option in Woocommerce – settings – Greenshift tools

It’s working simply. Add the title of the tab and content. You can use HTML for content and shortcodes. By the way, you can make a reusable template with dynamic fields from Woocommerce or query addon and copy the shortcode of the reusable template in this area. In this way, you will have dynamic content for tabs. Anyway, you can use also shortcodes from third-party plugins

Copy this post’s content
Copy code below, and paste it (CTRL+V) in content of page