• 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 / Cambiar la caja de cantidad a una lista desplegable en WooCommerce

Cambiar la caja de cantidad a una lista desplegable en WooCommerce

Cambiar la caja de cantidad a una lista desplegable en WooCommerce

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

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En un artículo anterior habíamos visto cómo agregar botones a la caja de cantidad, sin embargo en algunos casos es posible que quieras tener cantidades fijas, en este artículo veremos cómo realizar esto a través de una lista desplegable.

 

Resultado Final

Lo que al final queremos obtener es algo similar a lo que se muestra en la siguiente imagen:

Cantidad en lista desplegable resultado final

 

Código de overrides de template

Si bien es cierto los Hooks te permiten realizar muchas modificaciones, en algunos casos como este no hay hooks que te permitan cambiar la caja de cantidad por una lista, por lo que usaremos el overrides del tema de WooCommerce para hacer las modificaciones.

Sobrescriberemos el siguiente archivo:

/wp-content/plugins/woocommerce/templates/global/quantity-input.php

El cual será copiado en esta ruta

yourtheme/woocommerce/global/quantity-input.php.

Y haremos las modificaciones en la caja de texto. El siguiente código tiene la modificación completa del archivo:

Puedes descargar este archivo y luego copiarlo en la carpeta indicada anteriormente ya sea de tu tema, o tema hijo

En el código anterior:

  • Las modificaciones fueron realizadas a partir de la línea 24, todo dentro del contenedor quantity
  • Si no existe un valor máximo para la cantidad establecemos el valor máximo a 10
  • Luego formamos las opciones de la lista usando un bucle for
  • Si la cantidad esta establecida lo seleccionamos, esto para mostrar una cantidad en la pantalla de carrito por ejemplo
  • Al final agrupamos todas las opciones en la variable $select y la imprimimos en pantalla

 

Conclusión

Como has podido comprobar, puedes hacer modificaciones al control de cantidad de WooCommerce y hacer que se adapte a tus necesidades, en este caso hemos visto cómo realizar modificaciones a través de la sobrescritura de los archivos del tema.

 
¿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

  • Botones para el campo de cantidad en WooCommerceBotones para el campo de cantidad en WooCommerce
  • Atributos como parte de la descripción del producto en WooCommerceAtributos como parte de la descripción del producto en WooCommerce
  • Cambiar el rango de precios de productos variables en WooCommerceCambiar el rango de precios de productos variables en WooCommerce
  • Modificar el precio de un producto por código en WooCommerceModificar el precio de un producto por código en WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

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

Leer más y Extracto en WordPress

Configura el Tema Twenty Seventeen WordPress

Enviar datos desde PHP a Javascript en WordPress

Configura el theme Twenty Twenty de WordPress

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