Переключение карточек товаров по цвету в WooCommerce без вариаций

В WooCommerce переключение карточек товаров по цвету обуви без вариативных продуктов достигается связью simple товаров через custom meta-поля или ACF, добавлением цветового селектора и JavaScript с AJAX-загрузкой. Это имитирует поведение маркетплейсов вроде Wildberries: клик на цвет — и карточка обновляется динамически, без редиректа на новую страницу. Такой подход сохраняет SEO для отдельных товаров и упрощает каталог.

Содержание

• [Почему стандартные вариации WooCommerce не подходят {#why-no-variations}]
• [Подготовка товаров: связь моделей по цветам {#product-linking}]
• [Добавление цветового селектора в каталог {#color-selector}]
• [JavaScript и AJAX для свитчинга карточек {#switching-js}]
• [Расширенные опции и плагины {#advanced-options}]
• [Тестирование и оптимизация {#testing}]
• [Источники {#sources}]
• [Заключение {#conclusion}]

Почему стандартные вариации WooCommerce не подходят

Представьте: у вас обувь разных цветов — каждый как отдельный simple товар. В каталоге WooCommerce variable product показывает только родителя, вариации прячутся до страницы товара. А вам нужно свитчинг прямо в списке, как на WB: кликнул красный — увиделась красная кроссовка с ценой и фото. Без variations это проще: нет путаницы с атрибутами, каждый товар индексируется отдельно поисковиками.

Но проблема в отображении. Стандартный loop WooCommerce рендерит карточки статично. Хотите динамику? Придется хакнуть шаблоны. По данным WordPress Lab, хуки вроде woocommerce_shop_loop_item_title идеальны для вставки селектора цветов перед summary. А без этого — карточки товаров WooCommerce останутся разрозненными.

Коротко: variations хороши для корзины, но в каталоге убивают UX. Переходим к custom-решениям.

Подготовка товаров: связь моделей по цветам

Сначала свяжите товары. Не создавайте taxonomy — используйте meta-поля. Для модели обуви добавьте:

1. Custom field model_id (одинаковый для всех цветов одной пары, напр. “nike-air-001”).
2. color (hex или slug: “red”, “blue”).
3. Опционально linked_colors — array ID связанных товаров.

Через ACF (бесплатно) или код в functions.php:

add_action('add_meta_boxes', 'add_shoe_meta');
function add_shoe_meta() {
 add_meta_box('shoe_colors', 'Цвета модели', 'shoe_meta_callback', 'product');
}
function shoe_meta_callback($post) {
 $model = get_post_meta($post->ID, 'model_id', true);
 $color = get_post_meta($post->ID, 'color', true);
 echo '<input type="text" name="model_id" value="' . $model . '" placeholder="model_id">';
 echo '<input type="text" name="color" value="' . $color . '" placeholder="red">';
 // Сохраняем: add_action('save_post', 'save_shoe_meta');
}

Теперь товары “знают” друг о друге. Запросите связанные:

$linked = get_posts([
 'post_type' => 'product',
 'meta_query' => [
 ['key' => 'model_id', 'value' => $model_id],
 ['key' => 'color', 'value' => $target_color]
 ]
]);

Это основа. Без нее свитчинг карточек по цвету товара не взлетит.

Добавление цветового селектора в каталог

В шаблоне woocommerce/loop/loop.php или через хук woocommerce_before_shop_loop_item вставьте селектор. Соберите цвета для модели динамически.

Код в functions.php:

add_action('woocommerce_before_shop_loop_item', 'add_color_picker', 5);
function add_color_picker() {
 global $product;
 $model = get_post_meta($product->get_id(), 'model_id', true);
 if (!$model) return;
 
 $colors = get_posts([
 'post_type' => 'product',
 'meta_query' => [['key' => 'model_id', 'value' => $model]],
 'fields' => 'ids'
 ]);
 
 echo '<div class="shoe-colors">';
 foreach ($colors as $color_id) {
 $color_slug = get_post_meta($color_id, 'color', true);
 $active = ($product->get_id() == $color_id) ? 'active' : '';
 echo '<span class="color-swatch ' . $active . '" data-color="' . $color_slug . '" data-product="' . $color_id . '" style="background: #' . $color_slug . ';"></span>';
 }
 echo '</div>';
}

CSS для свитчей: круглые кнопки, hover-эффекты. Готово — цвет товара теперь кликабельный в карточке WooCommerce.

А что если цветов много? Пагинация или lazy-load. Но для обуви 5-10 хватит.

JavaScript и AJAX для свитчинга карточек

Сердце механизма — JS. На клик по цвету загружайте новую карточку через AJAX, не перезагружая страницу.

В functions.php:

add_action('wp_ajax_switch_shoe_card', 'handle_shoe_switch');
add_action('wp_ajax_nopriv_switch_shoe_card', 'handle_shoe_switch');
function handle_shoe_switch() {
 $color = sanitize_text_field($_POST['color']);
 $model = sanitize_text_field($_POST['model']);
 $target_product = get_posts([
 'post_type' => 'product',
 'meta_query' => [
 ['key' => 'model_id', 'value' => $model],
 ['key' => 'color', 'value' => $color]
 ],
 'posts_per_page' => 1
 ]);
 
 if ($target_product) {
 ob_start();
 wc_get_template('content-product.php', ['product' => wc_get_product($target_product[0]->ID)]);
 echo ob_get_clean();
 }
 wp_die();
}

JS в футере (enqueue script):

jQuery(function($) {
 $('.color-swatch').click(function() {
 var $this = $(this), color = $this.data('color'), productId = $this.data('product'), model = $this.closest('.product').find('.model_id').val();
 $this.siblings().removeClass('active'); $this.addClass('active');
 
 $.post(ajaxurl, {
 action: 'switch_shoe_card',
 color: color,
 model: model
 }, function(response) {
 $this.closest('.product').replaceWith(response); // Или fadeIn новую карточку
 });
 });
});

Бум! Карточка сменилась. Как на Wildberries, только в вашем магазине.

Плюс: добавьте transition CSS для плавности. Минус? Если товаров тысячи — кэшируйте AJAX.

Расширенные опции и плагины

Хотите проще? Плагины адаптируют.

• XT Woo Variation Swatches (WordPress.org): Для simple — хакните атрибуты как цвета, AJAX-load через custom action.
• YITH Color Variations из WPCraft: Бесплатка, связывает по meta, селекторы out-of-box.

ACF Pro для repeater-поля “linked_colors”. Или WooCommerce Linked Products — готовое связывание.

Для фильтров: Woo Product Filter + custom JS. Но код выше — бесплатно и гибко. Выбор за вами: хардкор или плагин?

Еще трюк: на странице товара хук woocommerce_before_single_product_summary для похожего свитчинга.

Тестирование и оптимизация

Протестируйте: добавьте 3-5 товаров одной модели, кликните цвета. Корзина? Убедитесь, ID правильный. Мобилька? Touch-events в JS.

SEO: каждая карточка — уникальный URL (slug с color). Кэш (WP Rocket) не ломает AJAX? Добавьте nonce.

Ошибки? Лог в handle_shoe_switch: error_log($target_product). Масштаб? Для 100+ моделей — Redis для meta-запросов.

Готово к продакшену. Ваш каталог теперь как маркетплейс.

Источники

1. Хуки страницы товара в WooCommerce - визуальная карта с примерами редактирования! — WordPress лаборатория
2. XT Variation Swatches for WooCommerce — Плагин для WordPress | WordPress.org Русский
3. Плагины для WooCommerce 2025 - как сделать магазин на WordPress?
4. Объединение карточки на ВБ - как склеить карточки товара в одну на Wildberries 2025

Заключение

Переключение карточек товаров по цвету обуви в WooCommerce без вариаций — реально через meta-связь, хуки и AJAX. Начните с подготовки полей, добавьте селектор и JS — и каталог оживет. Это дешевле плагинов, гибче variations и ближе к UX маркетплейсов. Тестируйте поэтапно, и продажи вырастут. Удачи с магазином!