Missing core hooks and missing jQuery custom events

I was digging into your plugin to assist a client with some cross-compatibility issues between the product filter, woo variation swatches, and Display product variations dropdown on shop page.

The Display product variations dropdown on shop page plugin effectively swaps the loop’s default add to cart form with the single product’s add to cart form. This allows for variations (and their swatches) to be shown in the shop loop.

On page load, this all works together fairly well: https://share.getcloudapp.com/DOu289r8

However, when filtering with your widget, the shop loop is reloaded via ajax and there are 2 issues.

1. Missing core hooks

The Display product variations plugin makes the template swap on the woocommerce_before_shop_loop action hook. .It removes the default template function and adds the single template in it’s place:

function nivariation_woocommerce_before_shop_loop() {
	$niwoovd_setting =  get_option("niwoovd_setting",array());
 	$enable_variation_dropdown = sanitize_text_field(isset($niwoovd_setting["enable_variation_dropdown"])?$niwoovd_setting["enable_variation_dropdown"]:"no");
	if ($enable_variation_dropdown  =="yes"){
		remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
		add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 30 );
	}
}

This switch doesn’t happen your plugin’s ajax reload of the shop content since your plugin doesn’t have a woocommerce_before_shop_loop hook (or woocommerce_after_shop_loop either)

1b. It seems like the plugin is manually piecing the shop loop together when WooCommerce already knows how to create a shop loop (there’s a shortcode for it that might help too) if you just feed it the correct query information. Relying more on Woo defaults also usually results in better cross-compatibility too in my experience.

2. No jQuery triggers when content is finished loading

I mentioned the swatches plugin earlier and the swatches scripts are initialized on page load. In order to use them on the dynamically loaded content, I need to re-initialize them. However, there’s no custom trigger to listen for to know when the content is completely loaded.