[Resolved] How to add new custom Tabs on Woocommerce Product Page

[GeneratePressUser]

Hello,

Pls see this image provided in private info tab.

How can we make such custom tabs to appear on product pages? and how can we make the content of those tabs to appear diff based on diff products? Can we use conditional logic? Like if we have some products with diff return policy, so how can we set the things to appear based on product or product category etc.

Pls let us know.

Thanks!

[David]

Hi there,

the Tabs function is part of the Woocommerce plugin.
Woo provides the code to add more tabs here:

https://docs.woocommerce.com/document/editing-product-data-tabs/#section-5

Changing what content is displayed in a product tab is more complicated.
Theres a less dynamic method using this plugin, which allows you to save a Tab and apply it to ‘multiple’ products:

https://en-gb.wordpress.org/plugins/yikes-inc-easy-custom-woocommerce-product-tabs/

There are probably some more advanced plugins out there but that one is really popular.

Alternatively using the code from the woo docs you could create a new tab, and add our own custom hook eg.

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
	
	// Adds the new tab
	
	$tabs['test_tab'] = array(
		'title' 	=> __( 'New Product Tab', 'woocommerce' ),
		'priority' 	=> 50,
		'callback' 	=> 'woo_new_product_tab_content'
	);

	return $tabs;

}
function woo_new_product_tab_content() {

	// The new tab content

	echo '<h2>New Product Tab</h2>';
	echo '<p>Here\'s your new product tab.</p>';
	do_action('db_custom_tab_hook'); // register a custom hook
	
}

The only addition i made to the code was this line:

do_action('db_custom_tab_hook'); // register a custom hook

Then using the Hook or Block Element, i can select: Custom Hook and add: db_custom_tab_hook to display whatever content i want within that tab and take advantage of Element display rules…. just an idea…

[GeneratePressUser]

And there you go, david comes to the rescue, haha! Thanks as always man, you rock!, I knew how this would work, but I was just not sure about the connection and hook, but you did it, so then we can control those took and setup there conditional statements as per product page there to display custom content right?

Btw 1 more thing I wanted to ask was can we use Generate press plugin with any wordpress theme or it works just with Generate press theme?

And if you don’t mind can you pls pass me the conditional logic for the woocommerce product pages and 1 dummy code showcasing if product category=fashion then display xxxxxxx content.

Thanks a lot!

[David]

Thats correct. You now have a custom tab that content can be hooked into conditionally.
GPP only works with GP 🙂

Simplest way to test out the code is to use a Hook Element ( or Blok Element ).

https://docs.generatepress.com/article/hooks-element-overview/

You can add whatever content you want to display in the Hook Element text area.
Set the Hook to: Custom Hook.
In the field it provides, add your custom hook name, in my example: – db_custom_tab_hook
Then set the Hook Display Rules to: Product Category > Fashion

If you want to use functions then this is an example of the code:

// Call my function in the db_custom_tab_hook
add_action('db_custom_tab_hook', 'my_custom_function');

// my custom function
function my_custom_function() {
    global $post;
    if ( has_term( 'fashion', 'product_cat', $post->ID ) ) {
        // do stuff if the product is in the fashion category
    } else {
        // optiontally do somethign for all other categories
    }
}

[GeneratePressUser]

Oops! It seems I missed to reply here, I have marked this as resolved, will let u know if there is anything else, thanks a lot for your help as always!

[David]

You’re welcome

[Author]

Posts