Seleccionar página

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.

 

Mostrar atributos o variaciones de productos en las páginas de categorías y en la página de tienda de Woocommerce

 

 

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

 

 

Si quieres más sobre Woocommerce, tiendas online y SEO apúntate a mi academia online: -> cursotiendaonline.com
IR A MI ACADEMIA

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

 

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”

 

Editar atributo para mostrarlo en páginas de categorías y página de tienda Woocommerce

 

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))

 

Si quieres más sobre Woocommerce, tiendas online y SEO apúntate a mi academia online: -> cursotiendaonline.com
IR A MI ACADEMIA

 

Seleccionar "Colour Swatch" para atributos tipo color con Woocommerce

 

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.

 

Configuración del plugin para mostrar atributos en páginas de categorías con woocommerce y en 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”

 

Configurar atributos de colores (términos o valores)

 

Ahora acerca el ratón a uno de los colores y haz clic en: “Editar”.

 

Asignar colores a atributos en Woocommerce (colores en valores)

 

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.

 

Asignar color a atributo (valor de atributo color)

 

Haz lo mismo con el resto de colores.

 

Si quieres más sobre Woocommerce, tiendas online y SEO apúntate a mi academia online: -> cursotiendaonline.com
IR A MI ACADEMIA

 

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.

 

Selector de variaciones en Woocommerce mejorado

 

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”

Selector de variaciones con texto tipo tallas y otros con Woocommerce

 

 

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”

 

Si quieres más sobre Woocommerce, tiendas online y SEO apúntate a mi academia online: -> cursotiendaonline.com
IR A MI ACADEMIA

 

 

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

 

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO CLAVES PARA CREAR UNA TIENDA ONLINE DE ÉXITO (9 Clases)
2.- CURSO PRESTASHOP (56 Clases)
3.- CURSO WOOCOMMERCE (39 Clases)
4.- CURSO SEO TIENDAS ONLINE (12 Clases)
5.- CURSO PLANTILLA WAREHOUSE (26 Clases)
6.- CURSO PLANTILLA FLATSOME (36 Clases)
7.- MC: GOOGLE ANALYTICS PARA ECOMMERCE
8.- CURSO SUSCRIPTORES PRESTASHOP (7 Clases)
9.- CURSO BLOG PRESTASHOP (12 Clases)
10.- CURSO WORDPRESS (44 Clases)
11.- CURSO DIVI (33 Clases)
12.- CURSO ANALYTICS (10 Clases)
13.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

You have Successfully Subscribed!

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com