Triggering the variation swatches after AJAX loading

  • I would like to share the solution I’ve found regarding the variation swatches working after ajax loading. By default it doesn’t work. So if anyone having this trouble, simply add the following code into the functions.php file to initialize the swatches again after ajax loading.

    	jQuery(document).ajaxComplete(function(){
		jQuery('.variations_form').each(function () {
			jQuery(this).wc_variation_form();
			jQuery(this).tawcvs_variation_swatches_form();
		});
	});

    One thing I would like to request to plugin author that if he could initialize the swatches on ajax load by default, it would be great.

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)

  • This code fix the issue in shop page but swatches stops work fine in product page.

    Thread Starter Showhan Ahmed

    (@showhan)

    Sorry for the delay! If you’re still having trouble with that on single product page, you can modify the code a bit, so that it works only for archive pages, not affect in single product page. Just add the archive class for this.

    
jQuery(document).ajaxComplete(function(){
	jQuery('.archive .variations_form').each(function () {
		jQuery(this).wc_variation_form();
		jQuery(this).tawcvs_variation_swatches_form();
	});
});

    And sorry, I should have written to add it to JS file instead of functions.php. ??

    To which JS file should I write the code? I am using a child theme.

    Thread Starter Showhan Ahmed

    (@showhan)

    Sorry for the delay! You can write that to any JS file which works in footer, I mean that is enqueued to work on footer.

    • This reply was modified 4 years, 6 months ago by Showhan Ahmed.

    Thank you @showhan

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Triggering the variation swatches after AJAX loading’ is closed to new replies.