Wordpress How-To

Custom tabs in WooCommerce Product Page

This articles give more explanations about WooCommerce to allow shop owners or shop keepers to add custom tabs to product pages without using WooCommerce tabs plugin. The tabs are displayed on the single product pages. You can modify the design using CSS.

Individual product tabs are managed on the WooCommerce Edit Product screen and they can be added on a per-product basis. You can also create saved tabs and add them to multiple products as needed. Tabs can be easily added, deleted, and rearranged. 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 or the content can be fetched from the custom fields[dynamic data] added to the admin dashboard. The following code should be added to the functions.php file of your theme to add static data to the custom tab.

add_filter( "woocommerce_product_tabs", "woo_custom_product_tabs" );
function woo_custom_product_tabs( $tabs ) {
// Adds the other products tab
$tabs["download_products_tab"] = array(
"title" => __( "Download", "woocommerce" ),
"priority" => 120,
"callback" => "woo_other_products_tab_content"
);
return $tabs;
}

// New Tab contents
function woo_other_products_tab_content() {
echo "<p>Hello world</p>";
//this is the place, where you can add dynamic or static data to ypur custom tab
}

In the above code you can see, we have added static text called “Hello World” in that place you place any dynamic data as per your requirement.

Happy Coding 🙂

About the author

Vishwas

Vishwas

Software Engineer By Profession, WEB Astronaut, Hobby Blogger. I love to share Tech Ideas and like to learn and explore new things and Technologies.

Add Comment

Click here to post a comment