Suscríbete a DecodeCMS:
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.
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.
Artículos Relacionados
Valora este artículo : 
(3 votos, promedio: 5,00 de 5)
(3 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.
Hola me ayudo mucho pero me dio un error inesperadado en cada pagina de productos al fina de pagina tengo una seccion de productos relacionado y al parecer los cambios que sugen en el precio de ese producto al tera los demas productos relacionados.
puede ver en https://clavellina.cl/producto/chocolate-bitter-85-sin-azucar/
Hola Eriberto, he visto tu url pero no he notado que se vea alterado el precio en los productos relacionados
Buenas, gracias por el video. Lo malo, es que si tienes productos simples y tambien variables.. Los precios simples o mismo precio, no se visualiza. Solo visualiza los precios cuando es variable y diferentes.
Hola, efectivamente sólo esta planteado para mover productos variables, sin embargo para productos simples puedes seguir una lógica similar de moverlo con javascript.
Hola Buenas! Me a ahorrado mucho tiempo el código que has brindado en este foro, el único detalle que note es que tengo un producto variable con solo un «Precio» y solo opción de en este caso «Almacenamiento» y el «Color» que son varios. El precio no sube ya que creo que no esta detectando el precio. Si me podrias ayudar a resolverlo porfavor te lo agradecería demasiado 🙂
Al igual, me has ahorrado mucho tiempo y trabajo en mi sitio ¿Tienes algún lugar para donaciones?
Creo que no me di entender, lo que pasa es que cuando seleccionas las opciones del producto que te anexe el link el precio desaparece y ya estuve probando y al agregar otra opción de «Almacenamiento» funciona perfectamente pero cuando solamente es 1 el precio desaparece después de seleccionar las opciones.
Hola Alan, veo en tu sitio que se están generando errores javascript, puedes comprobarlo usando el inspector de código de tu navegador y luego ver el tab de consola. Tienes que asegurarte de corregir primero esos errores antes de usar código javascript de este artículo. El problema es que si hay errores previos javascript la ejecución de javascript se detiene y no es posible depurar.
Por otro lado para donaciones puedes entrar al video de YouTube, desplegar los … y verás la opción de gracias 🙂
Hola Jhon, el codigo funciona muy bien pero para productos variables, en la misma web tengo un producto simple y lo que hace es que al seleccionar el color esconde el valor y por mas que trato de hacer un condicional con el id del producto no funciona, te gardeceria mucho si me ayudaras con el condicional por id de producto.
Hola, ¿como colocas la condicional para excluir el producto?, si sigues con problemas podrías enviarme un mensaje a través del formulario de contacto: https://decodecms.com/contacto
Buenos días Jhon,
Muy útil el código, me funciona perfecto.
Sólo tengo un problema, por defecto tengo seleccionada ya una variación y lo que pasa es que al entrar aparece el rango y no el precio de la variación por defecto, hasta que se cambia.
¿Cómo se podría hacer para que la primera vez que entras ya detecta que hay una por defecto y en vez de mostrar el rango hasta cambiar, ya aparezca el precio de la por defecto?
Muchas gracias!
Hola, si no usas el código para mover el precio, si te funciona?
¡Muchas gracias por el código!
Funciona perfecto en variables con precio diferente. En cambio, cuando el producto cuenta con variantes del mismo precio, en mi caso el precio desaparece y no lo muestra ¿Sabrías decirme a qué es debido? ¡Mil gracias!