Как вывести общую цену на странице товара в зависимости от количества выбранного товара в WooCommerce.

Изменение цены в зависимости от выбранного количества товара на странице товара в WooCommerce.

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

Такая опция даст возможность клиенту видеть общую сумму, которая в последующем отправиться в корзину.

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

require get_template_directory() . '/название папки/название_файла.php';

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

<?php
add_action( 'woocommerce_after_add_to_cart_button', 'webpro_product_price_recalculate' );
 
function webpro_product_price_recalculate() {
   global $product;
   echo '<div id="subtot" style="display:inline-block;">Total: <span></span></div>';
   $price = $product->get_price();
   $currency = get_woocommerce_currency_symbol();
   wc_enqueue_js( "      
      $('[name=quantity]').on('input change', function() { 
         var qty = $(this).val();
         var price = '" . esc_js( $price ) . "';
         var price_string = (price*qty).toFixed(2);
         $('#subtot > span').html('" . esc_js( $currency ) . "'+price_string);
      }).change();
   " );
}

Как видите, тут используется чистый JS.

Также есть решение и при использовании jQuery.

<?php
add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 );
function woocommerce_total_product_price() {
    global $woocommerce, $product;
    // let's setup our divs
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Product Total:','woocommerce'),'<span class="price">'.$product->get_price().'</span>');
    ?>
        <script>
            jQuery(function($){
                var price = <?php echo $product->get_price(); ?>,
                    currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

                $('[name=quantity]').change(function(){
                    if (!(this.value < 1)) {

                        var product_total = parseFloat(price * this.value);

                        $('#product_total_price .price').html( currency + product_total.toFixed(2));

                    }
                });
            });
        </script>
    <?php
}

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