Changing the position of buttons on woocommerce cart

Support
#1

Hi, my site is newsite.storeitcold.com.

I am trying to recreate the website format of our production site (storeitcold.com) on newsite.storeitcold.com. I am almost there but I am having moving the position of the woocommerce buttons on the cart.

These are what the buttons look like on our production site:

And this is what it looks like on staging:

How can I change the buttons on staging to look like production? Also, how can we move “Cart totals” and the buttons above the “You may be interested in” section?

Thank you.

#2

Hello Optimotive,

Thanks for writing in!

Your Cart Totals were generated by a 3rd party plugin. I could not pinpoint which one is it yet. I also see that most of your plugins were outdates. Can you please update them to the latest versions first?

Kindly let us know how it goes.

#3

Hi,

The cart totals are just generated by woocommerce to my knowledge. Also, I haven’t updated woocommerce to the latest version because some of our plugins’ compatibility hasn’t been tested with this new version. But, that shouldn’t pose an issue for this. I have updated any other plugins that could be relevant.

Also, just to reiterate. My questions are: How can I change the buttons on staging to look like production? Also, how can we move “Cart totals” and the buttons above the “You may be interested in” section?

Thanks,

#4

Hey @Web_Services,

  • I checked your live site and the Cart total and Interested sections are aligned side by side, if you want to achieve this then simply add the following code in the Theme Options > CSS: 
.woocommerce .bolt-checkout-button.large-width {
    max-width: none!important;
}
.woocommerce #pay_with_amazon {
    text-align: left;
}

@media screen and (min-width: 768px) {
   .woocommerce .cart-collaterals {
        display: flex;
   } 
}
@media screen and (max-width: 767px) {
   .woocommerce .cart-collaterals {
        display: flex;
        flex-direction: column-reverse;
   } 
}
  • Alternatively if you want to move the cart totals section above the “You may be interested in” section, the use this code instead:
.woocommerce .bolt-checkout-button.large-width {
    max-width: none!important;
}
.woocommerce #pay_with_amazon {
    text-align: left;
}

.woocommerce .cart-collaterals {
    display: flex;
    flex-direction: column-reverse;
}

The above codes will also align your buttons too, just make sure to use one of the given codes that suits your need and not both of the codes however when I checked your cart page I couldn’t find the green “proceed to checkout” button as shown in your screenshot.

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

Hi, this was super helpful! One more thing though, can you please help us fix the alignment of the paypal button too?

This is what it looks like right now:

And I want it to look like the image at the top of this chain (to look like the buttons on our production site)

Thank you so much!

#6

Hi @Web_Services,

Please add this to Theme Options > CSS

.angelleye-proceed-to-checkout-button-separator {display: none;}
div.wc-proceed-to-checkout a.paypal_checkout_button {
	text-align: right;
}
div.wc-proceed-to-checkout a.paypal_checkout_button img,
a.paypal_checkout_button img {
	height: 44px;
}


/*for mobile view*/
@media (max-width: 767px) {
	div.wc-proceed-to-checkout a.paypal_checkout_button,
	.woocommerce #pay_with_amazon {
		text-align: center;
	}
}

Hope it helps,
Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.