Topic Tag: WooCommerce

Problem:
The user was using the woocommerce gallery in a view of products, the images were not displaying after AJAX filtering.

Solution:
The view is generating WooCommerce galleries instead of only the product image, using the following shortcode:

[wpv-woo-product-image size="woocommerce_thumbnail"]

The galleries are initialized on the first load, but after subsequent AJAX requests(after filtering) the galleries are not initialized, we need to add custom Javascript code to do it. I added the following code to trigger galleries initialization after filtering with AJAX or after AJAX pagination. http://prntscr.com/xswedy

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated js_event_wpv_pagination_completed', function( event, data ) {
    jQuery( '.woocommerce-product-gallery' ).each( function() {
      jQuery( this ).wc_product_gallery();
    } );
});

Relevant Documentation: https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/