fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Swatches on archive page

Katie Steel

I have just upgraded to the Pro version in order to use swatches on my shop page (they are working on the single product page)

I am using Toolset Types and have created a WordPress archive for my products with a content template for the loop.

If I include [wpv-post-taxonomy type=”pa_colour” format=”name”] it shows the attribute by name but I don’t know how to make it display swatches instead.

Katie Steel

I have not yet heard anything in response to my query and am unable to proceed. I need to know whether this plugin will work for me or whether to request a refund.

I am using a Genesis Child Theme and can send you two links to illustrate what is happening.

When I use the default Woocommerce loop I get this:

https://carbonfibre.devpage.co.uk/product-category/carbon-fibre-shop/

When I use my custom loop for my shop I get this

https://carbonfibre.devpage.co.uk/shop/

The swatches are displaying but not within the product loop.
I would appreciate a timely response.

Thankyou

Hakik Zaman

Hi Katie,

Thanks for reaching out to us. We are sorry for our late response. We are facing nationwide internet interruption.

Can you please give us temporary admin access to your site? We’ll try to investigate the issue for you.

You can use this plugin to give us a temporary login link to access your site.

Or,

You can add new users by going to Users > Add New set the user and password for us, set the role to admin, and set the info here.

Add your site URL, login username, and password in the site login area. Follow this guideline: https://www.useloom.com/share/27c1f2ac633c4060b2da883d946107d7

Hope to hear from you soon!

Hakik Zaman

Hi Katie,

I am using Toolset Types and have created a WordPress archive for my products with a content template for the loop.

Can you please try this shortcode- [wvs_show_archive_variation] instead of  [wpv-post-taxonomy type=”pa_colour” format=”name”] inside your loop?

Note: There is a massive student protest ongoing within the country, and the government has shut down the internet for the past five days. You can check the situation on YouTube if you want more information. Now the internet is available with very limited speed.

So, I was unable to check your full template setup. Please try the mentioned shortcode [wvs_show_archive_variation]inside your product template loop and let me know how it goes.

Hope to hear from you soon.

Thank You

Katie Steel

Thank you for your response under difficult circumstances!

I have tried the shortcode and the swatches are now displayed twice but again, not within the product loop.

If you can access it you can see it here https://carbonfibre.devpage.co.uk/shop/

Otherwise I will try to describe the situation:

The swatches are listed (twice) at the top left position on the shop page before the listings start.
By inspection there is
ul.products columns-4 followed by
div.wvs-archive-variations-wrapper wvs-pro-loaded
many times  to contain all the product swatches

These come before the div class=”wpv-view-wrapper”
which contains the actual product listing.
This is created as a WordPress archive within the Toolset Types, Toolset Blocks and Toolset Woocommerce Blocks

I apologise if this does not mean much to you but I hope it helps

Thank you

Hakik Zaman

Hi Katie,

Thanks a lot for sharing it in detail and understanding the situation.

Please install a plugin called Code Snippets. Then add the following snippet using that plugin.

add_action('woo_variation_swatches_pro_archive_page_loaded', function($wvs_pro){ remove_action('woocommerce_init', array( $wvs_pro, 'enable_swatches' ), 1);
}, 10, 1);
add_shortcode( 'wvs_show_archive_variation_ob_version', function(){
ob_start();
echo do_shortcode('[wvs_show_archive_variation]');
return ob_get_clean();
} );

Note: The above snippet will not work inside the theme’s functions.php file.

Then replace the [wvs_show_archive_variation] with this [wvs_show_archive_variation_ob_version]inside your product template loop and let me know how it goes.

Hope to hear from you soon.

Thank You

Katie Steel

I have done both the above and the situation is now:

The swatches are still appearing as described previously

The shortcode in my product loop is displaying as text.

Thank you

Hakik Zaman

Hi Katie,

You didn’t enable the snippet. I have enabled it for you- https://paste.pics/RJ5OG

Please check now and let me know if it is the behavior you wanted.

Note: Before checking don’t forget to clear your caches like- browser cache, caching plugin cache, and server-side cache.

Hope to hear from you soon.

Thank You

Katie Steel

Thank you for that and sorry for the silly oversight!

The swatches are displaying well within the product loop now so a great improvement.

The only remaining issue is that they are also still listed at the top of the shop page.

Thank you for your continuing help

** For information – I can stop the extra list displaying using CSS unless you have a more sophisticated solution

Hakik Zaman

Hi Katie,

Do you have an option to remove the “View Options” or “Add to bag” buttons?

If so, can you please disable them for a test? If you have an option to disable the product title, price, etc.

Please also try to disable them one by one and check whether the above swatches are still there or not.

Hope to hear from you soon.

Thank You

Katie Steel

Yes, thank you

I had the View Options in a div to enable some particular layout.

If I remove that div then things are looking good.

I will work around my other display issues and be aware of possible imapacts on the swatches.

For now they appear to be displaying as required.

Many thanks for your help under such difficult circumsatances