Woocommerce cart items not showing in mobile

[digitalinnovations]

On all sites we have with Pro theme, the product names and images are not showing up in the cart in mobile layout.

It looks like a bug in the integrity layout hiding the elements.

This is happening on the following sites:

fancydress.com.au
mohamedhageali.com.au

as well as 10 others

[ruenel]

Hello @digitalinnovations,

Thanks for writing in! Due to smaller screen, there isn’t enough space to display those information which is why it becomes hidden. To display it back again, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@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,
    .woocommerce .cart.shop_table .product-name {
        display: block !important;
    }    
}

We would love to know if this has worked for you. Thank you.

[digitalinnovations]

Hi,

That works thanks.

The product name was showing in cart prior to last WooCommerce update, and it makes the cart unusable on all sites without the name.

[digitalinnovations]

One more issue,

The Add to Cart buttons are not showing in the shop pages any more

Can this be fixed?

[christian]

Hey @digitalinnovations,

The Add to Cart button is showing up upon checking. Does it not show up when you hover over the product item?

If the Add to Cart buttons were showing up previously even without hovering, that means you used CSS to achieve that and as with all custom CSS, a syntax error could cause them to break. Please check your custom CSS codes in CSS validations sites like http://csslint.net/.

For your reference, here’s the correct code to show the Add to Cart button without hovering. It should be added in Theme Options > CSS.

.woocommerce li.product .entry-header .button {
    opacity: 1;
}

Hope that helps.