Fix Layout On Woocommerce Checkout
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi guys,

I am looking for help in fixing the last step on the checkout process on my website. For some reason, there seems to be a split in the table structure and I don't know quite exactly how to alter the CSS to fix the problem so the Payment Info tab displays over the entire main content window.

and then go through the checkout process, you can see that the payment info page is broken and needs some love.

Looking for someone to help me with this one please :)

All the best!

awarded to weslly

Crowdsource coding tasks.

1 Solution

Winning solution

Add this to your CSS file:

@media (min-width: 768px) {
    #order_review, #order_review_heading {
        width: 100% !important;
        border: 0 !important;
    }
}
Hi! thanks, this worked great! By any chance and just if you are not too busy, would you have a quick fix as well for the resize of the box so it doesn't break the layout? No problem if not, I don't wanna add stuff on top of the requested help, but would be nice regardless! Thanks a lot :)
Vyazhan almost 4 years ago
It seems the height of the box is set by an javascript plugin, so I guess only css wouldn't fix it easily, can you try adding <div class="clearfix"></div> in the end of the div with the "wizard" id?
weslly almost 4 years ago
I had this problem before with tabs in the product view not resizing after the tabs were pressed (I got a plugin that automatically adjusts the height of both columns and then the js below) and I got a very good solution here that implemented a jquery command. https://bountify.co/add-pagination-to-woocommerce-reviews This worked great and I tried now to just apply the same for these buttons but without success, probably because I am choosing the wrong id or the entire code wouldn't work in the same way it did for the tabs because of the checkout process. You can see the columns resizing if you just resize the browser window. If this is something harder to fix, don't bother and I will just add another bounty in a few days :) Thanks for the reply tho, I appreciate it!
Vyazhan almost 4 years ago