Etiqueta energética de la UE en WooCommerce: la flecha junto al precio

Una tienda online que vende un aparato cubierto por el etiquetado energético de la UE tiene que mostrar la etiqueta de ese producto, y lo habitual es hacerlo con una pequeña flecha de color con la clase energética justo al lado del precio. El artículo 5, apartado 1, letra a), del Reglamento (UE) 2017/1369 hace responsable al distribuidor de mostrar la etiqueta, también en la venta a distancia por internet, y el acto delegado de tu grupo de productos fija la escala y la forma exacta de presentarla. WooCommerce no tiene campo para la clase energética, ni flecha, ni sitio para la ficha de información del producto. El plugin gratuito Shoplex añade a WooCommerce la flecha de clase, el enlace a la etiqueta y el enlace a la ficha.

Qué es la etiqueta energética de la UE

La etiqueta energética de la UE es la escala de la A a la G, verde arriba y roja abajo, que indica al comprador lo eficiente que es un producto frente a otros del mismo grupo. El marco es el Reglamento (UE) 2017/1369, y un acto delegado propio para cada grupo de productos fija su escala y la forma de mostrar la etiqueta. Para una tienda, la parte que cuenta es el artículo 5, apartado 1, letra a): el distribuidor muestra la etiqueta.

Una tienda WooCommerce actúa casi siempre como distribuidor. El proveedor (el fabricante o el importador) facilita la etiqueta y la ficha de información del producto; tu tarea es mostrarlas bien allí donde el cliente decide la compra. Por eso un plugin de tienda debe enlazar los documentos del proveedor en lugar de dibujar su propia etiqueta.

Nota: El acto delegado de tu grupo de productos fija la escala. No todos los productos necesitan etiqueta, y no todos los grupos usan el mismo rango. Comprueba qué acto cubre lo que vendes antes de rellenar nada.

Qué exige la norma a una tienda online

La obligación básica está en el artículo 5, apartado 1, letra a), del Reglamento (UE) 2017/1369: el distribuidor muestra la etiqueta suministrada para el producto, y eso incluye la venta a distancia por internet, además de la tienda física. Los detalles de presentación están en el acto delegado de cada grupo de productos.

El Reglamento Delegado (UE) 2019/2014 sirve de buena referencia, porque su anexo VIII detalla la presentación en internet. Según el anexo VIII queda así:

• Una flecha del color de la clase energética, situada cerca del precio del producto.
• La letra de la clase en Calibri negrita blanca, del mismo tamaño de fuente que el precio.
• El rango de la escala en negro sobre la flecha, con un borde negro.
• La etiqueta completa a demanda: al hacer clic, pasar el ratón o tocar la flecha se muestra la etiqueta, por ejemplo en una ventana emergente, una pestaña nueva o un recuadro insertado.
• Un texto alternativo para la flecha que indique la clase energética.
• Un enlace a la ficha de información del producto cerca del precio.

Otros actos delegados siguen la misma idea, pero el que te obliga es el de tu grupo de productos. Consulta en él la escala y las reglas de presentación antes de fiarte de cualquier valor por defecto.

Qué necesita una buena solución de etiqueta energética

Una herramienta que lleve la etiqueta energética a las fichas de producto de WooCommerce tiene que cubrir seis puntos:

• Datos por producto. La clase, la escala, la etiqueta y la ficha pertenecen al producto, no a un ajuste general de la tienda.
• La escala de la etiqueta. Los grupos reescalados usan de A a G; algunos grupos siguen con rangos anteriores como de A+++ a D. La herramienta debe permitir copiar lo que pone la etiqueta en vez de suponer una sola escala.
• Presencia junto al precio, allí donde aparezca el precio. El cliente ve precios en la ficha de producto, en las cuadrículas de categoría y en los bloques de productos de la portada. La flecha debe seguir al precio, no quedarse en una sola plantilla.
• La etiqueta del proveedor, no una copia. La etiqueta viene del proveedor o de la base de datos de productos de la UE, EPREL. Mejor enlazar el original que subir una copia.
• Silencio en productos sin etiqueta. Un producto sin etiquetado energético no debe recibir flecha. Sin datos completos no debería aparecer nada.
• Marcado accesible. La flecha es un enlace, así que necesita un nombre que lea un lector de pantalla, con la clase incluida.

