WooCommerce Singles Checkout Template "The Content" element is blank

[MasonicDisorder]

I’ve created a checkout template using the WC Singles Checkout and applied the condition for it to appear on the checkout page. The only thing that shows up is the title “Checkout” and a button “<- Back to Shop”.

When I click on the element named “The Content” in the builder (where the form is supposed to appear), it says “This element does not have any Inspector controls.”

I’ve added a section to the template and in a text field placed the [woocommerce_checkout] shortcode and it appears to work but I’m afraid any styling of this shortcode may end up being unnecessarily laborious AND if the template is not working because I have a bad template file I would much rather get that fixed.

Can anyone help me out here?

[prakash_s]

Hello @MasonicDisorder,

Thanks for writing to us.

Please ensure that you have set the WooCommerce Checkout page from the WooCommerce —>Settings—>Advanced —>Checkout page.

Please go to the WooCommerce single layout and set the preview page from here to get the checkout page preview on the layout builder.

Please note that you don’t need to put the WooCommerce checkout page shortcode on the layout builder since the “The Content” element is going to pull it from the checkout page. Yes, there is no Inspector control tool on this element.

Hope it helps
Thanks

[MasonicDisorder]

When I do that I get a blank page with the word Checkout at the top:

What I’ve done instead is created a WooCommerce Single and applied the Themeco Checkout template to it:

This is finally working (rather than inserting the [woocommerce_checkout] shortcode) but the formatting is messed up:

I have a clone of this site that is not published. I do some testing on it that I’m hesitant to do on the live site until I’ve tested it. On this clone I changed the theme to one of the defaults (Twenty Twenty-Three is the one I tested) and refreshed the checkout page; this is what it looks like:

The style of this default checkout page is SO much more conducive to sales than what I see in my Pro theme… I don’t want to not use the Pro theme because I freaking love it but I’m at my wit’s end trying to style the checkout page.

Is there a way I can make a copy the stylesheet being used by the other theme, make a copy of the WooCommerce checkout template and in that force reference to said style sheet to override whatever is happening to my checkout page? …or something? CSS I’ve applied to the increase the line height of the CC fields in the class, p-PaymentDetails-group (and others), gets overwritten because it’s being loaded last via some stripe script.

[ruenel]

Hello @MasonicDisorder,

The default layout of the Checkout page when using our theme is only 1 column while the Twenty Twenty Three theme is using 2 columns. If you want to customize the checkout page, please check out this video tutorial here:

Customize the WooCommerce Checkout - No Plugins Required!

Best Regards.