Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 1, 2017 at 11:51 am #802486
    mchbeck

    Hi there,

    With WooCommerce 2.x, my checkout looks like this, which is how it is supposed to look:

    After upgrading to WooCommerce 3.x though, it looks like this:

    As you can see, the dropdown lists for “Land” and “Sprachkenntnisse” look different than the rest of the form, which is not looking great (ignore the “Zuvor besuchte Sprachkurse” thingy floating in the air, I know how to fix that).

    You can have a look at it here, if you put something in the cart: https://mondiale.de/testumgebung/de/kasse/

    Any way I can make those dropdown lists look like the rest of the form again?

    Thank you!

    June 1, 2017 at 2:48 pm #802561
    Nikko

    Hey mchbeck,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    
.select2-container--default .select2-selection--single {
    border-radius: 0 !important;
    border-color: #e1e1e1 !important;
    background-color: #fcfcfc;
    height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 5px;
}

    Hope this helps :)

    Best regards,
    Nikko

    June 1, 2017 at 2:54 pm #802571
    mchbeck

    Hey Nikko,

    Thank you for your help. This does indeed fix it, thank you! :)

    June 1, 2017 at 3:18 pm #802589
    Nikko

    Hi,

    You’re welcome, we are glad we could help. Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Ugly dropdown list elements in the checkout form with WooCommerce 3.x’ is closed to new replies.