EU energy label in WooCommerce: the class arrow next to the price

An online shop that sells an appliance covered by an EU energy labelling act has to show that product’s energy label, and the usual way to do it is a small coloured arrow with the energy class right next to the price. Regulation (EU) 2017/1369 Art. 5(1)(a) makes the dealer responsible for showing the label, including in online selling, and the delegated act for your product group sets the scale and the exact display. WooCommerce has no field for an energy class, no arrow and no place for the product information sheet. The free Shoplex plugin adds the class arrow, the label link and the sheet link to WooCommerce.

What the EU energy label is

The EU energy label is the A to G scale, green at the top and red at the bottom, that tells a buyer how efficient a product is compared with others in the same group. The framework is Regulation (EU) 2017/1369, and a separate delegated act for each product group sets that group’s scale and how the label is displayed. Article 5(1)(a) of the framework is the part that reaches a shop: the dealer shows the label.

For a WooCommerce shop the role is almost always the dealer. The supplier (the manufacturer or importer) provides the label and the product information sheet; your job is to show them correctly where the shopper makes the decision. So a shop plugin should link the supplier’s documents instead of drawing its own label.

Note: The delegated act for your product group sets the scale. Not every product needs a label, and not every group uses the same range. Check which act covers what you sell before you fill anything in.

What the law asks of an online shop

Regulation (EU) 2017/1369 Art. 5(1)(a) is the core duty: the dealer shows the label supplied for the product, and that covers distance selling over the internet as well as the shop floor. The details of how live in the delegated act for each product group.

Delegated Regulation (EU) 2019/2014 is a good reference point, because its Annex VIII spells out the internet display in detail. Under Annex VIII the online presentation looks like this:

• An arrow in the colour of the energy class, placed near the price of the product.
• The class letter in white bold Calibri, at the same font size as the price.
• The range of the scale in black, shown on the arrow, with a black border around it.
• The full label on demand: clicking, hovering over or tapping the arrow shows the label, for example in a pop-up, a new tab or an inset.
• A text alternative for the arrow that states the energy class.
• A link reading “Product information sheet” near the price, pointing to the sheet.

Other delegated acts follow the same idea, but the act for your product group is the one that binds you. Read it for the scale and the presentation rules before you rely on any default.

What a good energy label setup needs

A tool that puts the energy label on WooCommerce product pages has to handle six things:

• Per-product data. The class, the scale, the label and the sheet belong to the product, not to a shop-wide setting.
• The scale from the label. Rescaled groups use A to G; some groups still use older ranges such as A+++ to D. The tool should let you match what is printed on the label instead of assuming one scale.
• A display beside the price, everywhere the price appears. Shoppers see prices on the product page, in category grids and in product blocks on the home page. The arrow should follow the price, not sit in one template.
• The supplier’s label, not a copy. The label comes from the supplier or the EU product database (EPREL). Linking to it keeps the document authoritative.
• Silence on products without a label. A product outside any energy labelling act must not get an arrow. Nothing should render unless the data is complete.
• Accessible markup. The arrow is a link, so it needs a name that a screen reader can announce, including the class.

How Shoplex handles it

Shoplex is a free WooCommerce plugin that implements EU consumer-law duties as separate modules, each naming the act it comes from. The Energy label module, added in Shoplex 1.7.0, prints the class arrow next to the price, links it to the supplier’s label and adds the “Product information sheet” link. It is off by default and does nothing until you switch it on.

The four fields per product

When the module is on, the Shoplex tab in the WooCommerce product editor gains an Energy label section with four fields:

• Energy efficiency class: a select with None and every class letter a delegated act uses, from A+++ down to G.
• Scale: the range printed on the label. A to G is the default and the one rescaled product groups use; A+++ to D, A++ to E and A+ to F cover the older ranges still in force for some groups.
• Energy label URL: the label image or PDF from the supplier, for example the label link in EPREL.
• Product information sheet URL: the sheet from the supplier, or the product page in EPREL.

The class is checked against the list of valid letters when you save, and an unknown scale falls back to A to G, so a typo cannot produce an invented class.

What the shopper sees

Shoplex adds the arrow through WooCommerce’s own price output, so it appears wherever WooCommerce prints the product price: the single product page, the shop and category grids, and product blocks on other pages. A theme that moves the price moves the arrow with it. The cart and checkout print line prices another way, so the arrow does not show there.

The arrow follows the Annex VIII pattern of Delegated Regulation (EU) 2019/2014:

