Adding Variation Swatches to JetWooBuilder Products Widgets

Find the folder with WordPress files on your PC. Go to htdocs > wp-content > themes > your child theme folder. Add a new folder and name it “jet-woo-builder.”

Move to the htdocs > wp-content > plugins > jet-woo-builder > templates and copy the “widgets” folder to the “jet-woo-builder” folder in the child theme’s folder.

Open the jet-woo-builder > widgets. The necessary widgets are located in the “global” folder, so delete the rest of the folders.

Open the “products-grid” folder and leave only the “item-button” and “loop-item” files.

Open the “loop-item” file via Notepad, Sublime, or another code editor of your choice.

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

Add the copied class to the “$classes” line:

wvs-archive-product-wrapper

Save changes, open the “item-button” file, and add this code to the “$class” block:

woo_variation_swatches()->show_archive_page_swatches();

Don’t forget to save the code.

Turn back to the htdocs > wp-content > themes > your child theme folder. Find the “functions.php” file and open it via the editor.

Add this piece of code:

Save the file and proceed to the front end to check the Products Grid widget.

Alternatively, you can add Variation Swatches everywhere where the price is displayed. To do so, follow the next steps. 

Go to the htdocs > wp-content > themes > your child theme folder, find the “functions.php” file, open it via the code editor (Notepad, Sublime, etc.), and add this code after the “}” symbol.

Afterward, do the previous step from the upper list. In this case, the variation swatches will only be added to the archive page.