How to Create, Edit, Rename & Customize WooCommerce Product Tabs

How to Create, Edit, Rename & Customize WooCommerce Product Tabs
648 Views
0
(0)

You need to add the code to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as the Code snippets plugin. Please don’t add custom code directly to your parent theme’s functions.php file as this will be wiped entirely when you update the theme.

Removing Tabs

Use the following snippet to remove specific tabs

<?php

/* Remove product data tabs */
add_filter( 'woocommerce_product_tabs', 'cxc_remove_product_tabs_callback', 98 );

function cxc_remove_product_tabs_callback( $tabs ) {

    unset( $tabs['description'] );      	// Remove the description tab
    unset( $tabs['reviews'] ); 			// Remove the reviews tab
    unset( $tabs['additional_information'] );  	// Remove the additional information tab

    return $tabs;
}

Renaming Tabs

screenshot webbydemo.in 2022.12.27 15 29 38

Use the following snippet to rename tabs.

<?php

/* Rename product data tabs */
add_filter( 'woocommerce_product_tabs', 'cxc_rename_tabs_callback', 98 );

function cxc_rename_tabs_callback( $tabs ) {

	$tabs['description']['title'] = __( 'More Information' );		// Rename the description tab
	$tabs['reviews']['title'] = __( 'Ratings' );				// Rename the reviews tab
	$tabs['additional_information']['title'] = __( 'Product Data' );	// Rename the additional information tab

	return $tabs;

}

Re-ordering Tabs

screenshot webbydemo.in 2022.12.27 15 43 00

Use the following snippet to change the tab order

<?php

/* Reorder product data tabs */
add_filter( 'woocommerce_product_tabs', 'cxc_reorder_tabs_callback', 98 );

function cxc_reorder_tabs_callback( $tabs ) {

	$tabs['reviews']['priority'] = 5;			// Reviews first
	$tabs['description']['priority'] = 10;			// Description second
	$tabs['additional_information']['priority'] = 15;	// Additional information third

	return $tabs;
}

Customize a tab

screenshot webbydemo.in 2022.12.27 15 47 32
<?php

/* Customize product data tabs */
add_filter( 'woocommerce_product_tabs', 'cxc_custom_description_tab_callback', 98 );

function cxc_custom_description_tab_callback( $tabs ) {

	$tabs['description']['callback'] = 'cxc_custom_description_tab_content';	// Custom description callback

	return $tabs;
}

function cxc_custom_description_tab_content() {
	echo '<h2>Custom Description</h2>';
	echo '<p>Here\'s a custom description</p>';
}

Add a custom tab

screenshot webbydemo.in 2022.12.27 15 50 57

Use the following snippet to add a custom global product tab

<?php

/* Add custom product data tab */
add_filter( 'woocommerce_product_tabs', 'cxc_add_custom_product_tab_callback' );
function cxc_add_custom_product_tab_callback( $tabs ) {

	$tabs['ingredients_tab'] = array(
		'title'    => __( 'Ingredients', 'textdomain' ),
		'callback' => 'cxc_ingredients_tab_content_callback',
		'priority' => 50,
	);

	return $tabs;

}

/* Ingredients tab content */
function cxc_ingredients_tab_content_callback( $slug, $tab ) {
	?>
	<h2><?php echo wp_kses_post( $tab['title'] ); ?></h2>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<?php
}

If you have custom field provided in your admin dashboard for your product, then the following code would be useful to achieve the required result.

<?php

/* Ingredients tab content */
function cxc_ingredients_tab_content_callback( $slug, $tab ) {
    ?>
	<h2><?php echo wp_kses_post( $tab['title'] ); ?></h2>
	<p><?php echo get_post_meta(get_the_ID(),'ingredients_information',true); ?></p>
	<?php
}

The Additional Information tab

Please note that the “Additional Information” tab will only show if the product has weight, dimensions or attributes (with “Visible on the product page” checked). If you try to apply a change to that tab and if the product does not have weight, dimensions or attribute, you will get an error message similar to :

Warning: call_user_func() expects parameter 1 to be a valid callback, no array or string given in /mysite/wp-content/plugins/woocommerce/templates/single-product/tabs/tabs.php on line 35

In that case, you have to use WooCommerce conditional tags:

  • has_attributes()
  • has_dimensions()
  • has_weight()
<?php

/**
 * Check if product has attributes, dimensions or weight to override the call_user_func() expects parameter 1 to be a valid callback error when changing the additional tab
 */
add_filter( 'woocommerce_product_tabs', 'cxc_additional_info_tabs_callback', 98 );

function cxc_additional_info_tabs_callback( $tabs ) {

	global $product;
	
	if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) { // Check if product has attributes, dimensions or weight
		$tabs['additional_information']['title'] = __( 'Product Data' );	// Rename the additional information tab
	}
 
	return $tabs;
 
}

The Description tab

Also note that the “Description” tab will only show if the product has description so for that you have to check product has description before you rename,reorder or add custom content in this tab.


<?php

/**
 * Check if product has description when changing the description tab
 */

add_filter( 'woocommerce_product_tabs', 'cxc_description_tabs_callback', 98 );

function cxc_description_tabs_callback( $tabs ) {

	global $product;

	if( $product->description ){
		$tabs['description']['title'] = __( 'More Information' ); // Rename the description tab
	}
	
	return $tabs;

}

How do I rename a product tab in WooCommerce?

The WooCommerce Tab Manager makes it simple to rename the WooCommerce Additional Information tab. Simply go to WooCommerce Tabs and change the title of the tab.

Can I change the look of the WooCommerce product page?

WooCommerce is all about customization and versatility, which is why it includes all of the tools you need to alter the style and functionality of product pages.

How useful was this blog?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this blog.

  • CodexCoach

    - Web Development Expert

    CodexCoach is a skilled tech educator known for easy-to-follow tutorials in coding, digital design, and software development. With practical tips and interactive examples, CodexCoach helps people learn new tech skills and advance their careers.

Leave a comment

Your email address will not be published. Required fields are marked *