Июл

Хаки для страницы категории в WooCommerce

Занимаюсь тут созданием одного онлайн-магазина и решил поделиться парочкой хаков, которые сегодня применял в работе. Решения не сложные, но позволяют немного улучшить «архивную» страницу категории WooCommerce, где собрана вся продукция из той или иной рубрики. В некоторых шаблонах эти опции реализованы, в других нет – поэтому смотрите настройки вашей темы, возможно, дополнительно ничего внедрять и не нужно будет.

В первом абзаце я указал ссылку на раздел со статьями на похожие публикации, самые интересные и полезные из них это, пожалуй:

Сегодня добавим еще несколько сниппетов.

Разное количество колонок на страницах

Для магазина было принято решение выводить на главной странице каталога все категории товаров в 4 колонки, тогда как в самих категориях у нас был сайдбар, и нужно было вместить лишь 3 колонки. Следующий хак помогает это реализовать:

add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
    function loop_columns() {
        if (is_shop()) {            
            return 4; // 4 products per row
        } else {
            return 3; // 4 products per row            
        }
    }
}

Тут, в принципе, нечего объяснить дополнительно.

Переносим описание рубрики под товары

Чтобы выжать максимум пользы от SEO в категории товаров, во-первых, советую вам установить плагин Yoast SEO позволяющий добавлять МЕТА title и description. Изначально приходилось использовать этот же модуль для задания и отображения описания рубрики, но сейчас в WooCommerce имеется функция woocommerce_product_archive_description, которая все сделает за вас.

Единственный неловкий момент заключается в том, что в 99% почему-то разработчики выводят это описание перед списком продукции. Конечно, в таком случае ни о каком детальном SEO-тексте не может быть и речи, т.к. товары должны быть сразу видны посетителям.

Выход есть – разместить описание под каталогом товаров. Для этого:

1. Следует изучить установленную тему и попытаться найти в ней упоминание функции woocommerce_product_archive_description или woocommerce_taxonomy_archive_description (она предназначена для таксономий, но тоже может встречаться в шаблоне).

2. Если она у вас используется, то следует убрать это событие. Все маневры выполняем в файле функций:

remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );

Внимание! В моем случае оно подвязано на экшн «woocommerce_archive_description», а у вас может быть другое название.

3. Далее находите в файле шаблона, отвечающего за архивную страницу место, куда хотите вывести описание категории. Вот парочка характерных элементов для поиска нужного вам файла (но ни встречаются в теме не раз):

4. И затем просто «подвязываем» наши события в нужный экшн (у меня это woocommerce_after_shop_loop):

add_action( 'woocommerce_after_shop_loop', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_after_shop_loop', 'woocommerce_product_archive_description', 10 );

Подкатегории в виде кнопок + вывод только на первой странице

Ранее я рассматривал решение, позволяющее выводить подкатегории на архивной странице отдельно от самих товаров. Возможно, сейчас это реально сделать с помощью CSS стилей (тут вам надо предварительно попробовать), но мне все равно нужно было “вынести” этот блок за пределы каталога, поэтому я и использовал данный хак.

Чтобы убрать картинки к CSS из прошлой статьи вам нужно добавить лишь пару новых строчек:

ul.product-cats li {
    list-style: none;
    margin-left: 0;
    margin-bottom: 35px; 
    text-align: center;
    position: relative;
    color: #84044d;    
}
 
ul.product-cats img {
    display: none;
}
 
ul.product-cats h2 a:hover {
    text-decoration: underline;
}
 
@media screen and (min-width:768px) {
 
    ul.product-cats {
        margin-left: 0;
        clear: both;
        padding-left: 2%;
    }
    ul.product-cats li {
        width: 30%;
        float: left;
        padding: 5px 5px;
        margin-right: 3%;
        border: 1px solid #ab74ad87;        
    }
    ul.product-cats li:nth-of-type(3) {
        margin-right: 0;
    }
 
}

Рассмотрим вторую часть задания. В упомянутой ранее функции woocommerce_product_archive_description я увидел условный оператор, с помощью которого можно выводить описание рубрики только на первой странице. Совместил его с примером из исходной статьи и у меня получилась такая конструкция для файла функций functions.php:

function mynew_product_subcategories( $args = array() ) {
if ( (!is_shop()) && 0 === absint( get_query_var( 'paged' ) ) ) { 
    $parentid = get_queried_object_id();
    $args = array(
        'parent' => $parentid
    );
    $terms = get_terms( 'product_cat', $args );
    if ( $terms ) {   
        echo '<ul class="product-cats">';
            foreach ( $terms as $term ) {              
                echo '<li class="category">';                        
                    woocommerce_subcategory_thumbnail( $term ); 
                    echo '<h2>';
                        echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
                            echo $term->name;
                        echo '</a>';
                    echo '</h2>';                                                        
                echo '</li>';                                                        
        }
        echo '</ul>';
    }
}
}
add_action( 'woocommerce_before_shop_loop', 'mynew_product_subcategories', 50 );