Troubleshooting //
How to Add Variation Swatches to JetWooBuilder Products Grid

How 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 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.

  1. Find the folder with WordPress files on your PC. Go to htdocs > wp-content > plugins > jet-woo-builder > templates and copy the “jet-woo-products” folder.

    JetWooProducts folder
  2. Move to the htdocs > wp-content > themes and open your child theme’s folder. Create a folder named “jet-woo-builder” in it. Paste the copied “jet-woo-products” folder there.

    adding JetWooBuilder folder to child theme
  3. Open the jet-woo-products > global folder. You will see the list of files there. Delete all but “item-button”, “item-price” and “loop-item”.

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

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

    item-button code
  6. Open the “item-price” file and add the 'price' class like that:

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

    child theme functions file

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

The result will look like that:

variation swatches example

To add the Variation Swatches to the archive page you don’t need to perform steps 1-5. 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 the 6 and 7 steps 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