New Year Deal Returns 50% Deals Return Coupon code: NewYear2026

Variation Swatches not working after Product is loaded via Ajax

Eden Brownlee

Hi support team,

First of all great plugin! However, I created a custom shortcode that would load products via AJAX using wc_get_template_part( ‘content’, ‘product’ ); however, when the products are loaded the click event on the swatches no longer work.

Please advise

Thanks

Eden Brownlee

Here’s my ajax script if needed. I think I just need the right event to trigger the variation swatches on click event on my ajax call.

<script>
(function($) {
$(document).ready(function(){

$('ul.<?php echo $custom_class;?>-list li').on('click', function(e) {

var $this = $(this); //cache selector to use in $.ajax({})

e.preventDefault();

$.ajax({
url: ajax_params.ajaxurl,
type: 'POST',
data: {
action: 'ajax_category_filter', //handler
term_id: $(this).attr('id'),
},
beforeSend: function() {
$this.find('i').addClass('visbile');
$this.find('i').removeClass('hidden');

},
success: function (result) {
$this.find('i').removeClass('visibile');
$this.find('i').addClass('hidden');
$('div#response').hide();
$('div#response').html(result);
$('div#response').fadeIn('slow');

},
error: function (errorThrown) {
console.log('error');
},
complete: function(){
}
})
});

$('ul.<?php echo $custom_class;?>-list li').on('click', function(e){
e.preventDefault();
$('ul.<?php echo $custom_class;?>-list li.active').removeClass('active');
$(this).addClass('active');
});

}); //ready
})(jQuery);
</script>

Eden Brownlee

Here’s a screen recording for some visualization

https://www.awesomescreenshot.com/video/16848154?key=a3115298da622be42a54bb22190f8ecc

I updated my code and added this snippet which I found on the public ticket forum, it now handles the click event but does not update my ‘select options’ button to ‘add to cart’.

Please advise

$(document).ready(function(){

$('ul.<?php echo $custom_class;?>-list li').on('click', function(e) {

var $this = $(this); //cache selector to use in $.ajax({})

$('.variations_form').each(function(){ //added this new code that I found in the forum
$(this).wc_variation_form();
});

e.preventDefault();

$.ajax({
url: ajax_params.ajaxurl,
type: 'POST',
data: {
action: 'ajax_category_filter', //handler
term_id: $(this).attr('id'),
},
beforeSend: function() {
$this.find('i').addClass('visbile');
$this.find('i').removeClass('hidden');

},
success: function (result) {
$this.find('i').removeClass('visibile');
$this.find('i').addClass('hidden');
$('div#response').hide();
$('div#response').html(result);
$('div#response').fadeIn('slow');

},
error: function (errorThrown) {
console.log('error');
},
complete: function(){
}
})
});

$('ul.<?php echo $custom_class;?>-list li').on('click', function(e){
e.preventDefault();
$('ul.<?php echo $custom_class;?>-list li.active').removeClass('active');
$(this).addClass('active');
});

}); //ready
})(jQuery);

Hakik Zaman

Hi Eden,

Thanks for reaching out to us. You can try your success function like this:

success: function (result) {
$this.find('i').removeClass('visibile');
$this.find('i').addClass('hidden');
$('div#response').hide();
$('div#response').html(result);
$('div#response').fadeIn('slow');
// WVS Archive Trigger
$(document).trigger('woo_variation_swatches_pro_init'); 

},

Thank You