Изменяем формат отображения цен для вариативных товаров

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

цена вариативного товара в WooCommerce

Но что, если такой формат отображения цен не всегда удобен для нас. Даже на скриншоте вы можете заметить, что цена немного не помещается на одной строчке. Ведь можно сделать отображение в виде «от минимальная цена».

Вот так:

Меняем формат цены вариативных товаров в WooCommerce

Делается это не очень сложно, но есть несколько моментов, которые нужно учесть и я расскажу о них позже. Для начала взгляните на этот сниппет кода, который можно отправить в functions.php вашей текущей темы:

add_filter( 'woocommerce_variable_price_html', 'truemisha_variation_price', 20, 2 );
 
function truemisha_variation_price( $price, $product ) {
 
	$min_regular_price = $product->get_variation_regular_price( 'min', true );
	$min_sale_price = $product->get_variation_sale_price( 'min', true );
	$max_regular_price = $product->get_variation_regular_price( 'max', true );
	$max_sale_price = $product->get_variation_sale_price( 'max', true );
 
	if ( ! ( $min_regular_price == $max_regular_price && $min_sale_price == $max_sale_price ) ) {
		if ( $min_sale_price < $min_regular_price ) {
			$price = sprintf( 'от <del>%1$s</del><ins>%2$s</ins>', wc_price( $min_regular_price ), wc_price( $min_sale_price ) );
		} else {
			$price = sprintf( 'от %1$s', wc_price( $min_regular_price ) );
		}
	}
 
	return $price;
 
}
  • На строках 5-8 мы получаем минимальные и максимальные цены вариаций, как обычные, так и распродажные.
  • Мы не делаем ничего (строка 10) в том случае, если у всех вариаций товара одинаковая цена.
  • Сниппет будет работать как в каталоге товаров, так и на страницах самих товаров.
  • Ну и функция wc_price() нужна для того, чтобы цена не отображалось тупо цифрой, а с учётом всех форматирований цены и знака валюты.

И ещё кое-что, если вы хотите научиться изменять WooCommerce не только на уровне вставки готовых сниппетов в код, то рекомендую вам мой видеокурс.

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии — 15

  • Андрей 17 мая 2020 #

    Спасибо за статью!
    Буду ждать описания моментов, которые нужно учесть)

  • Олег 17 мая 2020 #

    Спасибо огромное добрый человек!
    Работает!
    Есть только один нюанс... цена как отображалась в несколько строчек (в 3 строчки если быть точным) - так и продолжает отображаться
    Было -> Стало

    100р
    - от
    200р 200р

    Можешь плииз дать направление - куда копать? ))

    • Миша 17 мая 2020 #

      Да, пожалуйста!

      Ну у вас есть два варианта – либо заменить пробелы на неразрывные &nbsp;, либо использовать CSS-свойство white-space:nowrap.

      • Олег 17 мая 2020 #

        Спасибо за ответ!
        Прошу пардона что вот так сразу вульгарно на Ты )) это я не со зла.
        К сожалению не сработало. От темы это тоже не зависит (пробовал на разных)
        А где формируется вывод вариативных ценников у WooCommerce? (в каком Php-файле/в какой функции)

      • Миша 17 мая 2020 #

        Относительно Ты – ничего страшного )

        хм.. если не сработало, то я возможно не до конца понял вопрос 🤔

        • Олег 18 мая 2020 #

          Сорри за мой корявый экспланейшн... с php/wordpress'ом и вот этим всем я сильно на Вы)))
          попробую объяснить еще раз...
          Имеется вариативный товар. Допустим ценой 100 и 300 руб. Помимо того, что диапазон цен 100-300 сбивает с толку... Цена еще и отображалась в 3 строчки, что очень не эстетично и ваще ацтой. Ваше решение казалось панацеей от этой проблемы (ремарка: как мне показалось с моей ламерской колокольни, ваше решение - наиболее продуманное из всех подобных решений для вариативных товаров, что встречал в интернетах... например у Вас учитывается момент с одинаковой ценой вариативных товаров... есть 2 отдельных вывода для распродажи и обычной цены... и.т.д. есть только вопрос - как будут работать фильтры по цене... но у меня таковых пока не предвидится...)
          Дык вот (возвращаясь к моим баранам...)
          Было (строчки пронумерованы)
          1. 100р
          2. -
          3. 300р

          После модификации стало (строчки пронумерованы)
          1.
          2. от
          3. 100р
          Все те же 3 строчки...

          Менял тему - тоже самое.
          Начинаю думать что нужно еще что-то подкрутить в выводе вариативной цены у Вуукоммерса.
          Из того что пробовал...
            - не работает точно...
          насчет CSS... попробовал обернуть в кастом CSS стиль вывод функции но возможно что-то сделал не так... можно ли попросить о примере кода?

          • Олег 18 мая 2020 #

            поправка &nbsp; не работает точно )

          • Миша 18 мая 2020 #

            Ну это же всё равно в одном HTML-теге верно?

            "1.
            2. от
            3. 100р"

            Если между от и рублями поставить неразрывный пробел &nbsp;, то точно должно работать 🤔🤷‍♂️ ну или прописать в CSS white-space:nowrap для того самого тега.

            Так что странно.

            • Олег 19 мая 2020 #

              >Ну это же всё равно в одном HTML-теге верно?
              А вот не знаю, сорри... имхо это зависит от того как организован вывод варриативной цены у WooCommerce и как работает sprintf( 'от %1$s', wc_price( $min_regular_price ))
              Мои ламерские домыслы: может есть более приоритетный стиль от WooCommerce который применяется в данном случае... или вывод цены у WooCommerce организован так что есть принудительный перевод строки для слова

              • Олег 19 мая 2020 #

                ну т.е. мое предположение, что может min_regular_price уже возвращается с пробелами или знаком переноса строки. И совсем не понятно откуда берется первая пустая строка.

              • Миша 19 мая 2020 #

                Ну то есть так пробовали и не сработало? sprintf( 'от&nbsp;%1$s',

                • Олег 19 мая 2020 #

                  да))

                • Миша 19 мая 2020 #

                  Фак) ну странно короче, если хотите, напишите в форму, я могу дать контакт одного из наших разработчиков, он вам за небольшое вознаграждение думаю поможет

  • catarri 25 мая 2020 #

    А как потом стилизовать эту приставку "От". Она не html тегах и я не могу увеличить её размер, если название фильтра содержит price_html, может можно вернуть слово в тегах?

    • Миша 25 мая 2020 #

      Да, можно конечно, рекомендую тег span.

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

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.