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 Promo Kit en el menú de la izquierda y luego en Create Label.
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 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, 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 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: 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.
- Additional Styles — añade cualquier CSS personalizado que necesites 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.
- Badge Placement — elige si la insignia se coloca sobre la imagen del producto (solapándola) o fuera de la imagen (debajo de ella).
- Posición — elija arriba o abajo, y izquierda o derecha, luego introduzca desplazamientos de píxeles para ajustar exactamente dónde aparece la insignia.
Más opciones de estilo
La pestaña Style también te ofrece estas opciones:
- 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
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.
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. Crea la etiqueta allí. Se aplica solo a ese producto y siempre tiene prioridad sobre las etiquetas globales. También puedes usar la pestaña Conditions al crear una etiqueta para aplicarla automáticamente a los 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?
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.
¿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
