{"id":30135,"date":"2022-11-04T10:33:07","date_gmt":"2022-11-04T10:33:07","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/troubleshooting\/fail-to-add-variation-swatches-to-jetwoobuilder-products-grid-or-list\/"},"modified":"2024-12-13T14:30:20","modified_gmt":"2024-12-13T14:30:20","slug":"fail-to-add-variation-swatches-to-jetwoobuilder-products-grid-or-list","status":"publish","type":"tips-and-tricks","link":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/fail-to-add-variation-swatches-to-jetwoobuilder-products-grid-or-list\/","title":{"rendered":"Adding Variation Swatches to JetWooBuilder Products Widgets"},"content":{"rendered":"\n

From this tutorial, you will learn how to add variation swatches to the JetWooBuilder<\/em> widgets using the Variation Swatches<\/em> for WooCommerc<\/em>e functionality.<\/p>\n\n\n\n

Adding Variation Swatches to the Product Grid<\/strong><\/h2>\n\n\n\n
\n

Find the folder with WordPress files on your PC. Go to htdocs > wp-content > themes > your child theme folder<\/em><\/strong>. Add a new folder and name it \u201c<\/strong>jet-woo-builder.\u201d<\/strong><\/p>\n\n\n\n

\"jetwoobuilder<\/a><\/div>\n\n\n\n

Move to the htdocs > wp-content > plugins > jet-woo-builder > templates<\/em><\/strong> and copy the \u201c<\/strong>widgets\u201d<\/strong> folder to the \u201c<\/strong>jet-woo-builder\u201d<\/strong> folder in the child theme\u2019s folder.<\/p>\n\n\n\n

\"widgets<\/a><\/div>\n\n\n\n

Open the jet-woo-builder > widgets<\/em><\/strong>. The necessary widgets are located in the \u201c<\/strong>global\u201d <\/strong>folder, so delete the rest of the folders.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

If you work with the Products List<\/a> widget, delete all the folders except for the \u201cproducts-list.\u201d<\/p><\/div><\/div>\n\n\n\n

\"products-grid<\/a><\/div>\n\n\n\n

Open the \u201c<\/strong>products-grid\u201d<\/strong> folder and leave only the \u201c<\/strong>item-button\u201d <\/strong>and \u201c<\/strong>loop-item\u201d<\/strong> files.<\/p>\n\n\n\n

\"files<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Adding CSS Classes<\/strong><\/h2>\n\n\n\n
\n

Open the \u201c<\/strong>loop-item\u201d<\/strong> file via Notepad<\/strong>, Sublime<\/strong>, or another code editor of your choice.<\/p>\n\n\n\n

Before adding the class, check the needed one in the Archive \/ Shop <\/strong>tab of the WordPress Dashboard > GetWooPlugins > Swatches Settings <\/em><\/strong>directory. Here, you should find the Product wrapper <\/strong>field and copy its value.<\/p>\n\n\n\n

\"variation<\/a><\/div>\n\n\n\n

Add the copied class to the \u201c$classes\u201d line:<\/p>\n\n\n\n

wvs-archive-product-wrapper<\/code><\/pre>\n\n\n\n
\"classes<\/a><\/div>\n\n\n\n
Save changes, open the \u201c<\/strong>item-button\u201d<\/strong> file, and add this code to the \u201c$class\u201d block:<\/p>\n\n\n\n
woo_variation_swatches()->show_archive_page_swatches();<\/code><\/pre>\n\n\n\n
\"item-button<\/a><\/div>\n\n\n\n
Don\u2019t forget to save the code.<\/p>\n<\/div><\/div>\n\n\n\n
Adding a Code to functions.php<\/strong><\/h2>\n\n\n\n
\n
Turn back to the htdocs > wp-content > themes ><\/em> your child theme folder<\/em><\/strong>. Find the \u201cfunctions.php\u201d <\/strong>file and open it via the editor.<\/p>\n\n\n\n
\"functions<\/a><\/div>\n\n\n\n
Add this piece of code:<\/p>\n\n\n
<\/svg><\/div>
Warning<\/div>
Don't add the \"<?php\" line to the beginning of the code snippet as it only should be added once in the beggining of the file. Copy the code beginning from the \"add_filter...\" value.<\/p><\/div><\/div>\n\n\n\n