Stand with Ukraine. Fight for freedom and democracy

Donate
Troubleshooting //
Fail to Add Variation Swatches to JetWooBuilder Products Grid or List

Fail to Add Variation Swatches to JetWooBuilder Products Grid or List

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:

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.

add a new jet-woo-builder folder to the kava-child folder

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.

copy the widget 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.

global folder

Proceed to the “global” folder. You will see the list of files there. Delete all but the “products-grid” folder.

products-list folder

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

loop-item item-price and item-button
NOTE!
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
loop-item code editing

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

wvs_pro_archive_variation_template();
item-button code editing
NOTE!
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();
item-button code editing for new plugin version

Open the “item-price” file and add such a class:

price
item-price code editing

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

functions

After one of the “}” symbols, add this code.

functions code editing

Then, proceed to the front end to check the Products Grid widget.

products grid with variation swatches on the front end

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.

Was this article helpful?
YesNo
Still need help?
Submit a request