WooCommerce event not triggering when using Select2 instead of actual select

Question

I've built a custom website using Wordpress and WooCommerce and have installed Select2 to generate custom selects which is working fine. The issue I am having is with some of the selects on the WooCommerce pages, specifically those that trigger an event on change.

The custom selects successfully change the option selected, but the issue arises with selects that are meant to trigger an event. For example, the colour variation dropdown on the product page or the 'Sort By' select on the store page.

I've looked through the WooCommerce JS files and discovered some WooCommerce specific events that are triggered when a selection is made using the actual select box but I'm not sure how to implement this when using Select2 instead.

Here is a copy of the WooCommerce JS in relation to the event I'm talking about (in this case the change to the select for product variations):

.on( 'change', '.variations select', function() {
        $form.find( 'input[name="variation_id"], input.variation_id' ).val( '' ).change();
        $form.find( '.wc-no-matching-variations' ).remove();

        if ( $use_ajax ) {
            if ( $xhr ) {
                $xhr.abort();
            }

            var all_attributes_chosen  = true;
            var some_attributes_chosen = false;
            var data                   = {};

            $form.find( '.variations select' ).each( function() {
                var attribute_name = $( this ).data( 'attribute_name' ) || $( this ).attr( 'name' );

                if ( $( this ).val().length === 0 ) {
                    all_attributes_chosen = false;
                } else {
                    some_attributes_chosen = true;
                }

                data[ attribute_name ] = $( this ).val();
            });

            if ( all_attributes_chosen ) {
                // Get a matchihng variation via ajax
                data.product_id = $product_id;

                $xhr = $.ajax( {
                    url: wc_cart_fragments_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'get_variation' ),
                    type: 'POST',
                    data: data,
                    success: function( variation ) {
                        if ( variation ) {
                            $form.find( 'input[name="variation_id"], input.variation_id' )
                                .val( variation.variation_id )
                                .change();
                            $form.trigger( 'found_variation', [ variation ] );
                        } else {
                            $form.trigger( 'reset_data' );
                            $form.find( '.single_variation_wrap' ).after( '<p class="wc-no-matching-variations woocommerce-info">' + wc_add_to_cart_variation_params.i18n_no_matching_variations_text + '</p>' );
                            $form.find( '.wc-no-matching-variations' ).slideDown( 200 );
                        }
                    }
                } );
            } else {
                $form.trigger( 'reset_data' );
            }
            if ( some_attributes_chosen ) {
                if ( $reset_variations.css( 'visibility' ) === 'hidden' ) {
                    $reset_variations.css( 'visibility', 'visible' ).hide().fadeIn();
                }
            } else {
                $reset_variations.css( 'visibility', 'hidden' );
            }
        } else {
            $form.trigger( 'woocommerce_variation_select_change' );
            $form.trigger( 'check_variations', [ '', false ] );
            $( this ).blur();
        }

        // Custom event for when variation selection has been changed
        $form.trigger( 'woocommerce_variation_has_changed' );
    } )

And then my own attempt to utilise this event:

$('#pa_colour').select2();
$('#pa_colour').on('change', function(){
    var $form = $(this).parents('form');
    $form.trigger( 'woocommerce_variation_select_change' );
    $form.trigger( 'woocommerce_variation_has_changed' );
});

Unfortunately the site isn't live yet so I can't provide a link but hopefully you get the idea.

If someone can help me here I'd be so appreciative, I'm not exactly sure how Wordpress hooks (if this is what this is) work and I may be just missing something obvious.

Thanks, Kathryn

Answer 1

This isn't a solution exactly, but I ended up replacing the Select2 plugin with the Selectric plugin and that works perfectly. Oh well! Thanks guys. http://lcdsantos.github.io/jQuery-Selectric/

Answer 2

I came across the same issue and found a solution in the last comment in this thread Select2 not showing selected value

The comment by Matt inspired by Kevin suggested wrapping the select2 call in $(window).bind("load", function() {...}); which worked for me.

Kudos to those guys.