/ Плагины / Изображение для категории товаров

Изображение для категории товаров

HIT

01.04.2016

8536

В дизайнерских целях иногда требуется выводить изображение для категории товаров. Сделать это можно несколькими способами: плагином, кодом в functions, либо дополнительными полями.
При этом кодом в funtions описанном мы будем использовать «родное» изображение категории, а если будем использовать плагин или произвольное поле — то будет использоваться дополнительное изображение.

Woocommerce category banner

Для того чтобы была возможность выводить на странице категории изображение категории надо установить плагин Woocommerce category banner.

Под шаблон данного сайта надо сделать небольшое изменение в плагине
со строк

// Retreives and print the category banner

до строки

//Shortcode function for displaying banner.

Меняем код на этот

// Retreives and print the category banner
public function wcb_show_category_banner() {
	global $woocommerce;
	global $wp_query;

	// Make sure this is a product category page
	if ( is_product_category() ) {
		$cat_id = $wp_query->queried_object->term_id;

		$term_options = get_option( "taxonomy_term_$cat_id" );

		if((isset($term_options['auto_display_banner']) && $term_options['auto_display_banner'] == 'on') || !isset($term_options['auto_display_banner'])) {
			// Get the banner image id
			if ( $term_options['banner_url_id'] != '' )	$url = wp_get_attachment_url( $term_options['banner_url_id'] );

			// Exit if the image url doesn't exist
			if ( !isset( $url ) or $url == false ) return;

			// Get the banner link if it exists
			if ( $term_options['banner_link'] != '' ) $link = $term_options['banner_link'];

			// Print Output
			if ( isset( $link ) ) echo "<a href='" . $link . "'>";
			if ( $url != false ) echo "<div style='overflow:hidden; margin-top:-10px;';><div id='post-div-pic' style='background-image:url(" . $url . ")' /></div></div>";
			if ( isset( $link ) ) echo "</a>";
		}
	}
}
}

endif;

$WCB_Category_Banner = new WCB_Category_Banner();

И в файле funсtions.php его надо активировать

// Активация WooCommerce Category Banner add_action( 'woocommerce_before_shop_loop', 'wcb_show_category_banner', 7 );

Код в funсtions.php

Недавно узнал более изящный метод вывода изображения категории в самой категории с товарами. Источник: eysman.pro

// Изображение категории на странице товаров категории

add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
	if ( is_product_category() ){
		global $wp_query;
		$cat = $wp_query->get_queried_object();
		$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
		$image = wp_get_attachment_url( $thumbnail_id );
		if ( $image ) {	echo '<img class="category-product-image" src="' . $image . '" alt="'.$cat->name.'" />'; }
	}
}

Доработанный вариант с placeholder’ом

// Изображение категории на странице товаров категории

add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
if ( is_product_category() ){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
$template_url = get_bloginfo('template_url');
if ( $image ) {
echo '<div style="overflow:hidden;";><div id="post-div-pic"" style="background-image:url(' . $image . ')" /></div></div>';
}
else {
echo '<div style="overflow: hidden;"><div id="post-div-pic" style="background-image: url(' . $template_url . '/images/img-default-full.jpg);"></div></div>';
}

}
}
Теперь плагин Woocommerce category banner можно использовать для других целей: за счет того что с помощью него можно загружать другое изображение (например для акций)

Изображение для категории / метки товара дополнительным полем

В плагине Advanced Custom Fields заводим новое поле — изображение, и чтобы выводить изображение в шаблоне WC пишем функцию

// Изображение метки на странице товаров метки

add_action( 'woocommerce_archive_description', 'woocommerce_tag_image', 2 );
function woocommerce_tag_image() {
	if ( is_product_tag() ){
		global $wp_query;
		$product_tag_id = $wp_query->get_queried_object('product_tag');
		$imgtag = get_field("mini-thumb",$product_tag_id);

		if ( $imgtag ) {
		echo '<div style="overflow:hidden;";><div id="post-div-pic" style="background-image:url('.$imgtag['sizes']['large'].')" /></div></div>';
		}

		else {
		echo '<div style="overflow: hidden;"><div id="post-div-pic" style="background-image: url('.get_bloginfo('template_url').'/images/img-default-full.jpg);"></div></div>';
		}
	}
}
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Переключение вида вывода товаров

Переключение вида вывода товаров

Для разных людей по разному удобно просматривать товары: когда они строятся в виде плиток, либо в линию или другими способами. Добавим на сайт функционал переключения вида отображения товаров в архивах. Читать далее »

/
Галерея изображений товара в категории

Галерея изображений товара в категории

Создадим переключающиеся изображения товара при наведении мыши, либо галерею изображений товара в шаблоне категории. Под галереей изображений (Featured Images) понимаются дополнительные изображения помимо основного изображения. Выводим дополнительные изображения function woocommerce_feature_gallery() Читать далее »

/
slick — функционал карусели

slick — функционал карусели

slick — комплексное решение по созданию функционала карусели, в различных ее проявлениях. Демо и типовые варианты, и исходники можно посмотреть/скачать здесь. Отсекаем лишнее В базовой комплектации у slick присутствует несколько Читать далее »

Добавить комментарий

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6260

Пока нет комментариев. Будь первым!

Логин (форма входа)
Рекомендации для васЛогин (форма входа)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.