WooCommerce – Force a selection in dropdown menu

I’ll try to explain the issue the best I can.

I have a woocommerce pizza delivery website. People can log in and select pizzas they want with extras (olives, mushrooms, and such), and pick between Junior size or Normal size.

Read More

The extras are checkboxes, as they must be allowed to pick different stuff.

The size however is a dropdown menu, since they have to pick either one. Normal size is full price, Junior size is full price -1. The price isn’t showing unless they pick one of the 2 options.

The issue comes when visitors forget to pick a size. Basically if they forget to do so, and order, the order goes through as 0€.

I’ve tried millions of ways to fix this, but I’m definitely stuck now. My only remaining idea is to actually FORCE the dropdown menu to select one of the options (Normal size) upon loading the page.

So basically the drop down wouldn’t say “Please pick one” but it would say right away “Normal”. Visitors could, if they wanted to, change to junior, but at least if they don’t and order the order would go through as full price and not 0€.

Here is the code of the dropdown menu:

<div ng-repeat="option in post.food track by $index">
    <div ng-if="option.type =='select' ">
        <label>{{option.title}}</label>
        <div ng-if="option.variation == 'yes'">
            <select ng-model="option.selectedOption" ng-change="addSelectOption( option , option.id  , option.selectedOption , post.formOption , post.new_price )" ng-options="attr as attr.text for attr in option.options" ></select>         
        </div>
        <div ng-if="option.variation == 'no' || !option.variation">
            <select ng-model="option.selectedOption" ng-change="addSelectOption( option , '', option.selectedOption , post.formOption , post.new_price )" ng-options="attr as attr.text for attr in option.options" >
                <option value="">Please select</option>
            </select>               
        </div>
    </div>
</div>

There are only 2 choices, so I want to force the 1st choice (“Normal”).

1) Is it possible?

2) Can you tell me how to do that from the code I’ve shown you here?

I’m really desperate for help on this one…

Related posts

2 comments

  1. A Better Solution for you in this situation is to use ajax and disabled the submit button unless any option is selected from the dropdown menu except ‘Please select’. You can achieve this easyily by ajax.

    Let me know if this solves your problem.

  2. Since you are using Angularjs.
    Just define the Model
    option.selectedOption = 'normal'
    by default.

Comments are closed.