John Davidson

Message:

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?

---

My Answer:
To set a new default active product tab on the WooCommerce product page, you can use the following code snippet:

javascript
jQuery(document).ready(function($){
// Set the default active tab
$('.woocommerce-tabs').find('.panel').hide();
$('.woocommerce-tabs').find('.panel:first').show();
$('.woocommerce-tabs').find('li:first').addClass('active');

// Handle tab click event
$('.woocommerce-tabs').find('li').on('click', function(){
var tab_id = $(this).find('a').attr('href');
$('.woocommerce-tabs').find('li').removeClass('active');
$(this).addClass('active');
$('.woocommerce-tabs').find('.panel').hide();
$(tab_id).show();
return false;
});
});


This code snippet will set the first tab as the default active tab and hide the other tabs. It also handles the tab click event to switch between tabs.

You can add this code to your theme's JavaScript file or use a custom JavaScript plugin to add it to your website. Make sure to test it on your website to ensure it works as expected.