Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Ground Controller Lvl 1
Message 1 of 2

How to auto select option using custom Javascript

Hi there!

I'm building my first webshop using WordPress & WooCommerce.

 

On my Product Detail Pages for e.g. T-shirts there is only one color, e.g. black. However, as of now the website visitor needs to select "Black" otherwise they can't add the product to their cart. Therefore, if the first color option would be selected automatically, this saves the website visitor a click.

 

My knowledge of Javascript is very limited. Could someone help me with a piece of Javascript code to automatically select the first color option? Help would be much appreciated! :)

<div class="variation-selector variation-select-color hidden">
<select id="pa_color" class="hasCustomSelect" name="attribute_pa_color"
data-attribute_name="attribute_pa_color" data-show_option_none="yes"
style="-webkit-appearance: menulist-button; width: 100px; position: absolute;
opacity: 0; height: 34px; font-size: 14px;"><option value="">Choose an option</option>
<option value="black" class="attached enabled">Black</option></select>
<span class="theme-select theme-selectChanged" style="display: inline-block;">
<span class="theme-selectInner" style="width: 100px; display: inline-block;">Black</span></span></div>

 
If important information is missing, please let me know.

Cheers,

Joris

1 Reply
Highlighted
Commander Lvl 1
Message 2 of 2

Re: How to auto select option using custom Javascript

Hey! You can do this using the selected keyword in the HTML element. See here for details: https://www.w3schools.com/tags/att_option_selected.asp