I want to create a complex swatch that consists of html code I can style and includes not just the attribute value (like size or color) but also the price and maybe the attribute unit like (cm, m, ...).

How would I do this?

The result would maybe look like this, imagine some sort of cable:

<div class="swatch-option text" option-type="0" option-id="4" option-label="1m" option-tooltip-thumb="" option-tooltip-value="1m">
    <p class="icon-tape">1m</p>
    <p class="price-big">$7</p>
    <sub>($7 per m)</sub>
<div class="swatch-option text" option-type="0" option-id="5" option-label="3m" option-tooltip-thumb="" option-tooltip-value="3m">
    <p class="icon-tape">3m</p>
    <p class="price-big">$18</p>
    <sub>($6 per m)</sub>
<div class="swatch-option text" option-type="0" option-id="6" option-label="5m" option-tooltip-thumb="" option-tooltip-value="5m">
    <p class="icon-tape">5m</p>
    <p class="price-big">$25</p>
    <sub>($5 per m)</sub>

These prices are set fix for each virtual product.

2 Answers 2


I think your best option would be to override the swatch template in your template and go from there. For layered navigation, this file is located in module-swatches/view/frontend/templates/product/layered/renderer.phtml.

In this template you have a variable called $swatchData which has various information that you can use to enrich your template. But please note that swatches are used for filtering and they don't contain individual product information. Therefore getting product information (such as price) may be more challenging.

  • Thanks for your answer. I tried a few things and already found renderer.phtml. But I didn't want to include it in the question to not lead into a false direction maybe. I also think the most difficult part would be getting the price info into the $swatchData. I tried around here too but only found several places where $swatchData was build up but unfortunately I wasn't able to get the price in at the appropriate place. I could change the $label text but not the $swatchesData['swatches'][$option]['value'] text. But well maybe there is an easier way...
    – steros
    Jan 10, 2017 at 9:48

I ended up overwriting configurable.phtml with my own custom swatch code and html.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.