[Resolved] How to add custom product tabs for WooCommerce products

[Author]

Posts

[krystelL]

Hello,

I want to add new tabs on my product single page. I want the "description" tab (WooCommerce default), but also more two tabs that will have custom content for each product.

I don't know if I'm doing this right: I add two custom fields for WooCommerce Products, and now I have two fields on my products pages: hidden link

But when I add the "Product tabs - single product page" on my layout, I only have the default WooCommerce tab "description": hidden link

Whats the steps to add the custom fields as products tabs?

Thanks

[Nigel]

Hi Krystel

The Views shortcodes for WooCommerce content largely just reproduce the WooCommerce UI, but allow you to include or exclude sections and locate them where you like within your custom product template.

The wpv-woo-display-tabs shortcode is no different (https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-display-tabs), it will reproduce the tab UI that WC would normally add to the product page.

So if you want to add custom tabs, you would need to do it the WooCommerce-way, as described here: https://docs.woocommerce.com/document/editing-product-data-tabs/

You can register new tabs and add content to them—but this is done with PHP. You would need to set the content for the custom tabs in the code where you register them, as described in that document.

[krystelL]

Hello Nigel,

Thanks! I successful add the new tabs on my product pages. But the thing is: I want different content inside them on different products – I want to be able to edit the content inside the tabs on each product.

It's possible?

[Nigel]

Hi Krystel

The custom tabs you created, the content is defined in the PHP you use to register them.

So it is not possible to design the content of the tab within Toolset, you would typically use PHP to add the fields from your product you wanted to include in each tab either using standard WP functions such as get_post_meta or the Types API function types_render_field.

See https://toolset.com/documentation/customizing-sites-using-php/functions/

However, one option you could try to be able to use the familiar process of inserting shortcodes to design the content would be to make a Content Template for each tab (unassigned). Note the IDs of the templates.

You can then use the Views API function render_view_template within the code you use to register the tabs to insert the content template output.

That is documented here: https://toolset.com/documentation/programmer-reference/views-api/#render_view_template

So the first argument is the ID of the content template in question, the second argument needs to be the current post object, which in this context you should I think be able to use the global $post object, something like:

global $post;
echo render_view_template( 99, $post );

I haven't tested this but expect it should be possible.