Ugly cart and checkout pages

There’s a “pre” tag in the markup, and they can cause display problems. If you go to the cart page in the list of pages, switch to the text tab, you may see:
<pre>[woocommerce_cart]</pre>
If so, delete the pres. Same on the checkout page.

Ahh, good catch! Thanks for that tip. Removing the tag improved the cart page a lot, but it’s still looking funny: https://www.musicstudiostartup.com/cart/

The checkout page (https://www.musicstudiostartup.com/checkout/) didn’t have the pre tag, which explains why it didn’t look quite as bad as the cart page. There’s another odd thing about the checkout page though – even when I’ve clearly got something in the cart, it puts a “Your cart is currently empty” notification right under the “Proceed to PayPal” button. Screenshot: https://imgur.com/a/Y3B06

I made a separate post about that issue, but maybe they’re related? I also thought the WooCommerce checkout page had a two-column layout the last time I set it up on this theme, like this website that uses the same theme: https://www.beautifulgiftbaskets.ca/checkout/

I appreciate your help!

Had a look at the Impreza demo and as you say the default cart looks a lot better.

Your cart page is loading the following stylesheet:
https://www.musicstudiostartup.com/wp-content/uploads/us-assets/www.musicstudiostartup.com.css
and this is impacting on the cart styles. This stylesheet is in a non-standard location. Has it been enqueued in the child theme? Check functions.php in the child theme.

As you say the checkout looks different. Is there a custom checkout template in the child theme. Perhaps the custom template has not been updated. It doesn’t matter if the parent theme is up-to-date because the checkout template (if there is one) in the child theme will take precedence.

Have you had a developer working on this site? Its not possible to know what he’s done.

Good news! So, this stylesheet was puzzling me as well. I couldn’t figure out where it came from. The child theme is basically just the standard functions.php and style.css, no custom templates. I had made all my css modifications in the theme’s Custom Code section, rather than in the child theme style.css, and those were not the styles showing up in the mystery stylesheet.

It turns out, Impreza has a CSS optimization feature that, when activated, creates this style sheet. I had turned that on about a month ago and it hadn’t caused any noticeable problems until I installed WooCommerce last week. I just turned off the CSS optimization in the Impreza settings and the styling looks great! This also remedied the funky header cart icon issue I was having.

Now I just have to sort out the empty cart notification, but I think that’s a LearnPress issue. ?? Thanks for your diagnostic help!

Good.

I’m not seeing the “Your cart is currently empty notice” on the checkout page. Perhaps that’s to do with whether the user is logged in or not.

Weird, I see it regardless of whether I’m logged in or not. Actually, now that I’m digging into it, I see that there are duplicate WooCommerce and LearnPress divs on lots of pages (account, cart, checkout). I fixed the issue on most of the pages by just removing the WooCommerce shortcodes, but when I add an item to the cart it only adds it to the WooCommerce cart, not the LearnPress cart, so it’s showing an empty cart.

But I won’t go anymore off-topic in this thread than I already have. ??