Mostrar un subtotal dinámico junto al botón «Add to cart» en WooCommerce

¿Te gustaría mejorar la experiencia de tus clientes mostrando un subtotal dinámico en la página de producto de WooCommerce, justo al lado del botón «Add to cart»? En este artículo te mostraremos cómo hacerlo de forma sencilla, compatible con productos simples y variables, utilizando un poco de PHP y JavaScript.

¿Qué lograremos?

Agregaremos un pequeño bloque debajo del selector de cantidad que mostrará el subtotal (precio unitario × cantidad seleccionada) y se actualizará automáticamente conforme el usuario modifique la cantidad.

Agregar el HTML para mostrar el subtotal

Usaremos un hook para insertar un contenedor que muestre el subtotal. Añade este fragmento al archivo functions.phpde tu tema hijo o en un plugin personalizado:

<?php
add_action( 'woocommerce_after_add_to_cart_quantity', 'addSubtotalDisplay' );

function addSubtotalDisplay() {
    echo '<p id="productSubtotal" style="margin-top:10px; font-weight:bold;"></p>';
}

Agregar el JavaScript que actualiza el subtotal

Ahora añadimos el script que calculará y mostrará el subtotal cada vez que el cliente cambie la cantidad. WooCommerce ya imprime el precio unitario en la página, así que podemos capturarlo fácilmente.

<?php
add_action( 'wp_footer', 'addSubtotalScript' );

function addSubtotalScript() {
    if ( ! is_product() ) {
        return;
    }
    ?>
    <script>
        (function($){
            function updateSubtotalDisplay() {
                var quantityInput   = $('form.cart').find('input.qty');
                var priceElement    = $('.woocommerce-Price-amount').first();
                var subtotalElement = $('#productSubtotal');

                if ( priceElement.length === 0 || quantityInput.length === 0 || subtotalElement.length === 0 ) {
                    return;
                }

                var priceText  = priceElement.text().replace(/[^0-9.,]/g, '').replace(',', '.');
                var unitPrice  = parseFloat(priceText);
                var quantity   = parseInt(quantityInput.val());
                var subtotal   = (unitPrice * quantity).toFixed(2);

                var currencySymbol = priceElement.text().replace(/[0-9.,]/g, '').trim();

                subtotalElement.text('Subtotal: ' + currencySymbol + subtotal);
            }

            $(document).ready(function(){
                updateSubtotalDisplay();

                $('form.cart').on('change input', 'input.qty', function(){
                    updateSubtotalDisplay();
                });

                $('form.variations_form').on('woocommerce_variation_has_changed', function(){
                    setTimeout(updateSubtotalDisplay, 100); // Esperar a que WooCommerce actualice el precio
                });
            });
        })(jQuery);
    </script>
    <?php
}

¿Cómo funciona?

• El HTML se coloca justo debajo del selector de cantidad.
• El script toma el primer precio visible (.woocommerce-Price-amount), lo limpia para extraer el valor numérico, y luego lo multiplica por la cantidad seleccionada.
• Para productos variables, WooCommerce actualiza el precio mediante AJAX. Por eso usamos el evento woocommerce_variation_has_changed para volver a calcular el subtotal si se cambia la variación.

Con unos cuantos ajustes en PHP y JavaScript, puedes mejorar significativamente la experiencia del usuario en tu tienda WooCommerce. Mostrar un subtotal dinámico es una forma sencilla pero poderosa de aportar claridad y confianza al proceso de compra.

¿Te gustaría más tips como este? ¡Déjamelo saber y preparamos más guías prácticas para tu tienda WooCommerce!