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

Here is the link to the JS file I'm referring to: github.com/woothemes/woocommerce/blob/master/assets/js/frontend/… — Kathryn Rollins
You are using select2 on variation attributes? How will customers know what colors/variations you have available in order to search for them? — helgatheviking
@helgatheviking I'm not sure what you mean, the options still display as they would usually they just look different? — Kathryn Rollins
I guess I was just used to using Select2 in the admin and typing to search. The select2 docs says that the "change event is triggered on the original element whenever its value is changed by the user". So I'm stumped for the moment. — helgatheviking
Yeah it's a mystery hey? @helgatheviking thanks for replying — Kathryn Rollins

Kathryn Rollins Kathryn Rollins · Accepted Answer · 2015-09-08T01:18:10

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/

WooCommerce event not triggering when using Select2 instead of actual select

2 Answers