Mover el precio de variaciones de producto en WooCommerce

Para un producto con variaciones WooCommerce muestra el rango de precios en la parte superior, sin embargo el precio por variación lo muestra en la parte inferior, en este artículo veremos cómo mover el precio de la variación a la parte superior.

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

Código para mover el precio de un producto variable

Puedes usar el siguiente código, ten en cuenta que puedes cambiar las constantes: container_price_top y container_price_bottom, en caso sea necesario.

<?php // No copiar este línea
add_action( 'wp_footer', 'dcms_add_script_footer' );

function dcms_add_script_footer() {
    if ( ! is_product() ) return;
    ?>
        <script>
        jQuery(function ($) {

            $('.variations_form').on('woocommerce_variation_has_changed', function () {
                const container_price_top = 'p.price';
                const container_price_bottom = '.woocommerce-variation-price';

                $(container_price_top).empty();

                setTimeout(function(){
                    if ( $(container_price_bottom).is(":visible") ){
                        const content = $(container_price_bottom).html();
                        $(container_price_top).html(content);
                        $(container_price_bottom).hide();
                    }
                }, 500);
            });

        });
        </script>
    <?php
}

Puedes agregar el código anterior en el archivo functions.php de tu tema hijo, o usar algún plugin de snippets.

 En el código anterior:

  • Usamos el hook wp_footer para incluir un script sólo en la página de productos
  • En el código javascript, usamos el evento woocommerce_variation_has_changed definido en los archivos javascript de WooCommerce
  • Definimos dos constantes container_price_top será la selección del contenedor superior y container_price_bottom la del contenedor inferior, puedes cambiar esto en caso tu tema tenga otra estructura de etiquetas
  • De acuerdo a esto cada vez que haya un cambio en las variaciones el valor del contenedor inferior pasará al contenedor superior
  • Hay una función de setTimeout() para retrasar un poco la actualización ya que hay código de WooCommerce que tiene que ejecutarse antes en las etiquetas de precio

Conclusión

Como has podido comprobar, puedes mover el precio de productos variables de manera simple a través de código, y de esta forma mostrarlo siempre en la parte superior de la página de producto.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Fuente:  Decodecms.com