Add Custom WooCommerce Product Tabs

Do you want to add custom WooCommerce Product Tabs?

Most products these days have a lot of essential information that needs to be communicated to the customers. But, you will find it difficult to organize all that information with the default tabs.

So, we need to add additional information to our products, such as short descriptions, long descriptions, tech, reviews, sizes, shipping instructions, and more that depending on our needs.

In this short context, We will show how to add custom WooCommerce product tabs.

Default of tabs in WooCommerce

We can know that by default, each WooCommerce product has three tabs: Such as description, additional information, and reviews.

Description Tab: This tab is where the long description of the product is displayed.

Additional Information Tab: On the contrary, this tab shows the attributes of the product if it has them. If they have not been configured, it is not seen amid the display options.

Reviews Tab: This tab shows two things reviews, and product ratings if they are active in the settings.

These default WooCommerce tabs can be more than enough for most eCommerce stores. But, there is a possibility that your stores need to add additional custom WooCommerce product tabs so we can add important information or product features.

Custom WooCommerce Product Tabs Plugin

You can add custom WooCommerce product tabs using a plugin. We have listed the best WooCommerce product tabs plugins for you.

Custom Product Tabs for WooCommerce
Custom Product Tabs Lite for WooCommerce
TabWoo – Custom Product Tabs for WooCommerce (Pro version )
YITH WooCommerce Tab Manager (Pro version )

By installing the plugin and activating it, it can be used, no other configuration is needed to make it operational. When we edit a product we will see it in the product screen section.

These tab content areas use the standard WordPress text editor and we can add any text, images, HTML, or shortcodes.

Programmatically Add Custom WooCommerce Product Tabs

In this section, We are going to add programmatically add custom WooCommerce product tabs.
We will use the woocommerce_product_tabs filter functions.

You need to add the following code to your child theme’s functions.php file.

Copy to Clipboard

add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs', 100, 1 );
function woo_custom_product_tabs( $tabs ) {

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

// 2 Adding new tabs
    //Attribute Description tab
    $tabs['attrib_desc_tab'] = array(
        'title'     => __( 'Descriptions', 'woocommerce' ),
        'priority'  => 100,
        'callback'  => 'woo_attrib_desc_tab_content'
    );

// Adds the qty pricing  tab
    $tabs['qty_pricing_tab'] = array(
        'title'     => __( 'Quantity Pricing', 'woocommerce' ),
        'priority'  => 110,
        'callback'  => 'woo_qty_pricing_tab_content'
    );

// Adds the other products tab
    $tabs['other_products_tab'] = array(
        'title'     => __( 'Other Products', 'woocommerce' ),
        'priority'  => 120,
        'callback'  => 'woo_other_products_tab_content'
    );

return $tabs;

}

// New Tab contents
function woo_attrib_desc_tab_content() {
    // The attribute description tab content
    echo '<h2>Description</h2>';
    echo '<p>Custom description tab.</p>';
}
function woo_qty_pricing_tab_content() {
    // The qty pricing tab content
    echo '<h2>Quantity Pricing</h2>';
    echo '<p>Here\'s your quantity pricing tab.</p>';
}
function woo_other_products_tab_content() {
    // The other products tab content
    echo '<h2>Other Products</h2>';
    echo '<p>Here\'s your other products tab.</p>';
}

Learn more here: woocommerce_product_tabs filter.

Programmatically Add Custom WooCommerce Product Tabs

Add a tab to the product data metabox

This section is an extra guide for you. You can add Custom WooCommerce Product Tabs using the metabox. So let us see:

Copy to Clipboard

add_filter( 'woocommerce_product_data_tabs', 'cssigniter_add_product_data_tab' );
function cssigniter_add_product_data_tab( $tabs ) {

$tabs['cssigniter'] = array(
		'label'    => __( 'CSSIgniter custom tab', 'your-text-domain' ),
		'target'   => 'cssigniter_product_data_panel',
		'priority' => 100,
	);
	return $tabs;

}

//Adding the two custom fileds
add_action( 'woocommerce_product_data_panels', 'cssigniter_add_product_data_panels' );
function cssigniter_add_product_data_panels() {

echo '<div id="cssigniter_product_data_panel" class="panel woocommerce_options_panel hidden">';

woocommerce_wp_text_input(
		array(
			'id'          => 'cssigniter_tab_title',
			'value'       => get_post_meta( get_the_ID(), 'cssigniter_tab_title', true ),
			'label'       => __( 'Tab title', 'your-text-domain' ),
			'description' => __( 'Set a title for the tab in the front end.', 'your-text-domain' ),
		)
	);

woocommerce_wp_select(
		array(
			'id'          => 'cssigniter_tab_content',
			'value'       => get_post_meta( get_the_ID(), 'cssigniter_tab_content', true ),
			'label'       => __( 'Tab content', 'your-text-domain' ),
			'description' => __( 'Select a page to display its content in the custom tab.', 'your-text-domain' ),
			'options'     => wp_list_pluck( get_pages(), 'post_title', 'ID' ),
		)
	);

echo '</div>';

}
// Save data 
add_action( 'woocommerce_process_product_meta', 'cssigniter_save_custom_tab_data' );
function cssigniter_save_custom_tab_data( $post_id ) {

$cssigniter_tab_title   = $_POST['cssigniter_tab_title'];
	$cssigniter_tab_content = $_POST['cssigniter_tab_content'];

if ( ! empty( $cssigniter_tab_title ) ) {
		update_post_meta( $post_id, 'cssigniter_tab_title', esc_html( $cssigniter_tab_title ) );
	}

if ( ! empty( $cssigniter_tab_content ) ) {
		update_post_meta( $post_id, 'cssigniter_tab_content', absint( $cssigniter_tab_content ) );
	}
}
 
 
//Add the front end tab
add_filter( 'woocommerce_product_tabs', 'cssigniter_new_wc_product_tab' );
function cssigniter_new_wc_product_tab( $tabs ) {
	global $product;

$title = get_post_meta( $product->get_ID(), 'cssigniter_tab_title', true );

if ( empty( $title ) ) {
		return $tabs;
	}

$tabs['desc_tab'] = array(
		'title'    => $title,
		'priority' => 50,
		'callback' => 'cssigniter_new_wc_product_tab_content',
	);

return $tabs;
}

function cssigniter_new_wc_product_tab_content() {
	global $product;
	$page = get_post_meta( $product->get_ID(), 'cssigniter_tab_content', true );
	$content = apply_filters( 'the_content', get_post_field( 'post_content', $page ) );
	echo $content;
}

Add a custom tab to the product data metabox

Conclusion

As we can see, it is a very simple and complete guide. Using the above method, a user can be provided with tons of content without hesitation on the product page.

To summarize, We have seen multiple ways to add custom WooCommerce product tabs:

Using a plugin
Programmatically

Let us know in the comments below if you have found this guide useful and leave your suggestions for future articles.

Checkout out this article: Customize WooCommerce Checkout Page

Our Services

WordPress Website Development Services

If you want to create a WordPress website/WooCommerce website, Kindly visit our services:

Professional & Responsive WordPress Website
eCommerce Website With WooCommerce
Speed Up WordPress Website
WordPress Website Security
WordPress SEO

Our Services

How to Add Custom WooCommerce Product Tabs