Указываем процент скидки или сэкономленную сумму для товаров на распродаже

В этом уроке покажу вам несколько способов, используя которые вы сможете указать, сколько сэкономит пользователь, приобретая товар и тем самым увеличив его мотивацию к покупке.

Кстати у меня на сайте уже был похожий урок, в котором мы добавляли плашку с процентом скидки перед заголовком товара в каталоге.

Также рекомендую вам свой видеокурс по созданию темы WooCommerce на основе готовой HTML-вёрстки.

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

сэкономленная сумма в процентах при покупке товара в интернет-магазине на WooCommerce

И вот так для страницы каталога и категорий товаров:

отображаем экономию в процентах рядом с ценой товара в WooCommerce
add_filter( 'woocommerce_format_sale_price', 'truemisha_discount_percentage', 10, 3 );
 
function truemisha_discount_percentage( $price, $regular_price, $sale_price ) {
 
	// вычисляем процент скидки
	$percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
 
	// сообщение об экономии, можете стилизовать его при помощи CSS
	$percentage_message = '<span style="color: #ff7070;">Экономия ' . $percentage . '!</span>';
 
	// отображение цены в новом формате
	$price = '<del>' . wc_price( $regular_price ) . '</del> <ins>' . wc_price( $sale_price ) . $percentage_message . '</ins>';
 
	// возвращаем результат
	return $price;
 
}

Пара моментов по коду:

  • Прежде всего, если не знаете, куда его вставлять, то читайте этот урок.
  • Функция wc_price() позволяет отформатировать числовое значение цены, добавляя разделители тысяч и знак валюты.

Кстати, если вы хотите отображать количество сэкономленных денег не в процентах, то достаточно поменять эти строчки:

// вычисляем сколько сэкономится
$discount_amount = $regular_price - $sale_price;
 
// оборачиваем в функцию wc_price()
$percentage_message = '<span style="color: #ff7070;">Экономия ' . wc_price( $discount_amount ) . '!</span>';

И тогда:

сообщение с сэкономленной суммой на странице товара

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

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

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

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

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