[Resolved] Center WooCommerce Variations Dropdown

Home Forums Support [Resolved] Center WooCommerce Variations Dropdown

Home Forums Support Center WooCommerce Variations Dropdown

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1443983


    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.


    This is a more “normal” look:


    Customer Support

    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.

    Customer Support

    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;
    Customer Support


    Thanks for sharing your solution!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.