En este post vamos a utilizar un plugin para crear etiquetas en los productos de Woocommerce. Etiquetas que se mostrarán como carteles en las imágenes de los productos. Sí, las típicas etiquetas de descuento, nuevo, etc.
Sí, Woocommerce ya trae una serie de etiquetas o carteles por defecto para los productos con descuento. Pero, no hay opciones de personalización y diseño de esas etiquetas, ni opciones de asignación para esas etiquetas.
Con el plugin que vamos a ver en este post podremos diseñar etiquetas personalizadas y asignarlas a productos individuales o grupos de productos, según a la categoría a la que pertenezcan o al estado del producto: nuevo, destacado, agotado, con descuento, con stock bajo, etc. .
Etiquetas o carteles no solo de descuentos, sino de lo que queramos. Podremos, personalizar diseño y texto de la etiqueta al 100%
Existen múltiples formas de denominar a estas etiquetas que se muestran en las imágenes de productos: carteles, etiquetas, insignias, etc.
El plugin tiene una versión gratuita limitada y una versión premium con todas las opciones. En este post vamos a ver la versión premium del plugin que nos da acceso a TODAS las opciones.
QUIERO EL PLUGIN
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE - crear y añadir etiquetas personalizadas a productos en Woocommerce
- Plugin para crear etiquetas de productos personalizadas con Woocommerce
- Crear, diseñar y asignar etiquetas de productos en Woocommerce
- Diseño de etiquetas de productos Woocommerce
- Asignación individual de etiquetas en Woocommerce a productos
- Opciones generales y Asignación de etiquetas automáticas según condición del producto
- Asignación automática de etiquetas a productos Woocommerce según categoría la que pertenezcan
- Asignación de etiquetas o carteles por clases de envió en Woocommerce
Plugin para crear etiquetas de productos personalizadas con Woocommerce
El plugin que vamos a utilizar se llama: “Woocommerce Badge Management” que podemos traducir como: “Gestión de insignias en Woocommerce”
El plugin tiene una versión gratuita más limitada y una versión de pago con muchas más opciones. Nosotros utilizaremos la versión de pago, que tiene todas las opciones.
Desde esta página puedes comprar la versión de pago y descargar la versión gratuita, haciendo clic en el botón “download the free version”.
->IR A YITH WOOCOMMERCE BADGE MANAGEMENT
->IR A YITH WOOCOMMERCE BADGE MANAGEMENT
Crear, diseñar y asignar etiquetas de productos en Woocommerce
Dentro de la configuración del plugin tenemos que diferencias 3 zonas fundamentales:
1.- Zona de creación de etiquetas: la zona de diseño y creación de etiquetas las tienes en el menú lateral: “Insignias > Insignias”. Para crear una nueva: “Insignias > Añadir insignia”
2.- Zona de configuración y asignación automática de etiquetas: La configuración y asignación automática de etiquetas la tienes en: “YITH > Badge Management”. Podrás asignar etiquetas según categoría de producto o condición (nuevo, agotado, con descuento, destacado, con stock bajo, etc.)
3.- Zona de asignación individual de etiquetas: Para ir a la zona de asignación individual de etiquetas, iremos a “Productos > todos los productos”. A continuación, editaremos el producto en el cual queremos asignar una determinada etiqueta. En la página de edición del producto verás un bloque denominado “Insignia de producto” desde donde podrás asignar a ese producto una etiqueta o insignia que ya hayas creado.
QUIERO EL PLUGIN
Diseño de etiquetas de productos Woocommerce
Para crear de una nueva insignia o etiqueta para una imagen de producto Woocommerce iremos a: “Insignias > Añadir insignia”.
Pondremos nombre a la insignia, para poder identificarla.
A continuación, verás que tenemos 4 pestañas diferentes para la creación de la etiqueta o insignia. Cada pestaña nos permite un tipo de diseño diferente.
Puedes utilizar cualquiera de las cuatro. El diseño que quedará publicado será el último que guardes, sea cual sea la pestaña que utilices.
En todas las pestañas verás que a la derecha tienes una previsualización del diseño que vayas realizando.
Vamos a ver en detalle las 4 pestañas:
->Texto de insignia: esta pestaña de diseño nos permite personalizar el texto de la etiqueta, color de dicho texto y tamaño. Color de fondo de la etiqueta, tamaño, radio curvatura de las esquinas de la etiqueta y margin (margen interior). También dispone de funcionalidades avanzadas de opacidad de la etiqueta, rotación para girar la etiqueta, posición arrastrando en la previsualización, punto de anclaje y volteado.
->Insignia CSS: esta pestaña de diseño nos ofrece 8 layouts o plantillas desde los que partir en la creación de la etiqueta. Seleccionando uno de los diseños, podremos personalizarlo poniendo el texto de la etiqueta y su color, así como el color de fondo. También tendremos opciones avanzadas de diseño como: opacidad o transparencia de la etiqueta, rotación para girar la etiqueta, volteo y posición de la etiqueta a arrastrando la insignia en la previsualización.
->Imagen de Insignia: en este caso también tenemos unos diseños o layouts predefinidos. Pero, no tenemos opción de personalización del texto de la etiqueta (el texto se mostrará en español, aunque en la previsualización salga en inglés). En su lugar, tenemos la opción de subir una imagen de una etiqueta personalizada que hayamos creado externamente con otra herramienta de diseño. Como en los apartados anteriores tenemos opciones avanzadas de: opacidad, rotación, volteo y posición arrastrando y soltando en la previsualización.
->Insignia avanzada: Opción especial para etiqueta de descuento en Woocommerce. También en esta pestaña podremos elegir entre diferentes diseños o layouts. En este caso, no podemos personalizar el texto de la insignia. El texto, será el seleccionado pero traducido al español (aunque en la previsualización salga en inglés).
Lo más interesante de esta opción es que se calculará y mostrará automáticamente el porcentaje de descuento exacto correspondiente al producto al que se le asigne la etiqueta. Podremos personalizar color del texto de la insignia y fondo. Así como opciones avanzadas como: opacidad, rotación, volteo, posición arrastrando y soltando la etiqueta desde la previsualización.
Recuerda que has de publicar la página para que la insignia se pueda seleccionar y asignar.
QUIERO EL PLUGIN
Insiginia CSS
Insignia Avanzada
Asignación individual de etiquetas en Woocommerce a productos
En los siguientes apartados vamos a ver cómo asignar etiquetas de manera global o masiva en función de determinadas características de los productos, como que sean nuevos, que tengan descuento, que estén agotados, que tengan stock bajo o que sean productos destacados. También veremos como asignar etiquetas a todos los productos de una categoría concreta o de una clase de envío determinada.
Pero, ahora nos vamos a centrar en la asignación de etiquetas individual.
Para asignar una etiqueta ya creada, de manera individual, a un producto en concreto, iremos a dicho producto y lo editaremos.
Verás un bloque o meta box denominado “Insignia de producto”.
Asignar etiquetas a productos individuales
Al hacer clic sobre el recuadro interior se mostrarán las diferentes etiquetas creadas y podrás seleccionar la que quieres que se muestre en el producto.
Debajo tienes la opción de establecer una fecha de inicio y otra de fin para que se muestre dicha etiqueta. Si no seleccionas nada se mostrará de manera indefinida.
Opciones generales y Asignación de etiquetas automáticas según condición del producto
Para la configuración general y asignación en grupo de etiquetas en Woocommerce iremos a: “YITH > Badge Management”.
Opciones generales de Yith Woocommerce Badge Management
Dentro de la pestaña “Ajustes” tendremos las Opciones generales:
- Ocultar insignia en descuento: si marcamos esta opción no se mostrarán las etiquetas de descuento que muestra por defecto Woocommerce.
- Ocultar en barras laterales: ocultar etiquetas en barras laterales y widgets
- La insignia de producto anula la insignia predeterminada «En descuento»: si marcamos esta opción, la etiqueta de descuento por defecto de Woocommerce no será mostrada en los casos en los que el producto tenga asignada otra etiqueta personalizada.
- Activa el Gerente de tienda para editar estas opciones: si marcamos esta opción permitiremos que los usuarios con perfil “Gestor de la tienda (shop manager)” puedan administrar las etiquetas o insignias.
Asignación automática de etiquetas o insignias según condición del producto
Un poco más abajo tenemos un bloque denominado Asignación automática, que nos permitirá asignar de manera automática etiquetas ya creadas con diferentes productos, según su condición (nuevo, destacado, con descuento, agotado, con stock bajo):
- Insignias para Productos recientes: aquí podremos seleccionar una etiqueta o insignia ya creada que se asignará a todos los productos recientemente añadidos a Woocommerce (productos nuevos). La típica etiqueta de “NUEVO”. El tiempo durante el cual un producto es considerado nuevo, lo estableceremos en el apartado siguiente.
- Productos recientes – más nuevo que: aquí estableceremos el número de días límite para que un producto sea considerado nuevo. Esta opción complementa a la opción anterior.
- Insignia en descuento: aquí podremos seleccionar una insignia o etiqueta ya creada para que se muestre en todos los productos en descuento de nuestra tienda Woocommerce. La típica etiqueta de “DESCUENTO”.
- Insignia destacado: desde esta opción podremos seleccionar una etiqueta para que se muestre en todos los productos destacados.
- Insignia Agotado: con esta opción podremos seleccionar una etiqueta o insignia para que se muestre en todos los productos agotados de Woocommerce.
- Insignia a punto de agotarse: con esta opción podremos establecer una etiqueta para incitar la venta de todos los productos que tengan un stock muy bajo. Esa condición de stock la estableceremos en el apartado siguiente.
- Cantidad para productos a punto de agotarse: aquí estableceremos el número de unidades a partir de la cual se considera que el producto está a punto de agotarse, en relación al apartado anterior.
Asignar etiquetas segun producto nuevo, destacado, con descuento, agotado, bajo stock, etc
Opciones de etiquetas o carteles en ficha de producto – Producto Individual
Un poco más abajo, en esta misma pestaña, tenemos unas opciones relacionadas con las etiquetas en las imágenes de las páginas de producto. Englobadas dentro de un apartado denominado “Producto Individual”.
- Ocultar en producto individual: Por defecto, las etiquetas se mostrarán tanto en las imágenes de la página de producto (ficha de producto) como en las páginas de listados de productos, como por ejemplo las páginas de categorías. Si marcamos este checkbox las etiquetas no se mostrarán en las páginas de producto. Solamente, en las páginas de listados de productos.
- Mostrar insignias avanzadas en productos variables: por defecto las etiquetas “avanzadas” que eran aquellas en la que se calculaba automáticamente el descuento, solo se mostrará si el porcentaje o valor de descuento es igual en todas las variaciones del producto. Aunque desde este apartado podemos alterar ese comportamiento haciendo que se muestre el porcentaje o cantidad mínima de descuento o que se muestre el porcentaje o cantidad máxima de descuento.
Asignación automática de etiquetas a productos Woocommerce según categoría la que pertenezcan
Anteriormente hemos visto que se puede asignar etiqueta a productos de woocommerce según la condición del producto. Es decir, según sea nuevo, destacado, agotado, etc.
Ahora vamos a ver que también podemos asignar etiquetas a productos de manera automática según la categoría a la que pertenezcan.
Para la configuración iremos a: “YITH > Badge Management” y haremos clic en la pestaña: “Insignias de categorías”.
A continuación, verás que nos aparece un listado de las categorías de nuestra tienda Woocommerce.
Simplemente tendremos que seleccionar la insignia o etiqueta que queramos asignar a todos los productos de una misma categoría.
En las categorías donde no queramos asignar ninguna etiqueta o insignia dejaremos el selector en “Ninguna”.
QUIERO EL PLUGIN
Asignación de etiquetas o carteles por clases de envió en Woocommerce
El plugin también nos da la opción de asignar etiquetas de manera masiva a productos que pertenezcan a una determinada clase específica de envío de Woocommerce.
Para la configuración iremos a: “YITH > Badge Management” y haremos clic en la pestaña: “Insignias de clases de envío”.
Si tenemos creadas clases de envío se mostrarán en una lista.
En cada clase de envío podremos asignar una insignia o etiqueta ya creada que se mostrará en todos los productos que tengan esa clase de envío asignada.
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
