{"id":55971,"date":"2015-10-19T03:39:45","date_gmt":"2015-10-19T07:39:45","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=55971"},"modified":"2015-12-08T04:53:05","modified_gmt":"2015-12-08T09:53:05","slug":"woocommerce-how-to-remove-products-images-placeholder","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/woocommerce-how-to-remove-products-images-placeholder.html","title":{"rendered":"WooCommerce. How to remove products images placeholder"},"content":{"rendered":"

This tutorial will show you how to remove product images placeholder<\/strong> in your WooCommerce store.<\/p>\r\nWooCommerce. How to remove products images placeholder<\/a>\r\n

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.<\/p>\r\n

Default placeholder image<\/strong> looks like this:<\/p>\r\n\r\n\"WooCommerce_How_to_remove_products_images_placeholder_1\"<\/a>\r\n\r\n

Let’s find out how to remove placeholder images<\/strong> for products.<\/p>\r\n\r\n

    \r\n

  1. Access your server, using any ftp client<\/strong> or FileManager<\/strong>:<\/p>\r\n\r\n\"WooCommerce_How_to_remove_products_images_placeholder_2\"<\/a>\r\n<\/li>\r\n

  2. Navigate to ‘wp-content\/themes\/themeXXXXX\/includes’<\/strong> folder, where XXXXX<\/strong> is the number of your theme.<\/p><\/li>\r\n

  3. Open ‘custom-function.php’<\/strong> file with any php\/text editor<\/strong>:<\/p>\r\n\r\n\"WooCommerce_How_to_remove_products_images_placeholder_3\"<\/a>\r\n<\/li>\r\n

  4. Add the following line to the very beginning of the file, right under <?php<\/strong> tag:<\/p>\r\n\r\n

    remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );<\/pre>\r\n\r\n\"WooCommerce_How_to_remove_products_images_placeholder_4\"<\/a>\r\n<\/li>\r\n
  5. Refresh your website to see the changes.<\/p><\/li>\r\n<\/ol>\r\n\r\n
    This removes the product image placeholder from the product page, but can leave the column intact, pushing the page content over:<\/p>\r\n\r\n\"WooCommerce_How_to_remove_products_images_placeholder_5\"<\/a>\r\n\r\n
    If this happens, you’ll have to fix the styling issue with some custom CSS<\/strong>. The exact rule you use, and how you make this modification will depend on your particular theme.<\/p>\r\n
      \r\n
    1. We’d recommend that you use FireBug<\/a> plugin for FireFox browser to inspect elements and edit CSS.<\/p><\/li>\r\n
    2. Basically, you will just need to adjust the width value for the product description column:<\/p>\r\n\r\n\"WooCommerce_How_to_remove_products_images_placeholder_6\"<\/a>\r\n<\/li>\r\n
    3. Change the width value to ‘100%’<\/strong>:<\/p>\r\n\r\n\"WooCommerce_How_to_remove_products_images_placeholder_7\"<\/a>\r\n<\/li>\r\n
    4. Copy new rule<\/strong> declaration:<\/p>\r\n\r\n\"WooCommerce_How_to_remove_products_images_placeholder_8\"<\/a>\r\n<\/li>\r\n
    5. Paste it to the Custom Css<\/strong> box of the Cherry Options<\/strong>:<\/p>\r\n\r\n\"WooCommerce_How_to_remove_products_images_placeholder_9\"<\/a>\r\n<\/li>\r\n
    6. Refresh your website to see the changes.<\/p><\/li>\r\n<\/ol>\r\n
      This is the end of the tutorial. Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nWooCommerce. How to remove products images placeholder<\/a>","protected":false},"excerpt":{"rendered":"
      This  tutorial will show you how to remove product images placeholder<\/strong> in your WooCommerce store.<\/p>\n","protected":false},"author":37,"featured_media":55985,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1556],"tags":[537,1880,542,642,2418],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/55971"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=55971"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/55971\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/55985"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=55971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=55971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=55971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}