Para pegar la pestaña de atributos en WooCommerce debes editar el producto, abrir la sección «Datos del producto», entrar en «Atributos» y añadir el atributo con sus valores correspondientes. Después, pulsa «Guardar atributos» y actualiza el producto.
Si quieres que los atributos se utilicen únicamente para filtros globales y no aparezcan como opciones visibles dentro del producto, debes desmarcar las casillas relacionadas con las variaciones. Si quieres que funcionen como variantes seleccionables, con inventario, precio o imágenes diferentes, debes marcar «Usado para variaciones» y configurar después la pestaña «Variaciones».
Qué son los atributos de producto en WooCommerce
Un atributo de producto es una característica técnica diferencial que puede tener un mismo producto. Ejemplos habituales de atributos serían los siguientes: Colores, Tallas, Materiales y Tipos de acabado.
Un ejemplo típico sería cuando hablamos de calzado, pues un mismo modelo de zapato podría tener los siguientes atributos: Tallas: Digamos, de la 37 a la 46, con distintas existencias de cada talla. Colores: Por ejemplo, negro y marrón, y con diferentes stock según el color y la talla. Materiales: Piel 100% o 50% piel - 50% poliéster, y en cada material distinto inventario según talla y color.
Las distintas combinaciones posibles pueden llegar a ser enormes, si tienes mucha variedad de atributos en tus categorías de productos.
En una tienda tipo vas a tener 2 grandes tipologías de atributos:
- Aplicables a varios productos: Por ejemplo, las tallas de calzado, que pueden aplicarse a cualquier zapato, si cubres todo el espectro al crearlas.
- Aplicables solo a un producto: Por ejemplo, tipos de acabado especial que solo son aplicables a un producto concreto.
Teniendo en cuenta esto deberías ya saber que, también, hay 2 maneras de crear atributos: Previamente a la creación de los productos, para que luego, al editar el producto, solo tengas que seleccionar qué atributos quieres aplicar para las variaciones de cada producto concreto. Mientras editas un producto, creando atributos específicos para cada producto en base a las variaciones necesarias del mismo.
Atributos globales y atributos específicos
Los atributos globales se crean desde «Productos > Atributos» y pueden reutilizarse en diferentes productos. Esta opción resulta útil cuando varias mercancías comparten características como color, talla, material o acabado.
En la pantalla de «Productos > Atributos» verás la lista de los ya creados, así como los campos para la creación rápida de atributos.
Los campos, y su explicación, son estos:
- Nombre: El nombre visible del atributo.
- Slug: Parte de la URL para el atributo, que se genera automáticamente.
- ¿Activamos el archivo? Si quieres poder crear páginas de listados de productos de ese atributo, para que los clientes puedan ver todos los productos, por ejemplo, de un mismo color o talla, sea cual sea su categoría de productos, activa esta casilla.
- Orden de clasificación por defecto: Puedes elegir entre Orden personalizado, Nombre, Nombre numérico e ID de término.
Estos son los campos que necesitas para crear el atributo, pero no has terminado, pues cuando termines de crear el atributo debes crear también los términos del atributo, o sea, sus posibles variaciones.
Por ejemplo, si creas el atributo color, luego tienes que crear los términos del atributo color, es decir, los colores disponibles: rojo, azul, etc.
Una vez creado aparecerá en la lista de atributos, pero sin términos aplicables, así que haremos clic en «Configurar términos» para crearlos.
En la siguiente pantalla solo hay que rellenar los campos de nombre y descripción, para cada término del atributo que queramos que esté disponible. Cuando hayas creado todos los términos, estos aparecerán en la lista de términos del atributo.
Cómo pegar un atributo a un producto
1. Abrir el listado de productos
Desde tu panel administrativo, adéntrate en el apartado Productos -> Productos.
Selecciona el producto que desees enlazar a dichos atributos.
2. Convertir el producto en variable
Dentro de su apartado, deberás ir a la sección “Información del producto”, desplegar la flecha localizada a su derecha, y marcar la opción “Producto variable”.
Ahora, tendrás el campo “Variaciones” que utilizarás más adelante.
3. Entrar en la pestaña de atributos
Accede a la sección atributos, despliega la flecha localizada en dicho apartado, selecciona el atributo que desees, y haz click en “Añadir”.
En “Valor(es)”, deberás escribir los valores correspondientes que identifiquen a dicha mercancía.
Ejemplo: Yo cree el atributo “color”, y dentro de dicho atributo, los valores “Rojo, Verde, Negro, Naranja” … Si el producto que estoy editando es de color Rojo, solo deberé asignar en valor(es), dicho color.
De esta manera, si aplicamos un filtro de color, el producto que contenga ese valor, aparecerá al pulsar sobre dicho filtro.
4. Guardar los atributos
Pulsaremos sobre “Guardar Atributos”.
Para finalizar, guardar los cambios y publica o actualiza el producto.
Cómo configurar los atributos para filtros globales
Si deseas utilizar los atributos de forma global, sin que aparezcan dentro de cada producto, deberás desmarcar las dos casillas.
En este caso, los atributos servirán para organizar y filtrar los productos sin convertirse en variantes visibles dentro de la ficha de producto.
Podrás utilizar dichas opciones, para crear filtros que no deseas que sean vistos dentro de cada producto, sino a nivel global dentro de tu tienda.
Ejemplo: Yo tengo marcado el atributo “Talla”, y del producto que estoy editando tengo solamente talla S, M y L. Bien, pues en valor(es) deberemos escribir esas 3 especificaciones, y después, marcar la casilla, usar para variaciones.
Para usar únicamente el atributo como filtro, la configuración debe diferenciarse de la anterior: no debes activar la opción «Usado para variaciones» ni la otra casilla disponible en el apartado del atributo.
Cómo usar los atributos como variaciones
Si deseas utilizar el atributo como una variante, deberás marcar la casilla, “Usado para variaciones”.
Esto significará, que aparecerá dicha característica dentro de cada producto, con su stock predeterminado si lo quisierais, precio diferente, etc.
Después, accede a la pestaña “Variaciones”, y en el apartado “Crear variaciones para todos los atributos”, pulsa en el botón “Ir”.
Automáticamente, aparecerán todos los atributos los cuales hayas marcado la casilla “Usar para variaciones”.
Dentro de cada uno, podrás asignar un precio diferente, una foto, etc.
Para asignarle un determinado stock, deberas marcar la casilla “Manejo de valores”. Aparecerá una sección instantáneamente.
Ejemplo: Yo tengo marcado el atributo “Talla”, y del producto que estoy editando tengo solamente talla S, M y L. Bien, pues en valor(es) deberemos escribir esas 3 especificaciones, y después, marcar la casilla, usar para variaciones.
Los productos variables permiten que el usuario seleccione una variación u otra mediante un menú desplegable.
También cambia el producto activo, y en cada momento el botón Añadir al carrito permitirá comprar la variedad seleccionada.
Ejemplo de configuración
| Elemento | Configuración |
|---|---|
| Atributo | Talla |
| Valores | S, M y L |
| Uso como variación | Usado para variaciones |
| Inventario | Manejo de valores |
| Datos adicionales | Precio diferente, una foto, etc. |
Cómo funcionan los términos de los atributos
Los atributos no son solamente etiquetas informativas. Son elementos seleccionables en los productos, que pueden influir en el inventario, incluso precio.
Las categorías y etiquetas son simplemente modos de vincular productos entre sí, para favorecer la organización e incluso jerarquía de productos de la tienda online, pero los atributos son algo más.
Cuando los atributos se configuran como variaciones, cada término puede asociarse con una combinación concreta del producto. Esto permite definir diferentes datos para cada opción.
Un mismo producto puede tener más de un atributo, por ejemplo talla y color, y cada combinación puede tener diferentes existencias.
En este caso seleccionar las variaciones según viene por defecto en WooCommerce puede ser un auténtico martirio para los clientes, puesto que ahora cuentan con múltiples menús desplegables.
Mostrar atributos en la pestaña Información adicional
La pestaña de información adicional de WooCommerce es una pestaña de la página de producto que muestra automáticamente el peso, las dimensiones y los atributos personalizados de tu producto.
Aparece solo cuando un producto tiene asignado al menos un atributo o detalle de envío, por lo que si ves una pestaña vacía, esa suele ser la razón.
Por defecto, todo producto de WooCommerce tiene 3 pestañas posibles:
- Descripción: Donde se muestra la descripción larga del producto.
- Información adicional: Donde se muestran los atributos del producto, si existen.
- Valoraciones: La sección de comentarios y valoraciones del producto, si están activas.
La pestaña de información adicional de WooCommerce muestra atributos del producto y detalles de envío de forma predeterminada.
En tu panel de WordPress, ve a Productos » Atributos. Aquí es donde gestionarás todos los atributos de tus productos.
Luego haz clic en Añadir atributo.
Ahora, edita el producto al que quieres añadir esta información, desplázate hacia abajo hasta la sección Datos del producto y haz clic en la pestaña Atributos.
Elige tu nuevo atributo del menú desplegable, luego añade la información relevante en el campo Valor(es).
Ahora, haz clic en Guardar atributos, luego en Actualizar tu producto.
Tu nuevo atributo aparecerá ahora ordenado de forma ordenada en la pestaña de Información Adicional de la página del producto.
Ocultar la pestaña de Información adicional
Si un producto no tiene atributos o detalles de envío relevantes, ocultar la pestaña de información adicional mantiene la página del producto limpia.
Es una mejor opción que dejar una pestaña vacía o escasa visible para los compradores.
Si está utilizando SeedProd para personalizar la página de su producto de WooCommerce, puede eliminar el bloque de Pestañas de datos del producto con unos pocos clics.
Pase el cursor sobre el bloque de Pestañas de datos del producto y haga clic en el icono de la papelera para eliminarlo.
Las páginas de sus productos ahora están libres de desorden innecesario.
Eliminar los atributos de un producto
Puede eliminar información adicional producto por producto.
Esta opción es buena si solo desea eliminar el desorden de páginas de productos específicas.
Para hacer esto, ve a "Productos" en tu panel de WordPress y elige el producto que deseas editar.
En el panel "Datos del producto", haz clic en la pestaña "Atributos".
Luego, haz clic en eliminar en los atributos que deseas eliminar.
Cuando veas esa página de producto, la pestaña Información adicional habrá desaparecido.
Este método elimina los atributos, no solo su visualización en el front-end.
Si necesita esta información más adelante, es mejor usar SeedProd para ocultar la pestaña en lugar de eliminar los datos.
Mover los atributos a la descripción del producto
Cuando agregas atributos a un producto estos se muestran en un tab de Información Adicional.
En lugar de que se muestren en un Tab de Información Adicional, pueden mostrarse directamente como parte del contenido del producto.
La primera parte del código oculta el tab de Información Adicional, que es donde se muestran los atributos del producto por defecto.
La segunda parte agrega el contenido de información adicional, dada por la función woocommerce_product_additional_information_tab() en un hook de la pantalla de detalle de producto.
El último código que esta comentado puedes eliminar el título que aparecerá por defecto sobre la tabla de atributos.
En el código anterior:
- La primera parte del código oculta el tab de Información Adicional.
- La segunda parte agrega el contenido de información adicional en un hook de la pantalla de detalle de producto.
- El último código comentado puede eliminar el título que aparecerá por defecto sobre la tabla de atributos.
Cambiar el nombre de la pestaña
“Información adicional” es un nombre largo.
Si desea editar la pestaña de información adicional de WooCommerce para reflejar mejor el contenido de su producto, puede cambiar el nombre de la pestaña con un fragmento de código rápido.
Para este método, usaré WPCode para agregar fragmentos de código personalizados en lugar de editar directamente los archivos del tema.
Antes de continuar, haz una copia de seguridad de tu sitio web para asegurarte de no perder nada si algo sale mal.
Si aún no lo has hecho, instala y activa el plugin WPCode.
Tras la activación, ve a Fragmentos de código » Añadir nuevo y elige "Añadir tu código personalizado (Nuevo fragmento)".
A continuación, dale un título a tu fragmento: Algo como "Renombrar pestaña Información adicional" funcionará.
En "Tipo de código", selecciona "Fragmento de PHP".
Ahora, haz clic en el botón "Guardar fragmento", luego cambia el interruptor "Inactivo" a "Activo".
Tu pestaña de Información Adicional ahora tiene un nombre completamente nuevo.
Reordenar las pestañas de producto
Si la pestaña de Información Adicional no pertenece al final de la página de tu producto, puedes moverla.
El editor visual de SeedProd lo hace sencillo sin necesidad de código.
Desde SeedProd » Theme Builder, abre tu plantilla de Página de Producto.
En el editor visual, busca el bloque Pestañas de Datos del Producto y arrástralo a la posición donde deseas que aparezca el grupo de pestañas en la página.
Para reordenar pestañas individuales dentro del grupo de pestañas, WooCommerce utiliza un sistema de prioridad.
La pestaña de Información Adicional tiene una prioridad predeterminada de 20, mientras que la pestaña de Descripción es 10 y Reseñas es 30.
Un número más bajo aparece primero.
Puedes ajustar el orden de las pestañas con un fragmento de PHP a través de WPCode.
Cambia el número de prioridad para controlar el orden.
Un valor de 5 coloca Información Adicional antes de la pestaña Descripción, mientras que 25 la sitúa entre Descripción y Reseñas.
Añadir pestañas personalizadas
Hay productos que necesitan bastante más información que una descripción básica.
Medidas, materiales, cuidados, instrucciones, envíos, garantías o preguntas frecuentes pueden acabar mezclados en un solo bloque y hacer que la ficha resulte pesada de leer.
En esos casos, las pestañas personalizadas en WooCommerce nos permiten repartir el contenido de una forma más cómoda.
En lugar de obligar al cliente a recorrer toda la página, podemos separar cada tema y dejar que consulte solo lo que le interesa.
Una tienda de ropa puede requerir una guía de tallas, mientras que un producto técnico quizá necesite instrucciones, documentación descargable o información sobre la garantía.
Tampoco hace falta convertir la ficha en una colección interminable de pestañas.
Lo mejor es añadir las que aporten algo.
Si están bien elegidas, ayudan a ordenar el contenido, resolver dudas y evitar que datos importantes queden escondidos dentro de una descripción demasiado larga.
Crear una pestaña individual con un plugin
Para crearlas podemos usar un plugin o añadirlas mediante código en el archivo de funciones del tema.
La elección dependerá de cómo trabajemos, de la cantidad de productos y de si cada ficha tendrá información distinta o compartirá contenido con otras.
También podemos preparar pestañas para un solo producto o reutilizarlas en varios.
Esto último resulta práctico para mostrar datos que se repiten, como políticas de devolución, plazos de entrega, cuidados o instrucciones generales.
Así no tenemos que copiar el mismo texto en cada ficha y, cuando algo cambie, podemos actualizarlo desde un único lugar.
Podemos usar estas pestañas para separar información que no queremos dejar mezclada dentro de la descripción principal.
Por ejemplo, instrucciones de uso, materiales, guías de tallas, vídeos, preguntas frecuentes, condiciones de envío o documentos relacionados con el producto.
Si la información solo corresponde a un producto, podemos crear la pestaña de forma directa desde su ficha.
- Vamos a Productos > Todos los productos.
- Editamos el producto donde queremos añadir la pestaña.
- Bajamos hasta el apartado Datos del producto.
- Seleccionamos la nueva opción Custom Tabs o Pestañas personalizadas.
- Hacemos clic en Add New Tab.
- Escribimos el título que aparecerá en la pestaña.
- Añadimos el contenido mediante el editor disponible.
- Guardamos los cambios y actualizamos el producto.
Dentro del contenido podemos incluir textos, imágenes, enlaces, vídeos, códigos cortos y otros elementos compatibles con el editor de WordPress.
Crear pestañas reutilizables
Cuando varios productos comparten la misma información, no resulta práctico crear la pestaña de forma manual en cada uno.
Para estos casos podemos utilizar las pestañas globales.
- Entramos en Productos > Tabs.
- Hacemos clic en Add New Tab.
- Añadimos un nombre interno para identificarla.
- Escribimos el título que verá el cliente.
- Agregamos el contenido de la pestaña.
- Indicamos en qué productos queremos mostrarla.
- Publicamos la nueva pestaña.
El plugin permite asignarla según diferentes condiciones, como productos concretos, categorías de productos, etiquetas y marcas de WooCommerce.
Por ejemplo, podemos preparar una pestaña con los cuidados del producto y mostrarla en todos los artículos de una categoría.
Si algún día cambian las indicaciones, editamos esa pestaña una sola vez y la nueva información aparecerá en todos los productos donde esté asignada.
Añadir contenido personalizado mediante código
El filtro de woocommerce_product_tabs proporcionado por WooCommerce debe usarse para agregar una pestaña personalizada a una página de producto en WooCommerce.
El código debe agregarse al archivo functions.php de su tema.
El contenido de la pestaña se puede agregar de dos maneras.
- El contenido se puede agregar como datos estáticos.
- El contenido se puede obtener de los campos personalizados agregados al panel de administración.
Para agregar este código al archivo functions.php debemos ingresar en nuestro Cpanel > administrador de archivos > Public_html > Dominio > wp-content > themes > tema utilizado > archivo functions.php.
Las pestañas personalizadas de producto que se han agregado con nuestro código personalizado también se pueden reorganizar según lo que necesitemos.
Para lograr esto, el filtro ‘woocommerce_product_tabs’ debe usarse una vez más.
Usando el método anterior, podemos recibir una gran cantidad de contenido sin saturar la página del producto.
La organización lógica de los datos no solo facilita que el visitante del sitio web comprenda las características del producto, sino que también facilita al administrador web mantener la uniformidad de los datos en todo el producto.
Recomendaciones para organizar los atributos
Es importante no confundir etiquetas con categorías, pero sobre todo no confundirlas con los atributos.
Las categorías son el modo principal de organización y clasificación de productos de tu tienda en línea.
Las etiquetas son otro modo de vincular unos productos con otros, como el resto de taxonomías, pero en este caso relativo a particularidades específicas y concretas de cada producto.
Si solo un producto va a usar una categoría o etiqueta no la crees, principalmente sirven para vincular productos con alguna coincidencia entre sí.
Los atributos, en cambio, son características técnicas que pueden utilizarse para filtros, opciones seleccionables y variaciones.
En una tienda online es muy importante tener las fichas de producto muy optimizadas, ya que es lo que el visitante está viendo mientras decide si realiza o no la compra.
Por eso conviene utilizar nombres claros, añadir únicamente los valores aplicables a cada producto y decidir desde el principio si el atributo funcionará como filtro global o como variación.
Una vez configuradas, merece la pena revisar cómo se ven en ordenador y móvil.
También conviene comprobar que las imágenes encajan bien, que no estamos repitiendo información y que las pestañas funcionan con la plantilla de producto del tema o del constructor que utilicemos.