{"id":10528,"date":"2024-05-20T11:53:18","date_gmt":"2024-05-20T08:53:18","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=10528"},"modified":"2024-05-20T11:59:36","modified_gmt":"2024-05-20T08:59:36","slug":"load-variation-swatches-css-forcefully","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/code-snippets\/load-variation-swatches-css-forcefully\/","title":{"rendered":"Load &#8220;Variation Swatches&#8221; CSS forcefully"},"content":{"rendered":"\n<p>Blocksy 2&#8217;s variation swatches feature is great and lets your visitors quickly glance at the available product offerings, with a visual input that makes their choices easier. <\/p>\n\n\n\n<p>However, if a set of features aren&#8217;t detected as enabled, the CSS file for the variation swatches feature won&#8217;t load. This was made for performance reasons and also to not load redundant code when it is not needed.<\/p>\n\n\n\n<p>For example, if you use some kind of a plugin to output product cards, and you see that the swatches module is not rendered as it should &#8211; you may need to forcefully load the variation swatches CSS.<\/p>\n\n\n\n<p>This can be done with a simple snippet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter('blocksy:ext:woocommerce-extra:swatches:css', function(){&nbsp;  <br>    return true;<br>});<\/code><\/pre>\n\n\n\n<p>Or, you can load the CSS file on a specific page, for example only on the single product page:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter('blocksy:ext:woocommerce-extra:swatches:css', function(){\n    if (is_singular('product')) {\n        return true;\n    }\n   \n    return false;\n});<\/code><\/pre>\n\n\n\n<p>Please note that this snippet will only work in specific cases, as required by custom implementations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blocksy 2&#8217;s variation swatches feature is great and lets your visitors quickly glance at the available product offerings, with a visual input that makes their choices easier. However, if a set of features aren&#8217;t detected as enabled, the CSS file for the variation swatches feature won&#8217;t load. This was made for performance reasons and also [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[125],"class_list":["post-10528","documentation","type-documentation","status-publish","hentry","doc_categories-code-snippets"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/10528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=10528"}],"version-history":[{"count":2,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/10528\/revisions"}],"predecessor-version":[{"id":10532,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/10528\/revisions\/10532"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=10528"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=10528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}