Вариативный товар — один из типов товаров плагина интернет-магазина 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] );
}
Изменение параметров всех вариаций товара
Если необходимо для всех вариаций установить единую цену, или другой параметр, нужно воспользоваться всплывающим окном:

Очень интересно как сделать так, чтобы добавлять сразу весь размерный ряд. Не проходить по каждой вариации отдельно выбирать количество и добавлять в корзину, а выбрать количество один раз и добавить в корзину сразу все вариации. Как можно это сделать?
Например, продаем одежду размеры 46, 48, 50, 52. Что сделать, чтобы добавлять сразу все размеры с одинаковым количеством?
Не встречал потребности в таком функционале. Зачем, на практике, может пригодится данная функция?
Как зачем? Для оптовиков, очень удобно заказать сразу весь размерный ряд одежды, постельного белья и т.п. где не выбирать количество для 10 размеров, а в одном месте все сделать.
Вот пример https://modellini.ru/catalog/dlya_zhenshchin/bridzhi/_153_1_bridzhi_/