Добавляем разные фоновые изображения для каждой товарной категории в WooCommerce

Сегодня столкнулись с задачей сделать различные фоновые изображения для каждой существующей в магазине товарной категории в WooCommerce. Нашелся платный плагин, однако интересней ведь решить задачу самостоятельно. Целью может быть акцент на какой-то определенной продукции из категории, либо же реклама брендов, графический вывод текущих акций и прочее.

Решается задача довольно просто. Как обычно, вставляем код в нужный файл, и получаем результат.

Первым делом открываем файл header.php вашей темы и находим там открывающий тег < body>. Если текущее его состояние соответствует коду ниже, тогда никаких изменений не требуется. Если же вы видите простой тег < body>, тогда заменяем его на:

<body <?php body_class(); ?> >

Далее, открываем файл functions.php вашей темы и добавляем следующий код:

add_filter( 'body_class', 'output_product_cat_on_body' );
 
function output_product_cat_on_body( $classes ) {
if ( is_singular( 'product' ) ) {
global $post;
 
$terms = get_the_terms( $post->ID, 'product_cat' );
 
foreach ( $terms as $term )
$classes[] = 'category-' . $term->slug;
}
return $classes;
}

Этот код добавит класс CSS .category-название_товарной_категории в тег < body> уже в тело генерируемой магазином страницы ТОЛЬКО для страницы товара.

Следующим шагом будет добавление этого кода снова таки в functions.php вашей темы:

add_filter( 'body_class', 'output_product_cat_on_body_on_cat' );
 
function output_product_cat_on_body_on_cat( $classes ) {
if ( is_product_category() ) {
global $post;
 
$terms = get_the_terms( $post->ID, 'product_cat' );
 
foreach ( $terms as $term )
$classes[] = 'category-' . $term->slug;
}
return $classes;
}

Этот код добавит класс CSS .category-название_товарной_категории в тег < body> уже в тело генерируемой магазином страницы ТОЛЬКО для страницы товарной категории.

В итоге, если мы добавим два кода сразу, то получим генерируемый WooCommerce’ом класс с названием текущей рубрики, который мы можем использовать для указания фонового изображения для определенной товарной категории.

На нашем сайте есть 6 рубрик: Buttons, Metal-jewelry, Ribbon, Cabochons, Bead-halfbead, Paper-decoration. Естественно так называются slug этих рубрик. Смотрим, в каком div на вашем сайте задается фоновое изображение, подставляем ему соответствующий класс рубрики .category-buttons. Ниже пример такой реализации.

.category-buttons #container {background: url('images/buttons.png') repeat scroll center top transparent;}
.category-metal-jewelry #container {background: url('images/metal-jewelry.png') repeat scroll center top transparent;}
.category-ribbon #container {background: url('images/ribbon.png') repeat scroll center top transparent;}
.category-cabochons #container {background: url('images/cabochons.png') repeat scroll center top transparent;}
.category-bead-halfbead #container {background: url('images/bead-halfbead.png') repeat scroll center top transparent;}
.category-paper-decoration #container {background: url('images/paper-decoration.png') repeat scroll center top transparent;}

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

VN:F [1.9.22_1171]
Rating: 5.0/5 (4 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Игорь

    а как тоже самое можно сделать с шапкой?))

    • ADv

      Нужно будет заменить див #container на div вашего логотипа, и, конечно же, прописать соответствующие стили.

      • Игорь

        Друг помог))) прямо в хедер :

        ID, ‘product_cat’ );
        if (!empty($terms)) {

        foreach ($terms as $term) {

        $product_cat_id = $term->term_id;
        break;}
        }
        if( $term = get_term_by( ‘id’, $product_cat_id, ‘product_cat’ ) ){
        $slug = $term->slug;
        }
        ?>

        .container.container-header.custom-header.zakuski {
        background: url(img/heder.jpg) repeat scroll center top transparent;
        }
        .container.container-header.custom-header.napitki-1l {
        background: url( img/napitki.png ) center center transparent;
        }

        • Андрій Созанський

          что то обрезало)

  • Наталья

    Огромное спасибо за эту статью, мне она очень помогла! Я как раз делаю интернет-магазин на woocommerce c различными фонами в разных товарных категориях. И все получилось!

    • ADv

      Всегда пожалуйста 😉

  • Роман

    А что нужно изменить в коде, чтобы было свое фоновое изображение для каждого товара, а не категории ?

  • Евгений

    Как на странице категории товаров сделать свой дизайн или слайдер? Например, для категории «мобильные телефоны» вставить слайдер с наиболее популярными моделями телефонов. Какой файл нужно править?

    • ADv

      Затрудняюсь ответить. Править нужно будет, скорее всего content-product_cat.php, а вот там уже играться с условиями вывода слайдеров в зависимости от рубрик..

  • Юрий Суржик

    Вечер добрый! А подскажите как сделать фон общий для всех категорий товарных, но отличающийся от фона главной страницы

Scroll To Top