WooCommerce Checkout Broken

[maia_internet]

Hi All,

as was detailed in this thread:

WooCommerce Checkouts Still Brokken

When are we going to get an update of Pro theme that doesn’t break WooCommerce checkout/cart pages? Please advise ASAP!

I’m having an issue with styling the checkout.

I’ve got the Basket to fit in with Pro, I’ve had to manually change the single product page through a child theme - now the checkout just won’t style!

If I place the [woocommerce_checkout] inside any form of Text module (both V2 and Classic) or the Raw module all the Pro CSS for the disappears and look awful!

It does appear properly in the editor. It seems that when the shortcode is loaded on the front end then the Pro CSS is ignored. This happens whether or not the page is selected as the woocommerce checkout page or not.

I’ve tried all the usual things and nothing seems to fix it. Please don’t make me move my entire site over to Divi!!!

Please can you advise the best way forward so the checkout some what resembles the rest of the site?

Many thanks

Dave

URLs in private note…

[prakash_s]

Hello @maia_internet,

Thanks for writing to us

Currently, it’s not recommended to edit Woocommerce reserved pages(Shop, Cart, Checkout) through the builder due to hook conflict. I would recommend using the standard editor (WordPress editor) for Woocommerce reserved pages.

Screenshot

Thanks

[maia_internet]

Hi,

tried that and all I get is a full screen width form with no extra styling/heading banner etc.

Not really what I’m looking for

[prakash_s]

Hello @maia_internet,

I checked your site’s “Checkout” page it seems that you are still using builder on the WooCommerce checkout page. I would recommend using the standard editor (WordPress editor) for Woocommerce reserved pages.

Screenshot

Please select the page template as Default Template

Hope It Helps
Thanks

[maia_internet]

Thanks,

I’ve changed it over and as you can see it’s awful!

Cheers!

[prakash_s]

Hello @maia_internet

I checked your site’s “Checkout” page it seems that you have added custom CSS code for .x-container max. For content section and sidebar, your style CSS is not correct there might be some syntax error in sidebar style. It seems that you have customized. I would recommend you to remove the custom CSS of this class.

Please check your Custom CSS code in the X/Pro-->Theme option -->CSS

Thanks

[maia_internet]

Thanks,

fixed that - it was in the theme options - Site Max Width (px) - it’s down to 1980px but, of course, that doesn’t fit well on 1440p or 4k screens, where the rest of the site has a top banner that fits the full width of the view.

So I’ve still got a full width form with no styling to fit the rest of the site.

Cheers

[ruenel]

You are most welcome.

[maia_internet]

No problem.

So, back to the original question…

Please can you advise the best way forward so the checkout some what resembles the rest of the site?

Thanks!

[ruenel]

Hello @maia_internet,

Please edit your Basket page back in the Editor. Save the layout as a template. Now, edit your check out page in the Pro Editor and then load the template. You can edit it and insert the WooCommerce checkout shortcode and save your changes. If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

Regards.

[maia_internet]

Hi All,

thought we had it there - your suggestion was working fine until I assigned the page as the woocommerce checkout page.

It then broke completely again.

Login details in attached note.

thanks

[ruenel]

Hello @maia_internet,

Since WooCommerce hi-jacks the page, the Cornerstone styling will not be applied to the page. What we can do is to create a Global Block with the WooCommerce checkout [woocommerce_checkout] shortcode in it. You can then insert the global block shortcode into the page assigned as your Check Out page. Kindly check out the example check out page that I have set up in your site.

See the secure note.

By the way, please do not use “<” and only insert “Continue Shopping” in your button to avoid any conflict and issues.

Hope this helps.

[maia_internet]

Hi all,

just an update - using the Global Block method appears to have worked - whilst not fully tested on a live shop it looks very promising.

Many thanks for your help.

[marc_a]

Hi @maia_internet,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.