Как отобразить «Вы экономите x%» ниже цен продажи для простых и вариативных продуктов в WooCommerce

Все мы знаем, как скидки привлекают клиентов и увеличивают продажи. Но показать, что вы продаете товар по более низкой цене, в наши дни недостаточно, поскольку все розничные продавцы и веб-сайты электронной коммерции предлагают скидки одновременно. Когда отображаются только старая и новая цены, покупателю остается заняться математикой, чтобы подсчитать, сколько денег он на самом деле сэкономит. Лучший способ справиться с этим — отобразить процент суммы, которую клиент экономит при совершении этой покупки. Это дает им лучшее представление и более простой способ решить, стоит ли делать эту покупку. Давайте посмотрим, как вы можете отобразить «Вы экономите x%» рядом с ценами продажи как для простых, так и для переменных продуктов в WooCommerce.

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

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

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

 функция ts_you_save() {
  
  глобальный $продукт;
  
   if( $product->is_type('простой') || $product->is_type('внешний') || $product->is_type('сгруппированный')) {
      
     	$regular_price = get_post_meta($product->get_id(), '_regular_price', true); 
        $sale_price = get_post_meta($product->get_id(), '_sale_price', true);
     
     	если( !пусто($sale_price)) {
  
              $amount_saved = $regular_price - $sale_price;
              $currency_symbol = get_woocommerce_currency_symbol();

              $percentage = round((($regular_price - $sale_price) / $regular_price) * 100);
              ?>
              <p><b>Вы экономите: <?php echo number_format($percentage,0, '', '').'%'; ?></b></p>				
              <?php		
        }
   }
}

add_action('woocommerce_single_product_summary', 'ts_you_save', 11);

В этом фрагменте кода мы добавили функцию ts_you_save() во встроенный хук WooCommerce woocommerce_single_product_summary , который указывает на область под названием продукта. Функция ts_you_save() определяет тип продукта и вычисляет процент сэкономленной суммы, если продукт продается со скидкой. Добавив немного CSS, вы можете распечатать это так, как хотите:

Если вы хотите отобразить сэкономленную сумму вместе с процентом, вы можете немного изменить тот же фрагмент кода следующим образом:

 функция ts_you_save() {
  
  глобальный $продукт;
  
   if( $product->is_type('простой') || $product->is_type('внешний') || $product->is_type('сгруппированный')) {
      
     	$regular_price = get_post_meta($product->get_id(), '_regular_price', true); 
        $sale_price = get_post_meta($product->get_id(), '_sale_price', true);
     
     	если( !пусто($sale_price)) {
  
              $amount_saved = $regular_price - $sale_price;
              $currency_symbol = get_woocommerce_currency_symbol();

              $percentage = round((($regular_price - $sale_price) / $regular_price) * 100);
              ?>
              <p><b>Вы сохраняете: <?php echo number_format($amount_saved,2, '.', '')." (". number_format($percentage,0, '', '')."%)" ; ?></b></p>						
              <?php		
        }
   }
}

add_action('woocommerce_single_product_summary', 'ts_you_save', 11);

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

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

Сэкономленная сумма, а также процент теперь будут отображаться под ценой:

Как показать, что вы экономите % ниже продажных цен для переменных продуктов

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

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

Следующий фрагмент кода, который вы добавите в файл footer.php, содержит функцию, которая запускается при изменении варианта. В нашем случае это срабатывает, когда вариант размера выбирается или изменяется с помощью раскрывающегося списка «Размер». Эта функция захватывает конкретный идентификатор варианта и отправляет его в functions.php через вызов ajax.

 <скрипт>
jQuery (документ) .ready (функция ($) {
             
  $('input.variation_id').change( function(){
    	
    если( '' != $('input.variation_id').val() ) {
                     
        	        var var_id = $('input.variation_id').val(); // Идентификатор выбранного вами варианта
      $.ajax({
        URL: "https://<ваш_woocommerce_site_url>/wp-admin/admin-ajax.php",
        		        данные: {'действие':'ts_calc_percentage_saved','vari_id': var_id},
        		        успех: функция (данные) {

              если (данные>0)
          {
            $( ".woocommerce-variation-price" ).append( "<p>Вы сохраняете: "+data+"%</p>");
          }
        		         },
        		        ошибка: функция (errorThrown) {
           			        console.log(сброшена ошибка);
        		         }
    		        });                       
          }
   });
});
</скрипт>

Вам нужно заменить <your_woocommerce_site_url> базовым URL-адресом вашего веб-сайта WooCommerce.

Следующий фрагмент кода, который вы добавите в файл functions.php, содержит функцию ts_calc_percentage_saved , которая извлекает обычную цену и цену продажи продукта на основе идентификатора варианта, вычисляет процент и возвращает то же самое в функцию ajax в нижнем колонтитуле. php-файл.

 // Вот как вы подключаете функцию, вызываемую ajax, в WordPress
add_action("wp_ajax_ts_calc_percentage_saved", "ts_calc_percentage_saved");

//Функция ниже вызывается через скрипт ajax в footer.php
функция ts_calc_percentage_saved(){
          // $_REQUEST содержит все данные, отправленные через ajax
   		если ( isset($_REQUEST)) {
       		        $процент=0;
     			$variation_id = sanitize_text_field($_REQUEST['vari_id']);
                        $variable_product = wc_get_product($variation_id);
                        $regular_price = $variable_product->get_regular_price();
                        $sale_price = $variable_product->get_sale_price();
     
       			если( !пусто($sale_price)) {
  
                             $amount_saved = $regular_price - $sale_price;
                             $currency_symbol = get_woocommerce_currency_symbol();

                             $percentage = round((($regular_price - $sale_price) / $regular_price) * 100);
     			}
     			умереть ($ процент);
   		}
}

Функция sanitize_text_field() — это функция WordPress, которая помогает очищать входные данные, которые мы получаем от клиентской стороны.

Таким образом, теперь вы увидите «Вы экономите» вместе с процентом сэкономленной суммы под ценой варианта.

Вы можете стилизовать это, как хотите, в самой функции ajax, добавив HTML и CSS в функцию добавления в этой строке:

$( ".woocommerce-variation-price").append( "<p>Вы сохраняете: "+data+"%</p>");

Отображать % экономии под названием продукта, а не над кнопкой «Добавить в корзину» для переменных продуктов.

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

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

 //Нижеприведенный код предназначен для смещения цены

функция ts_shuffle_variable_product_elements(){
    если (is_product()) {
        глобальная $почта;
        $product = wc_get_product($post->ID);
        если ($product->is_type('переменная') ) {
            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', 'ts_shuffle_variable_product_elements');

По сути, этот код удаляет элементы (включая заголовок) и переставляет их так, как вы хотите. В результате диапазон цен удаляется, а цена варианта отображается при выборе варианта вместе с текстом «Вы сохраняете» под ним, как показано на рисунке: