WordPress HowTo

How-to guide for WordPress

  • Home
  • Plugins
  • Themes
  • Contact
    • Privacy Policy
  • About

How to Remove/Hide Image From WooCommerce Product Page

If you need to remove/hide the featured image from your WooCommerce product page you can apply this simple CSS tweak.

WooCommerce allows you to upload a product image when you create a new product. In WordPress, it’s also called a featured image. If for some reason you no longer want to display these images you can follow one of these options.

How to Hide Product Images in WooCommerce

Hide Single Product Image

Featured/Product images can be removed where you configured it. If you only have a couple of products you can just remove it from the WooCommerce Edit Product menu. However, a placeholder may still be shown. Whether you have the featured image set or a placeholder is being shown, you can follow these steps to hide it all.

  1. Go to Appearance > Customize from your admin dashboard.
  2. Click Additional CSS.
  3. Add this piece of CSS code in the textarea (Replace 31 with your WooCommerce product ID):
.woocommerce #content div#product-31 .woocommerce-product-gallery {
 display:none;
 }
 .woocommerce #content div#product-31 div.summary {
 float: left;
 }

The second CSS is to correctly align the short description of product 31 without affecting other products.

Hide All Product Images

This option works out great if you have a lot of products and you don’t want to selectively remove from each one. This option is also very flexible as you can revert everything just by removing the CSS.

  1. Go to Appearance > Customize from your admin dashboard.
  2. Click Additional CSS.
  3. Add this piece of CSS code in the textarea:
.woocommerce #content div.product .woocommerce-product-gallery {
 display:none;
 }

This CSS will hide the product image and the placeholder image of all the products (WooCommerce shows a placeholder image for products that don’t have any featured image). However, the short description will still align to the right side of the content area. So you might want to add this CSS code to make it aligned to the left instead:

.woocommerce #content div.product div.summary {
 float: left;
 }

Related

Written by Noor Alam · Categorized: wordpress

Comments

  1. Lucas says

    The issue with #1 is that WooCommerce has a placeholder image that is added if a Featured Image is not uploaded, so that wont work anymore.

    Reply
    • admin says

      @Lucas, I have just updated the code.

      Reply
      • Karen says

        Hi I am a beginner and did this and it messed up my single product page. I did this but didn’t want it anymore so deleted the css code. But now the images still do not show, when I add them to a page via a woocommerce element single product widget. i’m using elementor and embark theme. can you please help me?

        Reply
      • dreamer says

        I love you! It works like charm, thanks a lot!

        Reply
  2. Karen says

    Hi, I just want you to know that this code totally messed up the widget for Woocommerce Single Product Page. Even after I had deleted the CSS, the images were not showing at all, just a blank space. I had to deactivate/reactivate all plugins and only now does the image now show but only after I have updated and refreshed the page. I have like 18 products to edit so now I have to do this for every single one adding like 36 extra steps/refreshes. I don’t recommend this for Elementor and I think you should write this on the page because maybe beginners/others will try it and it will mess up the widget.

    Reply
    • admin says

      @Karen, Do you have any caching plugin installed? Once you remove the CSS code it should have no effect on your product page.

      Reply
  3. Steve Dixon says

    I added the CSS code to remove the image. Then I added the code to move it to left align. Worked great! Thanks! I need one more thing. I only have one item in my WooCommerce Products. That is a registration form for an annual event (not published to the public yet) built with Gravity Forms. I need this form to be full width instead of half width as it is now. I’m sure it’s something simple. Can you help?

    Thanks
    Steve

    Reply
    • Terrie says

      I have the same issue. Did you find a solution?

      Reply
    • Terrie says

      Just in case you haven’t found the answer, I just came across this fix. Instead of the {float: left;} use { width: 100% !important; } that did the trick for me.

      Reply
  4. mom says

    Hi there… This worked fine for me!
    but i want to remove images and image placeholder from Category Page
    is there any code for this? I want to have simple List of products with title, description, price, add to cart

    thank you!

    Reply
    • Cindra McCoy says

      I have this same question. Can you help?

      Reply
      • Essop Rahiman says

        Drop me a mail, essop@strathostess.co.za, will send the codes to you

        Reply
        • Belle says

          Hello! I am looking to do the same: simple List of products with title, description, price, add to cart

          thank you!

          Reply
          • Essop Rahiman says

            Drop me a mail please, essop@strathostess.co.za

  5. Lila says

    OMG you rock. This worked.when several other of my other usual tricks for retheming woocommerce products pages didn’t. Thanks.

    Reply
  6. PRASHANT CHAINANI says

    Hi. Have an image on my checkout page.
    Went to the library and removed it and now it shows as a ?
    How do i remove it?
    The image had the text “verified by payfort”

    Reply
    • admin says

      @Prashant, Please provide a link to the page in question so I can take a closer look.

      Reply
  7. Essop Rahiman says

    CSS worked awesome for single product, thank you much. another question, what CSS can i use to remove the image and image placeholder from all products in the shop page.

    Reply
  8. Sathyasri says

    I’m selling intangible and tangible products in my woocommerce shop, I want to remove the product image and placeholder for intangible products only so how do I that?

    Reply
  9. Anuj says

    Nice post and content

    Reply
  10. swrang says

    How to hide product gallery from displaying on woocommerce single product page and to show those variant product only when we scroll or select the variant (color or size).

    Thank you.

    Reply
  11. Tess says

    Perfect. Worked a treat for me. How can I do this for just one product? How would I add the page ID to the CSS?

    Thanks!

    Reply
  12. Manuka Ranmirra says

    I want to add selection on the product page How can I do it.

    Reply
    • Noor Alam says

      @Manuka, Can you please clarify what you are trying to do?

      Reply
  13. David Badyna says

    This works great for me as well, however, I am looking to find a way to do the same thing based off of the category instead of the product id, so I can put everything without a pic into one category instead of having to add/remove the code every time I change a product.

    Reply
  14. Art says

    Hey. Just did it on my site.
    snippet worked fine. thank you

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search WP HowTo

Recent Posts

  • Custom Donations for WordPress PayPal Donate Buttons
  • Gmail SMTP Plugin Cc Configuration
  • How to Add a Reply-To Address in the Gmail SMTP WordPress Plugin
  • What Does a Security Challenge Mean on PayPal?
  • WP PayPal Button Integration with Contact Form 7
  • Can People See Your Address on PayPal?
  • Mailchimp Integration for WP PayPal Plugin
  • How to Show a Text Box at WP PayPal Checkout to Collect Custom Data from Buyers
  • How to Add a Recurring Price Field to a PayPal Subscription Button
  • How to Add a Quantity Field to a PayPal Button

Featured Add-ons

Buy Now Custom Amount for PayPal

Buy Now Discount for PayPal

Contact Form 7 Integration for PayPal

Custom Input for PayPal

Mailchimp Integration for PayPal

Product Variations for PayPal

Variable Quantity for PayPal

Variable Subscription for PayPal

Custom Donations for PayPal

Reply-To for Gmail SMTP

Cc for Gmail SMTP

Disable Right Click on Video.js

Copyright © 2023 · WordPress HowTo

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAcceptRead More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT