Авг
4
67

Хаки для вариаций товаров в WooCommerce

Вариации товара в WooCommerceРанее я уже рассматривал создание вариативного товара в WooCommerce, когда пользователю доступен выбор разных значений атрибутов (цвет, вес) для продукции интернет-магазина. Добавить подобную фишку на сайт можно с помощью базовых функций модуля. Тем не менее, в ходе работы иногда возникают нюансы и задачи, когда придется внедрять дополнительные хаки. Именно об этих решениях для WooCommerce вариаций товаров мы сегодня и поговорим. 

По аналогии с постом про кнопку добавить в корзину соберу несколько сниппетов в рамках одной заметки. Причем все они частично будут между собой пересекаются + есть задачи, которые решаются с разными подходами. Поэтому рекомендую данный пост читать максимально вдумчиво со всеми пояснениями! Содержание:

Вывод минимальной цены для всех вариаций

Некоторые заказчики хотят реализовать в своем магазина фишку, когда на странице каталога настроен вывод вариаций товара WooCommerce только с минимальной ценой. Во-первых, это маркетинговый ход дабы показывать наименьшую стоимость. Во-вторых, сможете сэкономить немного места в шаблоне, отображая лишь одну цену.

Отображение минимальной цены товара в WooCommerce

Изначально в этом посте рассказывал о сниппете, который решал проблему только в архиве/категориях, а для страницы товаров я все настраивал в шаблоне. Данный «глобальный» подход «закрывает» сразу несколько подзадач по этой теме.

Код публикую частями (чтобы было проще объяснять суть), а вы вставляйте эти блоки в файл функций темы functions.php подряд друг за другом в такой же очередности.

function bbloomer_variation_price_format( $price, $product ) {
 
 if (is_product()) {
    return $product->get_price();
 } else {
        // Main Price
        $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] );
 
        // Sale Price
        $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_admin() ) {
    add_filter( 'woocommerce_variable_sale_price_html', 'bbloomer_variation_price_format', 10, 2 );
    add_filter( 'woocommerce_variable_price_html', 'bbloomer_variation_price_format', 10, 2 );
}

Здесь:

  • Во-первых, функция учитывает наличие скидочной цены: если она активна, то пользователь увидит перечеркнутой базовую стоимость, а рядом будет стоять ценник со скидкой.
  • Во-вторых, в начале есть условие is_product, за счет которого наши действия сработают для всех страниц кроме единичного продукта (там свои нюансы).
  • В-третьих, ниже мы видим еще один условный оператор is_admin чтобы все это «происходило» только на сайте, а НЕ в админке.
// show variation price
add_filter('woocommerce_show_variation_price', function() {return true;});
 
//override woocommerce function
function woocommerce_template_single_price() {
    global $product;
    if ( ! $product->is_type('variable') ) { 
        woocommerce_get_template( 'single-product/price.php' );
    }
}

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

С помощью переопределения функции woocommerce_template_single_price мы будем выводить для вариаций такой же блок шаблона, что и для простой продукции. Также, вероятно, где-то здесь избавляемся от двойного отображения стоимости у вариативных товаров.

function shuffle_variable_product_elements(){
    if ( is_product() ) {
        global $post;
        $product = wc_get_product( $post->ID );
        if ( $product->is_type( 'variable' ) ) {
            remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );
 
            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_title', 10 );
 
            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30 );
        }
    }
}
add_action( 'woocommerce_before_single_product', 'shuffle_variable_product_elements' );

Финальный блок, как и остальные части, позаимствованы отсюда. Внимание! Он НЕ обязательно должен быть именно таким – все зависит от вашего шаблона. Тут важно понять суть происходящего в нем.

Специфика ситуации в том, что вариативные товары являются динамическим элементом страницы и редактируются через JavaScript файл add-to-cart-variation.js. Данный элемент помещается внутрь блока <div class=»woocommerce-variation single_variation»>, который в свою очередь должен оставаться внутри формы с классом variations_form. Поэтому и производятся все эти переносы блоков на странице товара.

Как я уже сказал выше, совсем не обязательно использовать весь этот код. Удаляйте/перемещайте только те блоки, которые вам не нужны. В моем случае хватило таких строк (первые 2 точно нужны, а код с title и excerpt — при необходимости):

function shuffle_variable_product_elements(){
    if ( is_product() ) {
        global $post;
        $product = wc_get_product( $post->ID );
        if ( $product->is_type( 'variable' ) ) {
            remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );
        }
    }
}
add_action( 'woocommerce_before_single_product', 'shuffle_variable_product_elements' );

Отображение только минимальной цены в рубриках/категориях

Самый просто вариант, который можно здесь придумать это:

Метод1

add_filter('woocommerce_variable_price_html', 'mycustom_variation_price', 10, 2);
add_filter('woocommerce_variable_sale_price_html', 'mycustom_variation_price', 10, 2 );
 
function mycustom_variation_price( $price, $product ) {
	if ( ! is_admin() && ((is_shop() || is_product_category() || is_page()))) {
     $price = '';
     $price .= woocommerce_price($product->get_price());
    } 
    return $price;
}

