• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Mover el precio de variaciones de producto en WooCommerce

Mover el precio de variaciones de producto en WooCommerce

Mover el precio de variaciones de producto en WooCommerce

[ hace 10 meses ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

js mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

resultado mover precio producto variable WooCommerce

 

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.

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

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cambiar el rango de precios de productos variables en WooCommerceCambiar el rango de precios de productos variables en WooCommerce
  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
  • Modificar el precio de un producto por código en WooCommerceModificar el precio de un producto por código en WooCommerce
  • Agregar el campo de cantidad en la lista de productos de WooCommerceAgregar el campo de cantidad en la lista de productos de WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jesus

    24 abril, 2022

    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,

    • Jhon Marreros Guzmán

      27 abril, 2022

      Hola, es posible que sea algo de CSS, tendrías que enviar la url de tu sitio para verificar lo que comentas.

  2. Eriberto

    29 junio, 2022

    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/

    • Jhon Marreros Guzmán

      6 julio, 2022

      Hola Eriberto, he visto tu url pero no he notado que se vea alterado el precio en los productos relacionados

  3. gustavo

    13 noviembre, 2022

    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.

    • Jhon Marreros Guzmán

      15 noviembre, 2022

      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.

  4. Alan

    5 diciembre, 2022

    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?

    • Alan

      5 diciembre, 2022

      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.

      • Jhon Marreros Guzmán

        5 diciembre, 2022

        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 🙂

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Ocultar Widgets en dispositivos móviles

Extraer un sitio desde un multisite

Agregar login y logout en un menú de WordPress

¿Se puede evitar el efecto Lock-in en WordPress?

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados