[et_pb_section fb_built=»1″ _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»0px||||false|false» custom_padding=»0px||||false|false» global_colors_info=»{}»][et_pb_row _builder_version=»4.10.7″ _module_preset=»default» width=»100%» global_colors_info=»{}»][et_pb_column type=»4_4″ _builder_version=»4.9.4″ _module_preset=»default» global_colors_info=»{}»][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»0px||40px||false|false» global_colors_info=»{}»]
Seguimos con artículos centrados en Woocommerce. Después de explicar el artículo de Cómo agregar Filtros de productos a Woocommerce y lo bien que servía para filtrar por atributos. Nos quedó el bichito de ir más allá con los atributos. En éste caso vamos a centrarnos en cómo se presentan los atributos y sus opciones en los productos variables, (plugin variaciones woocommerce).
Verán, por defecto, Woocommerce presenta las opciones a elegir de cada atributo mediante selectores despegables. Lo cual está bien, pero podría ser mejor…
¿Cómo presentan sus variaciones los grandes ecommerce?, pues apuestan por la experiencia de usuario haciendo las opciones más visuales.
Hoy vamos a lograr eso cambiando los selectores despegables por muestras de color, imágenes y etiquetas personalizadas, que darán una cara completamente distinta a tus productos variables.
Pero, recordando que no solo los productos variables llevan atributos. Sino también los productos simples. Haremos que sus atributos que aparecen en la pestaña «Información adicional», aparezcan de la forma visual en la que los estamos configurando.
Acompáñame a descubrir cómo hacer todo eso!.
Pero antes, demos un vistazo a la herramienta plugin variaciones woocommerce que nos permitirá logralo:
[/et_pb_text][et_pb_text _builder_version=»4.9.10″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
La herramienta de hoy: El Plugin YITH Woocommerce Color and Label Variations (plugin variaciones woocommerce)
El plugin YITH Woocommerce Color and Label Variations es quizá una de las herramientas de la marca Yith más sencillas de manejar, como veremos más adelante.
Explicaremos cómo configurar paso a paso los tipos para los términos de las variaciones y exploraremos algunas opciones extra muy interesantes. Empecemos!
[/et_pb_text][et_pb_text _builder_version=»4.9.10″ _module_preset=»default» background_color=»#f2f2f2″ custom_padding=»25px|25px|25px|25px|true|true» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ box_shadow_spread=»-12px» global_colors_info=»{}»]
Descarga el Plugin para que lo pruebes tú mismo
Puedes descargar el plugin YITH Woocommerce Color and Label Variations desde la barra lateral de éste artículo (Si lo lees desde escritorio) o en la parte inferior de mismo (Si nos lees desde móviles), también puedes buscar ésta herramienta directamente en la barra de búsqueda de nuestro menú principal.
Recuerda que TODOS los botones de descarga se desbloquean cuando eres miembro del Club Guau. Únete a ésta comunidad para tener acceso a MÁS DE 1000 plugins y temas premium y sacar el máximo provecho a nuestros tutoriales.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_12_27-Happy-New-Smile-Shirt-–-My-Blog.jpg» title_text=»2021-07-15 20_12_27-Happy New Smile Shirt – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_10_25-Happy-New-Smile-Shirt-–-My-Blog.jpg» title_text=»2021-07-15 20_10_25-Happy New Smile Shirt – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Configurando Selectores de Color, Imagen y Etiqueta en Atributos (plugin variaciones woocommerce)
Una vez hayamos instalado el plugin YITH Woocommerce Color and Label Variations , nos aparecerán nuevas opciones en los atributos de producto.
Así que vamos a la sección de atributos desde el panel de WordPress para darle un vistazo.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_13_09-YITH-WooCommerce-Color-and-Label-Variations-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_13_09-YITH WooCommerce Color and Label Variations _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_signup provider=»mailerlite» mailerlite_list=»Guaupress|107802088″ last_name_field=»off» success_message=»¡Gracias por suscribirte!» title=»Suscríbete al Boletín!!» description=»
Conoce plugins nuevos suscribiéndote GRATIS a nuestro boletín. Nuestros artículos en tu bandeja de entrada!!
» _builder_version=»4.9.4″ _module_preset=»default» border_radii=»on|4px|4px|4px|4px» global_colors_info=»{}»][/et_pb_signup][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Desde la página de atributos podemos crear uno nuevo o editar los que ya hayamos creado.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_14_27-Atributos-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_14_27-Atributos _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Configurando el primer atributo: Selector de Color
Voy a empezar con el atributo «Color» que previamente había creado para un producto. Haciendo Click en «Editar» entraremos en su configuración.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_14_59-Atributos-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_14_59-Atributos _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.10″ _module_preset=»default» background_color=»#f2f2f2″ custom_padding=»25px|25px|25px|25px|true|true» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ box_shadow_spread=»-12px» global_colors_info=»{}»]
Descarga el Plugin para que lo pruebes tú mismo
Puedes descargar el plugin YITH Woocommerce Color and Label Variations desde la barra lateral de éste artículo (Si lo lees desde escritorio) o en la parte inferior de mismo (Si nos lees desde móviles), también puedes buscar ésta herramienta directamente en la barra de búsqueda de nuestro menú principal.
Recuerda que TODOS los botones de descarga se desbloquean cuando eres miembro del Club Guau. Únete a ésta comunidad para tener acceso a MÁS DE 1000 plugins y temas premium y sacar el máximo provecho a nuestros tutoriales.
[/et_pb_text][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
La Opción «Tipo»
Una vez dentro de la edición del atributo «Color», podemos ver nuevas opciones además de las que son habituales: La sección «Tipo» y «Orden de Clasificación Por Defecto».
En «tipo» podremos seleccionar entre las tres formas ue hay para mostrar las opciones del atributo.
Seleccionar: Es el modo de selección despegable que usa por defecto Woocommerce.
Selector de Color: Nos permite elegir un color que identifique a cada opción.
Imagen: Una miniatura para cada opción
Etiqueta: Un texto personalizado seleccionable para cada opción.
En ésta ocasión utilizaremos el del color para éste primer atributo, y más adelante el de etiqueta para las tallas. No armaremos uno con imagen, pero el procedimiento es el mismo.
Como dije, para éste caso, lo voy a dejar en «Selector de Color».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_15_34-Atributos-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_15_34-Atributos _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
En la parte de «orden por defecto» podemos elegir qué determinará el orden en que aparecen las opciones
Si será en base al Nombre, ID del producto, etc. Yo prefiero utilizar «Orden personalizado». Ésto significa que se guiará por el orden en que aparecen en la ventana de edición de los términos.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_22_21-Atributos-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_22_21-Atributos _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Desde la ventana de edición de los términos (que veremos más adelante), en la parte derecha se puede arrastrar y soltar cada uno de ellos para reordenarlos a nuestro gusto.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_23_54-Talla-del-producto-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_23_54-Talla del producto _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_signup provider=»mailerlite» mailerlite_list=»Guaupress|107802088″ last_name_field=»off» success_message=»¡Gracias por suscribirte!» title=»Suscríbete al Boletín!!» description=»
Conoce plugins nuevos suscribiéndote GRATIS a nuestro boletín. Nuestros artículos en tu bandeja de entrada!!
» _builder_version=»4.9.4″ _module_preset=»default» border_radii=»on|4px|4px|4px|4px» global_colors_info=»{}»][/et_pb_signup][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Configurando cada Término del Atributo de plugin variaciones woocommerce
Ya hemos elegido que el atributo «Color» sea del tipo»Selector de Color». Lo que toca ahora es configurar cada término para asignarle su color.
Para ello, regresamos a la página de atributos. Y en el atributo que estamos trabajando que es «Color», hacemos Click en «Configurar Términos».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_16_58-Atributos-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_16_58-Atributos _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Ahora, dentro de la ventana de edición de los términos, vemos que podemos tanto crear nuevos como editar los ya existentes. Voy a ir al primer término que es «Azul» y le voy a dar a «editar».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_18_20-Color-del-producto-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_18_20-Color del producto _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
En la edición del atributo «Azul», vamos a encontrar las secciones que normalmente aparecen aquí,como cambiar el título, etc. Vamos a centrarnos en las nuevas opciones que agrega el plugin. Las cuales son: Selector de Color y Tooltip.
En «selector de color» vamos a elegir el que represente al atributo con el que estamos tranajando. Para éste caso obviamente elegiré el azul.
Por otro lado, el Tooltip es el mensaje que describe el atributo, el cual aparece al pasar el ratón sobre éste.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_19_11-Editar-Color-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_19_11-Editar Color _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_19_28-Editar-Color-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_19_28-Editar Color _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»24px||24px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Aquí podemos ver de manera gráfica cómo aparece el Tooltip.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_25_27-Happy-New-Smile-Shirt-–-My-Blog.jpg» title_text=»2021-07-15 20_25_27-Happy New Smile Shirt – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.10.7″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Más de un color por atributo
Ésta es una opción que he visto en los grupos que se busca mucho, la de mostrar dos colores. Por ejemplo, si la prenda que estoy vendiendo no es solo azul, sino azul con amarillo. Puedo crear dentro del atributo «Color» el término «Azul-Amarillo», y cómo hicimos anteriormente le agregamos el color azul. Para agregar un color adicional vamos a hacer click al símbolo de más que aparece al lado del selector de color. Entonces nos aparecerá uno nuevo para elegir otro color. Si quieres encontrar el mejor plugin variaciones woocommerce lo encuentras aqui en guaupress.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_41_22-Editar-Color-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_41_22-Editar Color _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_41_40-Editar-Color-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_41_40-Editar Color _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Cuando configuramos dos colores, se verá de ésta forma:
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_41_58-Happy-New-Smile-Shirt-–-My-Blog.jpg» title_text=»2021-07-15 20_41_58-Happy New Smile Shirt – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Configurando los demás términos
De la misma forma que configuramos el Azul, podemos proceder a elegir el color de cada uno de los términos del atributo «Color».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_18_20-Color-del-producto-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_18_20-Color del producto _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
El atributo Material lo dejaré como está por defecto. Para que se muestre sus opciones simplemente como un selector despegable.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_19_58-Atributos-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_19_58-Atributos _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Atributo Talla: Usemos Etiquetas de Texto!
Lo primero que haremos es (como se hizo en el caso anterior) editar el atributo para ponerle el tipo etiqueta.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_20_20-Atributos-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_20_20-Atributos _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_21_46-Atributos-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_21_46-Atributos _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Otro punto importante a señalar es que si escribimos una descripción para los atributos, ésta se mostrará como en la imagen de abajo. Es algo opcional.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_29_22-Atributos-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_29_22-Atributos _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_30_09-Happy-New-Smile-Shirt-–-My-Blog.jpg» title_text=»2021-07-15 20_30_09-Happy New Smile Shirt – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Definiendo la Etiqueta del primer Término
Ahora, como ya se imaginarán, iremos a «configurar los términos».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_23_17-Atributos-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_23_17-Atributos _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Y empezaremos con el primer término de talla, que es «S».
Para ello, le doy click a «Editar».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_24_22-Talla-del-producto-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_24_22-Talla del producto _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Ahora, dentro de etiqueta ingresamos la palabra que queremos que aparezca al usario para que elija éste término. Le pondre una «S» y en Tooltip, que ya dijimos que es un mensaje que explica de qué trata el término, le pondré Small. Y listo! Guardamos cambios haciendo click al botón «Actualizar».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_24_37-Editar-Talla-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_24_37-Editar Talla _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Completamos éstos sencillos pasos que hemos visto para definir la etiqueta de los demás términos.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_26_11-Talla-del-producto-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_26_11-Talla del producto _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Ahora miren cómo ha cambiado visualmente las opciones de nuestro producto variable. Y eso que no hemos usado el tipo imagen!
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_26_27-Happy-New-Smile-Shirt-–-My-Blog.jpg» title_text=»2021-07-15 20_26_27-Happy New Smile Shirt – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_signup provider=»mailerlite» mailerlite_list=»Guaupress|107802088″ last_name_field=»off» success_message=»¡Gracias por suscribirte!» title=»Suscríbete al Boletín!!» description=»
Conoce plugins nuevos suscribiéndote GRATIS a nuestro boletín. Nuestros artículos en tu bandeja de entrada!!
» _builder_version=»4.9.4″ _module_preset=»default» border_radii=»on|4px|4px|4px|4px» global_colors_info=»{}»][/et_pb_signup][et_pb_text _builder_version=»4.10.7″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Algunas Configuraciones extra importantes para plugin variaciones woocommerce
Ya quedaron geniales nuestras variaciones (plugin variaciones woocommerce), pero demos una ojeada a qué más nos ofrece éste plugin. Vamos a su configuración desde la pestaña «Yith» en wordpress y elijiendo la subpestaña «Color and Label Variations».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_27_36-YITH-WooCommerce-Color-and-Label-Variations-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_27_36-YITH WooCommerce Color and Label Variations _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Opciones extra para el Tooltip de plugin variaciones woocommerce
Como ya vimos, el tooltip era una pequeña descripción del término del atributo que aparecía cuando le pasabas el cursor por encima. Desde las opciones de configuración podemos personalizarlo más.
Por ejemplo, cambiando su posición, la animación con la que aparece, el color de su texto, el color del fondo, o bien descativarlo para que no aparezca.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_25_27-Happy-New-Smile-Shirt-–-My-Blog.jpg» title_text=»2021-07-15 20_25_27-Happy New Smile Shirt – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_27_47-YITH-WooCommerce-Color-and-Label-Variations-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_27_47-YITH WooCommerce Color and Label Variations _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_28_23-YITH-WooCommerce-Color-and-Label-Variations-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_28_23-YITH WooCommerce Color and Label Variations _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Desactivando Descripción de atributo
También vimos que si le escribíamos una descripción al atributo, éste se mostraría debajo de las opciones. Como se ve en la siguiente imagen. Si deseamos, podemos desactivarlo para que no aparezca.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_28_47-YITH-WooCommerce-Color-and-Label-Variations-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_28_47-YITH WooCommerce Color and Label Variations _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_29_56-Happy-New-Smile-Shirt-–-My-Blog.jpg» title_text=»2021-07-15 20_29_56-Happy New Smile Shirt – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Formulario de Opciones en todas partes!
Con éstas opciones activas, se mostrará el formulario de ociones de las variaciones en las páginas de archivo y en las miniaturas. También desde aquí podemos elejir si aparecerá antes o después del botón de añadir al carrito.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_30_48-YITH-WooCommerce-Color-and-Label-Variations-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_30_48-YITH WooCommerce Color and Label Variations _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_32_41-Productos-–-My-Blog.jpg» title_text=»2021-07-15 20_32_41-Productos – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Mostrar los atributos que hemos configurado en la pestaña «Información adicional»
Al activar ésta opción se mostrarán los atributos y sus términos en la pestaña «Información adicional» que aparece en la página de producto individual, pero de la forma como las hemos configurado. Es decir, con las imágenes, colores o etiquetas personalizadas que hayamos definido.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_33_30-YITH-WooCommerce-Color-and-Label-Variations-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_33_30-YITH WooCommerce Color and Label Variations _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_34_05-Happy-New-Smile-Shirt-–-My-Blog.jpg» title_text=»2021-07-15 20_34_05-Happy New Smile Shirt – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Mostrar variaciones individuales en el Loop (plugin variaciones woocommerce)
En la pestaña «Variaciones», el plugin variaciones woocommerce nos da la opción para que cada variación del producto se muestre en las miniaturas o loop, por separado como si fueran productos individuales. Ésta opción claro está es opcional.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_34_25-YITH-WooCommerce-Color-and-Label-Variations-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-15 20_34_25-YITH WooCommerce Color and Label Variations _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.9″ _module_preset=»default» custom_margin=»40px||40px||true|false» global_colors_info=»{}»]
Como ven Guaumigos, fue realmente muy fácil lograr que las opciones de nuestros productos variables luzcan de una forma tan visual como lo presenta por ejemplo Aliexpress o Amazon.
Si te gsutó éste tutorial y quieres recibir más sobre funciones potentes para tu tienda online, no olvides sucribirte al boletín para recibir cada nuevo artículo totalmente gratis en tu bandeja de entrada. Encuentra plugin variaciones woocommerce en guaupress.
Además para descargar éste plugin utilizado en el tutorial junto a cientos más de plugins y temas premium únte hoy mismo al club Guau desde aquí.
Nos Leemos la próxima!.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-15-20_26_27-Happy-New-Smile-Shirt-–-My-Blog.jpg» title_text=»2021-07-15 20_26_27-Happy New Smile Shirt – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»40px||40px||true|false» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_signup provider=»mailerlite» mailerlite_list=»Guaupress|107802088″ last_name_field=»off» success_message=»¡Gracias por suscribirte!» title=»Suscríbete al Boletín!!» description=»
Conoce plugins nuevos suscribiéndote GRATIS a nuestro boletín. Nuestros artículos en tu bandeja de entrada!!
» _builder_version=»4.9.4″ _module_preset=»default» border_radii=»on|4px|4px|4px|4px» global_colors_info=»{}»][/et_pb_signup][/et_pb_column][/et_pb_row][/et_pb_section]
