Woocommerce allow one variation to be selected

I am setting up a shop for a photographer and have his different product options setup as variations. I want to allow the user to successfully add the product to cart without having to select all available variations.

here is an example of attribute/terms I have setup as variations:
enter image description here

Read More

so the customer should be allowed to select one option (variation) and add to cart. Currently it fails and says I need to select a variation from each attribute
enter image description here

So my question is simple: How do I make it where all variation selections are not required?

My Approach: there are a few things I think may work. First I think there is probably an action or hook I can plug in to to make this not required. OR I could possibly use jquery to modify the add to cart url so when a user clicks the add to cart button that the product id and variation id get passed to the url which I imagine would add that variation only to cart.

Any thoughts?

UPDATE:
I have attempted to manage this through some jQuery. I have it where it will only allow one input to be selected and a class is added or removed depending on selection. When user hits the add to cart button it will get all .not-active input name attributes into an array. I know the following url will work: http://my-url.com/?add-to-cart=976&variation_id=1186&attribute_pa_downloads=print-300dpi&attribute_pa_high-definition-aluminum=0&attribute_pa_photo-tiles=0&attribute_pa_canvas-gallery-wraps=0&attribute_pa_custom-prints=0 so I needed a way to make this dynamic. Currently Im stuck on how to build my url to include all the POST parameters so it passes validation and will add to cart. With that said, given the code below how can I build out my url so it redirects with all parameters and adds to cart (building out the url is the only thing I dont think I have working.)

var selectedName;
        var selectedValue;

        //Shop only allow one radio to be checked
        $('input.selectOne').on('change', function(){
            $('input.selectOne').not(this).prop('checked', false).removeClass('active').addClass('not-active');
            $(this).addClass('active').removeClass('not-active');

            selectedName = $(this).attr('name');
            selectedValue = $(this).val();
        });

        $('.single_add_to_cart_button').click(function(e){
            e.preventDefault();

            console.log(selectedName);
            console.log(selectedValue);

            //Works :http://my-url.com/?add-to-cart=976&variation_id=1186&attribute_pa_downloads=print-300dpi&attribute_pa_high-definition-aluminum=0&attribute_pa_photo-tiles=0&attribute_pa_canvas-gallery-wraps=0&attribute_pa_custom-prints=0
            var productID = $('input[name="product_id"]').val();
            var variationID = $('input[name="variation_id"]').val();
            var location = window.location.href;  //Get URL to redirect to cart

            var emptyOptions = [];

            $('.not-active').map(function() {
                return this.name;
            }).each(function(i, str) {
                if (!~$.inArray(str, emptyOptions) && str != selectedName) emptyOptions.push(str: '0&');
            });

            console.log(emptyOptions);

            alert(location + 'add-to-cart=' + productID + '&variation_id=' + variationID + '&' + $.each(emptyOptions));

        });

JSFiddle

Related posts

1 comment

  1. For anyone else looking I ended up solving this issue with jQuery and the Woocommerce Radio Buttons Plugin.

    In my local JS file I added this and it will handle allow for one selection and then create the add to cart url.

    var selectedName;
            var selectedValue;
    
            //Shop only allow one radio to be checked
            $('input.selectOne').on('change', function(){
                $('input.selectOne').not(this).prop('checked', false).removeClass('active').addClass('not-active');
                $(this).addClass('active').removeClass('not-active');
    
                selectedName = $(this).attr('name');
                selectedValue = $(this).val();
            });
    
            $('.single_add_to_cart_button').click(function(e){
                e.preventDefault();
    
                //console.log(selectedName);
                //console.log(selectedValue);
    
                //Works :http://my-url.com/?add-to-cart=976&variation_id=1186&attribute_pa_downloads=print-300dpi&attribute_pa_high-definition-aluminum=0&attribute_pa_photo-tiles=0&attribute_pa_canvas-gallery-wraps=0&attribute_pa_custom-prints=0
                var productID = $('input[name="product_id"]').val();
                var variationID = $('input[name="variation_id"]').val();
                var location = window.location.href;  //Get URL to redirect to cart
    
                var emptyOptions = {};
    
                $('.not-active').map(function() {
                    return this.name;
                }).each(function(i, str) {
    
                    if (!~$.inArray(str, emptyOptions) && str != selectedName) emptyOptions[str] = 0;
                });
    
                //console.log(emptyOptions);
    
                window.location = location + '?add-to-cart=' + productID + '&variation_id=' + variationID + '&' + selectedName + '=' + selectedValue + '&' + $.param(emptyOptions);
    
            });
    

Comments are closed.