Plugin para mejorar el estilo de las opciones variables de WooCommerce

Facebook Twitter Google+ Pinterest

En este tutorial vamos a hablar sobre un plugin llamado «Variation Swatches for WooCommerce». A la hora de gestionar los atributos y las variables de un producto en WooCommerce por defecto el sistema crea dentro de cada página de producto estos apartados con un diseño ambiguo y poco atractivo. El plugin al que hacemos mención hoy, permite cambiar el diseño visual de los atributos y variantes de tus productos. Sigue leyendo este instructivo si deseas mejorar el estilo de las opciones variables de WooCommerce.

¿Para qué se utilizan los atributos y las variables en WooCoomerce?

Un atributo permite definir una serie de características  con sus correspondientes parámetros dentro de un producto. Por ejemplo, si estás vendiendo zapatillas, los atributos podrían ser Talla y Color. Dentro de estos atributos deberías crear las variantes disponible para este producto. Cómo por ejemplo:

Talla: 38 | 39| 40     Color: rojo | negro | amarillo

OFERTA EXCLUSIVA, sólo para lectores del blog: obtén tu hosting y/o VPS con un 50% de descuento el primer mes. CUPÓN NETRICA19

Todos nuestros planes tienen soporte para tu aplicación (WordPress, Prestashop, Joomla, Magento). La migración es gratuita y como usamos discos SSD, tu web cargará más rápidamente que en tu actual empresa.

Pasos para instalar y configurar el plugin «Variation Swatches for WooCommerce«

1- Accede a tu panel de administración WordPress y localiza en tu menú lateral izquierdo la opción «Plugins». Una vez se abra el desplegable en la parte inferior, selecciona la opción «Añadir Nuevo».

Mejorar el estilo de las opciones variables de WooCommerce

2- Desde la caja de búsqueda situada en la parte superior derecha, escribe el nombre del plugin «Variation Swatches for WooCommerce»  y pulsa enter. Una vez aparezca en pantalla, pulsa sobre el botón «Instalar ahora».

Mejorar el estilo de las opciones variables de WooCommerce

2.1- Una vez la instalación del nuevo plugin haya finalizado, aparecerá en lugar del botón «Instalar ahora» un nuevo botón llamado «Activar«, Pulsa sobre el botón «Activar» para que este plugin comience a funcionar.

Mejorar el estilo de las opciones variables de WooCommerce

3- Una vez hayas instalado y activado el plugin, deberás acceder a los atributos para modificar su diseño. Si no tienes creado ningún atributo y no sabes realizar este paso, lee este instructivo: Cómo crear atributos y variables para los productos de WooCommerce

3.1 – El plugin instalado tuvo que haber generado dentro de la pestaña «Atributos» una sección llamada «Tipo». Si despliegas su contenido, verás las opciones  Color, Imagen o Botón. 

Mejorar el estilo de las opciones variables de WooCommerce

Si por ejemplo estás creando la variante Talla, el tipo que deberías seleccionar es Botón.

3.2- Una vez creado el atributo, accede a él para generar sus correspondientes variantes. Si estás creando las variantes de «color», observarás que el sistema te permite seleccionar desde una paleta el color deseado.

Mejorar el estilo de las opciones variables de WooCommerce

4- Por último, si tus producto ya son variables, simplemente accede a tu página web y visualiza que las opciones variables se vean correctamente. Si tus productos no son variables y deseas añadir configuraciones (Talla, Color, Modelo), sigue este instructivo: Cómo configurar un producto variable en woocommerce

Antes:

Mejorar el estilo de las opciones variables de WooCommerce

 

 

 

 

 

 

Después:

Mejorar el estilo de las opciones variables de WooCommerce

 

OFERTA EXCLUSIVA, sólo para lectores del blog: obtén tu hosting y/o VPS con un 50% de descuento el primer mes. CUPÓN NETRICA19

Todos nuestros planes tienen soporte para tu aplicación (WordPress, Prestashop, Joomla, Magento). La migración es gratuita y como usamos discos SSD, tu web cargará más rápidamente que en tu actual empresa.

 

Descubre cómo mejoramos la velocidad y protegemos las webs de nuestros clientes

NetricaGuard | NetricaSpeed