Как отформатировать цены WooCommerce

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

Пост охватывает следующие три пункта:

1. Замена десятичных разделителей
2. Замена разделителей тысяч
3. Форматирование цен для применения таких стилей, как выделение полужирным шрифтом, курсивом или подчеркиванием.

1. Замена десятичных разделителей:

Часто у вас могут быть десятичные значения в ценах на ваши продукты. Это довольно распространено в случае продуктового интернет-магазина, где цены определяются по весу овощей:

Во многих странах десятичный разделитель представлен точкой (.). Однако это неверно для многих других стран, таких как Испания, Южная Африка, Бразилия, Швеция, Китай и 70 других стран, где десятичным разделителем является запятая.

В таких странах, как Бразилия, точка (.) иногда используется для разделения тысяч. Например, двенадцать тысяч пятьсот пишется не как «12 500», а как «12 500» или даже «12 500».

Таким образом, цены должны отображаться по-разному при разработке магазина для определенной аудитории или национальности. Мы увидим, как мы можем заменить десятичные точки запятыми или пробелами в WooCommerce.

Есть два способа сделать это — либо напрямую через настройки WooCommerce, либо через редактор кода.
Изменение десятичного разделителя через настройки WooCommerce
Наведите указатель мыши на ярлык WooCommerce на панели инструментов WordPress и нажмите «Настройки». В WooCommerce->Настройки на вкладке «Общие» при прокрутке вниз отображается следующее:

Здесь вы можете изменить значение «Десятичный разделитель» с «.» к ","

Выполнив это и нажав «Сохранить изменения», вы увидите десятичную точку в виде запятой:

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

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

Фрагмент кода:

 add_filter('wc_price', 'woo_hide_decimal_point', 10, 4);
функция woo_hide_decimal_point($return, $price, $args, $unformatted_price) {
$единица = интервал($цена);
$decimal = sprintf('%02d', ($price-$unit) * 100);
return sprintf('%s %d %s', get_woocommerce_currency_symbol(), $unit, $decimal);
}

И в результате десятичная точка удаляется и заменяется пробелом:

Примечание . Код будет работать только после того, как вы установите десятичный разделитель на «.» в WooCommerce->Настройки.

Вы можете аналогичным образом заменить пробел запятой, немного изменив код.

 add_filter('wc_price', 'woo_replace_decimal_point', 10, 4);
функция woo_replace_decimal_point($return, $price, $args, $unformatted_price) {
$единица = интервал($цена);
$decimal = sprintf('%02d', ($price-$unit) * 100);
return sprintf('%s %d,%s', get_woocommerce_currency_symbol(), $unit, $decimal );
} 

Почему лучше использовать фрагменты кода через WooCommerce->Настройки для замены десятичного разделителя:

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

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

Еще одно преимущество — когда вы хотите, чтобы эти изменения выполнялись только для определенного продукта, а не для всех продуктов вашего магазина. Использование редактора кода обеспечивает такую ​​гибкость.

Используя фрагменты кода, вы также можете отображать десятичную часть цены в различных стилях, вставляя теги HTML, такие как <b>, <u>, <i>, <sup>, <sub> и многие другие.

Пример: Добавление подчеркивания к десятичной части цены.

 add_filter('wc_price', 'woo_format_decimal_value', 10, 4); 
функция woo_format_decimal_value ($ return, $ price, $ args, $ unformatted_price) { 
$единица = интервал($цена); 
$decimal = sprintf('%02d', ($price-$unit) * 100); 
return sprintf( '%s %d.<u>%s</u>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

Приведенный выше фрагмент кода, вставленный в файл functions.php дочерней темы, добавляет подчеркивание к десятичной части цены:

Таким же образом вы можете использовать и другие теги HTML. Если вы хотите узнать, как отображать десятичное значение в виде верхнего или нижнего индекса, прочитайте этот пост.

2. Замена разделителей тысяч:

Точно так же, как десятичные разделители отображаются по-разному в некоторых странах, так и в случае с разделителями тысяч.

Например, в таких странах, как Бразилия, Южная Африка или Испания, разделители тысяч обозначаются пробелом или точкой/точкой. В этих странах тринадцать тысяч пятьсот можно записать как 13 500 или 13 500.

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

Как и в случае с десятичными разделителями, это можно сделать двумя способами: либо через WooCommerce->Настройки, либо через редактор кода.
Изменение разделителя тысяч через настройки WooCommerce
Наведите указатель мыши на ярлык WooCommerce на панели инструментов WordPress и нажмите «Настройки». В WooCommerce->Настройки на вкладке «Общие» при прокрутке вниз отображается следующее:

Изменение значения в текстовом поле «Разделитель тысяч» на пробел вместо запятой («,») изменит способ отображения разделителя тысяч. Обратите внимание, что в этом поле необходимо ввести пробел. Простое стирание запятой не приведет к замене разделителя тысяч на пробел.

Нажмите «Сохранить изменения» и просмотрите товар:

Вы можете видеть, что теперь вместо разделителя тысяч есть пробел.

Чтобы избежать путаницы, вы можете установить десятичные разряды как «0» через WooCommerce->Настройки для цен, в которых нет десятичного значения:

После ввода количества десятичных знаков здесь как «0», нажмите «Сохранить изменения» и снова просмотрите продукт:

Изменение разделителя тысяч через редактор кода

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

Давайте теперь попробуем изменить разделитель тысяч на точку (.), используя фрагмент кода.

Примечание. Предпосылкой для этого является то, что вы должны оставить поле разделителя тысяч пустым в WooCommerce-> Настройки. Пробелов тоже нет.

 add_filter('wc_price', 'woo_format_thousand_separator', 10, 4); 
функция woo_format_thousand_separator($return, $price, $args, $unformatted_price) 
{ 
  $formatted_price=number_format($price,0,' ','.'); 
  return sprintf('%s %s', get_woocommerce_currency_symbol(), $formatted_price); 
}

Функция number_format — это встроенная функция PHP, которая принимает 4 аргумента:

1. Количество или, в нашем случае, цена.
2. Количество десятичных разрядов. Мы установили его на 0, так как мы не хотим отображать десятичные значения.
3. Десятичный разделитель, который вы хотите использовать. Мы установили это значение пустым.
4. Разделитель тысяч. Мы установили это в точку (.).

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

3. Форматирование цен WooCommerce:

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

Пример: Написание цены товара курсивом.

По умолчанию цена продукта отображается следующим образом:

Что, если вы хотите добавить к этому стиль, например, написать курсивом?

Вы можете добиться этого, внеся небольшие изменения в приведенные выше фрагменты кода.

Просто скопируйте этот код в файл functions.php вашей дочерней темы:

 add_filter('wc_price', 'woo_format_price_italics', 10, 4); 
функция woo_format_price_italics ($ return, $ price, $ args, $ unformatted_price) { 
$единица = интервал($цена); 
$decimal = sprintf('%02d', ($price-$unit) * 100); 
return sprintf('<i>%s %d.%s</i>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

При этом цена вместе с десятичной точкой будет отображаться курсивом:

Небольшое изменение фрагмента кода также предотвратит отображение десятичной части:

 add_filter('wc_price', 'woo_format_price_italics', 10, 4); 
функция woo_format_price_italics ($ return, $ price, $ args, $ unformatted_price) { 
$единица = интервал($цена); 
return sprintf('<i>%s %d</i>', get_woocommerce_currency_symbol(), $unit); 
}

Как видите, здесь можно просмотреть цену курсивом, без десятичной части:

Изучение фрагмента позволит вам легко форматировать цены WooCommerce по-своему.