[Resolved] Buttons in Drop Down Cart

[Kim]

Hi there, as the German word for cart is quite long and the buttons don’t look nice, I would like to move the buttons in the drop down cart one underneath the other. Can you help me with the code?

Many thanks in advance!

[David]

Hi there,

try this CSS:

.widget_shopping_cart .woocommerce-mini-cart__buttons {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

#wc-mini-cart .button {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2px;
}

[Kim]

Works great 🙂 Just two additional questions:

1. How can I increase the margin between the two buttons?
2. I would like to change the color off the cart button. How can I select this one?

Many thanks!

[Leo]

Can you link us to the site in question?

Thanks 🙂

[Kim]

Unfortunately it’s a local installation at the moment.

[David]

Hi there,

in the above CSS increase the 2px in the margin-bottom: 2px; to increase the gap.

To change the checkout button background try this:

#wc-mini-cart .button.checkout {
    background-color: #ff0000;
}

[Kim]

Perfect 🙂 Thank you!

[David]

You’re welcome

[Author]

Posts