Добавить класс к элементам списка категорий на странице магазина Woocommerce - PullRequest
Новая
       28

Добавить класс к элементам списка категорий на странице магазина Woocommerce

3 голосов
/ 28 марта 2019

Я использую Woocommerce и Storefront для создания собственного сайта и отчаянно пытаюсь добавить класс к элементам списка на странице магазина (архива). В каталоге моего магазина показаны товары категории.

Я мог найти неупорядоченный список, тег ... но невозможно найти элементы списка.

Кто-нибудь знает, где его найти или как добавить к нему класс?

URL архива магазина: localhost/thesite/shop (но не страницы архива категории продукта localhost/thesite/product-category/catname) 

<ul class="product columns-3">
    <li class="product-category product first">
        <a href="//localhost/thesite/product-category/catname"></a>
    </li>
    <li class="product-category product"></li>
    <li class="product-category product"></li>
</ul>

Ответы [ 2 ]

3 голосов
/ 29 марта 2019

Для категорий на странице магазина (когда вы "показываете категории" в каталоге товаров) , вы будете использовать следующий крюк (здесь мы добавляем дополнительный класс custom_cat) 

add_filter( 'product_cat_class', 'filter_product_cat_class', 10, 3 );
function filter_product_cat_class( $classes, $class, $category ){
    // Only on shop page
    if( is_shop() )
        $classes[] = 'custom_cat';

    return $classes;
}

Код помещается в файл function.php вашей активной дочерней темы (или активной темы). Проверено и работает.

Примечание: Соответствующий шаблон: content-product_cat.php

Опционально при необходимости, когда на странице магазина отображаются как категории, так и продукты.

Для товаров на странице магазина вы будете использовать следующий крючок (здесь мы добавим дополнительный класс custom_prod) : 

add_filter( 'post_class', 'filter_product_post_class', 10, 3 );
function filter_product_post_class( $classes, $class, $product_id ){
    // Only on shop page
    if( is_shop() )
        $classes[] = 'custom_prod';

    return $classes;
}

Код помещается в файл function.php вашей активной дочерней темы (или активной темы). Проверено и работает.

Примечание: Соответствующий шаблон: content-product.php

2 голосов
/ 29 марта 2019

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

HTML 

<ul class="product columns-3">
    <li class="product-category product first">
        <a href="//localhost/thesite/product-category/catname"></a>
    </li>
    <li class="product-category product"></li>
    <li class="product-category product"></li>
</ul>

CSS 

.second {color: red;}
.common {list-style-type: circle;}

JS 

jQuery(document).ready(function() {
  $('li.product:nth-child(2)').addClass('second');
  $('li.product').addClass('common');
})
...