Cómo crear muestras de variación de radio, etiqueta, color e imagen para atributos de productos variables de WooCommerce

La muestra de variación de productos de WooCommerce es una tecnología increíble introducida para impulsar las ventas y la conversión del sitio.

Pensando por qué las muestras son increíbles, ¿verdad?

Las muestras de variación de producto reemplazan el campo desplegable de selección de variación de producto predeterminado de WooCommerce y habilitan muestras de color, imagen, etiqueta y radio. En consecuencia, los clientes pueden seleccionar fácilmente la variación de producto deseada y agregarla al carrito de inmediato.

En este tutorial, le mostraré cómo puede habilitar muestras de variación de radio, etiqueta, color y foto en el producto variable de WooCommerce usando OceanWP Theme .

Supongo que tiene instalado el tema OceanWP. Para habilitar muestras en sus productos variables, primero instale el complemento Muestras de variación de WooCommerce .

Demostración en vivo | Descargar el complemento de muestras de variación de WooCommerce

Instalación de muestras de variación de WooCommerce

También puede descargar el complemento WooCommerce Variation Swatches desde el backend de su sitio. Seleccione Comenzar a instalar complementos en el aviso de administrador superior.

Instale y active las muestras de variación de WooCommerce y el complemento Ocean Extra .

Si no recibe el aviso principal para instalar el complemento de muestras, vaya a Complementos >> Agregar nuevo . Busque Muestras de variación de WooCommerce en el campo de búsqueda. Instale y active el complemento de muestras de variación de WooCommerce de Emran Ahmed .

Después de la instalación y activación exitosa del complemento, es hora de crear muestras de variación de radio, etiqueta, color e imagen en el tema OceanWP. Comencemos el proceso.

Configuración de muestras de variación de WooCommerce

Después de instalar el complemento Woocommerce Variation Swatches and Photos en su tema OceanWP. Es hora de configurar este complemento para sus productos variables. Hay dos formas de instalar este complemento.

1. Habilitar muestras de variación para productos variables existentes
2. Configurar muestras de variación Para nuevos productos variables

En este tutorial, voy a describir ambas formas.

Habilitar muestras de variación para productos variables existentes

Muchos de vosotros ya tenéis productos variables creados en vuestra tienda. Si desea convertir la selección desplegable de variación del producto en muestras de radio, etiqueta, color e imágenes, ha seguido este tutorial desde aquí. Verifique la siguiente captura de pantalla. El menú desplegable de selección de variación predeterminado actualmente se parece a la siguiente captura de pantalla en su sitio. En los próximos pasos, le mostraré cómo convertir el campo de selección de variación en hermosas muestras.

Antes

Después

Paso 01: Edición de atributos

Dirígete a Productos >> Atributos . Todos los atributos globales existentes se enumeran en la sección de atributos. Después de instalar el complemento WooCommerce Variation Swatches, agrega el campo Tipo . De forma predeterminada, mostraría seleccionar en Tipo de título.

Como WooCommerce Swatches Plugin viene con tres tipos de atributos: color, imagen, botón . Puede establecer cualquier tipo de atributo para su atributo deseado.

Para fines de demostración, se han creado los atributos Tejidos, Patrón y Etiqueta . Agregue el tipo de atributo Color para el atributo Patrón , el tipo de atributo Imagen para el atributo Telas y el tipo de atributo Botón para el atributo Etiqueta .

Para establecer el tipo de atributo de color en el atributo Patrón , haga clic en Editar .

Seleccione Tipo de color en el menú desplegable de tipos.

Volver Productos >> Atributos . Edite el atributo Fabrics como el atributo Pattern .

Vuelva a Productos >> Atributos de nuevo. Edite el atributo Etiqueta como el atributo Telas y Patrón .

Cuando se complete la selección del tipo de atributo, vuelva a la página de lista de atributos. La lista de atributos se vería como la siguiente imagen.

La interfaz del producto se vería como la siguiente captura de pantalla después de seleccionar los tipos de atributos para los atributos del producto.

Las variaciones para el atributo Etiqueta se ven bien, pero las variaciones para el atributo Patrón deben definir colores y las variaciones para el atributo Telas deben agregar imágenes.

