Use Product Colours to create drop down list in form

Hello @gregorr64,

An alternative would be use in the form the same field for variations included by WooCommerce, or filling automatically a hidden field in the form with option selected through the variation dropdown menu.

Could you indicate the URL to the webpage where is inserted the product with the variations, please?

Best regards.

Hi,

The URL is https://staging.designtofit.co.uk/product/basin-966/

The main problem I’m having is that each product has different prices for each colour. I need to be able to access the user’s colour choice within the form to use an IF statement to get the colour cost.

I’ll try with the hidden field.

Thanks,
Gregor

Hello @gregorr64,

Please, follow the steps below:

1. Insert a hidden field in the form, for example, I’ll assume its name is the fieldname1, that will be filled with the price of selected variation.

2. Insert a “HTML Content” field in the form, and enter as its content the following piece of code:

<script>
jQuery(document).on( 'found_variation', function( event, variation ) {
    var price = variation.display_price;
    jQuery('[id*="fieldname1_"]').val(price).change();
});
</script>

3. Finally, use this new hidden field in the equation that calculate the final price.

Note that you should use the corresponding name of the field in your form, I’m using fieldname1 only to describe the process.

Best regards.

Hi,

It’s the Colour name that I need to access. I’m going to use an IF statement to assign colour ‘Bands’ which are used to price according to custom fields which store the price of each band.

Is this done in the same way?

Thanks,
Gregor

Hello @gregorr64,

As your current attribute has the id: “pa_colour”, so, if there is another hidden field (for example, the fieldname2) for storing the option selected, the previous piece of code can be modified as follows:

<script>
jQuery(document).on( 'found_variation', function( event, variation ) {
    var price = variation.display_price;
    jQuery('[id*="fieldname1_"]').val(price).change();
    jQuery('[id*="fieldname2_"]').val(jQuery('#pa_colour').val()).change();
});
</script>

Best regards.

That’s great thanks, I’ll try that out justnow!

Thanks,
Gregor

I’ve tried to use the hidden field with the html you sent there, however my IF statement isn’t returning the expected result.

(function(){
if(fieldname43== “red”) return 0;
if(fieldname43== “black”) return 1;
if(fieldname43== “white”) return 2;
if(fieldname43== “green”) return 3;
if(fieldname43== “blue”) return 4;
return 99;
})();

When I select Red/Black/White in the product page my IF field is still returning 99.

Any ideas where I’ve went wrong?

Thanks,
Gregor

Hi,

Worked out what went wrong.

When I copied and pasted the code you had sent, it changed the ” marks to & quot.

This is now working properly.

Thanks for the help,
Gregor

• This reply was modified 6 years, 3 months ago by gregorr64.

Hello @gregorr64,

Thank you very much for letting me know that everything is working properly.

Best regards.