Are you searching for a tutorial to help you learn how to hide product image in WooCommerce? You are in the right place. This guide will walk you through the steps to hide both single product images and all product images in WooCommerce using custom CSS.
Images might be less relevant for products where technical specifications or service details are more important than the visual presentation. Products like eBooks, digital courses, or software, where the value lies in the content or functionality rather than the visual presentation, might not benefit much from product images. In such cases, store owners might prefer to direct customer attention to detailed descriptions, specifications, or the unique selling points of a service that images cannot convey.
Let’s look at how you can achieve this.
Hiding a Single Product Image in WooCommerce
If your intention is to hide the image of just one or a few selected products without affecting the entire catalog, follow these detailed steps. This method is particularly useful for stores with a manageable number of products where adjustments can be made individually.
Step 1: Identify the Product ID
First, you need to find the product ID of the item whose image you want to hide. You can find this by navigating to the Products page in your WordPress admin area and hovering over the product. The product ID is typically displayed in the URL preview at the bottom of your browser.
Step 2: Add Custom CSS
From your WordPress dashboard, go to Appearance > Customize to open the theme customizer.
Click on Additional CSS from the customizer menu.
In the provided textarea, you’re going to add the following CSS code. Make sure to replace 47 with your actual product ID:
.woocommerce #content div#product-47 .woocommerce-product-gallery {
display: none;
}
.woocommerce #content div#product-47 div.summary {
float: left;
}
This code does two things: it hides the product gallery for your specified product, and it aligns the short description (or summary) to the left, filling the space where the image used to be. This ensures your page layout remains balanced and visually appealing even without the product image.
Hiding All Product Images in WooCommerce
In cases where you need to hide images for all products in your store, follow these steps. This method is efficient for larger catalogs or when you prefer a uniform look without product images.
Step 1: Access the Customizer
Just like with the single product image, start by going to Appearance > Customize in your WordPress admin dashboard.
Step 2: Navigate to Additional CSS
Select Additional CSS from the customizer’s menu to access the CSS editing area.
Step 3: Add the CSS to Hide All Images
Copy and paste the following CSS code into the textarea. This code will hide the product gallery for all products on your site:
.woocommerce #content div.product .woocommerce-product-gallery {
display: none;
}
By applying this CSS, all featured or product images, as well as placeholder images set by WooCommerce, will be hidden from view. This creates a more text-focused layout for your products.
Step 4: Adjust the Short Description Alignment
After hiding the images, you might notice that the product descriptions or summaries are still aligned as if the image were present, typically to the right. To adjust this, add the following CSS to ensure the text uses the available space more effectively:
.woocommerce #content div.product div.summary {
float: left;
}
This CSS snippet aligns the short description to the left, making better use of the space and maintaining a clean, organized appearance of your product pages.
Why Use the Code Snippet
- If you are new to editing the code on a WordPress site, you may break your site.
- If you have many changes, code snippets tend to be cumbersome to update since some may require an update with every WooCommerce software update. (If the hooks or filters you are using change, the code snippet may no longer work.)
- Code snippets may create vulnerability to your website security since they are from different sources (third-party developers).
- Code snippets are freely available and with no upfront costs.
- Code snippets can be quick to implement for experienced developers who can customize them further.
What is the Alternative Solution
While code snippets do great work and get the job done quickly, they have some drawbacks, and that's the reason plugins exist.
Plugins are ideally organized code snippets that are scalable, dependable, and professionally written to help you keep your site safe and customize it with ease.
To make your work easier, I have put together my 10+ years of experience into a highly useful WooCommerce product (Whideit) that is geared toward hiding all unwanted elements on your store without wasting time.
- Using Hideit is easy, and you can simply click a button to immediately disable the Add to Cart button along with the price and several other features you may want to hide from users.
- I specifically designed it to help with my day-to-day work on client projects. I found it very useful and decided to share it with the WooCommerce community.
- If you are interested, you can find it here. As one of my blog readers, do not forget to subscribe to my mailing list using the form below so that you can CLAIM your 20% OFF introductory discount for WHIDEIT.
- I also occasionally send important updates in WooCommerce to help you update or keep your site up and running effectively and safely. You can also reach out if you need any further customization or help with hiding any feature on your WooCommerce store.
Conclusion
Customizing the display of your WooCommerce products can significantly impact your store’s look and feel, as well as the customer experience. Whether you’re looking to hide images for a single product or your entire catalog, the steps outlined in this guide provide a straightforward solution using custom CSS.
By leveraging the WordPress Customizer, you can make these adjustments easily and see the changes in real-time. Remember, the beauty of CSS is in its flexibility. You can always remove or modify the code to revert the changes or further customize the appearance of your store.
We hope this post helped you learn how to customize your WooCommerce store.