[Resolved] a woocommerce product is not showing when selecting a taxonomy

[Author]

Posts

[a.e.a.m.S]

I am trying to: filter the woocommerce products by a taxonomy filter.

Link to a page where the issue can be seen: in development, i can send the link in a private message.

I expected to see: all the products from the selected taxonomy in question.

Instead, I got: product "Kunstkaarten set van 5" with taxonomy (kunstkaarten) is not showing up, while product "Kunstkaart" IS showing. Also the productimages do not show up after selecting a taxonomy, they are only visible after a refresh of the page or when clicking on "De Webshop" in the main menubar.

[Christian Cox]

Hi, can you try these troubleshooting steps first?
- Temporarily activate a default theme like Twenty Nineteen, then deactivate all plugins except Types, Views, Layouts, WooCommerce Views, and WooCommerce.
- Test again. If the problem is solved, reactivate your theme and other plugins one by one until the problem returns.
- If the problem was not solved, I'll have to take a closer look. Let me know if it's okay to create a clone of your site using the Duplicator plugin.

[a.e.a.m.S]

Hi Christian,

I have done the steps to troubleshoot you suggested, it doesn't change the behaviour, same output on taxonomy filter "Kunstkaarten", only 1 product showing without the product image.

I have the Duplicator plugin installed, made a backup beforehand, you can use that one if you want or login directly.
Login credentials are placed in the private message in reply: #1260195.

[Christian Cox]

Hi, I rebuilt the Product Category filter and it seems to be working better now. Can you confirm?

[a.e.a.m.S]

Indeed, both the products are now shown, that's very nice!
Unfortunately the productimages are still not showing up unless a page refresh is done, do you have any idea what could be causing that behaviour?

Almost there.... 🙂

[Christian Cox]

I added this code in the View's filter JS panel:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	jQuery('.woocommerce-product-gallery.woocommerce-product-gallery--with-images').css('opacity',1);
});

That should update the opacity of the results after they are updated.

[a.e.a.m.S]

Okay, that code is now showing the productimage, nice!

The only thing remaining is that the productimage is now behaving differently, it is clickable now and it has no zoom magnifier, as soon as you refresh the page the zoom magnifier returns....

[Christian Cox]

After a bit of discussion with the team, it turns out this is a known issue and our developers are working on it. The only workaround available right now is the code I provided, which should fix the image visibility problem in AJAX. However, the zoom and click events aren't functioning as expected right now. You can disable AJAX updates for this View if you'd like. You can also follow progress on the AJAX updates scale and zoom bug here: https://toolset.com/errata/woocommerce-products-images-are-not-being-shown-if-they-are-added-in-a-views-slider/

I'll keep this ticket updated as I receive more information about the fix for that. Right now I don't have a solid timeline available for resolution just yet.

[a.e.a.m.S]

Thanks for the heads-up and the workaroundfix, as for now i'll be using your code, the website will be going live in a few days. i will be following the progress of the development team.

Thanks again for your effort!

[Christian Cox]

Hi, our team is going through some older tickets and found that this one seems to have been overlooked. The magnification / zoom effect for image galleries should be functioning normally now in a WooCommerce Views template for single Products when you use the wpv-woo-product-image shortcode:

[wpv-woo-product-image]

Please let me know if that is not the case and I can take a closer look to resolve this ticket.

[a.e.a.m.S]

Hi, the magnification/zoom effect is working on WooCommerce Views template for single Products,.
On the Taxonomy page it is not working directly, only after a refresh of the page.

WORKING
hidden link

NOT WORKING
hidden link

[Christian Cox]

Okay please add the following JavaScript code to this View/WP Archive's Loop Editor JS panel:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
 
  /**
  * data.view_unique_id (string) The View unique ID hash
  * data.layout (object) The jQuery object for the View layout wrapper
  */
   
  /** Initialize all galleries on page. **/
  jQuery( '.woocommerce-product-gallery' ).each( function() {
    jQuery( this ).wc_product_gallery();
  });
 
});

This should initialize the new product galleries after an AJAX update. Please let me know the results.

[a.e.a.m.S]

My issue is resolved now. Thank you!