[Resolved] How to increase size of woocommerce product image cart

[Jorge]

Hello!

I would like to increase the size of the product image on the cart page of Woocommerce using GP.

Is there any option where can I increase it? I can not find it…

Thanks for your awesome support!

Jorge

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

That’s set by WooCommerce itself and GP doesn’t control it.

Give this CSS a shot:

.woocommerce-cart table.cart img {
    width: 50px;
}

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

[Jorge]

Hi Leo!

This works great! Thank you so much for your help! I appreciate it a lot!

Could I ask you a last question? How can I add the same code for a version mobile? This works on the Desktop perfect but for the mobile version is still the same! Thanks again!

Jorge.

[Leo]

Isn’t the image hidden on mobile?

Can you link me to the site in question?

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

[Jorge]

Yes you are right. The image is hidden on mobile, I was wondering If I could display the image on a mobile version as well.

Any idea if I can do it with CSS?

This is the web

Thanks in advance.

[Leo]

That would be a better question for WooCommerce support unfortunately.

I tried with some CSS but it doesn’t look very good at all.

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

[Jorge]

Thanks anyway Leo! 😉

Bye

[Leo]

No problem 🙂

Let me know if they can’t help and you still want to give it a shot.

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

[Ree]

Has anybody has a clue how to do this on mobile? I am looking for a solution to enlarge size of woocommerce product image in cart.

[David]

Hi there,

try this CSS:

@media(max-width: 768px) {
    .woocommerce-page table.cart .product-thumbnail {
        display: block !important;
    }
    .woocommerce-page table.cart .product-thumbnail:before {
        content: '';
    }
    .woocommerce-page table.cart .product-thumbnail img {
        width: 100px;
    }
    .woocommerce-page table.cart .product-remove {
        float: left;
        border-bottom: 0;
    }
}

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

[Ree]

doesn’t work even I added width: 100px!important;
is there a place where I can send private info?

[David]

If you can raise a new topic, as the topic starter you will have access to the private information field where you can share your URL.

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

[Author]

Posts