7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress

Tutorial WooCommerce para configurar opciones de productos

Scroll to top
Read Time: 12 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Cuando se trata de las compras en línea, es posible que un solo tipo de artículo no funcione bien para todo el mundo.

Una tienda online de productos de ropa ofrece un claro ejemplo de esto. Sin embargo, hay un sinnúmero de sitios de comercio electrónico que venden productos variables. Por ejemplo, una misma computadora portátil puede estar disponible con pantallas de diferentes tamaños o con distintas capacidades de almacenamiento.

Incluso si tienes un restaurante de comida para llevar, es posible que un cliente abandone su pedido si no puede añadir ingredientes adicionales a su pizza.

La buena noticia es que, si sabes cómo crear una tienda online con WooCommerce, tendrás a tu disposición un sistema integrado de atributos y variables. Al combinar estos elementos puedes ayudar a los clientes a encontrar el producto perfecto para ellos, ya sea una computadora portátil con una CPU de 10 núcleos o una pizza con extra queso. 

Atributos y variables de WooCommerce para productos: ¿Cuál es la diferencia?

El sistema de productos variables de una tienda WooCommerce consta de dos componentes: atributos y variables. Estos componentes están estrechamente relacionados, así que comencemos este tutorial WooCommerce aclarando las sutiles diferencias que existen entre ellos.

Los atributos hacen referencia a las características clave de un producto, como su tamaño, material o color. Por ejemplo, un par de zapatillas deportivas puede tener el atributo "talla 5" o "negro".

Para ayudar a los compradores a tomar decisiones más informadas, una tienda WooCommerce muestra estos atributos como parte de sus páginas de productos. El cliente no puede interactuar con estos atributos ni modificarlos de ninguna manera.

Si un producto no es variable, entonces ahí es donde termina la historia. Sin embargo, si quieres dar opciones a tus clientes, tendrás que aprender cómo usar WooCommerce para crear algunas variables.

En nuestro ejemplo anterior con las zapatillas deportivas, listamos "negro" como un atributo. Sin embargo, si tienes almacenado este producto en diferentes colores, entonces "color" se convierte en el atributo y "negro", "gris" y "blanco" son las variables.

Si bien existe cierta superposición entre las variables y los atributos, recuerda que los atributos informan, mientras que las variables representan opciones.

También puedes utilizar los atributos como un componente independiente. Sin embargo, siempre debes usar las variables en combinación con los atributos. 

Opciones de productos de una tienda WooCommerce: En todo el sitio o específicas de un producto

Supongamos que sabes cómo crear una tienda online con WooCommerce, que tu tienda está lista y ya le has agregado algunos productos.

Al tener listos estos elementos, es hora de crear algunos atributos y variables. A menudo usarás las mismas opciones para múltiples productos. Por ejemplo, si tienes una tienda WooCommerce de ropa, es posible que uses la talla, el color y el tipo de material para todos tus artículos.

En WooCommerce tienes la posibilidad de crear y asignar estos atributos a cada producto. Sin embargo, este es un proceso que requiere mucho tiempo, especialmente si tu sitio cuenta con muchos bienes o servicios diferentes.

Por esta razón, normalmente tiene sentido aprender cómo usar WooCommerce para crear todos tus atributos y variables haciendo uso de la sección Productos > Atributos. Luego puedes analizar cada producto en cuestión y asignar los atributos y variables relevantes.

Incluso si has configurado estas opciones en tu tienda WooCommerce para productos de todo el sitio, es posible que ocasionalmente necesites crear atributos y variables específicos para diferentes artículos. Para asegurarnos de que estés preparado en cualquier situación, en este tutorial WooCommerce te mostraré cómo establecer opciones de productos para todo el sitio. Luego veremos cómo usar WooCommerce para crear variables y atributos únicos para un producto específico.

1. Establece opciones de productos para todo el sitio

Dado que este es el método más común, comencemos aprendiendo cómo usar WooCommerce para establecer opciones de productos en todo el sitio.

Paso 1

Crea un atributo de producto

Muchas tiendas online de productos creadas con WooCommerce utilizan las mismas variables para múltiples artículos, o incluso para todas sus existencias. Por ejemplo, si tienes una empresa de ropa, entonces podrías ofrecer todos tus productos en talla Pequeña, Mediana, o Grande.

En este escenario, tiene sentido crear todos estos atributos y variables de antemano en tu tienda online con WooCommerce.

En el panel de administración de WordPress, ve a Productos > Atributos.

El menú de atributos de WooCommerce para productosEl menú de atributos de WooCommerce para productosEl menú de atributos de WooCommerce para productos

