Как добавить и установить новую вкладку продукта по умолчанию (активный) на странице продукта WooCommerce?

#javascript #php #jquery #wordpress #woocommerce

Вопрос:

Я использую плагин WooCommerce под платформой WordPress и пытаюсь изменить вкладку по умолчанию на single-product.php странице.

Ссылка на мой веб-сайт

Поэтому прямо сейчас у меня активна вторая вкладка, я хочу изменить первую вкладку, чтобы она стала активной вкладкой по умолчанию.

Я изменил приоритет, используя woocommerce_product_tabs такой крючок фильтра:

 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;
});
 

И я также попытался изменить его с помощью jQuery на основе active такого класса:

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

Пока ничего не получалось.

Как я могу изменить активную вкладку по умолчанию на странице одного продукта WooCommerce?

Комментарии:

1. Может быть, попробуйте запустить событие щелчка: jQuery('#tab-title-awp-props').trigger('click');

2. @David, к сожалению, не сработал. Когда я следил за процессом загрузки страницы с помощью lighthouse, я увидел, что страница готова до того, как вкладки действительно загружены, поэтому это влияет на функциональность javascript.

Ответ №1:

woocommerce_product_tabs Крючок, который вы используете, правильный, и функция тоже. Он используется внутри шаблона: /woocommerce/single-product/tabs/tabs.php .

Однако функция обратного вызова отсутствует.

Полные примеры вы можете найти здесь:

Чтобы установить новую вкладку продукта по умолчанию, вам нужно будет использовать следующий (полный) код:

 // 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 предполагается, что это пользовательское поле, добавленное с помощью плагина ACF (Расширенные пользовательские поля).

Код был протестирован и работает. Добавьте его в свою активную тему functions.php.

Комментарии:

1. Эй, спасибо тебе за твой ответ. Кое-чего все еще не хватает, хотя, кажется, я не могу заставить это работать. поскольку $custom_tab_title возвращает значение на иврите, jquery возвращает ошибку, поэтому я изменил его обратно на props. но я все еще активирую вторую вкладку по умолчанию. Это почему?

2. Я как-то не замечал, что в URL-адресе есть #отзывы … поэтому он всегда перенаправлял меня на отзывы.