[Resolved] Center WooCommerce Variations Dropdown

[Fredrik]

Hello,

This is probably very simple, but I’m trying to target & style the variations dropdown for products. To me, the dropdown looks like it aligns to the right, instead of center or possibly left.

https://prnt.sc/uhnpdg

This is a more “normal” look:
https://prnt.sc/uhnqg3

Thx!

[Leo]

Hi there,

Not exactly sure what you are after but what about something like this?

.woocommerce.single-product .product .summary .variations select {
    width: 50%;
}
.woocommerce div.product form.cart .variations select {
    min-width: 50%;
}

The style is provided by WooCommerce plugin itself.

If you right click on the dropdown and use browser inspect tool then you can see exactly what CSS is involved.

[Fredrik]

Hello Leo,

Thx 🙂 I should have been more clear.

So I’m trying to target the inside of the dropdown, the selectable “variations”, visually this: https://prnt.sc/uhrv9v

The dropdown arrow is placed far-right by default and I’m looking to center the selectable. But I’m not finding the right CSS to do this. Like I mentioned before this is probably simple.

[Leo]

Still a little confused.

Are you hoping to move the down arrow towards the left more?

I’m not seeing a selector for that unfortunately – the dropdown form is mostly handled by the browser.

You would see some differences when viewing it with Chrome and FireFox.

[Fredrik]

Ah, I see, so the product sorting dropdown is, by the looks of it, https://prnt.sc/uif9bp controlled by the GP theme, but not other Woo elements.

I added this for cross-browser support for the Woo variations dropdown.

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	background-image: url('<custom_arrow_image_url_here>');
	background-position: center;
	background-repeat: no-repeat;
	outline: none;
	padding: 10px 10px;
}

	select::-ms-expand {
    display: none;
}

[Leo]

Awesome.

Thanks for sharing your solution!

[Author]

Posts