How can i style the drop-down variations?

Hi @rickaero

StoreCustomizer doesn’t offer that as that should be styled by the theme you’re using.

If you want you can give me the link to your page and I’ll give you custom CSS to style it.

Thanks
Zack

Thanks, Zack

I’m having a heck of a time finding styling for this area, especially the calculated Price (would love to have that larger/bold) and the Menu titles on the left of each drop-down..

thanks a ton!
https://rickybonilla.com/product/business-cards/

• This reply was modified 3 years, 10 months ago by RickAero.

I also forgot to mention QUICK VIEW styling for variations is also hard to find if it’s even available. thanks

Ok… Add the following custom CSS to Customize -> Additional CSS and see if that does what you’re wanting:

.blockUI.blockOverlay {
background-color: #000 !important;
opacity: 0.4 !important;
}

.woocommerce div.product form.cart .variations td.label {
width: 32%;
}
.woocommerce div.product form.cart .variations label {
color: #fff;
}
.woocommerce div.product form.cart .variations .theme-select {
color: #afafaf;
}

.woocommerce-variation-price {
font-size: 20px;
font-weight: 600;
}

Not sure I’m understanding what you mean for the Quick View styling?
Can you explain a little more?

Thanks

Beautiful! thank you a thousand times for this!

Quick View is seen in an Archive page or category. When you rollover the image, a QUICK VIEW link appears. The CSS you provided helps here too, However, the menus Stack which leaves blank space on the left. Would love to have two columns of menu to fill the area… However, not all my products have such variations. What are your recommendations for this?

Respectfully, Ricky

Hi @rickaero

Still not sure I’m understanding… The only quick views links I can find are here: https://rickybonilla.com/product-category/t-shirts/

And those look fine to me… Can you maybe send a link of where I can view exactly what you mean… Or maybe a screenshot too?

Thanks