Contact
Questions about an order, a product, sizing, or a return? Our U.S. based team is here to help.
Looking for quick answers? Shipping · Returns · FAQ
* Envolver en: * * Converts every variation into clickable swatch buttons. * Falls back gracefully if WooCommerce isn't loaded. */ (function () { 'use strict'; function buildSwatches(select) { if (!select || select.dataset.sasSwatched) return; select.dataset.sasSwatched = '1'; // hide the native select select.classList.add('sas-hidden-select'); // create wrapper var wrap = document.createElement('div'); wrap.className = 'sas-swatch-wrap'; var options = Array.from(select.options); options.forEach(function (opt) { if (opt.value === '') return; // skip "Choose an option" var btn = document.createElement('button'); btn.type = 'button'; btn.className = 'sas-swatch'; btn.textContent = opt.text; btn.dataset.value = opt.value; if (opt.disabled) btn.classList.add('disabled'); if (select.value === opt.value) btn.classList.add('selected'); btn.addEventListener('click', function () { if (btn.classList.contains('disabled')) return; // deselect all wrap.querySelectorAll('.sas-swatch').forEach(function (b) { b.classList.remove('selected'); }); // select this one btn.classList.add('selected'); // sync native select and trigger WooCommerce change event select.value = btn.dataset.value; select.dispatchEvent(new Event('change', { bubbles: true })); }); wrap.appendChild(btn); }); // insert wrap right after the select select.parentNode.insertBefore(wrap, select.nextSibling); } function initSwatches() { // target only variation selects inside the product form document .querySelectorAll( '.woocommerce div.product form.cart .variations select, ' + '.woocommerce-variation-add-to-cart select' ) .forEach(buildSwatches); } // run on DOMContentLoaded if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initSwatches); } else { initSwatches(); } // re-run after WooCommerce AJAX updates (e.g. quantity changes) document.addEventListener('wc_variation_form', initSwatches); jQuery(document).on('woocommerce_update_variation_values', initSwatches); })();