Actualizar precio de manera dinámica en el single product

Con este bloque de código podremos agregar un espacio en donde podemos mostrar el precio total del producto dependiendo de la cantidad agregada y todo desde la pagina detalle del producto o single product.

REVISA EL GIF

No olvides que este bloque de código va en el archivo functions.php o utilizando el plugin de Code Snippets.

<?php add_action( 'woocommerce_single_product_summary', 'marcode_total_product_price_single_product', 31 );
function marcode_total_product_price_single_product() {
    // 1- Obtenemos variables globales
    global $woocommerce, $product;

    // 2- Hacemos un pequeño div en donde mostraremos el resultado
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Product Total:','woocommerce'),'<span class="price">'.get_woocommerce_currency_symbol().$product->get_price().'</span>');
    ?>
<!--   3- Abrimos un script para nuestras funciones JS -->
    <script>
        jQuery(function($){

            // 4- Obtenemos el precio del producto y la moneda
            var price = <?php echo $product->get_price(); ?>,
                currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

            // 5- Creamos un evento donde revisaremos si la cantidad cambia ejecute una funcion
            $('[name=quantity]').change(function(){

                // 6- Evaluamos nuestro valor de cantidad
                if (!(this.value < 1)) {

                    // 7- Declaramos una variable donde tendremos (el precio de nuestro producto)*(la cantidad obtenida del campo quantity)
                    var product_total = parseFloat(price * this.value);
                    // 8- Mostramos nuestro resultado en nuestro div. (El div que creamos al inicio)
                    $('#product_total_price .price').html( currency + product_total.toFixed(2));

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

Deja un comentario

Share This