Вариативный товар

Вариативный товар — один из типов товаров плагина интернет-магазина Woocommerce. Суть вариативного товара в том, что мы создаем несколько вариантов исполнения одного товара (размер, цвет, емкость и т.д.), и в зависимости от варианта исполнения у товара может меняться стоимость.

Вариативный товар. Основы

Для создания вариативного товара нужно создать хотя бы один набор атрибутов (Например цвет). И при включении у товара типа «Вариативный» нужно перейти во вкладку атрибуты. Применить несколько атрибутов и поставить галку на пункте Используется для вариаций.

После этого во вкладке Вариации можно создавать вариации товара. Задавать вариациям цены, скидки количество и другие параметры.

Шаблон выбора

Шаблон выбора вариаций редактируется файлом woocommerce/single-product/add-to-cart/variable.php.

Лично мне не удобно то что он сверстан таблицей, альтернативная верстка:

<div class="variations">

<!-- <div class="variations">

<!-- <?php foreach ( $attributes as $attribute_name => $options ) : ?> -->

<div class="label">
<label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label> 
<?php echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) : ''; ?> 
</div><!-- -->

<div class="value"> 
<?php $selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( stripslashes( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) ) : $product->get_variation_default_attribute( $attribute_name ); 
wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) ); ?> 
</div>

<!-- <?php endforeach;?> -->

</div>

Стили:

/* Вариативный товар */
.variations {margin-bottom: 15px;}
.variations > div {display: inline-block; vertical-align: middle;}
.variations .label {width: 30%;}
.variations .value {width: 70%;}
.variations select {padding: 5px;}

Вариации в корзине

За вариации в корзине (после основного наименования) отвечает строка

echo WC()->cart->get_item_data( $cart_item );

Изображения вариаций

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

Изменение свойств вариаций

Известная давняя проблема Woocommerce — архивность (создавать для вариации отдельный архив), сортировка и тип вариации задается только при ее создании. Позже этого изменить мы не можем.
Точнее можно конечно, но не через админку, а напрямую в базе данных — таблица wp_woocommerce_attribute_taxonomies.

Из коробки в WC есть 2 типа вариаций: выбор и текст (select, text). Отличаются они по сути только способ набирания атрибутов в админке. Чтобы расширить варианты (цвет, изображение и т.д.) выбора вариаций во фронтенде нужно расширить функционал одним из плагинов.

Самая низкая цена вариации

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

// Используем формат цены вариативного товара WC 2.0
add_filter( 'woocommerce_variable_sale_price_html', 'wc_wc20_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_wc20_variation_price_format', 10, 2 );

function wc_wc20_variation_price_format( $price, $product ) {

	// Основная цена
	$prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
	$price = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
	
	// Цена со скидкой
	$prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
	sort( $prices );
	$saleprice = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

	if ( $price !== $saleprice ) {
		$price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
	}
	return $price;
}

Если мы хотим менять таким образом цену только в каталоге (т.к. в карточке удобнее когда показан диапазон цен), то оборачиваем часть функции в проверку:

if ( !is_product() ) {
	// Основная цена
	$prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
	$price = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
	// Цена со скидкой
	$prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
	sort( $prices );
	$saleprice = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
}

Изменение параметров всех вариаций товара

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

Вариативный товар без вариаций

Можно создавать вариативные товары со свойствами без непосредственно вариаций. т.е. создаем свойство (ставим галку для вариаций) но при создании вариаций оставляем только одну вариацию со значением Любой атрибут свойства. ID у таких вариаций будет единым, но он будет отличаться от ID самого товара (parent ID).

Класс для товара у которого более одной вариации

Это может пригодится если нужно скрыть диапазон цен в карточке товара

Дело в том что если скрыть этот диапазон (стилями), а у товара будет только одна вариация то цены не будет вовсе.

// Добавить класс для товаров с >1 вариаций

add_filter( 'post_class', 'more_one_variations' );

function more_one_variations( $classes ) {
	if (is_woocommerce() && !is_admin()) {
		global $product;
		if ( $product->is_type( 'variable' ) ) {

			$variations = $product->get_available_variations();
			$count      = count( $variations );
			if ($count > 1) {
				$classes[] = 'multivar';
			}

		}		
	}

    return $classes;
}

.product-type-variable.multivar .entry-summary > .price {display: none;}

Поделиться в соц. сетях: