Woocomm cart page catastrophe

[cyrock]

Hi, the cart table is not showing properly on mobile…how can i solve this…? Its a catastrophe!

thanks & regards,
cyrock

[jade]

Hi @cyrock,

Can you please share the URL of your site so that we can check it?

If you have added some customization, try getting temporarily removing the codes then check again.

Thank you.

[cyrock]

sorry…

Summary

https://stage6.dicide-entwicklung.de/

[ruenel]

Hello @cyrock,

Thanks for providing the URL. Your cart page is messed up because of the following custom CSS:

.woocommerce table.shop_table td.product-name, .woocommerce table.shop_table th.product-name {
    width: 40%;
    padding-top: 2.3em!important;
    padding-bottom: 2em!important;
}

.woocommerce table.shop_table td {
    padding: 1.2em 1.2em 0.5em 1.2em!important;
    width: max-content!important;
}

And this particular CSS coming from Woo Events plugin:

.woocommerce a.remove {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid rgb(238, 238, 238);
    width: 20px;
    height: 20px;
    line-height: 17px;
    font-size: 13px;
}

Since Woo Events plugin is a 3rd party plugin, please contact the creators of this plugin and ask further assistance. This is beyond the scope of our support and we are not familiar with this plugin that you are using.

Thank you for your understanding.

[cyrock]

Hi, thanks for writing back.

i deleted the custom css and deactivate wooevents. still the same. looks fine in twentytwenty, even with wooevents…

??

regards,
cy.

[rad]

Hi @cyrock,

I can still see the CSS, please check the video recording https://www.dropbox.com/s/gqyhzp34i9kslk6/bandicam%202020-05-24%2019-40-54-340.mp4?dl=0

Perhaps there was a cache and or duplicate CSS? I recommend cleaning both server side and browser cache before testing.

Thanks!

[cyrock]

(…) yes, you are right. But i am missing the columnn labels like Price, Tax…etc

regards,
cy

sorry, yo cant say, this is something you will show your customer and say “this our pretty theme…”
it looks fine in household-cheap-twenty-twenty…

[ruenel]

Hello @cyrock,

The table header was hidden by WooCommerce styling itself.

The styling in .../wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css

This is the code that is used:

@media (max-width: 768px){
	.woocommerce #content table.cart .product-thumbnail, 
	.woocommerce table.cart .product-thumbnail, 
	.woocommerce-page #content table.cart .product-thumbnail, 
	.woocommerce-page table.cart .product-thumbnail {
    	display: none;
	}	
}

And then in Woo Events plugin, it has CSS styling having the code below. The file is .../wp-content/plugins/woo-events/css/style.css

@media screen and (max-width: 600px){
  .woocommerce-page table.shop_table thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }
}

Hope this helps.

[cyrock]

(…) No, not really. even when i disable WooEvents, it looks crappy. When i try to edit woocomm-css, no change.
when i switch to twenty-twenty-theme its fine, why not on PRO? Thats a theme bug.

regards,
cy.

[rad]

Hi Cy,

Based on the information we gathered and tested, by toggling them on and off, and by applying CSS, and based on the source of the issue, it’s not due to Pro. What’s left is investigating it directly by logging in, please provide the login credentials in the secure note.

If you’ll also check this https://validator.w3.org/nu/?doc=https%3A%2F%2Fstage6.dicide-entwicklung.de%2F, there are parse error for CSS, and even element which is not allowed to have a child element of <p>. Please note that activating another theme will also deactivate the faulty content created within Pro, but not necessarily caused by Pro.

Thanks!