Si quieres insignias de rebajas o de campaña en las imágenes de tus productos, puedes crearlas en Advanced Promo Kit. Esta guía te explica cómo crear una etiqueta, incluyendo opciones de la pestaña Estilo como animaciones y tooltips al pasar el ratón, para que la insignia tenga el aspecto que planeaste en las páginas de la tienda y de los productos.
Requisitos previos
- WooCommerce instalado y activo
- Advanced Promo Kit instalado y activo Advanced Promo Kit
- Al menos un producto de WooCommerce publicado
Paso 1: abre la pantalla Crear etiqueta
En tu panel de WordPress, haz clic en Promo Kit en el menú de la izquierda y luego en Create Label.
Paso 2: completa la pestaña General
La pestaña General controla lo que dice tu etiqueta y la forma que adopta.
- En el campo Title, introduce un nombre interno para esta etiqueta. Es solo para tu referencia y no se muestra a los clientes.
- En el campo Etiqueta de insignia, escribe el texto que quieres que aparezca en la insignia: por ejemplo, REBAJA, NUEVO o −20%. Puedes usar variables dinámicas (ver la tabla a continuación) para mostrar datos de producto en vivo automáticamente. Cómo usar marcadores de contenido dinámico en etiquetas de producto
- En Text Options, ajusta el tamaño de la fuente (de 8 a 72 px), el grosor de la fuente (Normal, Bold, Semi Bold o Light) y la altura de línea.
- En Forma de la insignia, haz clic en la forma que quieras usar. Hay 12 formas disponibles: Rectángulo Horizontal, Rectángulo Vertical, Píldora, Círculo, Cuadrado, Cinta Izquierda, Cinta Derecha, Etiqueta, Hexágono, Estrella, Banner e Imagen Personalizada. Si eliges Imagen Personalizada, aparece un botón de carga para que puedas usar tu propio archivo de imagen como insignia.
Variables dinámicas
Escribe cualquiera de estos códigos en el campo Etiqueta de insignia. Advanced Promo Kit los reemplaza con valores reales cuando la etiqueta se muestra en un producto de tu tienda.
| Variable | Reemplazado por |
|---|---|
{precio_producto} | El precio actual del producto |
{precio_regular} | El precio regular (no en oferta) del producto |
{precio_oferta} | El precio en oferta del producto |
{porcentaje_descuento} | El porcentaje de descuento, por ejemplo, 20 % |
{monto_descuento} | El importe fijo del descuento, por ejemplo, 10 $ |
{cantidad_stock} | El recuento de stock actual del producto |
Paso 3: personaliza el estilo
Haga clic en la pestaña Estilo para controlar el aspecto de su etiqueta. La pestaña está dividida en varias secciones.
Opciones de estilo
- Color de la insignia: haz clic en el selector de color para abrir el selector de color y elige un color de fondo para tu etiqueta.
- Ancho (Píxeles) y Alto (Píxeles): introduce valores en píxeles (20-500 px) para establecer el tamaño de la insignia.
- Radio del borde (Píxeles): ajusta cada esquina de forma independiente para redondear los bordes.
- Relleno del texto (Píxeles): establece el relleno en cada lado del texto de la insignia.
- Estilos adicionales: añade cualquier CSS personalizado que necesites para esta etiqueta específica.
Opacidad y Posición
- Opacidad: establece la transparencia de la etiqueta de 0 (invisible) a 100 (totalmente opaca).
- Rotación: rota la insignia entre 0 y 360 grados.
- Dirección del texto: elige Horizontal o Vertical.
- Ubicación de la insignia: elige Sobre la imagen (solapando la imagen del producto) o Fuera de la imagen (Debajo de la tarjeta).
- Posición de la insignia: elige arriba o abajo, y izquierda o derecha, luego introduce desplazamientos en píxeles para ajustar dónde aparece la insignia.
Degradado y Sombra
Usa estos controles para dar a la insignia un relleno degradado y una sombra paralela.
- Habilitar degradado: aplica un relleno degradado de dos colores. Elige Color de degradado 1, Color de degradado 2 y una Dirección del degradado (De izquierda a derecha, De derecha a izquierda, De arriba a abajo, De abajo a arriba, o una diagonal).
- Habilitar sombra: añade una sombra paralela con Color de sombra, Desenfoque, Desplazamiento X y Desplazamiento Y.
Animación
Usa Tipo de animación para que la insignia se anime en la tienda. Opciones: Ninguna, Pulso, Destello, Sacudida, Rebote, Rotar y Oscilación. Elige Ninguna para mantener la insignia quieta.
Interactividad
- URL de clic (Enlace a página): haz que la insignia sea un enlace. Los compradores que hagan clic irán a la URL que introduzcas.
- Texto del tooltip (Al pasar el ratón): texto que aparece cuando un comprador pasa el ratón sobre la insignia.
Paso 4: establece un horario (opcional)
Haga clic en la pestaña Programar si desea que la etiqueta aparezca solo durante un período de tiempo específico: por ejemplo, solo durante una venta de fin de semana.
- Fecha de inicio: la fecha y hora en que la etiqueta comienza a mostrarse. Deje esto vacío para mostrar la etiqueta inmediatamente después de guardar.
- Fecha de finalización: la fecha y hora en que la etiqueta deja de mostrarse. Deje esto vacío para mostrar la etiqueta indefinidamente.
Paso 5: guardar la etiqueta
Cuando estés satisfecho con la configuración, haz clic en Save en la parte superior de la pantalla. La etiqueta se crea y aparecerá en tu lista de etiquetas. Configura el interruptor en la parte superior de la pantalla a Active para que la etiqueta se muestre en tu tienda, ya que una nueva etiqueta comienza inactiva. Puedes editarla en cualquier momento haciendo clic en ella en la lista.
Usando la vista previa en vivo
A medida que complete las pestañas General y Estilo, la vista previa en vivo en el lado derecho de la pantalla se actualiza en tiempo real. Muestra un producto de ejemplo con su etiqueta aplicada para que pueda ver cómo quedará antes de guardar.
La vista previa utiliza valores de producto ficticios. Las variables dinámicas como {discount_percent} mostrarán los valores correctos para cada producto real de su tienda una vez que la etiqueta esté activa.
Solución de problemas
La pantalla Crear etiqueta está cubierta por un mensaje de licencia
Advanced Promo Kit necesita una licencia activa. Cuando la licencia falta o ha caducado, el plugin cubre la pantalla con un aviso de licencia en lugar de permitirle editar la etiqueta. Agregue o renueve su clave de licencia, luego recargue la página. Los controles de la pestaña Estilo nunca se atenúan, por lo que un campo que parece deshabilitado es un problema del navegador o de conflicto, no de licencia.
La etiqueta no se muestra en la tienda
Establezca el interruptor en la parte superior de la pantalla Crear etiqueta en Activo. Una nueva etiqueta comienza inactiva. Luego, verifique las reglas de visualización para esa etiqueta. Consulte Cómo configurar las reglas y condiciones de visualización de etiquetas en Advanced Promo Kit.
Preguntas frecuentes
¿Cómo asigno una etiqueta a productos específicos?
Después de guardar una etiqueta, abra el producto que desea etiquetar y busque el metabox Advanced Promo Kit en la pantalla de edición del producto. Cree la etiqueta allí. Se aplica solo a ese producto y siempre tiene prioridad sobre las etiquetas globales. También puede usar la pestaña Condiciones al crear una etiqueta para aplicarla automáticamente a productos que coincidan con los criterios que defina Cómo configurar las reglas y condiciones de visualización de etiquetas en Advanced Promo Kit: por ejemplo, todos los productos de una categoría en particular o en oferta.
¿Puedo usar más de una etiqueta en el mismo producto?
Un producto puede tener una etiqueta específica del producto, además de las etiquetas globales cuyas condiciones cumpla. La configuración Maximum Labels Per Product limita cuántas aparecen a la vez, y por defecto es 3. Cada etiqueta tiene sus propios ajustes de posición, por lo que puedes apilarlas o distribuirlas por la imagen del producto.
El texto de mi insignia se ve apretado o cortado. ¿Cómo lo soluciono?
Abre la pestaña Style de tu etiqueta y aumenta los valores de Width (Pixel) y Height (Pixel). También puedes reducir el tamaño de la fuente en Text Options en la pestaña General. El tamaño predeterminado de la insignia es 80x30px, lo que se adapta a textos cortos, por lo que las etiquetas más largas, incluidas las que utilizan marcadores de posición dinámicos, necesitan más espacio. Un buen punto de partida es de 240 a 280px de ancho y de 36 a 40px de alto. Previsualiza el resultado y ajusta hasta que el texto encaje cómodamente.
¿Puedo estilizar las etiquetas de manera diferente en el móvil?
No. Advanced Promo Kit no tiene un panel de estilo móvil separado. La misma configuración de la pestaña Estilo se aplica en cada vista. Controle qué productos muestran una etiqueta con reglas de visualización, no con un interruptor de dispositivo. Consulte Cómo configurar las reglas y condiciones de visualización de etiquetas en Advanced Promo Kit.
¿Qué sigue?
- Cómo administrar etiquetas en Advanced Promo Kit
- Cómo configurar las reglas y condiciones de visualización de etiquetas en Advanced Promo Kit
- Cómo usar marcadores de posición de contenido dinámico en etiquetas de productos
- Referencia de la configuración de Advanced Promo Kit
¿Necesitas ayuda?
Si tienes alguna pregunta o encuentras algún problema, estamos aquí para ayudarte.
- Usuarios Premium: Abrir un ticket de soporte
- Usuarios gratuitos: Visita nuestro foro comunitario
