[Resolved] Center WooCommerce Variations Dropdown

Home Forums Support Center WooCommerce Variations Dropdown

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1443983
    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!

    #1444150
    Leo
    Staff
    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.

    #1444451
    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.

    #1444466
    Leo
    Staff
    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.

    #1446076
    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;
    }
    #1446105
    Leo
    Staff
    Customer Support

    Awesome.

    Thanks for sharing your solution!

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