• 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

[ 22 marzo 2022 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

js mejoras

¿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.

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

Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Evita que tu sitio sea cargado desde un iframe

Cómo usar imágenes SVG en WordPress

Mostrar lista de autores en WordPress

Configura el theme Twenty Twenty de WordPress

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