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

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

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

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

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

<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-название_товарной_категории в тег уже в тело генерируемой магазином страницы ТОЛЬКО для страницы товара.

Следующим шагом будет добавление этого кода снова таки в 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-название_товарной_категории в тег уже в тело генерируемой магазином страницы ТОЛЬКО для страницы товарной категории.

В итоге, если мы добавим два кода сразу, то получим генерируемый 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]
please wait…
Rating: 4.7/5 (6 votes cast)
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии