• 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 desplegable por botones en las variaciones de productos de WooCommerce

Cambiar desplegable por botones en las variaciones de productos de WooCommerce

Cambiar desplegable por botones en las variaciones de productos de WooCommerce

[ 26 mayo 2021 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Avanzado] [ ]

css js woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Botones selección variaciones WooCommerce

 

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:

Cambiar dropdown a radio buttons

 

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:

CSS para dar apariencia de botón

 

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.

 

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Guía visual de Hooks para StoreFront y WooCommerceGuía visual de Hooks para StoreFront y 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
  • Agregar datos a los  endpoints de la API de WooCommerceAgregar datos a los endpoints de la API de WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Vetoriano

    27 mayo, 2021

    Gracias por compartir.
    Me gusto mucho el tema.
    un saludo.

    • Jhon Marreros Guzmán

      27 mayo, 2021

      Que bueno :). Saludos.

  2. Rosa María Varela Giraldo

    8 junio, 2021

    Muy bueno el artículo!

  3. Laura

    24 mayo, 2022

    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

    • Jhon Marreros Guzmán

      25 mayo, 2022

      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

  4. Alexander

    26 mayo, 2022

    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

    • Jhon Marreros Guzmán

      27 mayo, 2022

      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/

      • Alexander

        27 mayo, 2022

        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/

        • Jhon Marreros Guzmán

          31 mayo, 2022

          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.

  5. jeff

    23 octubre, 2022

    Hola amigo Jhon, como podría agregar el código JS directamente con un plugin? lo copie pero no tiene efecto

    • Jhon Marreros Guzmán

      24 octubre, 2022

      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/

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

Instalar WordPress localmente con MAMP

Cambiar el logo en la versión móvil de tu sitio Web

Colores personalizados en la administración de WordPress

Cómo eliminar todos los productos de WooCommerce

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