Cómo lo resuelve Shoplex

Shoplex es un plugin gratuito para WooCommerce que aplica obligaciones del derecho de consumo de la UE como módulos separados, y cada módulo indica el acto del que procede. El módulo Etiqueta energética, incorporado en Shoplex 1.7.0, coloca la flecha de clase junto al precio, la enlaza con la etiqueta del proveedor y añade el enlace a la ficha de información del producto. Viene desactivado y no hace nada hasta que lo activas.

Los cuatro campos por producto

Con el módulo activo, la pestaña Shoplex del editor de productos de WooCommerce gana una sección de etiqueta energética con cuatro campos:

• Clase de eficiencia energética: un selector con la opción Ninguna y todas las letras de clase que usa un acto delegado, de A+++ a G.
• Escala: el rango impreso en la etiqueta. De A a G es el valor por defecto y el de los grupos reescalados; de A+++ a D, de A++ a E y de A+ a F cubren los rangos anteriores que siguen vigentes en algunos grupos.
• URL de la etiqueta energética: la etiqueta en imagen o PDF del proveedor, por ejemplo el enlace a la etiqueta en EPREL.
• URL de la ficha de información del producto: la ficha del proveedor o la página del producto en EPREL.

Al guardar, la clase se comprueba contra la lista de letras válidas y una escala desconocida se sustituye por la de A a G, así que una errata no puede crear una clase inventada.

Lo que ve el cliente

Shoplex añade la flecha a través del filtro con el que WooCommerce genera el precio, de modo que aparece en todos los sitios donde WooCommerce muestra el precio del producto: la ficha de producto, las cuadrículas de tienda y de categoría y los bloques de productos en otras páginas. Si un tema mueve el precio, la flecha se mueve con él. El carrito y el pago muestran los precios de las líneas de otra forma, así que allí no aparece la flecha.

La flecha sigue el modelo del anexo VIII del Reglamento Delegado (UE) 2019/2014:

• El color de la flecha depende de la posición de la clase en la escala, del verde oscuro arriba al rojo abajo. Shoplex convierte a colores de pantalla los siete valores CMYK impresos en el anexo III de ese reglamento.
• La letra de la clase es blanca, en negrita y en Calibri (con Carlito y Segoe UI como alternativas), y hereda el tamaño de fuente del precio que tiene al lado.
• Los extremos del rango van en negro sobre una franja blanca, y la flecha tiene un contorno negro.
• La flecha es un enlace que abre la etiqueta del proveedor en una pestaña nueva.
• Su nombre accesible dice, por ejemplo: clase de eficiencia energética B (escala de A a G), abre la etiqueta energética.

Si hay una URL de ficha, tras la flecha aparece un enlace a la ficha de información del producto (en la interfaz en inglés, “Product information sheet”), que también se abre en una pestaña nueva.

Cuándo no aparece nada

La flecha solo aparece cuando se cumplen las dos condiciones: el producto tiene una clase que pertenece a la escala elegida y tiene una URL de etiqueta. Una clase sin etiqueta, o una clase fuera de la escala (A+++ en un producto con escala de A a G), no muestra nada. El enlace a la ficha solo aparece si su URL está rellena. Los productos sin relación con la energía nunca muestran nada, así que puedes activar el módulo en un catálogo mixto sin tocar el resto.

Variaciones y el límite actual

Las variaciones usan la etiqueta energética de su producto principal. Eso encaja con el caso habitual, un aparato en varios colores, pero no con una tienda que vende el mismo modelo en tamaños con clases distintas. Los campos por variación están registrados como un cambio aparte. Mientras tanto, publica esos tamaños como productos separados.

Para desarrolladores

El marcado final pasa por el filtro shoplex/energy_label/html junto con el producto y sus datos energéticos, de modo que un tema o un complemento puede ajustar la salida sin sustituir el módulo. La hoja de estilos se carga en las páginas de la tienda y, en el resto, solo cuando de verdad se imprime un aviso junto al precio.

