How to Add Custom Product Tabs to WooCommerce

When it comes to enhancing the functionality and presentation of your WooCommerce product pages, adding custom product tabs can be a game-changer. These tabs allow you to display additional information about your products, making it easier for customers to find essential details. In this guide, we’ll walk you through the process of adding custom product tabs to your WooCommerce store, using different methods to suit your needs.

Overview:
WooCommerce, one of the most popular e-commerce platforms for WordPress, provides a robust foundation for creating online stores. While it offers default product tabs like “Description,” “Reviews,” and “Additional Information,” there are scenarios where you might want to showcase specific details unique to your products. This is where adding custom tabs comes into play.

Utilizing Theme Functions

Some themes provide built-in hooks for adding custom tabs without the need for a separate plugin. If your theme supports this, it can be a simpler way to achieve your goal.

Locate the Theme Functions: In your WordPress dashboard, navigate to “Appearance” > “Theme Editor.” Look for a file like “functions.php” within your theme folder.
Add the New Tab: Insert the following code within the “functions.php” file:

				
					function theme_custom_product_tab( $tabs ) {
    $tabs['new_tab'] = array(
        'title'    => __( 'New Tab', 'text-domain' ),
        'priority' => 50,
        'callback' => 'theme_custom_tab_content',
    );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'theme_custom_product_tab' );

function theme_custom_tab_content() {
    echo '<h2>New Tab Content</h2>';
    echo '<p>This is the content for the new tab.</p>';
}

The above code will add new tab in your single product page.

For Eg: I’ll show you how to call your blog post of specific category in your single product page tab,

				
					/*New description tab in single product page starts*/
<?php
function custom_wc_new_product_tab( $tabs ) {
    // Add a new tab
    $tabs['new_tab'] = array(
        'title'    => __( 'Useful tips', 'Md Asik' ),
        'priority' => 50,
        'callback' => 'custom_wc_new_tab_content',
    );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'custom_wc_new_product_tab' );

function custom_wc_new_tab_content() {
    $args = array(
        'category_name' => 'how-to',  // Replace 'how-to' with your actual category slug
        'posts_per_page' => 10,       // Number of posts to display
    );

    $how_to_query = new WP_Query($args);

    // Display the posts
    if ($how_to_query->have_posts()) {
        while ($how_to_query->have_posts()) {
            $how_to_query->the_post(); ?>
            <div class="how-to-download-links">
                <ul>
                    <li><a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a></li>
                </ul>
            </div>
    <?php	}
        wp_reset_postdata();  // Reset the post data after the loop
    } else {
        echo "No posts found in the 'How To' category.";
    }
}

Code Explanation:

Here, you are defining a new WooCommerce product tab named “Useful tips.” This tab will appear on the single product page. The tab title is set to “Useful tips,” and the priority determines where it appears among other tabs. The callback function, custom_wc_new_tab_content, will be responsible for rendering the content of this tab.

The custom_wc_new_tab_content() function is responsible for generating the content that will be displayed within the “Useful tips” tab.

You create an array called $args to specify the query parameters for fetching posts. You’re filtering posts based on the category with the slug ‘how-to’ and specifying that you want to display up to 10 posts.
You create a new WP_Query object called $how_to_query using the $args you defined.
You then use a loop (while loop) to iterate through the posts fetched by the query. Inside the loop, you use WordPress template tags like the_permalink() and the_title() to output the links and titles of the posts. These links are wrapped in an HTML structure to format their appearance.
After the loop, you use wp_reset_postdata() to reset the post data to its original state.
If no posts are found in the ‘how-to’ category, you output a message indicating that no posts were found.

Remember to replace 'how-to' in the code with the actual slug of the category you want to fetch posts from.

Conclusion:

Custom product tabs empower WooCommerce store owners to present unique information about their products effectively. By utilize theme functions, adding custom tabs enhances the user experience and can contribute to higher conversions. By following the step-by-step guide outlined above, you’ll be able to effortlessly incorporate custom tabs into your WooCommerce product pages, enhancing your store’s presentation and functionality.

Remember, always test your changes on a staging site before implementing them on your live site. With these methods in your toolkit, you’re well on your way to providing a more comprehensive shopping experience for your customers.

I hope this article helped you to learn how to add custom tab in Woocommerce. If you have any doubts or problem with the code, comment below to find the solutions. Also share this blog if you find this useful.

Want to build professional website for your Business or Store, Get a free quote here

Click here to get Premium Plugins and Themes at rs.249. Get 20% Off on your first order “WELCOME20”