WooCommerce adds additional tabs to the product details page

WPBull.com • • Tutorial

WooCommerce development allows you to use filter hookswoocommerce_product_tabsAdd additional tabs next to descriptions, comments, and other information on the product page.

Suppose you want 2 additional tabs-titled “Ingredients” and “How To Use”, which can be used like thiswoocommerce_product_tabsFilter hooks…

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
/**
 * Add 2 custom product data tabs
 */
function woo_new_product_tab( $tabs ) {
	
	// Adds the new tab
	if(get_field('ska_ingredients')){
        $tabs['ingredient_tab'] = array(
            'title' 	=> __( 'Ingredients', 'woocommerce' ),
            'priority' 	=> 15,
            'callback' 	=> 'ska_ingredients_callback'
        );
    }
	
    if(get_field('ska_works')){
        $tabs['work_tab'] = array(
            'title' 	=> __( 'How To Use', 'woocommerce' ),
            'priority' 	=> 15,
            'callback' 	=> 'ska_works_callback'
        );
    }     

	return $tabs;

}

There are 3 parameters in the array value:

  • title is the title text of the tab
  • priority It is the priority. The smaller the number, the higher the display is.
  • callback The name of the callback function will be output from the contents of this tab.

In our example, we call the value of a field in the callback function (see code below), so we use theifconditionsif(get_field('ska_works'))First check whether the field exists. If it does not exist, the tab will not be output.

function ska_ingredients_callback() {
        echo the_field('ska_ingredients');
}

function ska_works_callback() {
        echo the_field('ska_works');
}

The final effect is roughly as follows:

WooCommerce adds additional tabs to the product details page

Content reference from: wpbeaches.com/add-extra-tabs-on-woocommerce-products/

赞 (0)
WPBull.comWPBull.com
0
上一篇 2025年1月13日 am10:20
下一篇 2025年1月13日 am10:21

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

记住昵称、邮箱和网址，下次评论免输入