SearchLoginTry ShopWired Free

Create your own ecommerce website and start selling successfully with ShopWired today

Create your ecommerce website on ShopWired today.
Start today with 14 days free

Try ShopWired Free

Create your own ecommerce website and start selling successfully with ShopWired today

Create your ecommerce website on ShopWired today.
Start today with 14 days free

Display variations as buttons

Back to articles
Theme Customisations - Coding
31st January 2021

Before you proceed:
The following article contains information that requires you to have some prior knowledge about coding in order to correctly implement the proposed change to your theme. If done incorrectly alterations made to your theme’s code can negatively impact your website causing visual and performance issues. Therefore, we strongly recommend that you only undertake this effort if you are completely confident that you know what you’re doing. If you have no coding experience at all, aren’t entirely comfortable following the instructions in this article or if you simply don’t understand the instructions then we recommend you instead contact our partners, Coding Masters, who will complete the work for you for a set fee.

Pro tip!

If you are using a version 3 or version 4 theme you won't need to add this code to your theme's files to enable variations as buttons. Instead, you just need to activate a setting in your theme's settings.

The normal setup for the display of product variations on your website is to display them as drop downs, allowing users to view the available options as a list. By using the 'variant buttons' extension you can instead display variation choices as buttons as shown on the example below.

If you have variations in different colours then you can display a coloured background for the button as well. Coloured backgrounds for buttons are inserted by placing a hexadecimal colour reference into the variation name, e.g. Red:#FF0000.

Please Note: The code comes with no styling, so it will need to be styled (with CSS or inline styles) to display nicely. 

1. Open the product.twig file (located in /views/product pages/product.twig) and find the code contained within {% for option in product.options %} and {% endfor %}

2. Replace the existing code with the code shown below.

<div class="product-option">
       <input type="hidden" name="value[]" value="" class="product-option-value">
       <label>
              Select Your {{ option.name }}
       </label>
       <div class="product-option-container">
              {% set group = loop.index0 %}
              {% for value in option.values %}
                     {% if not value.hidden %}
                            {% set parts = value.name|split(':#') %}
                            {% set name = parts[0] %}
                            {% set color = parts[1] ? parts[1] : '' %}
                            <label class="rectangle {{ color ? 'color' : '' }}">
                            <input type="radio" name="group{{ group }}" value="{{ value.id }}" class="product-option-input">
                                  <span class="inner" style="{{ color ? ('background-color:#' ~ color ~ ';') : '' }}">
                                           {{ name }}
                                  </span>
                            </label>
                      {% endif %}
                {% else %}
                       <div class="note">
                              Choose an option from the list above...
                       </div>
                       <input type="radio" name="group{{ group }}" value="" class="product-option-input" checked="checked">
                {% endfor %}
          </div>
</div>

As shown in the example below.

Save your changes.

3. To your theme's CSS file (often called default.twig.css) or a LESS file, if they are present on your theme, containing the product styles (often called products.less) you should add the code shown below

.product-option input {
       display: none;
}

4. Download the Javascript file here and add this to your application.js file (located within /assets/js/application.js). This should be at the top of the application.js file.

5. Within application.js you must replace

$('.product-form').productForm();

with:

$('.product-form').customProductForm();

Colour buttons for variations

If you'd like to display coloured backgrounds for the buttons for your variations, you can do so by, when configuring your variations, entering a hexadecimal colour reference after the variation name.

e.g. Red:#FF0000

For example: