Question
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?
Answer
Tutorial requirements:
- 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.
Please note that a short array syntax replaces array () with [] due to the PHP version.
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:
wvs-pro-product- If you have at least the 2.0.0 plugin version, you can use:
wvs-archive-product-wrapper- For compatibility with the old and new versions of the plugin, you can add two classes at once:
wvs-pro-product wvs-archive-product-wrapper
Save changes, open the “item-button” file, and add to the $class block this code:
wvs_pro_archive_variation_template();
You can still use such a code in the 2.0.0 version and newer of the Variation Swatches for WooCommerce Pro plugin, but it’s deprecated and could be deleted after some updates, so we recommend using such a method with new versions of plugin beginning with 2.0.0:
woo_variation_swatches()->show_archive_page_swatches();
Open the “item-price” file and add such a class:
price
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.