Uso de Marks

Crear un sistema de insignias útil

1. Activa sólo las reglas que expresen información real del catálogo.
2. Define si deben aparecer en páginas de producto, bucles o ambos.
3. Ajusta los umbrales a la rotación y volumen de tu tienda.
4. Decide una forma visual y límites que no tapen la imagen ni el precio.
5. Añade insignias manuales sólo para mensajes que no puedan derivarse de los datos de WooCommerce.

Ejemplos de reglas

Para una tienda con rotación rápida, una ventana de 14 días para Nuevo puede resultar más clara que 30. En un catálogo de productos únicos, Pocas unidades con umbral 1 comunica la última unidad sin etiquetar referencias con stock normal.

La regla Más vendido usa las ventas totales del producto. Define un umbral que tenga significado comercial en tu tienda. La regla Envío gratis se basa en el slug de la clase de envío, por lo que no calcula tarifas ni interpreta zonas.

Evitar etiquetas de oferta duplicadas

Si Marks muestra Oferta y el tema conserva su flash nativo, activa la opción para ocultar el flash de WooCommerce. Así mantienes una sola señal con el mismo estilo que el resto de insignias.

Shortcode

Muestra las insignias del producto actual:

[marks_badges]

Muestra las de un producto concreto:

[marks_badges id="123"]

Esto es útil en plantillas de bloques, páginas editoriales o maquetadores que no ejecutan los hooks habituales del producto. Un ID inexistente no debe usarse como mecanismo de contenido alternativo.

Insignia manual

Define primero la etiqueta y el color generales en la sección manual de Marks. Después, en la edición del producto, añade el campo personalizado _marks_manual_text con un texto corto. Opcionalmente, añade _marks_manual_style, por ejemplo accent para Exclusivo web o danger para Última oportunidad. La insignia manual aparece primero, pero sigue contando para el máximo configurado.

No uses una etiqueta manual para información que WooCommerce ya puede calcular. Las reglas automáticas se actualizan con el stock, precio o ventas y reducen el riesgo de dejar un mensaje obsoleto.

Personalización con CSS

Puedes adaptar las variables desde el tema hijo:

.marks-badges {
  --marks-radius: 0.35rem;
  --marks-gap: 0.4rem;
  --marks-font-size: 0.75rem;
}

Mantén un contraste suficiente y no elimines información sólo mediante color. Las insignias contienen texto visible, de modo que su significado no depende exclusivamente de la paleta.

Extensión con hooks

El filtro del motor compartido permite ajustar la lista final. Hazlo con prudencia, conserva los elementos existentes y devuelve siempre el tipo esperado:

add_filter( 'storefront_kit_product_badges', function ( $badges, $product ) {
    if ( ! is_array( $badges ) || ! $product instanceof WC_Product ) {
        return $badges;
    }

    return $badges;
}, 10, 2 );

Los ajustes pueden ampliarse mediante marks_sanitize_settings, y marks_admin_settings_after_manual_table permite añadir información al final de la sección manual. La referencia está en Configuración.

Rendimiento y accesibilidad

Marks genera el HTML en el servidor y sólo necesita CSS. No espera una respuesta AJAX ni ejecuta JavaScript, por lo que las insignias no aparecen tarde y no causan CLS. Revisa en móvil que la cantidad máxima deje visibles la imagen, el título y el precio.

Si ya está activo el módulo de insignias de Polski for WooCommerce, desactiva una de las dos implementaciones. Consulta la documentación del módulo de Polski.