• The arrow is filled with the colour of the class, chosen by the class’s position in the scale, from dark green at the top to red at the bottom. Shoplex converts the seven CMYK values printed in Annex III of that regulation to screen colours.
• The class letter is white, bold and set in Calibri (with Carlito and Segoe UI as fallbacks), and it inherits the font size of the price it sits next to.
• The top and bottom of the range sit on a white strip in black, and the arrow has a black outline.
• The arrow is a link that opens the supplier’s label in a new tab.
• Its accessible name reads, for example, “Energy efficiency class B (scale A to G), opens the energy label”.

When a sheet URL is filled in, a Product information sheet link follows the arrow, using exactly that wording, and also opens in a new tab.

When nothing shows

The arrow renders only when both conditions hold: the product has a class that belongs to the chosen scale, and it has a label URL. A class without a label, or a class outside the scale (A+++ on an A to G product), prints nothing. The sheet link is added only when its URL is set. Products that are not energy-related never show anything, so you can switch the module on for a mixed catalogue without touching the rest.

Variations and the current limit

Variations use the energy label of their parent product. That suits the common case, one appliance sold in several colours, but not a shop selling the same model in sizes with different classes. Per-variation fields are tracked as a separate change; until then, list such sizes as separate products if their classes differ.

For developers

The finished markup passes through the shoplex/energy_label/html filter with the product and its energy data, so a theme or add-on can adjust the output without replacing the module. The stylesheet loads on shop pages, and elsewhere only when a price notice is actually printed.

The same energy label module also ships in the free Polski plugin from version 1.45.0, for shops that already run Polski for the Polish side of WooCommerce.

Setting it up

Getting the arrow live takes a few minutes per product:

1. Install Shoplex from Plugins > Add New and activate it. WooCommerce must be active.
2. Open WooCommerce > Shoplex and switch on the Energy label module.
3. Edit an energy-related product and open the Shoplex tab in the product data box.
4. Pick the class and the scale exactly as printed on the supplier’s label.
5. Paste the label URL and the product information sheet URL, then update the product.
6. View the product page and a category page: the arrow sits next to the price in both, and clicking it opens the label.

The Shoplex documentation lists every module, its settings and the act each one implements.

Practical tips

• Copy the scale from the label, not from memory. The delegated act for your product group sets the scale; the printed label is the quickest way to see which one applies.
• Use EPREL links where you can. EPREL, the EU product database, has a label link and a product page for registered models, so you link the supplier’s own documents instead of a copy.
• Check the arrow in a category grid too. The arrow follows the product price, so look at the shop page and any product blocks on the home page, not only the product page.
• Fill the sheet link as well as the label. The arrow without a sheet link covers only half of the Annex VIII pattern.
• Treat the module as a display tool. Shoplex shows what you enter. Whether a product needs a label, and which act and scale apply, is your call as the dealer.

Energy label support versus default WooCommerce

Capability	Default WooCommerce	Shoplex Energy label module
Energy class per product	None	Select from A+++ to G
Scale	None	A to G, A+++ to D, A++ to E, A+ to F
Arrow next to the price	None	Yes, in the colour of the class
Where it shows	n/a	Product page, shop and category grids, product blocks
Label on demand	None	Arrow opens the supplier’s label in a new tab
Product information sheet link	None	“Product information sheet” link next to the arrow
Products without a label	n/a	Nothing renders
Screen reader text	n/a	Class and scale in the link name
Variations	n/a	Inherit the parent’s label
Cost	Free (no energy label support)	Free, no paid edition

Related obligations on the same product page

The energy label is rarely the only legal line next to a price. Shoplex covers the neighbouring duties in the same plugin, each as its own module: the unit price, the lowest price before a discount, the VAT and shipping notices, and product safety details. The guides on GPSR for WooCommerce and the Omnibus directive in WooCommerce cover those two topics.

The short version

If you sell products covered by an EU energy labelling act, Regulation (EU) 2017/1369 Art. 5(1)(a) makes you, the dealer, show the label online too, and the delegated act for your product group sets the scale and the display. Delegated Regulation (EU) 2019/2014 Annex VIII describes the internet version: a class-coloured arrow next to the price that opens the label, plus a “Product information sheet” link. WooCommerce has none of it. The free Shoplex plugin adds four fields per product (class, scale, label URL, sheet URL), prints the arrow beside the product price on product pages, shop grids and product blocks, links the supplier’s label and sheet, and stays silent on any product without a complete label.