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

Вариативный товар — один из типов товаров плагина интернет-магазина 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] );
}

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

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

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