Paso 02: Edición de variaciones

Para definir colores como variaciones dentro del atributo Pattern . Dirígete a Productos >> Atributos . Seleccione Configurar términos del atributo Patrones .

Después de seleccionar Configurar términos, aparece una lista de variaciones de atributos. Para Patrón, aquí se enumeran tres variaciones: azul , verde y rojo . Edite cada variación una por una para agregar color de variación.

Para una demostración, seleccione Editar enlace para la variación verde .

Desde el panel de edición de variaciones. Seleccione el color deseado de Colorpicker y actualice los cambios presionando el botón Actualizar .

Cuando todos los colores de las variaciones se actualizan con éxito, la interfaz se parece a la siguiente.

Después de actualizar las variaciones de los atributos del patrón, edite el atributo Telas seleccionando Configurar términos como atributo del patrón .

Después de presionar Configurar términos , aparece una lista de términos de Tejidos como un patrón. Edite cada variación para insertar la imagen de variaciones. Para fines de demostración, edite el enlace para el atributo Chambray .

Desde el panel de edición de variaciones. cargue la imagen de variación deseada de la imagen y actualice los cambios presionando el botón Actualizar .

Después de actualizar las imágenes para todas las variaciones, a la interfaz le gustaría la siguiente captura de pantalla.

Configurar muestras de variación para nuevos productos variables

Este es el paso para aquellos que no tienen ningún producto variable creado para su tienda. Primero, crearemos productos variables y habilitaremos muestras para ellos.

Paso 01: crear atributos y variaciones globales

Después de la instalación y activación exitosa del complemento, cree el atributo deseado globalmente desde Productos >> Atributos . Cree una variación de patrón , telas, longitud y tamaño , ingrese el título del atributo y el tipo de atributo correspondiente desde el menú desplegable Tipo.

Cuando el atributo de color, imagen y etiqueta Patrón , Tejidos , Etiqueta y Tamaño se crea correctamente, se crea una lista de atributos a la izquierda.

Después de crear atributos globales, agregue variaciones de atributos seleccionando Configurar términos. Para crear variaciones para los atributos de Patrón , seleccione Configurar enlaces de términos . Rellene el campo Nombre y seleccione los códigos de color. Cree variaciones de verde , azul y rojo para los atributos de color.

Aparece una lista de variaciones de atributos en la pantalla izquierda después de agregar variaciones para los atributos de Patrón .

Vaya a Productos >> Atributos nuevamente. Cree variaciones para los atributos de Fabrics , seleccione Configurar enlaces de términos de Fabrics . Complete el campo Nombre y agregue una imagen de variación de la biblioteca de medios o cárguela desde la computadora.

Cree variaciones de Chambray, Corduroy y Embossed para los atributos de la imagen y aparecerán a la izquierda.

Cree variaciones para los atributos de radio y etiqueta, como las variaciones de imagen y color.

Paso 02: mostrar muestras en la página de productos variables

Para habilitar las muestras en la página de productos variables. Ingrese al modo de edición del producto deseado, seleccione el producto variable de Datos del producto .

Dirígete a la pestaña Atributos . Haga clic en el menú desplegable Atributo de producto personalizado . Aquí aparecen todos los atributos creados globalmente. Agregue todos los atributos uno por uno.

Después de agregar todos los atributos, presione el botón Seleccionar todo de cada configuración de atributo para agregar todas sus variaciones disponibles a la vez. Después de agregar variaciones de atributos del producto, guarde la configuración seleccionando Guardar botones de atributos .

Ahora ve a la pestaña Variaciones . Haga clic en el menú desplegable Agregar variación . Aquí surgen dos opciones. El primero es Agregar variación y el segundo es Crear variaciones de todos los atributos.

Seleccione Crear variaciones de todos los atributos y presione Ir . Agregará todas las combinaciones de variaciones disponibles creadas para los atributos. Agregue el precio y la imagen de variación para la variación individual y guarde la configuración.

Conclusión

He intentado cubrir todos y cada uno de los pasos para instalar WooCommerce Variation Swatches Plugin en el tema OceanWP. Déjame saber en el cuadro de comentarios si necesitas más ayuda.