Сегодня столкнулись с задачей сделать различные фоновые изображения для каждой существующей в магазине товарной категории в 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;}
По всем вопросам и отзывам просьба писать в комментарии ниже.
Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.
