Advanced Promo Kit te permite añadir etiquetas de producto llamativas: insignias que se colocan directamente sobre las imágenes de los productos en tu tienda WooCommerce. Las etiquetas son totalmente personalizables: tú eliges la forma, el texto, los colores, el tamaño y la posición, y opcionalmente puedes programarlas para que aparezcan solo durante una oferta o campaña. Este artículo te guía en la creación de tu primera etiqueta de principio a fin.
Lo que necesitarás
- WooCommerce instalado y activo
- Advanced Promo Kit instalado y activo Advanced Promo Kit
- Al menos un producto de WooCommerce publicado
Paso 1: Abrir la pantalla de creación de etiquetas
En tu panel de WordPress, haz clic en Advanced Promo Kit en el menú de la izquierda y luego haz clic en Crear etiqueta.
Paso 2: Rellenar la pestaña General
La pestaña General controla lo que dice tu etiqueta y la forma que adopta.
- En el campo Nombre de la etiqueta, introduce un nombre interno para esta etiqueta. Esto 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, OFERTA, NUEVO o -20%. Puedes usar variables dinámicas (ver la tabla a continuación) para mostrar automáticamente datos de productos en vivo. Cómo usar marcadores de contenido dinámico en etiquetas de producto
- En Estilo del texto, establece el tamaño de la fuente (8-72 px), el grosor de la fuente (Normal, Negrita, Seminegrita o Ligera) 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: Personalizar 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 — haga clic en la muestra de color para abrir el selector de color y elegir un color de fondo para su etiqueta.
- Ancho y Alto — introduzca valores de píxeles (20-500 px) para establecer el tamaño de la insignia.
- Radio del borde — ajuste cada esquina de forma independiente para redondear los bordes.
- CSS adicional — añada cualquier CSS personalizado que necesite para esta etiqueta específica.
Opacidad y posición
- Opacidad — establezca la transparencia de la etiqueta de 0 (invisible) a 100 (totalmente opaca).
- Rotación — rote la insignia entre 0 y 360 grados.
- Dirección del texto — elija Horizontal o Vertical.
- Colocación de la insignia — elija si la insignia se sitúa sobre la imagen del producto (solapándola) o fuera de la imagen (a su lado).
- Posición — elija arriba o abajo, y izquierda o derecha, luego introduzca desplazamientos de píxeles para ajustar exactamente dónde aparece la insignia.
Funciones Premium (Advanced Promo Kit Pro)
Las siguientes opciones están disponibles en Advanced Promo Kit Pro:
- Degradado — active un relleno de degradado de dos colores. Elija entre seis direcciones de degradado.
- Sombra — añada una sombra paralela a su insignia con un color personalizado, radio de desenfoque y desplazamientos X/Y.
- Animación — haga que la insignia se anime automáticamente. Efectos disponibles: Pulso, Destello, Sacudida, Rebote, Rotar y Oscilación.
- URL enlazable — haga que la insignia sea un enlace en el que se pueda hacer clic y que lleve a los clientes a una URL que usted especifique.
- Información sobre herramientas — muestre un texto de información sobre herramientas cuando los clientes pasen el ratón por encima de la insignia.
Paso 4 — Establecer una programación (Opcional)
Haga clic en la pestaña Programación 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 este campo 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 este campo vacío para mostrar la etiqueta indefinidamente.
Paso 5 — Guardar la etiqueta
Una vez que esté satisfecho con la configuración, haga clic en Guardar etiqueta. La etiqueta se crea y aparecerá en su lista de etiquetas. Puede editarla en cualquier momento haciendo clic en ella en la lista.
Uso de 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.
Preguntas frecuentes
¿Cómo asigno una etiqueta a productos específicos?
Después de guardar una etiqueta, abre el producto que deseas etiquetar y busca el metabox Advanced Promo Kit en la pantalla de edición del producto. Selecciona tu etiqueta allí. También puedes usar la pestaña Condiciones al crear una etiqueta para aplicarla automáticamente a productos que coincidan con los criterios que definas Cómo configurar 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?
Sí. Puedes asignar varias etiquetas a un producto. Cada etiqueta tiene su propia configuración de posición, por lo que puedes apilarlas o distribuirlas sobre la imagen del producto según sea necesario.
¿Las animaciones y los fondos degradados están disponibles en la versión gratuita?
Degradado, Sombra, Animación, URL enlazable y Tooltip son funciones premium disponibles en Advanced Promo Kit Pro. Las formas, colores, texto y programación de las insignias están disponibles en todos los planes.
El texto de mi insignia se ve apretado o cortado. ¿Cómo lo soluciono?
Abre la pestaña Estilo de tu etiqueta y aumenta los valores de Ancho (Píxel) y Alto (Píxel). El tamaño predeterminado (160 × 30 px) funciona bien para texto corto, pero las etiquetas más largas —incluidas aquellas que usan marcadores de posición dinámicos— necesitan más espacio. Un buen punto de partida es de 240–280 px de ancho y 36–40 px de alto. Previsualiza el resultado y ajusta hasta que el texto quepa cómodamente.
¿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