Asigna un nombre descriptivo a este atributo. Este aparecerá en el front-end de tu tienda online de productos. Por ejemplo, si ofreces tus artículos en diferentes colores, entonces podrías asignar el nombre Color a este atributo.

A continuación, asigna un slug a este atributo. Este no debe ser de más de 28 caracteres. Generalmente tiene sentido usar el nombre del atributo, pero tienes la libertad de crear cualquier slug que quieras.

Creación de un nuevo atributo de producto en WooCommerceCreación de un nuevo atributo de producto en WooCommerceCreación de un nuevo atributo de producto en WooCommerce

También tienes la opción de Habilitar archivos. Si marcas esta casilla de verificación, WooCommerce generará una página de archivo para todos los productos que tengan este atributo.

Para ver el archivo de un producto, añade el slug del atributo a tu nombre de dominio seguido por la variable. Por ejemplo, imagina que ejecutas www.mitienda.com y quieres ver todos los productos que tengan el atributo color y la variable azul. En este escenario deberías dirigirte a www.mitienda.com/color/azul.

Los archivos de productos pueden ser útiles para la gestión del inventario, ya que son una forma fácil de ver todos los artículos que tengan una característica específica. Alternativamente, puedes incorporar estos archivos en la funcionalidad de búsqueda o en los menús de tu tienda online de productos.

Hay más opciones para explorar, pero esto es todo lo que necesitas para crear un atributo básico. Cuando estés satisfecho con la información que hayas escrito, haz clic en Añadir atributo.

Paso 2

Crea tus variables de WooCommerce

Ahora necesitamos asignar algunas variables a este atributo. Primero haz clic en el enlace Configurar términos que acompaña al atributo. 

Enlace Configurar términos de una tienda WooCommerce para productos variablesEnlace Configurar términos de una tienda WooCommerce para productos variablesEnlace Configurar términos de una tienda WooCommerce para productos variables

Asigna un nombre y una URL a esta variable.

También es posible que quieras escribir una descripción opcional. Muchos temas para crear tiendas online con WooCommerce no muestran esta información de manera visible en sus páginas de productos. Si estás considerando usar descripciones de variables, siempre vale la pena que verifiques cómo aparecerá esta información en tu tienda, o incluso cuándo se muestra.

Configuración de variables para un atributo de producto en WooCommerceConfiguración de variables para un atributo de producto en WooCommerceConfiguración de variables para un atributo de producto en WooCommerce

Finalmente, para crear esta variable, haz clic en Añadir nuevo…

Ahora puedes comenzar de nuevo y repetir el proceso para crear todas las variables que quieras que tenga este atributo en tu tienda online de productos.

Paso 3

Agrega estos atributos y variables de WooCommerce a productos en tu tienda

Ahora es momento de ver cómo usar WooCommerce para asignar estos atributos y variables a tus productos. Comienza navegando al producto en cuestión y ábrelo para editarlo. Desplázate hasta la sección Datos del producto y abre el primer menú desplegable. 

Convierte un producto sencillo en un producto variable para tu tienda WooCommerceConvierte un producto sencillo en un producto variable para tu tienda WooCommerceConvierte un producto sencillo en un producto variable para tu tienda WooCommerce

Selecciona Producto variable. Ahora deberías tener acceso a algunos ajustes nuevos, incluyendo una pestaña Atributos. Haz clic en esta pestaña.

La pestaña Atributos de los datos de un productoLa pestaña Atributos de los datos de un productoLa pestaña Atributos de los datos de un producto

Ahí podrás ver todos los atributos disponibles. Localiza el atributo que quieras asignar a este producto y haz clic en él. 

Cómo usar WordPress para añadir un atributo a un productoCómo usar WordPress para añadir un atributo a un productoCómo usar WordPress para añadir un atributo a un producto

A continuación, haz clic para abrir el menú desplegable Valores. Este contiene todas las variables que hayas creado para este atributo. 

El menú desplegable Valores en los datos de un productoEl menú desplegable Valores en los datos de un productoEl menú desplegable Valores en los datos de un producto

Para añadir una variable a este producto, selecciónala en el menú desplegable. Puedes repetir este proceso para añadir múltiples variables a este elemento en tu tienda online con WooCommerce. 

Cómo agregar múltiples variables a un producto en tu tienda WooCommerceCómo agregar múltiples variables a un producto en tu tienda WooCommerceCómo agregar múltiples variables a un producto en tu tienda WooCommerce

Finalmente, selecciona los siguientes ajustes: Visible en la página del producto y Usada para variaciones.

Cuando estés satisfecho con los atributos y variables que has asignado a este producto, haz clic en Guardar atributos.

Paso 4

Configura tus variaciones

