Today’s question comes from Nicholas:

How can I remove the product thumbnail from the cart page? I’m trying to remove the product images from the product page, shop loop, and cart. Thanks!


Some shops are selling products or services that don’t require images. If you’re one of these shops, you could create your own product pages and just use the “Add to Cart” shortcode to generate buttons. However, the structure of the product page is really nice, and you may want to use the product pages for simplicity. If so, you may want to remove all images rather than use placeholder images.

Before we talk about how to remove WooCommerce product images, please pay attention to where you add this code! I’ve written a couple tutorials for other sites on this: How to add custom code to WordPress and How to Safely Add WooCommerce Custom Code.

Single Product Pages

Here’s a handy tutorial on removing product images from the single WooCommerce product page. The basic idea is that we’ll want to remove the action that adds WooCommerce images.

We can do so by adding this snippet into our child functions.php or the Code Snippets plugin:

// Remove image from product pages
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

However, this won’t remove the sale badge if your product is on sale, which will look kind of funny without an image. We’ll need to add another snippet right below this to remove sale badges as well:

// Remove sale badge from product page
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

The only issue is that the product page will now have a big gap in it. We can fix this with some custom styling, but this may change depending on your theme. Adding something similar to this to your child CSS stylesheet or custom CSS plugin should do the trick:

.woocommerce-page #content div.product div.summary { width:100%; }

However, this will depend on your theme, and you may have to ask your theme developer for help on this one if you’re not sure what class / id to target.

Cart Pages

Removing thumbnails from the cart pages is the easiest change to fix – there’s a handy filter available for us to change the product thumbnail easily. Let’s just return this as “empty” so the thumbnail isn’t displayed. We can put this in the Code Snippets plugin or a child functions.php.

// Remove product thumbnail from the cart page
add_filter( 'woocommerce_cart_item_thumbnail', '__return_empty_string' );

There will be a pretty tiny gap in your cart table, so you may not need to adjust styling to compensate. However, this again will depend on your theme. Using a default theme, you can adjust your child stylesheet with the following CSS:

.woocommerce table.cart .product-thumbnail { display:none; }

Again, this will depend on your theme’s styling.

Shop Loop

Finally, let’s remove the product images from the shop pages. This is again an action we need to remove in the shop template. We can add this code to our child functions.php or to our Code Snippets:

// Remove product images from the shop loop
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

However, we have the same issue as the product page – we may have sale badges left over that will now look kind of funny without an image to sit on. We can remove these from the shop page as well by placing this snippet right below the previous one.

// Remove sale badges from the shop loop
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );

That’s it! Provided that your theme doesn’t do something crazy, these snippets should remove WooCommerce product images and sale badges from your shop entirely.


Have a question of your own? You can submit one here.

Want to see the rest of the “Ask Us” questions? You can view all of them here.

Articles you may also like:

Posted by Beka Rice

Beka Rice manages the direction of Sell with WP content and writes or edits most of our articles to share her interests in eCommerce. Or she just writes as an excuse to spend more time jamming out to anything from The Clash to Lady Gaga. Who knows.

12 Comments

  1. Very helpful Beka! This info is the most complete I could find on the subject. Those product images are only fit regular webshops. I sell a web design membership:)

    Have a nice weekend
    Oliver

  2. Imperial Clothiers December 27, 2014 at 4:22 pm

    Hey,

    I’m using Avada Theme with WooCommerce. Why isn’t this working for my product? This example is with the Multistep Product Configurator: http://imperialclothiers.com/product/suit-template/

    And this example is without the multistep product configurator: http://imperialclothiers.com/product/custom-suit-template/

    They both are shifted over to the right sans image and the php & css still leaves that massive blank space on the left.

    1. Hey there, I’m guessing that this is overriding the product templates (what I meant by “your theme doing something crazy” 😉 ), so you’d want to contact the theme developer on the best way to go about removing the image.

  3. Hello This was very useful
    Can someone tell me how to remove product thumbnails from “recently view products” widget in woocommerce
    Thanks

  4. Beautiful! Thank you!

  5. how to remove the images from woocommerce search results page.

  6. Great article but I am trying to remove the images from the WooComm sidebar widgets for top products and recent products and then allow the text to go full width. The images are not important for this client.

  7. I had edited functions.php file and my website is vanished ,i cant login and my website is not showing anything please help me .what was wrong with the given code.thanks

  8. That’s good to find this article. Sometimes featured thumbnail for products are not needed and really need to hide/remove it from a Woocommerce site.
    But we also need to edit a style.css for a theme to ensure they don’t leave a space for displaying thumbnail anymore.

  9. Thanks for this article. Still works perfectly in 2016!

    If it helps anyone I restyled the shop items to display a little nicer now the images have been removed by doing this:

    .woocommerce ul.products li.product h3 {
        font-weight:bold;
    }
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        padding-top: 3%;
        border: #a1a1a1 solid 1px;
        padding-bottom: 2%;
        text-align: center;
        min-height: 180px;
    }
    

  10. Hi there. I’m working on this now in 2016. The product page and cart code works great (thanks for the tip on Code Snippet plugin!), but the shop doesn’t. Has the code changed/updated?

    Thanks!!

    1. Heya Maggie, glad to hear this is (mostly) working! The shop images appear to be hooked in the same way still, so not seeing a reason right off the bat this wouldn’t work, and it still removes images in my dev shop with the Twenty Twelve theme. Is your theme perhaps overriding the shop template? That’s the first place I’d look in case it’s removed / re-added these actions in a different way.

It's been over 2 years since this post was published, so comments have been closed. Thanks for reading!