[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

WooCommerce. How to remove products images placeholder

This tutorial will show you how to remove product images placeholder in your WooCommerce store.

WooCommerce. How to remove products images placeholder

Sometimes, items in your store do not require product images. But if a product does not have an image associated with it, then WooCommerce automatically adds default placeholder image to the product.

Default placeholder image looks like this:

WooCommerce_How_to_remove_products_images_placeholder_1

Let’s find out how to remove placeholder images for products.

  1. Access your server, using any ftp client or FileManager:

    WooCommerce_How_to_remove_products_images_placeholder_2

  2. Navigate to ‘wp-content/themes/themeXXXXX/includes’ folder, where XXXXX is the number of your theme.

  3. Open ‘custom-function.php’ file with any php/text editor:

    WooCommerce_How_to_remove_products_images_placeholder_3

  4. Add the following line to the very beginning of the file, right under <?php tag:

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

    WooCommerce_How_to_remove_products_images_placeholder_4

  5. Refresh your website to see the changes.

This removes the product image placeholder from the product page, but can leave the column intact, pushing the page content over:

WooCommerce_How_to_remove_products_images_placeholder_5

If this happens, you’ll have to fix the styling issue with some custom CSS. The exact rule you use, and how you make this modification will depend on your particular theme.

  1. We’d recommend that you use FireBug plugin for FireFox browser to inspect elements and edit CSS.

  2. Basically, you will just need to adjust the width value for the product description column:

    WooCommerce_How_to_remove_products_images_placeholder_6

  3. Change the width value to ‘100%’:

    WooCommerce_How_to_remove_products_images_placeholder_7

  4. Copy new rule declaration:

    WooCommerce_How_to_remove_products_images_placeholder_8

  5. Paste it to the Custom Css box of the Cherry Options:

    WooCommerce_How_to_remove_products_images_placeholder_9

  6. Refresh your website to see the changes.

This is the end of the tutorial. Feel free to check the detailed video tutorial below:

WooCommerce. How to remove products images placeholder