• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Remove WooCommerce Single & Thumbnail Images From Product Details Page

WooCommerce enables you to add both a featured image (single product image) and product thumbnails ( gallery images ) which are displayed below your main product image on your product details page.

If you’ve already added images, you can simply remove them manually, or use PHP code.

If you have lots of product pages and/or thumbnails, you can save time by using code to remove them rather than do the job manually.

There’s 2 ways to use PHP code to remove the images from your single product details page.

  1. You can add one line of code to your child themes functions.php file to remove all images on all pages.
  2. Or you can add a custom function to your child themes functions.php file to control which pages the images are removed from.

1. Remove All Images On All Single Product Pages

Add this code to your child themes functions.php file.

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

2. Conditionally Remove Product Featured Images

Simply copy all this code from the view raw link and paste it at the end of your child themes functions.php file.

To control which pages your images are removed from, simply modify the Woo Commerce conditional tag in the code above.

1. Remove All Thumbnail Images On All Single Product Pages

Add this code to your child themes functions.php file.

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

2. Conditionally Remove Product Thumbnail Gallery Images

thumbnail images

Simply copy all this code from the view raw link and paste it at the end of your child themes functions.php file.

Remove Main Product Image & Display Thumbnails

This will remove both the main featured image on all product pages and only display the thumbnails.

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

add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_thumbnails', 20 );

You may also need to change the thumbnail sizes, positioning etc to fill the gap.

CSS-Remove Product Thumbnail Gallery Images Only

You can also add CSS code to your child themes style.css file to remove the thumbnails only and keep the main image displayed.

.single-product .thumbnails {
display: none;
}

CSS-Remove Product Main Featured Images Only

Or remove the main product image.

.single-product .woocommerce-main-image {
display: none;
}

If you find the plugins style sheet over-riding our themes CSS code, you may have to add !important to the declaration.

Note: You may find your product title and short description move after removing images using PHP code which you can fix using CSS.

Example: Before Images Removed

Example Product Images

Example: After Images Removed

Remove Product Images

Related Tutorials

  • Remove Single Product Image Per Product

WooCommerce

Reader Interactions

Comments

  1. mohsen moghaddam says

    August 22, 2014 at 5:37 am

    best tricks for sidebars at woocommerce, with incompatible themes
    if you can’t see the sidebar of your theme when using woocommerce and the sidebar is not showing correctly , just see the name of sidebar at your theme’s folder , for example: if the sidebar name is: sidebar-left.php, sidebar-right.php or anything else depends on where do you want to show up your sidebar, you should first copy and rename it to “sidebar.php” , because woocomerce first looks for sidebar.php and then shows up the sidebar at your site.
    this is especially right when you have problem at product and catalog pages .
    this don’t need coding or modifying css files anymore.

    Log in to Reply
  2. Brad Dalton says

    February 17, 2014 at 9:43 pm

    Simply add the post i.d between the brackets in this line of the code

    if ( is_product('007') ) {
    Log in to Reply
  3. Walad7bab says

    February 17, 2014 at 9:37 pm

    Hi

    Thank you for this tutorial

    Can you please tell me how I would remove the picture from ONE product only for example a product with ID = 1329

    Many thanks

    Log in to Reply
  4. Jason says

    February 12, 2014 at 7:24 am

    Great article! My question is do you have a suggestion for removing the “link” for the image on the product page?

    Log in to Reply
  5. Kamrul says

    February 2, 2014 at 11:35 pm

    hi
    i don’t know any coding. So can you specify the files name have to change these code to remove the thumbnails from all the pages because i don’t want to use any image on my products.

    Log in to Reply
    • Brad Dalton says

      February 3, 2014 at 9:10 am

      The code goes in your child themes functions.php file Kamrul

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.