El mismo módulo de etiqueta energética está también en el plugin gratuito Polski desde la versión 1.45.0, para tiendas que ya usan Polski para los requisitos polacos de WooCommerce.

Configuración

Poner la flecha en marcha lleva unos minutos por producto:

1. Instala Shoplex desde Plugins > Añadir nuevo y actívalo. WooCommerce debe estar activo.
2. Abre WooCommerce > Shoplex y activa el módulo de etiqueta energética.
3. Edita un producto afectado y abre la pestaña Shoplex en los datos del producto.
4. Elige la clase y la escala tal como aparecen impresas en la etiqueta del proveedor.
5. Pega la URL de la etiqueta y la de la ficha de información del producto, y actualiza el producto.
6. Mira la ficha de producto y una página de categoría: en las dos la flecha está junto al precio y, al hacer clic, se abre la etiqueta.

La documentación de Shoplex recoge todos los módulos, sus ajustes y el acto que aplica cada uno.

Consejos prácticos

• Copia la escala de la etiqueta, no de memoria. El acto delegado de tu grupo de productos fija la escala, y la etiqueta impresa es la forma más rápida de ver qué rango corresponde.
• Usa enlaces de EPREL siempre que puedas. EPREL, la base de datos de productos de la UE, tiene un enlace a la etiqueta y una página de producto para los modelos registrados, así que enlazas los documentos del proveedor y no una copia.
• Revisa la flecha también en la cuadrícula de categoría. La flecha sigue al precio del producto, así que mira la página de tienda y los bloques de productos de la portada, no solo la ficha.
• Rellena el enlace a la ficha además del de la etiqueta. La flecha sin enlace a la ficha cubre solo la mitad del modelo del anexo VIII.
• Trata el módulo como una herramienta de presentación. Shoplex muestra lo que introduces. Si un producto necesita etiqueta, y qué acto y qué escala le corresponden, lo decides tú como distribuidor.

Etiqueta energética en Shoplex frente a WooCommerce estándar

Función	WooCommerce estándar	Módulo de etiqueta energética de Shoplex
Clase energética por producto	No	Selector de A+++ a G
Escala	No	A-G, A+++-D, A++-E, A+-F
Flecha junto al precio	No	Sí, del color de la clase
Dónde aparece	n/a	Ficha de producto, cuadrículas de tienda y categoría, bloques de productos
Etiqueta a demanda	No	La flecha abre la etiqueta del proveedor en pestaña nueva
Enlace a la ficha de información	No	Enlace junto a la flecha
Productos sin etiqueta	n/a	No se muestra nada
Texto para lectores de pantalla	n/a	Clase y escala en el nombre del enlace
Variaciones	n/a	Heredan la etiqueta del producto principal
Coste	Gratis (sin etiqueta energética)	Gratis, sin edición de pago

Otras obligaciones en la misma ficha de producto

La etiqueta energética rara vez es el único dato legal junto al precio. Shoplex cubre las obligaciones vecinas en el mismo plugin, cada una como módulo propio: el precio por unidad, el precio más bajo antes de una rebaja, los avisos de IVA y de gastos de envío y los datos de seguridad del producto. Las guías GPSR para WooCommerce y WooCommerce Omnibus tratan esos dos temas.

En resumen

Si vendes productos cubiertos por el etiquetado energético de la UE, el artículo 5, apartado 1, letra a), del Reglamento (UE) 2017/1369 te obliga como distribuidor a mostrar la etiqueta también en internet, y el acto delegado de tu grupo de productos fija la escala y la presentación. El anexo VIII del Reglamento Delegado (UE) 2019/2014 describe la versión para internet: una flecha del color de la clase junto al precio que abre la etiqueta, y un enlace a la ficha de información del producto. WooCommerce no trae nada de esto. El plugin gratuito Shoplex añade cuatro campos por producto (clase, escala, URL de la etiqueta y URL de la ficha), muestra la flecha junto al precio en las fichas de producto, las cuadrículas de tienda y los bloques de productos, enlaza la etiqueta y la ficha del proveedor y no muestra nada en los productos sin etiqueta completa.