[Resolved] Malformed Woocommerce Checkout page

[Louis Stanford]

I’m have a Woocommerce checkout page where elements are positioned incorrectly. I’m guessing malformed CSS. Behaviour occurs with the GP Premium plugin enabled.

I’ve switched to Twenty Nineteen theme and problem persists until the GP Premium plugin is disabled.

Where do I start?

[Leo]

Hi there,

Looks like I need an account to be able to see the checkout page?

Does the issue exist with GP Premium as the only activated plugin?

Are you able to upload a couple of screenshots of the issue?

You can use a service like this:
https://postimages.org/

We haven’t had this issue reported before and you can test and see the default checkout layout with this site:
https://gpsites.co/seller/

Let me know 🙂

[Louis Stanford]

Hi Leo,

You would need to register. Go ahead, you can’t break anything.

I’ve tried disabling everything except Woocommerce (because the Checkout shortcode depends on Woocommerce) and GP Premium plugins. Problem persists.

[Leo]

What happens if you disable the WooCommerce module within the premium plugin?
https://docs.generatepress.com/article/installing-gp-premium/#activate-your-modules

[Louis Stanford]

Here’s an example

https://postimg.cc/ftfs3kjB

[Louis Stanford]

Disabling the Woocommerce Module in GP Premium worked! What does this point to?

[Leo]

Hmm not sure unfortunately.

These are the sites in our library that are using the WooCommerce module without any issues:
http://gpsites.co/seller/
https://gpsites.co/prime/
https://gpsites.co/target/

So I’m assuming it’s something specific to your install.

Any chance you can provide the dashboard access with all plugins disabled except GP Premium and WooCommerce?

Then I should be able to take a look without registering.

You can send the dashboard access using Account Issue here:
https://generatepress.com/contact/

Please include the following information:
– The URL of this topic.
– Login URL.
– Username and password.

Let me know 🙂

[Leo]

I believe the issue is coming from the narrow container used.

Can you try adding this CSS?

.woocommerce-checkout .col2-set {
    margin-right: 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Louis Stanford]

That seemed to fix it!

Would it be possible to have 1-col instead? 2-col looks crowded

Louis

[Leo]

Try this as well:

.woocommerce-checkout .col2-set, #order_review, #order_review_heading {
    width: 100%;
}

[Louis Stanford]

Perfect! Thank you so much!

[Leo]

No problem 🙂

[Author]

Posts