A veces, es posible que quieras ajustar la información de un producto en función de la variable seleccionada. Por ejemplo, existe la posibilidad de que en tu tienda WooCommerce ofrezcas la misma computadora portátil con pantallas de varios tamaños. Por lo general querrás cobrar más por la de 16 pulgadas en comparación con la de 14 pulgadas.

Alternativamente, quizá quieras ofrecer un color no muy popular a un precio con descuento, en un intento de deshacerte de las existencias no deseadas.

Por estas razones, en este paso de nuestro tutorial WooCommerce para productos variables aprenderás a configurar tus variaciones. Para empezar, haz clic en la pestaña Variaciones. Esta pantalla debería contener un solo menú desplegable, con la opción Añadir variación ya seleccionada.

El menú desplegable Añadir variaciónEl menú desplegable Añadir variaciónEl menú desplegable Añadir variación

Ahora haz clic en el botón Ir. Esto añade un menú desplegable que contiene todas las variables disponibles.

Cómo usar WordPress para añadir una variación a un productoCómo usar WordPress para añadir una variación a un productoCómo usar WordPress para añadir una variación a un producto

Es posible que no quieras utilizar todas estas variables en tu tienda WooCommerce. Por ejemplo, quizá estés usando el atributo Color, pero que actualmente solo tengas camisetas azules y negras en existencia en lugar del arcoíris completo. Si este es el caso, entonces haz clic en Añadir variación y escoge las variables que quieras utilizar con este producto en particular.

Una variación de producto expandida en la pestaña "Variaciones"Una variación de producto expandida en la pestaña "Variaciones"Una variación de producto expandida en la pestaña "Variaciones"

Alternativamente, puedes añadir todas las variables disponibles abriendo el menú desplegable y seleccionando Crear variaciones a partir de todos los atributos.

Cómo usar WordPress para crear variaciones a partir de todos los atributosCómo usar WordPress para crear variaciones a partir de todos los atributosCómo usar WordPress para crear variaciones a partir de todos los atributos

A continuación debemos configurar cada una de estas variaciones. Este proceso puede incluir el establecimiento de valores de precio, peso, información de envío o dimensiones únicos.

Para empezar, simplemente haz clic para expandir la variable en cuestión. Ahora tendrás acceso a todo lo que necesitas para configurar dicha variable.

Cómo configurar una variación en tu tienda online de productosCómo configurar una variación en tu tienda online de productosCómo configurar una variación en tu tienda online de productos

Comienza de nuevo y repite para cada variable. Cuando estés listo para publicar tus productos en tu tienda WooCommerce, haz clic en Actualizar o Publicar, dependiendo de si estás trabajando con una lista de productos en tiempo real.

Ahora, cada vez que un cliente visite esta lista, ¡este tendrá algunas opciones adicionales!

Un producto variable en una tienda WooCommerceUn producto variable en una tienda WooCommerceUn producto variable en una tienda WooCommerce

A medida que el cliente explore estas variaciones, la información del producto se actualizará automáticamente en función de su selección.

2. Crea opciones específicas de un producto

Hasta ahora, has aprendido cómo crear una tienda online con WooCommerce para productos variables y cómo establecer opciones de productos para todo el sitio, pero, en ocasiones, es posible que necesites crear opciones únicas para un producto en particular. En este escenario, puedes crear estos atributos y variables directamente desde la lista del producto.

Ten en cuenta que las opciones que generes con este método no aparecerán en el menú Productos > Atributos. Tampoco podrás asignar estos atributos y variables a ningún otro artículo de WooCommerce. Si sospechas que podrías necesitar reutilizar estas opciones, siempre es mejor crearlas en la sección Productos > Atributos

Paso 1

Crea tus atributos y variables

Así que ya has considerado los pros y los contras y has decidido que necesitas algunas opciones específicas de productos. El primer paso es crear estos atributos y variables.

Navega hasta el producto en cuestión y ábrelo para editarlo. Desplázate hasta la sección Datos del producto, abre el primer menú desplegable y selecciona Producto variable.

A continuación abre el segundo menú desplegable, selecciona Atributo de producto personalizado y haz clic en Añadir.

Cómo crear variables y atributos específicos de productosCómo crear variables y atributos específicos de productosCómo crear variables y atributos específicos de productos

En la siguiente sección, asigna un título descriptivo a este atributo. Ahora puedes añadir todas las variables de este atributo, asegurándote de separar cada variable con el carácter de barra vertical.

Cómo agregar múltiples valores al mismo atributo de WooCommerceCómo agregar múltiples valores al mismo atributo de WooCommerceCómo agregar múltiples valores al mismo atributo de WooCommerce

Marca las siguientes casillas de verificación: Visible en la página del producto y Usada para variaciones.

Una vez que estés satisfecho con la información que escribiste, haz clic en Guardar atributos.

Paso 2

Crea tus variaciones específicas de producto

El siguiente paso es asignar tus nuevos atributos y variables al producto en cuestión. También tendremos que configurar estas diferentes variaciones.

Selecciona la pestaña Variables. Para aplicar todas las variables que acabas de crear, abre el menú desplegable Añadir variación. A continuación, selecciona Crear variaciones para todos los atributos > Ir.

Cómo crear variaciones específicas de producto para todos los atributosCómo crear variaciones específicas de producto para todos los atributosCómo crear variaciones específicas de producto para todos los atributos

Luego haz clic para expandir cada una de estas variables y especificar cualquier configuración única que quieras utilizar en tu tienda online de productos. Por ejemplo, puedes crear precios diferentes o cambiar los métodos de envío que están disponibles para cada variación.  

Asigna configuraciones únicas a cada variación de WooCommerceAsigna configuraciones únicas a cada variación de WooCommerceAsigna configuraciones únicas a cada variación de WooCommerce

Una vez que estés satisfecho con la información que has escrito, haz clic en el botón Guardar cambios. Ahora puedes Actualizar o Publicar esta página como una nueva lista, según sea necesario.

De ahora en adelante, cada vez que un cliente vea esta lista tendrá acceso a algunas variables únicas que no aparecen en ningún otro lugar de tu sitio.

3. Cómo usar WooCommerce para añadir aún más opciones de productos

Tal y como es, WooCommerce tiene todo lo que necesitas para crear muchas variaciones diferentes de productos. Sin embargo, cuando se trata de WordPress hay un plugin para todo, ¡y las opciones de WooCommerce para productos no son la excepción!

Si quieres aprender cómo crear una tienda online con WooCommerce, pero te sientes limitado por su sistema integrado de variables y atributos, entonces quizá quieras echar un vistazo a Extra Product Options. Este plugin gratuito promete ayudarte a crear páginas de productos más ricas en funciones al agregar campos personalizados, selectores de color, menús desplegables y casillas de verificación a tus listados.

Puede utilizar estos elementos para crear opciones únicas para tus productos. Por ejemplo, un selector de color podría dar a los compradores plena libertad para elegir su tono favorito: 

Opciones de producto adicionales creadas con el plugin Extra Product OptionsOpciones de producto adicionales creadas con el plugin Extra Product OptionsOpciones de producto adicionales creadas con el plugin Extra Product Options

Alternativamente, puedes usar casillas de verificación para ofrecer un servicio opcional de envoltura de regalos: 

Una opción de "Envoltura de regalo", creada usando un plugin de tercerosUna opción de "Envoltura de regalo", creada usando un plugin de tercerosUna opción de "Envoltura de regalo", creada usando un plugin de terceros

Si te preguntas cómo crear una tienda online que ofrezca una experiencia verdaderamente personalizada, puedes hacer uso de un campo de texto para recopilar información del cliente. Luego, puedes usar esta información para mostrar un mensaje que puedes agregar a una tarjeta de regalo adjunta:

Una opción de "Tarjeta de regalo" creada usando el plugin Extra Product OptionsUna opción de "Tarjeta de regalo" creada usando el plugin Extra Product OptionsUna opción de "Tarjeta de regalo" creada usando el plugin Extra Product Options

Después de instalar y activar este plugin, navega a Productos > Agregar una opción de producto adicional. Luego haz clic en Añadir nueva sección.

Las configuraciones del plugin Extra Product OptionsLas configuraciones del plugin Extra Product OptionsLas configuraciones del plugin Extra Product Options

Ahora puede crear un campo personalizado siguiendo las instrucciones en pantalla. Como parte de este proceso, puedes especificar los productos o categorías en donde quieras mostrar estas opciones. 

Configura las reglas de visualización del pluginConfigura las reglas de visualización del pluginConfigura las reglas de visualización del plugin

Al experimentar con este plugin, puedes crear algunas opciones de productos verdaderamente únicas. Esto incluye muchas configuraciones que WooCommerce no admite de forma predeterminada. 

Conclusión 

La vida sería aburrida si todos fueran iguales, ¡y quizá quieras extender esa filosofía a tu tienda online de productos!

En este tutorial WooCommerce, aprendiste cómo crear una tienda online para ofrecer productos variables, adaptables e incluso personalizados. Al aprovechar las variables y atributos incorporados en WooCommerce, puede brindar más opciones a tus visitantes. Esto es ideal para ofrecer una experiencia única a tus clientes.

Dependiendo de tus productos, las variaciones podrían incluso ser imprescindibles. Después de todo, ¡es poco probable que una tienda de ropa que venda artículos en una sola talla conquiste a las masas! 

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.