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.
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.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...
Hola,
Muchas gracias por tu ayuda, me funciono super bien. Solo un detalle que aún no resuelvo, en modo movil todo el bloque de los precios me aparece sobre escrito en la parte superior (top). Me puedes ayudar a corregir.
Mil gracias,
Hola, es posible que sea algo de CSS, tendrías que enviar la url de tu sitio para verificar lo que comentas.