Drop Down Full width

Hello,

Try to replace the line:

.pofw-product-options-wrapper .field .control select {height:initial; line-height: inherit;}

with:

.pofw-product-options-wrapper .field .control select {height:initial; line-height: inherit; width:100%;}

in the file:
wp-content/plugins/product-options-for-woocommerce/view/frontend/web/product/main.css

>is it possible to set the first option in the drop down as the default
Try to add the line:

 $("#pofw_product_options .pofw-option").prop("selectedIndex", 1).change();

after the line:

jQuery('#pofw_product_options').pofwProductOptions(config);

in the file:
wp-content/plugins/product-options-for-woocommerce/view/frontend/templates/product/options.php

Stanislav

The full width worked like a charm, Thanks.
However, setting the default for the first option didnt work.

thanks for a the quick response

Hello,

Try to use:

jQuery("#pofw_product_options .pofw-option").prop("selectedIndex", 1).change();

instead of the previous suggested line.

Stanislav

it does work but breaks the pricing. Values dont change in other words.

Hello,

Can you set it on your website so I can see how it breaks the pricing?

Stanislav

Here it is.
I have set it on the website. here is a url for example
https://michaelonauto.com/product/cts-turbo-mk1-audi-tt180q-1-8t-turbo-kit/?currency=USD

Hello,

I see you removed the line:

jQuery('#pofw_product_options').pofwProductOptions(config);

Instead of replacing you should add the new line:

  jQuery("#pofw_product_options .pofw-option").prop("selectedIndex", 1).change();

after it.

So after applying this modification you should have two lines:

jQuery('#pofw_product_options').pofwProductOptions(config);    
jQuery("#pofw_product_options .pofw-option").prop("selectedIndex", 1).change();

Stanislav