Nutri-Score

Nutri-Score evalúa la calidad nutricional de un producto en una escala de la A (la mejor) a la E (la peor). En Polonia es voluntario, pero cada vez más popular. Polski for WooCommerce muestra la insignia Nutri-Score en la página del producto.

Qué es Nutri-Score

El sistema Nutri-Score clasifica los productos alimenticios en función de un algoritmo que considera:

Componentes negativos (puntos negativos):

• valor energético
• azúcares
• ácidos grasos saturados
• sal (sodio)

Componentes positivos (puntos positivos):

• frutas, verduras, frutos secos, aceites (de colza, de nuez, de oliva)
• fibra
• proteína

En función del balance de puntos, el producto recibe una valoración:

Nivel	Color	Rango de puntos (alimento sólido)	Descripción
A	Verde oscuro (#038141)	de -15 a -1	Máxima calidad nutricional
B	Verde claro (#85BB2F)	de 0 a 2	Buena calidad nutricional
C	Amarillo (#FECB02)	de 3 a 10	Calidad nutricional media
D	Naranja (#EE8100)	de 11 a 18	Baja calidad nutricional
E	Rojo (#E63E11)	de 19 a 40	Mínima calidad nutricional

Configuración

Activar el módulo

Vaya a WooCommerce > Ajustes > Polski > Alimentación y active el submódulo “Nutri-Score”.

Ajustes

Ajuste	Predeterminado	Descripción
Activar Nutri-Score	No	Activa la visualización de la insignia
Posición en la página de producto	Debajo del precio	Dónde mostrar la insignia
Mostrar en el listado	Sí	Si se muestra en las páginas de categoría
Tamaño de la insignia	Normal	small, normal, large
Estilo de la insignia	Completo	full (todas las letras), compact (solo la letra activa)

Asignar Nutri-Score a un producto

En el editor de productos, en la pestaña “Alimentación”, seleccione el nivel Nutri-Score en la lista desplegable:

• A - Máxima calidad nutricional
• B - Buena calidad nutricional
• C - Calidad nutricional media
• D - Baja calidad nutricional
• E - Mínima calidad nutricional

El plugin no calcula el Nutri-Score automáticamente - debe conocer la valoración de su producto. Para el cálculo, puede utilizar la calculadora oficial o los datos del fabricante.

HTML generado

La insignia Nutri-Score se representa como un conjunto de elementos HTML con clases CSS dedicadas:

<div class="polski-nutri-score polski-nutri-score--active-c">
    <span class="polski-nutri-score__label">Nutri-Score</span>
    <div class="polski-nutri-score__badges">
        <span class="polski-nutri-score__badge polski-nutri-score__badge--a">A</span>
        <span class="polski-nutri-score__badge polski-nutri-score__badge--b">B</span>
        <span class="polski-nutri-score__badge polski-nutri-score__badge--c polski-nutri-score__badge--active">C</span>
        <span class="polski-nutri-score__badge polski-nutri-score__badge--d">D</span>
        <span class="polski-nutri-score__badge polski-nutri-score__badge--e">E</span>
    </div>
</div>

Clases CSS por nivel

El plugin genera clases CSS para cada nivel, lo que permite un control total sobre el estilo:

Clases del contenedor

Clase	Descripción
.polski-nutri-score	Contenedor principal
.polski-nutri-score--active-a	Nivel A activo
.polski-nutri-score--active-b	Nivel B activo
.polski-nutri-score--active-c	Nivel C activo
.polski-nutri-score--active-d	Nivel D activo
.polski-nutri-score--active-e	Nivel E activo
.polski-nutri-score--small	Tamaño pequeño
.polski-nutri-score--normal	Tamaño normal
.polski-nutri-score--large	Tamaño grande

Clases de la insignia

Clase	Descripción
.polski-nutri-score__badge	Cada insignia (letra)
.polski-nutri-score__badge--a	Insignia A
.polski-nutri-score__badge--b	Insignia B
.polski-nutri-score__badge--c	Insignia C
.polski-nutri-score__badge--d	Insignia D
.polski-nutri-score__badge--e	Insignia E
.polski-nutri-score__badge--active	Insignia activa (seleccionada)

Estilos CSS predeterminados

El plugin incluye estilos CSS integrados para la insignia Nutri-Score:

.polski-nutri-score {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0.5em 0;
}

.polski-nutri-score__label {
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    margin-bottom: 0.3em;
}

.polski-nutri-score__badges {
    display: inline-flex;
    gap: 2px;
    border-radius: 4px;
    overflow: hidden;
}

.polski-nutri-score__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    font-weight: 700;
    font-size: 0.85em;
    color: #fff;
    opacity: 0.35;
    transition: opacity 0.2s, transform 0.2s;
}

.polski-nutri-score__badge--active {
    opacity: 1;
    transform: scale(1.15);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Colores por nivel */
.polski-nutri-score__badge--a {
    background-color: #038141;
}

.polski-nutri-score__badge--b {
    background-color: #85BB2F;
}

.polski-nutri-score__badge--c {
    background-color: #FECB02;
    color: #333;
}

.polski-nutri-score__badge--d {
    background-color: #EE8100;
}

.polski-nutri-score__badge--e {
    background-color: #E63E11;
}

/* Tamaños */
.polski-nutri-score--small .polski-nutri-score__badge {
    width: 1.5em;
    height: 1.5em;
    font-size: 0.7em;
}

.polski-nutri-score--large .polski-nutri-score__badge {
    width: 2.5em;
    height: 2.5em;
    font-size: 1em;
}

Sobrescribir los estilos

Para personalizar el aspecto de la insignia en su tema, sobrescriba las clases CSS en el archivo style.css del tema:

/* Ejemplo: insignias cuadradas con esquinas redondeadas */
.polski-nutri-score__badges {
    gap: 4px;
    border-radius: 0;
}

.polski-nutri-score__badge {
    border-radius: 6px;
    width: 2.2em;
    height: 2.2em;
}

/* Ejemplo: tema oscuro */
.polski-nutri-score__label {
    color: #ccc;
}

.polski-nutri-score__badge {
    opacity: 0.25;
}

Acceso programático

Obtener el Nutri-Score de un producto

$nutri_score = get_post_meta($product_id, '_polski_nutri_score', true);
// Devuelve: 'a', 'b', 'c', 'd', 'e' o '' (vacío)

Establecer el Nutri-Score

update_post_meta($product_id, '_polski_nutri_score', 'b');

Filtro del HTML de la insignia

add_filter('polski/nutri_score/html', function (string $html, string $score, int $product_id): string {
    // Modificar el HTML de la insignia
    return $html;
}, 10, 3);

Visualización condicional

add_filter('polski/nutri_score/display', function (bool $display, int $product_id): bool {
    // Ocultar Nutri-Score para productos sin valores nutricionales rellenados
    $nutrients = get_post_meta($product_id, '_polski_nutrients', true);

    if (empty($nutrients)) {
        return false;
    }

    return $display;
}, 10, 2);

Importación CSV

Columna CSV	Descripción	Valores
polski_nutri_score	Nivel Nutri-Score	a, b, c, d, e

Ejemplo:

"Apple",a
"Potato chips",d
"Cola",e
"Natural yogurt",b

Schema.org

El plugin añade el Nutri-Score a los datos estructurados del producto:

{
    "@type": "Product",
    "additionalProperty": [
        {
            "@type": "PropertyValue",
            "name": "Nutri-Score",
            "value": "B"
        }
    ]
}

Accesibilidad (a11y)

La insignia Nutri-Score incluye atributos ARIA para lectores de pantalla:

<div class="polski-nutri-score" role="img" aria-label="Nutri-Score: C - calidad nutricional media">

Cada insignia inactiva tiene aria-hidden="true", y la activa tiene aria-current="true".

Problemas frecuentes

La insignia no se muestra

1. Compruebe que el submódulo Nutri-Score está activado
2. Asegúrese de que el producto tiene asignado un nivel Nutri-Score
3. Verifique que el CSS del plugin se carga (sin conflicto con plugins de optimización)

Los colores de la insignia son diferentes a lo esperado

El tema puede sobrescribir los colores de fondo. Utilice selectores CSS más específicos o añada !important:

.polski-nutri-score__badge--a {
    background-color: #038141 !important;
}

La insignia es demasiado grande o demasiado pequeña

Cambie el tamaño en los ajustes (WooCommerce > Ajustes > Polski > Alimentación > Nutri-Score > Tamaño de la insignia) o sobrescriba la clase CSS de tamaño.

Recursos relacionados

• Módulo de productos alimenticios
• Valores nutricionales
• Informar de un problema

Esta página tiene únicamente carácter informativo y no constituye asesoramiento legal. Consulte a un abogado antes de la implementación. Polski for WooCommerce es software de código abierto (GPLv2) proporcionado sin garantía.