Swatches


Change Buttons Size / Shape

With the border-radius property, you can change the buttons shape. The smaller the value the more square the shape. With the width and height properties you can change the buttons size.

Add this style after the plugin code.

<!-- Plugin Swatches - Change Buttons Size / Shape -->
<style>
.c-swatches__button[data-value="Option Name"] {
  border-radius: 100%;
  width: 30px;
  height: 30px;
}
</style>
<!-- end Plugin Swatches - Change Buttons Size / Shape -->

For example, if you want to change Size buttons shape to a square and slightly increase size, the CSS code will look like this:

.c-swatches__button[data-value="Size"] {
  border-radius: 0%;
  width: 35px;
  height: 35px;
}

Dim Buttons If Selected Variant Is Unavailable

Add this code after the plugin code:

<!-- Dim Buttons If Selected Variant Is Unavailable -->
<style>
.c-swatches__button.is-unavailable {
  opacity: 0.25;
}
</style>
<script>
function dimButtonsIfVariantUnavailable() {
  var price = document.querySelector('.view-item .product-price');
  var buttons = [].slice.apply(document.querySelectorAll('.c-swatches__button'));
  if (!price || !buttons.length) return null;

  buttons.forEach(function(button) {
    button.addEventListener('click', function() {
      buttons.forEach(buttonsHandler);
    });
  });

  function buttonsHandler(button) {
    button.classList.remove('is-unavailable');
    if (price.textContent === 'Unavailable' && button.classList.contains('is-active')) {
      button.classList.add('is-unavailable');
    }
  }
}
document.addEventListener('DOMContentLoaded', dimButtonsIfVariantUnavailable);
window.addEventListener('mercury:load', dimButtonsIfVariantUnavailable);
</script>
<!-- end Dim Buttons If Selected Variant Is Unavailable -->
swatchesDmitry Kiselyov