Docs

[breepear]

How do I align the cart totals and checkout button to the right in a two column layout? I also want the proceed to checkout button to be the same size as the others.

[breepear]

This reply has been marked as private.

[Darshana]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.woocommerce .cart-collaterals .cart_totals {
    float: right;
    width: 50%;
}

.checkout-button {
    float: right;
    font-size: 100%;
}

Hope that helps.

[breepear]

That worked great for desktop, is there a way to still keep it full width for mobile only?

[Prasant Rai]

Hello There,

Thanks for writing in!

Please use use following code:

@media only screen and (min-width: 900px) {
    .woocommerce .cart-collaterals .cart_totals {
    float: right;
    width: 50%;
}

.checkout-button {
    float: right;
    font-size: 100%;
}
}

Thanks.

[breepear]

That worked great, now how do I make the “proceed to checkout” button the same size as the others and make it align right.

[Thai]

Hi There,

Please add the following CSS:

a.checkout-button.button.alt.wc-forward {
    font-size: 100%;
    float: right;
}

Hope it helps 🙂

[breepear]

I want to update the button layout and size on this page (see attached images as reference).

Desktop: Update cart/apply coupon should live on the same line and span the whole container in a two column layout

Mobile: all buttons should be full width and stacked

[Christopher]

Hi there,

Please add following code :

@media (min-width:767px){
input.button[name="apply_coupon"] {
    float: left !important;
    width: 50%;
    margin-left: 0 !important;
}
input.button[name="update_cart"] {
    width: 49%;
}
}

@media (max-width:767px){
input.button[name="apply_coupon"],input.button[name="update_cart"] {
    width: 100%;

}
}

Hope it helps.

[breepear]

That worked great for the “Update cart/apply coupon” buttons, but how can I get the “Proceed to checkout” button to span the whole column on both desktop and mobile?

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

a.checkout-button.button.alt.wc-forward {

    width: 100%;
}

Hope it helps

Joao

[Author]

Posts