How to add stylish variation swatches to the Products Grid or Products List and WooCommerce archive page using JetWooBuilder and Variation Swatches for WooCommerce plugins functionality?
- JetWooBuilder plugin installed and activated;
- WooCommerce plugin installed and activated;
- Elementor editor free version;
- Variation Swatches for WooCommerce Pro plugin installed and activated;
- Child theme;
- Added variable WooCommerce products.
Let’s start with adding Variation Swatches to the Product Grid/List.
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; that’s why you should delete the rest of the folders.
Proceed to the “global” folder. You will see the list of files there. Delete all but the “products-grid” folder.
Open the “products-grid” folder and leave only the “item-button,” “item-price,” and “loop-item” files.
Open the “loop-item” file via Notepad, Sublime, or another code editor of your choice.
Add such class to $classes (the 16th line):
- If you have the Variation Swatches for WooCommerce Pro plugin version less than 2.0.0, you can add:
- If you have at least the 2.0.0 plugin version, you can use:
- For compatibility with the old and new versions of the plugin, you can add two classes at once:
Save changes, open the “item-button” file, and add to the $class block this code:
Open the “item-price” file and add such a class:
Turn back to the htdocs > wp-content > themes > your child theme folder. Find the functions.php file and open it via the editor.
After one of the “}” symbols, add this code.
Then, proceed to the front end to check the Products Grid widget.
To add the Variation Swatches to the archive page, you don’t need to perform steps 1-8. 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 Step 9 from the upper list. In this case, attractive swatches will be added to the archive page only.