How to add and set a new default (active) product tab on the WooCommerce product page?

user_7359357 0
Viewed 940

I'm using WooCommerce plugin under WordPress platform, and I'm trying to change the default tab in single-product.php page.

Link to my website

So right now I'm having the second tab active, I want to change the first tab to become the default active tab.

I have changed priority using woocommerce_product_tabs filter hook like that:

add_filter('woocommerce_product_tabs', function($tabs) {
    global $post, $product;  // Access to the current product or post
    
    $custom_tab_title = get_field('props', $post->ID);
    $tabs['reviews']['priority'] = 10;
    if (!empty($custom_tab_title)) {
        $tabs['awp-' . sanitize_title('props')] = [
            'title' => 'אביזרים',
            'callback' => 'awp_custom_woocommerce_tabs',
            'priority' => 5
        ];
    }
    return $tabs;
});

And I have also tried changing it using jQuery basing on class active like this:

jQuery(document).ready(function($){
    console.log( "ready!" );
    jQuery('.reviews_tab').removeClass('active');
jQuery('#tab-title-awp-props').addClass('active');
});

Nothing worked so far.

How can I change default active tab in WooCommerce single product page?

woocommerce wordpress php jquery javascript
1 Answers

The woocommerce_product_tabs hook you are using is correct and the function too. It is used inside the template: /woocommerce/single-product/tabs/tabs.php.

However, the callback function is missing.

You can find complete examples here:

To set a new product tab as default you will then need to use the following (complete) code:

// adds and sets a new default product tab on the product page
add_filter('woocommerce_product_tabs', 'add_new_default_product_tab' );
function add_new_default_product_tab( $tabs ) {

    global $product;

    // set the new priority to the "reviews" tab
    $tabs['reviews']['priority'] = 10;

    // gets the value to use as the title and slug of the new tab
    $custom_tab_title = get_field( 'props', $product->get_id() );

    // if the custom field is set, it adds the new tab
    if ( ! empty($custom_tab_title) ) {
        $tabs['awp-' . sanitize_title($custom_tab_title)] = array(
            'title' => 'אביזרים',
            'callback' => 'awp_custom_woocommerce_tabs',
            'priority' => 5
        );
    }
    return $tabs;
}


// create the content of the new tab
function awp_custom_woocommerce_tabs() {

    // the new tab content

}

props is assumed to be a custom field added via the ACF (Advanced Custom Fields) plugin.

The code has been tested and works. Add it to your active theme's functions.php.

user_104471970
Related