I’m currently wrapping up a new WooCommerce-powered ecommerce website for a client, and thought that I’d share the code I’m using to add multiple new tabs to the product pages. And on this tutorial I explain how to add multiple tabs, which is what I needed to do for project woocommerce.
For adding custom product tabs to the Woocommerce single product there are 2 solutions:
1. Use a free/commercial plugin
2. Do it yourself
And today I will add custom tab with myself that don’t use any plugins. All code in this tutorial should be added to the functions.php file of your theme.
How to Add Custom Tab to a WooCommerce Product Page
1. Add a Custom Tab to Product Page
The ‘woocommerce_product_tabs’ filter provided by WooCommerce should be used as below to add custom tab to a product page in WooCommerce.
1 2 3 4 5 6 7 8 9 | add_filter( 'woocommerce_product_tabs', 'catanis_new_product_tab' ); function catanis_new_product_tab( $tabs ) { // Adds the new tab $tabs['desc_tab'] = array( 'title' => __( 'Custom Information Tab', 'woocommerce' ), 'priority' => 50, 'callback' => 'catanis_new_product_tab_content' ); } |
Adding a custom tab. We will add an array with the following values for the title, priority and the callback function for our new tab. To set the title we will add New Custom Product Tab. To set the new tab after the Additional information tab we will add a priority 50. To display our custom content with the callback function called catanis_new_product_tab_content()
2. Add Content to Custom Tab
Once a custom tab has been added the content for the tab can be added in two ways. The content can be either added as static data html or the content can be fetched from the custom fields added into the admin dashboard.
1 2 3 4 | function catanis_new_product_tab_content() { // The new tab content echo '<p>Content custom tab here</p>'; } |
3. Reorder Custom Tabs
Custom tabs that have been added can also be rearranged as per the requirement. To achieve this the ‘woocommerce_product_tabs’ filter has to be used once more.
1 2 3 4 5 6 | add_filter( 'woocommerce_product_tabs', 'catanis_move_description_tab', 98); function catanis_move_description_tab($tabs) { $tabs['desc_tab']['priority'] = 5; $tabs['reviews']['priority'] = 20; return $tabs; } |
4. Remove specific tabs from WooCommerce product page
1 2 3 4 5 6 7 | add_filter( 'woocommerce_product_tabs', 'catanis_remove_specific_product_tabs', 98 ); function catanis_remove_specific_product_tabs( $current_tabs ) { unset( $current_tabs['description'] ); /* Remove the description tab */ unset( $current_tabs['reviews'] ); /* Remove the reviews tab */ unset( $current_tabs['additional_information'] ); /* Remove the additional information tab */ return $current_tabs; /* Return the remaining tabs to display */ } |
