[Resolved] Checkout Trouble

[Michael]

The Addon for WooCommerce is a great job, but the checkout make trouble with the layout. This don’t work correct (see the second Picture for a correct layout). Any idea where i can fix this?

It is possible to make the layout in one column?

[Tom]

You should be able to do this:

.woocommerce .col2-set, 
.woocommerce-page .col2-set,
#customer_details+#wc_checkout_add_ons, 
#order_review, #order_review_heading {
    float: none;
    width: 100%;
}

[Michael]

Thanks! Works great!

[Tom]

You’re welcome 🙂

[Dani]

Sorry for stepping in, but I’ve got the same problem. Is it okay or would you like me to open a new topic?

First let me say thanks for the woo extensions. It’s great!!!

I’m using Multi-Page Checkout. While on the first page (personal details) it looks okay, apart from everything just sort off to the left instead the information being on full width, the following pages – choose payment and overview – look not very nice. It seems like there is a two column set-up somewhere, so the payment and overview page are only on the right side.

The layout before activation the Woocommerce add-on was full width. I don’t want to deactivate it, but is there a way just to remove the checkoutpage layout of your add-on?
The above code unfortunately didn’t work on my site.

[Tom]

Have you tried the code I provided above yet?

[Dani]

Yes, I’ve tried your code above. Not working.

Had to deactivate the woo add-on, because several customers complained. I’ve got a lot of older customers who don’t like change 🙁

If you find a solution, please let me know. I really want to use the add-on

[Tom]

I would have to see the page to know why that code isn’t working. I’ll be adding a stacked layout option for the checkout in the next update, but it will basically just add the above code for you.

[Dani]

The website is https://shop.adorablepaws.de/en

I just activated the Woo add-on for you to see and I also added above code to child theme.

If you want to make a test order, go ahead, please choose “payment in advance” and some European country as your address for example Belgium. Australia won’t be working. Then I will delete the order after. 🙂

[Tom]

Ah, you have some caching/minifying going on, which is overwriting the CSS.

Try this:

.woocommerce .col2-set, 
.woocommerce-page .col2-set,
#customer_details+#wc_checkout_add_ons, 
#order_review, #order_review_heading {
    float: none !important;
    width: 100% !important;
}

[Dani]

It worked! Thank you so much for the fast help! Much appreciated. Have a good Sunday.

[Tom]

You too!

[Dani]

Sorry to bother you again Tom. This is really strange. I made no changes to childtheme css or cache setting and again the checkout is not looking right. It was when I first made the amendment with adding “important” and now it’s suddenly changed again. I assume it’s the WP Rocket cache causing it. Do you have any other idea/advise what I could try to make it work?

[Tom]

How are you adding the CSS? I’m not seeing what I provided above anywhere.

[Dani]

I added the CSS to the child theme style sheet, but like you said, I can’t see it either 🙁

[Author]

Posts