Existen muchos plugins que te permiten realizar esto, sin embargo en este artículo veremos cómo realizarlo a través de código, básicamente usaremos código javascript y CSS, agregados como parte del theme, para realizar estos cambios.
Resultado Final
Al final queremos obtener algo similar a lo que se muestra en la siguiente imagen:
Pasando a Radio Buttons
Primero pasaremos el desplegable a controles de selección de botones de radio, generamos el código javascript creando los controles necesarios en base a la información del desplegable con el siguiente código javascript:
En el código anterior:
- Tenemos la función create_options_buttons() que acepta como argumento el ID del desplegable
- La función elimina código anterior, crea un contenedor, oculta el desplegable y crea dinámicamente los radio buttons
- Se crea tanto los inputs con sus respectivos labels de referencia
- En la parte final del código hay un código para establecer los valores al valor inicial en caso de usar la opción de resetear de WooCommerce
Con esto obtendremos algo similar a la siguiente imagen:
Código CSS Final para dar aspecto de botón
El siguiente código usa las clases y estructura generada por el código javascript anterior.
.dcms-btns {
margin: 10px auto;
}
.dcms-btns input {
display: none;
}
.dcms-btns label {
cursor: pointer;
display: inline-block;
border: 1px solid #ccc;
border-radius: 10px;
color: grey;
padding: 3px 10px;
}
.dcms-btns input:checked + label {
background-color: grey;
color: white;
}
Luego de aplicar este código CSS verás algo similar a la siguiente imagen:
Conclusión
Como has podido comprobar puedes dar un aspecto diferentes a tus variaciones de WooCoommerce cambiando los desplegables que vienen por defecto a botones de selección, en ese artículo hemos visto cómo realizarlo a través de código.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
Gracias por compartir.
Me gusto mucho el tema.
un saludo.
Que bueno :). Saludos.
Muy bueno el artículo!
Hola!
Me gustaría saber si se puede incluir este código directamente en el archivo functions.php y no tener que enlazarlo a otro fichero js.
Si fuera posible, podrías poner el código?
Gracias
Hola, revisa el punto número 5 del siguiente artículo, puedes insertar Javascript usando un Hook: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/#Insertar_Javascript_desde_un_Hook_con_PHP
Muy buen artículo. Tengo un gran reto con una página web y no he podido resolverlo. Espero que me puedas dar una luz sobre el camino a seguir… tengo un producto con precios variables. Algo así: 1 producto – 3 productos – 6 prpductos- 12 productos…. el cliente quiere un botón input como opción para el precio normal de un artículo y un segundo input con una lista desplegable para las opciones 3, 6 y 12. Al seleccionar cualquiera de opciones se activara el input al que pertenece y se desactivarla el otro input con el precio normal… hasta ahora he logrado crear 2 atributos 1 para el precio normal y otro para las 3 opciones de precios, pero al seleccionar un precio este queda condicionado al seleccionar también el precio del otro atributo.. espero me hayas entendido y me puedas hechar una mano
Hola, sólo lo estas volviendo producto variable para cambiar el precio por atributo?, porque la otra opción es que tengas un desplegable que te cambie el precio simplemente sin necesidad de hacer variaciones. Evalúa por ejemplo el siguiente artículo: https://decodecms.com/modificar-el-precio-de-un-producto-por-codigo-en-woocommerce/
Hola, gracias por responder.. te cuento, el precio varia en funcion de la cantidad de productos y se aplica un descuento, por ejemplo: para 1 producto cuesta 100, para 3 productos tiene el 20% de descuento y costaria $240. el cliente quiere tener 2 campos de seleccion, cada uno de radio buttons.. en el primero iria el precio normal sin descuento (cuando activo este el otro button estaria en otro color).. para el segundo campo de seleccion iria una lista con las opciones: 3, 6 y 9.. (cuando activo este despliego la lista y selecciono un precio, se descativaria el de arriba de precio normal.)
Exactamente lo que el cliente quiere es esto:
https://pinkstork.com/collections/subscribe-and-save/products/total-prenatal
apenas y he logrado esto, pero no le gusto: https://yourenatural.com/vitaminas/preypostnatal/lose-oversized-shirt/
Hola, entiendo entonces que lo que buscas es que se parezca más en diseño ya que la funcionalidad ya la tienes. En este caso ten en cuenta que WooCommerce tiene una estructura definida, para las variaciones, si quieres cambiar esto tendrías que hacerlo por código personalizado posiblemente usando Javascript.
Hola amigo Jhon, como podría agregar el código JS directamente con un plugin? lo copie pero no tiene efecto
Hola, revisa el siguiente artículo en donde se revisa diferentes formas de agregar código javascript en WordPress: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/