En este post te voy a mostrar cómo puedes hacer que se muestren las diferentes variaciones de los productos (atributos) cuando el usuario esta visualizando la página de tienda o las categorías de la tienda y está utilizando Woocommerce.
Por ejemplo, supongamos que tenemos una serie de productos tipo camiseta de varios colores y queremos que en la página de tienda y en la categoría de camisetas cuando se están listando los productos que éstos muestren los diferentes colores en los que están disponibles las camisetas.
También podremos decidir si cuando el cliente hace clic en un atributo del producto (estando en una página de categoría o la página de tienda) queremos que el navegador lo lleve directamente a la ficha de producto con el atributo ya seleccionado o queremos que simplemente cambie la imagen asociada al producto y muestre el atributo seleccionado (por ejemplo otro color)
También te mostraré cómo hacer que el selector de variaciones de Woocommerce que se muestra en las fichas de producto sea mucho más vistoso que el que viene por defecto en Woocommerce.
¿Cómo lo vamos a hacer?
Con las opciones por defecto de Woocommerce NO es posible.
Utilizaremos el plugin Woocommerce Attribute Swatches de IconicWp
QUIERO EL PLUGIN
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE: CÓMO MOSTRAR ATRIBUTOS-COMBINACIONES EN CATEGORÍAS Y TIENDA CON WOOCOMMERCE
- 1.- Plugin Woocommerce Attribute Swatches de Iconic WP
- 2.- Configuración de atributos y mostrarlos en tienda y categorías de Woocommerce
- 3.- Mostrar selectores de variaciones más vistosos
- 4.- Vídeo configuración plugin para mejorar el diseño del selector de variaciones y mostrarlo en las páginas de categorías y tienda con Woocommerce
1.- Plugin Woocommerce Attribute Swatches de Iconic WP
Para implementar la funcionalidad para que se muestren los atributos en los listados de productos en las páginas de categorías y de tienda usaremos le plugin Woocommerce Attribute Swatches.
El plugin también servirá para crear una visualización más bonita del selector de atributos en la ficha de producto.
El plugin tiene un precio en el momento de escribir este post de 79$ y sirve para un solo sitio web. Aunque puedes pagar más y que te sirva para más sitios web.
QUIERO EL PLUGIN
2.- Configuración de atributos y mostrarlos en tienda y categorías de Woocommerce
Vamos a verlo con un ejemplo práctico.
En primer lugar habrá que instalar el plugin.
Para crear productos con variaciones o combinaciones es necesario en primer lugar crear el o los atributos.
Para crear atributos has de ir en la administración de WordPress a: “Productos > atributos”
Ahora dependiendo de tu caso concreto puedes crear el atributo “Color” para posteriormente generar las variaciones de productos que usen ese atributo o si ya tienes creado el atributo “Color” puedes modificar su configuración usando las opciones del plugin.
Vamos a suponer este segundo caso ya que es el más habitual, pero prácticamente sería lo mismo si creamos el atributo desde cero.
Para editar el atributo, acerca el ratón al nombre de dicho atributo y haz clic en el enlace: “Editar”
Ahora, en el selector: “Swatch Type” selecciona el tipo de selector que quieres usar. En este ejemplo que vamos a usar un atributo color debes elegir: “Colour Swatch” para que salgan los círculos con el atributo color (También, si quieres, puedes modificar el nombre del atributo -> modifica la etiqueta «Nombre» (no la etiqueta slug))
Ahora te aparecerán una serie de opciones de configuración, entre las que destaco:
i.- Swatch Shape: aquí puedes elegir si en el selector de atributos aparecen los colores en circulitos (Round) o cuadrados (Square)
ii.- Swatch size: tamaño en píxeles de los circulitos o cuadrados anteriores.
iii.- Show swatch in Catalog: esta es la opción por la que estamos aquí. Debes ponerla en “YES” para que este selector de atributos se muestre en los listados de productos de las páginas de categorías y página de tienda.
iv.- Catalog Swatch Method: con este selector podrás elegir que sucede cuando en una página de categorías o en la página de tienda un usuario hace clic en un color de este selector. Puedes hacer que el navegador dirija al usuario a la ficha de producto con el color elegido seleccionado (Link to product) o puedes hacer que cambie la imagen del producto a la correspondiente a dicho color (Change Product Image). Para esto último, deben estar configuradas las diferentes imágenes a los diferentes colores, cosa que se hace desde la página de edición del producto.
Finalmente haz clic en “Guardar”
Ahora has de establecer los colores asociados a cada valor.
Para ello ve a: “Productos > atributos”
En la tabla donde aparece el atributo haz clic en “Configurar términos”
Ahora acerca el ratón a uno de los colores y haz clic en: “Editar”.
Donde dice: “Colour Swatch” haz clic en el botón: “selecciona un color”, elige el color apropiado y después dale al botón “Actualizar” para guardar los cambios.
Haz lo mismo con el resto de colores.
Ahora ve a una categoría donde tengas productos que utilicen dicho atributo color y verás como se muestran los diferentes colores del atributo bajo la imagen del producto. Lo mismo sucederá en la página “Tienda” de Woocommerce.
3.- Mostrar selectores de variaciones más vistosos
Realizada la configuración anterior verás también que el selector de variaciones de color que aparece en la correspondiente ficha de producto ha mejorado mucho visualmente.
Existen otros formatos aparte de los circulitos o cuadraditos para colores. Otros formatos más indicados cuando los atributos no son colores sino tallas y otro tipo.
Cuando vas a crear un nuevo atributo (o editarlo), verás que en la opción: “Swatch Type” tienes varias opciones:
- i.- Image swatch: opción que sirve para mostrar una imagen asociada a cada valor del atributo. Por ejemplo, se suele usar para texturas (con imagen de la textura)
- ii.-Colour swatch: el que hemos usado en el ejemplo, indicado para colores.
- iii.- Text swatch: indicado para poner texto en los valores. Por ejemplo, tallas: L,S,M
- iv.- Radio button: botón de radio o radio button.
Aquí tienes un ejemplo del “Text Swatch”
En cuanto a como se establece la selección de un valor de un atributo tienes 2 opciones. Para ello has de ir a: “Woocommerce > attribute swatches > pestaña “Style””
En la opción “Selected type” tienes dos opciones:
- Border: cuando el usuario selecciona un valor de atributo se marca perimetralmente destacando el borde
- Tick: cuando el usuario selecciona un valor de atributo se marca con un “v”
4.- Vídeo configuración plugin para mejorar el diseño del selector de variaciones y mostrarlo en las páginas de categorías y tienda con Woocommerce
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
