How to Hide Product Gallery In WooCommerce

WooCommerce is backed up by more than five million active installations in the WordPress community, and this number continues to grow every day.

This is because WooCommerce is flexible to customization and scalable.

Moreover, WooCommerce is a powerful plugin that can transform your WordPress blog into a fully-fledged eCommerce site to generate revenue.

However, not everything is straightforward.

Sometimes you may need to change a few things, some of which are not as simple as ticking a checkbox and hitting the save button. Some changes require you to go to the back end and have some code written.

WooCommerce Hide Product Gallery

WooCommerce allows you to upload a featured image and multiple thumbnail images when you create a product. These thumbnail images create a gallery that is displayed on a single product page.

This is how you can add the product gallery:

This is how the product gallery appears on the front end:

In this post, you will learn two methods to hide the Product gallery.

Moreover, I will share a bonus code snippet to hide all images on the single product page.

Steps to Hide the Product Gallery in the WooCommerce Single Product Page Using PHP

Here are the steps that you need to follow:

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to hide the product gallery in the WooCommerce single product page.
3. Click anywhere on the text editor and scroll to the bottom of the funcitons.php file. Paste the code at the end:

/**

 * @snippet       Hide Dashboard on the My Account Page

  */

remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

6. Click on the Save Changes button at the bottom of the text editor screen.
7. Now you have successfully added the code snippet required to hide the product gallery on single product pages. This will be the outcome on the front end:
8. Alternatively, you may opt to remove all the images on all the single product pages. To do this, add the following code at the bottom of your functions.php file:

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

7. This will be the outcome:

Steps to Hide the Product Gallery in the WooCommerce Single Product Page Using CSS

Here are the steps that you need to follow:

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From your admin dashboard, go to Appearance > Customize.
3. Click Additional CSS.
4. Add this piece of CSS code in the text area:

.woocommerce-product-gallery {

display:none;

}

5. The CSS code snippet above will hide the product image. However, the short description will still align to the right side of the content area. Add the following CSS code to make it aligned to the left instead:

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {

float: left;

}

6. This will be the outcome:

Conclusion

In this post, you have learned how to hide all the thumbnail images on all the single product pages of your WooCommerce store using both CSS and PHP.

However, if you are not familiar with code, I recommend hiring a WordPress Developer.

Similar Articles

1. How to Hide Quantity In Stock In WooCommerce
2. WooCommerce Storefront Show all Categories on the Homepage
3. How to Customize Storefront Theme Using Customizer
4. How to Change Add to Cart Text WooCommerce Guide with Examples
5. How to Remove Breadcrumbs WooCommerce Storefront
6. How to Hide Price If Zero In WooCommerce
7. How to Customize Storefront Checkout Page
8. How to Change WooCommerce Product Visibility Options
9. How to Hide WooCommerce Registration Form
10. How to Hide Order Status In WooCommerce
11. How to Remove, Rename and Add Storefront Sorting Options
12. How to Hide Product Prices Based on User Role Storefront
13. How to Hide Product SKU In WooCommerce
14. How to Hide SKU, Category, Tags Meta Product Page WooCommerce
15. How to Add Text after Price in WooCommerce » Add Price Suffix
16. How to Hide Read More and Add to Cart Button WooCommerce
17. How to Create One Product WooCommerce Storefront Store
18. How to Change Button Color Storefront Theme
19. How to Change Storefront Theme Order of Products
20. How to Move Price WooCommerce Storefront Hooks