Docs

[Andrei]

Hi guys,

There is a small problem with the variations select area on my single product page. When I don’t have any variations selected, the variations selection area has a width and when I select one of the variations, the width changes and it pushes “size” text down. I attached and image. I would like the position of the “size” text to be the same. My website is //sinestezic.com

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.woocommerce div.product .summary .variations .value {
    padding-right: 0 !important;
    display: inline-block !important;
    width: 80% !important;
    float: right !important;
    max-width: 320px !important;
}
.woocommerce div.product .summary .variations select {
    width: 100% !important;
}

Let us know how this goes!

[Andrei]

Hi Nabeel,

The size field is smaller, but unfortunately the size text still moves down.

[Rad]

Hi there,

Please replace that CSS with this,

 .woocommerce div.product .summary .variations .label {
vertical-align: top;
}

Cheers!

[Andrei]

Hi Rad, sorry, but it doesn’t work.

[Christian]

Please add the code below in your Appearance > Customize > Custom > Global CSS

.woocommerce div.product .summary .variations select {
    display: block;
    float: right;
}

.woocommerce div.product .summary .variations .reset_variations {
    display: block !important;
}

Hope that helps. 🙂

[Andrei]

Works great. Thank you Christian!

[Joao]

Glad to hear it,

Have a great day.

Joao

[Author]

Posts