[Resolved] WooCommerce Cart/Checkout Display issues

[Mary Kaiser]

I’m using WooCommerce for event ticket sales. The pages for both the cart and checkout shortcodes display ridiculously wide on screen, and the fields on the checkout page are all wonky. I’ve been trying to fix this through WooCommerce, but they suggested that it is a theme issue. The cart page copied below has 2 test items in it so you can check it out:

Protected: Cart

I read through the forum on responsive checkout (https://generatepress.com/forums/topic/woocommerce-responsive-checkout/), and it seems like that solution works well, but it looks like it’s specific to mobile view. Anything I can do for desktop view?

Thanks

[Mary Kaiser]

Looks like I need to up my caffeine intake… to view the cart/checkout issue, go to the Events page below:

http://mindfulnessconsultantsllc.com/events/

Scroll down to the last event, “Workshop; Deepening Your Meditation”, and add a ticket to the cart. Cart page is password protected until I get this issue figured out – password is MCLLC.

From there you can see both pages display issues.

[Tom]

Hi Mary,

It seems the cart is password protected?

[Mary Kaiser]

Yes, sorry – updated access info below my first comment.

[Tom]

Wow, definitely something weird going on.

I don’t believe it’s a theme issue, as you can see with our demo: http://demo.generatepress.com/shop/

Can you try #1 on this page?: https://generatepress.com/knowledgebase/debugging/

[Mary Kaiser]

I don’t know if I can deactivate all non-GP plugins and still be able to view this particular issue because the cart/checkout pages are part of the Events Calendar and WooCommerce plugins?

I did try deactivating all plugins aside from the ones mentioned above – issues still present.

[Mary Kaiser]

I just tried activating the TwentyFifteen theme as well – width of cart and checkout pages was normal.

[Tom]

Can you show me a screenshot of what it looks like it Twenty Fifteen?

[Mary Kaiser]

It’s still a bit of a mess, but the content isn’t crazy wide – it’s at least contained to the screen.

cart:
https://drive.google.com/file/d/0B1jiRnHsV08ldmtGUWtKZGlDVVk/view?usp=sharing

checkout:
https://drive.google.com/file/d/0B1jiRnHsV08lLTB2R2VYbzJEVG8/view?usp=sharing

[Tom]

When you go to edit your cart page and go into the “Text” editor, do you see <pre> tags anywhere?

If so, remove them – it looks like those are causing the issue, and can be brought over when copying and pasting code from another site.

[Mary Kaiser]

IT WORKED!!! Thank you so much 🙂

[Tom]

You’re very welcome 🙂

[Sushil Adhikari]

Hi Tom,

Thanks you very much, it works for me.

Thanks

[Tom]

Awesome 🙂

[Author]

Posts