Размещается традиционно в файле functions.php. Здесь вы с помощью хуков заменяете стандартные функции отображения вариаций товара WooCommerce на свою. Также добавляем условие показа только в каталоге (главная, архив, отдельные страницы — is_shop, is_product_category, is_page). Не забываем про исключение из админки (!is_admin).

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

Метод2

/**
 * Change variable product price to display From £#.## instead of price range
 *
 * @param string $price
 * @param \WC_Product_Variable $product
 *
 * @return float|string
 */
function jc_variable_product_price_display($price, $product){
 
	$price_min = $product->get_variation_price( 'min', true );
	$price_sale_min = $product->get_variation_sale_price( 'min', true );
 
	if($product->is_on_sale() && $price_min < $price_sale_min){
	  $price = sprintf('<del>%s</del><ins>%s</ins>', wc_price($price_min), wc_price($price_sale_min));
	}else{
		$price = wc_price($price_min);
	}
 
	return sprintf('From: %s', $price);
}
 
add_filter( 'woocommerce_variable_sale_price_html', 'jc_variable_product_price_display', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'jc_variable_product_price_display', 10, 2 );

Этот пример взят отсюда и (внимание!) тут нет никаких условных операторов — если вам они нужны, следует их использовать.

У двух этих методик есть ряд «особенностей», на которые следует обратить внимание. Сниппеты могут вносить определенную «неточность» при восприятии информации на сайте. Например:

  • У вас есть вариативный товар стоимостью $10-$30, и посетитель выбирает в фильтрах значение «от $20 и выше». Данная позиция будет отображена на странице в любом случае, но вместо диапазона в цене показывается минимальное знание — $10.
  • Если условиями исключать единичную страницу is_single, то в блоке похожей продукции на ней могут остаться диапазоны цены. Плюс обычную страничку с товаром также нужно как-то обрабатывать при выводе (через глобальный код выше или своими методами).
  • Не забывайте, что хаки применяются и в админке, поэтому без исключения !is_admin не обойтись.
  • В первом случае может перестать работать «перечеркивание» для скидок.

Ну, и напоследок нашел не менее интересный подход:

Метод3

