Center WooCommerce Variations Dropdown

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.

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.

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.

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;
}

Awesome.

Thanks for sharing your solution!