Stand with Ukraine. Fight for freedom and democracy

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

Fail to Add Variation Swatches to JetWooBuilder Products Grid

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

To perform the actions described in this article, you will need a JetWooBuilder and Variation Swatches for WooCommerce Pro plugins.

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 > kava-child. Add a new folder and name it “jet-woo-builder.”

add jetwoobuilder folder

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

copy widgets folder

Head back to the “jet-woo-builder” folder in the child theme’s folder. Paste the copied “widgets” folder there.

paste widgets 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.

products grid folder

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

products grid files

Please note, there is a short array syntax, which replaces array () with [] due to the PHP version.

Open the “loop-item” file via Notepad. Add the 'wvs-pro-product' class to $classes like that:

loop-item code

Open the “item-button” file and add to the $class block this code: wvs_pro_archive_variation_template();

item-button code

Open the “item-price” file and add the 'price' class like that:

item-price code

Now, turn back to the htdocs > wp-content > themes > your child theme folder. Find the functions.php file and open it via Notepad.

functions file

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

The result will look like that:

before and after variation swatches

To add the Variation Swatches to the archive page, you don’t need to perform steps 1-9. Go to the htdocs > wp-content > themes > your child theme folder, find the functions.php file, open it via Notepad and add this code after the “}” symbol. Afterward, do Step 10 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