/**
 * @snippet       Variable Product Price Range: "From: <del>$$$min_reg_price</del> $$$min_sale_price"
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=275
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_variable_price_html', 'bbloomer_variation_price_format', 10, 2 );
 
function bbloomer_variation_price_format( $price, $product ) {
 
// 1. Get min/max regular and sale variation prices
 
$min_var_reg_price = $product->get_variation_regular_price( 'min', true );
$min_var_sale_price = $product->get_variation_sale_price( 'min', true );
$max_var_reg_price = $product->get_variation_regular_price( 'max', true );
$max_var_sale_price = $product->get_variation_sale_price( 'max', true );
 
// 2. New $price, unless all variations have exact same prices
 
if ( ! ( $min_var_reg_price == $max_var_reg_price && $min_var_sale_price == $max_var_sale_price ) ) {   
   if ( $min_var_sale_price < $min_var_reg_price ) {
      $price = sprintf( __( 'From: <del>%1$s</del><ins>%2$s</ins>', 'woocommerce' ), wc_price( $min_var_reg_price ), wc_price( $min_var_sale_price ) );
   } else {
      $price = sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $min_var_reg_price ) );
   }
}
 
// 3. Return $price
 
return $price;
}

Отображение цены вариации по умолчанию

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

Цены вариаций

Я, в принципе, стараюсь всегда указывать этот параметр дабы не возникало никаких «случайных несостыковок» на странице описания продукции магазина. Чтобы выводить данное значение в разделах добавьте в functions.php следующие строки:

add_filter('woocommerce_variable_price_html', 'custom_variation_price_default', 10, 2);
add_filter('woocommerce_variable_sale_price_html', 'custom_variation_price_default', 10, 2 );
 
function custom_variation_price_default( $price, $product ) {
  foreach($product->get_available_variations() as $pav){
      $def=true;
      foreach($product->get_variation_default_attributes() as $defkey=>$defval){
          if($pav['attributes']['attribute_'.$defkey]!=$defval){
              $def=false;             
          }   
      }
      if($def){
          $price = $pav['display_price'];         
      }
  }   
 
  return woocommerce_price($price);
}

Решение найдено тут. По сравнению с предыдущим методом здесь чуть больше кода, но, к сожалению, «неточности» возникают такие же: с фильтрами, отображением товара «не в наличии», показом стоимости в админке. Единственное преимущество, делающее такой подход гибче — возможность выбора вручную какую цену выводить.

Вариации товара с одинаковыми ценами

Не знаю как в новых Woocommerce 3.x, но в предыдущей ветке точно закрался странный глюк. Если у вас имеется товар с несколькими вариациями, для которых установлена одинаковая стоимость, то на странице с его описанием поле цены будет скрыто.

Глюк отображения цены в вариациях

Чтобы это исправить в файл функций добавляем:

add_filter('woocommerce_available_variation', function ($value, $object = null, $variation = null) {
    if ($value['price_html'] == '') {
        $value['price_html'] = '<span class="price">' . $variation->get_price_html() . '</span>';
    }
    return $value;
}, 10, 3);

Повторюсь, у меня этот косяк появляется в Woocommerce 2.6.x, возможно, в следующей версии он уже исправлен. Дополнительно советую глянуть плагин скидок и оптовых цен в WooCommerce.

Если первый вариант не сработает, вот похожий прием:

add_filter( 'woocommerce_show_variation_price', 'filter_show_variation_price', 10, 3 );
function filter_show_variation_price( $condition, $product, $variation ){
    if( $variation->get_price() === "" ) return false;
    else return true;
}

Вариации товара в WooCommerce без выпадающего списка

Я думаю, выпадающий список — не лучший способ выбора вариаций на странице магазина WooCommerce. Как минимум, пользователю приходится делать дополнительное действие для просмотра доступных значений атрибутов, плюс не все смогут сходу сообразить куда нужно кликать и т.п. Поэтому решение с чекбоксами (Radio Buttons) выглядит куда более юзерфрендли.

Вывод вариаций товара в WooCommerce

В сети найдете разные хаки по данной задаче. Однако мне больше всего нравится реализация с помощью модуля — внедряется она максимально просто и быстро. Наибольшее доверие из имеющихся плагинов вызывает WC Variations Radio Buttons.

Плагин WC Variations Radio Buttons

На момент написания статьи последняя версия модуля имела чуть более 3 тысяч загрузок и хорошую оценку. В некоторых шаблонах решение может работать сразу после установки и активации. Если же разработчики внесли свои правки в файл WooCommerce магазина single-product/add-to-cart/variable.php, то вам нужно будет:

  1. Создать дочернюю тему (если ее нет).
  2. Скопировать файл из директории модуля plugins/wc-variations-radio-buttons/templates/single-product/add-to-cart/variable.php в ваш шаблон сюда — themes/ИМЯ_ТЕМЫ/woocommerce/single-product/add-to-cart/variable.php. Если там уже есть такой файл, замените его.

Как правило, в шаблонах магазинов WooCommerce все реализуется через дочерние темы, поэтому с первым пунктом сложностей возникнуть не должно. В дальнейшем я постараюсь этот момент рассмотреть более детально.

Если у вас имеются вопросы по теме поста как вывести вариации товара в WooCommerce, пишите ниже.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 15, средний балл: 5,67 из 7)
Загрузка...

категория Категории: WooCommerce; Хаки и секреты;
теги Теги: , , , , .

комментариев 67 к статье “Хаки для вариаций товаров в WooCommerce”

  • Деонис   16.09.2020

    Здравствуйте! А подскажите пожалуйста. У меня вариативный товар-сумки. 8 категорий вариантов( внешний цвет, цвет подкладки, ширина ремня и т.д.) Как автоматом сделать так, чтобы к примеру клиент выбрал «красный»- цена изменилась в +…клиент выбрал ширину ремня 3 см- цена выросла в +….Я понимаю, что это все можно прописать вручную при каждой вариации. Но у меня их тысячи…И ручками ох как не хочется.Хотелось бы где-то прописать, что при выборе этого варианта цена на столько-то и столько повышается… Чтобы это все автоматом прописывалось. Рассмотрю любые вариант как это сделать) Спасибо

  • Tod   19.09.2020

    Деонис, к сожалению, такого решения я не встречал, хотя когда-то тоже был клиент с подобным требованием. Нужно гуглить модули или заказывать на фрилансе. Единственный вариант для автоматизации — использовать плагин быстрого редактирования или импорт/экспорт в Ексель, где вручную проще редактировать данные.

  • Lol_master   16.10.2020

    добрый вечер, подскажите как отобразить вариации товара как отдельные товары в категориях и под категориях?

  • Tod   17.10.2020

    Lol_master, думаю, никак, т.к. вариации для того и созданы, чтобы представить 1 товар с разными параметрами. Если вам нужно отображать их как отдельные товары, тогда не уверен, что вам нужны вариации. Нужна более конкретная информация.

  • Alex   17.10.2020

    Добрый день

    подскажите пожалуйста как отображать цену вариации не снизу в вместо цены от и до?
    https://prnt.sc/v16hb9

    чтоб менялась цена отдо на цену вариации?

  • Tod   19.10.2020

    Alex, точное решение точно не подскажку, нужно гуглить. Но вообще помню, что с этими ценами был какой-то нюанс, мол они должны располагаться в определенном DIV дабы срабатывал скрипт изменения цены, поэтому классический подход в стиле вывести функцию цен через фильтр в шаблоне не срабатывает.

  • Серж   23.11.2020

    Здравствуйте. Не могу найти, но может кто в курсе.
    Мне надо в товаре, указать допустим три варианта. В первом 5 позиций, во втором 10, а в третьем 25.При выборе первого варианта, клиент видит только 5 позиций, при выборе второго, 10, ну и.т.д.
    Подскажите, как это можно реализовать?

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Поиск:
Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости