create a complex html swatch

Question

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>
<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>
<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>
</div>

These prices are set fix for each virtual product.

Answer 1

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

Answer 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.