WooCommerce reviews + tutorials

You can hide WooCommerce product images from the product detail pages by using the following technique.

To remove the image add the line of code below to your theme’s functions.php file (found at wp-content/themes/themename/functions.php):

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

This removes the featured product image from the product page but can leave the column intact, pushing the page content over and looking horrible:

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. Themes from WooCommerce come with a convenient custom.css feature, so if you’re using a theme from them you can fix this styling issue by adding a line like the following to your custom.css file (found at wp-content/themes/themename/custom.css):

.single-product .product .summary { width: auto; }

And voila, no more product images!

Published by Justin Stern

Justin is one of our co-founders, and is our resident overengineer. He likes to write developer tutorials and make black magic happen in our plugins. He thinks that writing code is a lot easier than writing words.

156 Comments

  1. How do I do this for just 1 product??

    • You’d have to write a conditional to check for the particular product, and then remove the action only for that product. Not necessarily difficult, but requires a little bit of coding

      • Could you elaborate? I have tried this but I must be doing something wrong because it changes nothing.

        if ( is_product ( ‘slug’ )) {
        remove_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_images’, 20 );
        }

        • Hey Jack, probably the issue is that your code is being executed too early. Try something like the following:

          add_action( 'wp', 'remove_product_image' );
          function remove_product_image() {
          if ( is_product( 'slug' ) ) { remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 ); }
          }

          • Hey is can you do that by product id? And sorry, my other reply was in the wrong place.lol

          • Hey Justin,

            Thanks for your explanation!

            Unfortunately, it does not work for me. I thought I only had to fill in the product slug once, where there is ‘slug’ in your code, right?

            Regards,

            Johan

    • The above php change works fine, but if you’re aren’t using a WooCommerce theme (and are, instead, just using another theme with the Woo Commerce plugin), you might try adding this to your theme’s .css file (which worked for me):

      .woocommerce div.product div.summary, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.summary {
      float: right;
      width: auto;
      margin-bottom: 2em;
      }

      Obviously, you might want to make a side note somewhere of these changes so that if WooCommerce so you aren’t hosed if WooCommerce sends an update down the pipe. πŸ™‚ Good luck!

  2. Hey Justin,

    I want to remove the Free Tag from my Images.

    I mean, I don’t want to display the rates online. When I keep that field blank, a FREE tag arises on the product thumbnail and in its description.

    Please help me fix it.

    Regards.

  3. Hello Justin,

    what about if I want to hide the images from the all products pageto keep only the titles of the products?

    The idea is to have on one column on the left the titles of the products and each time you select one product, the detail page of this product will open on the right column…

    Do you think you can give me a hand with this?

    Thank you very much!

    • Hey, unfortunately what you’re describing would be a pretty involved change, definitely more than I’d be able to cover on the blog. Sorry about that, and best of luck

  4. Hey,

    Looking for a way to remove images too…

    But I can;t find that code to remove in my functions.php file.

    I’m using canvas (from woothemes) so seems strange its not there?

    Thanks,

    ben

    • Hey Ben, sorry if it wasn’t clear in the post, what you actually want to do is add that one line of code from above to your functions.php, not remove it. Hope this helps!

      • oh yep I get it! thanks πŸ™‚

        This removes the image on the product page, but is there also a way to remove the image on the shop page also?

        • Hey Ben, if you haven’t come across it already, the quickest way would be to add the following to your functions.php:

          remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

          Bear in mind that the page styling might then need some work.

  5. Hey,

    I am using TwentyEleven theme, adding .single-product .product .summary { width: auto; } to my style.css sheet doesnt change anything :((

    Any advice?
    Thanks

  6. Hello Justin,

    thanx for your reply. Could you help me with the following: I want to hide the images from the product-category. thank u!

  7. Oh, I just did it πŸ™‚

  8. Hello Just, found this solution through Google. I am using Runo Lite http://wordpress.org/extend/themes/runo-lite theme. The first part worked but I cannot find the custom.css to put the code you mentioned in it. I have the files runo-editor-style.css and style.css, I tried putting the code in both of them but the gap created by the 1st bit on code refuses to bulge. Please advise.

    Regards.

    Jeewan

    • Hey Jeewan, there just must be some other CSS rules at play here, don’t know what off the top of my head, but if you have a link I could take a look

      • Justin,

        Thank you for the quick reply and your offer to help. When you asked a link I am not entirely sure but here is the link to the product page

        http://jeewan.me/?product=website-package-i

        if you need the FTP details or the admin details, please let me know when I can pm you.

        Many thanks and much appreciated.

        Jeewan

        • Well, admittedly you’ll have trouble styling your site unless you learn some basic css, but to start you off, the following might work: #container #content div.product div.summary { float:none; width:auto; }

          I used #container to make the rule more specific because your style.css is loaded before woocommerce.css, which makes it more difficult to override those styles.

          • I just used this (after “.single-product .product .summary { width: auto; }” didn’t work) and it fixed the issue for me perfectly!!

            You are the best. Bookmarked the site, let me know what else I can do to show you some love πŸ™‚

          • Hey Jimmy, thanks for stopping by and letting us know this worked for you, it’s great to hear!

  9. Hi,

    Instead of removing the image is there a way to make the product summary width smaller?

    Mine is dropping below the image and I don’t want to make my image smaller.

    I tried adding to custom.css:

    .single-product .product .summary { width: auto; }

    as well as changing “auto” to different %’s but that did not work either

    You can see it here:

    http://perfectlyimperfectme.com/shop/raylee-blog-template/

    • Hey Emily, it looks like you were able to get this to work by using the !important keyword, which is fine, but not necessarily the ideal way. You were running into the same issue as Jeewan above; namely your theme style.css is included before the woocommerce.css stylesheet, so therefore in order to have your rules take precedence you’d need to make sure they’re more specific than the rule you’re trying to override in the woocommerce.css stylesheet. You do this by specifying more id’s, classes, or tags than the rule you want to override, with id’s providing the most specificity. Ideally however you’d have a custom.css or style.css that was included after woocommerce.css so you could more easily override the styles by using the same rules.

      • I’m brand new to WordPress and still learning so I’m a bit confused I understand I’m overriding the woocommerce stylesheet by putting important so should I have editeded the woocommerce stylesheet? I heard that was not a good idea because then you have to re-edit every time it updates? Will it be fine the way I have it? At this point I’m just glad I got it to work πŸ™‚ but I don’t want to mess anything up either!

        Thanks for your help!

        • Hey Emily, what you did is fine, you can basically ignore what I said previously πŸ™‚ I was just giving you additional information as to how you’d preferably override those styles in case you were curious, but it’s not necessary. Definitely don’t edit the woocommerce stylesheet, as you’d loose any changes with the next update of woocommerce. You’ll be fine, keep at it, keep learning. Best of luck!

  10. Hey Justin,

    You are absolutely right in regards to learning some basic CSS, thank you for your help, the code did make it move to the left. Many thanks for taking the time.

    Jeewan

  11. Just wondering, would you be interested in a Theme customization which also includes setting up a store, please do let me know if you would be interested and I will send you the details, we can take it from there.

    Jeewan

  12. You’re welcome Jeewan, best of luck with your site!

  13. Hey, I have one more question, if you can help me…

    I want the categories to be on the left side of my page (which I have nearly done) and I want each category to link to the products (as it is). What I need: each time I click on a category the page with the corresponding products should open in the same page with my categories. I have seen it working in woo commerce themes, I cannot for some reason do it with the plugin…

    Thank you and let me know if you need more info,

    a newbie πŸ™‚

  14. This is great! I’ve searched all over on how to remove images and you seem to be the only person who shows how in a simple fashion.

    I have one question I’ve tried to figure out on my own using your example to Ben in the comments to remove the loop images. It worked on the products loop but didn’t remove my category images, though. Is there any other code that will remove the category images, as well?

    Thanks,

    Jeff

    • Hey jeff, it should be a pretty similar process, try: remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );

      • Now that is a beautiful thing.

        Thanks so much for the quick response. It works perfectly!

        Jeff

        • You got it man. Lots of luck and success with your ecommerce venture!

        • I tried this code remove_action( ‘woocommerce_before_subcategory_title’, ‘woocommerce_subcategory_thumbnail’, 10 ); but my site still shows thumbnails on the category page.

          Any thoughts?

          • That code will remove the category images (not product images, of course) from the shop pages, assuming that it’s being executed. So the only thing is to make sure that code is in the functions.php of your current theme so that it gets run.

      • I’m trying to do the same thing. This code works, but I’m left with some awkward formatting with bullets I’d prefer not to have. Using Leverage them. Is this a Leverage .css thing? Or awoocommerce .css? Or something else?

  15. Hi Justin and thanks for a very informative forum.

    I am stuck trying to move the product summary to the left. Using your code above, I was able to remove the image but since i am using WP Eleven Ten theme, there is no custom.css anywhere. I have tried to make my own by writing style for woocommerce and then adding your code above but also that didn’t work. Finally, I have used:

    #container #content div.product div.summary { float:none; width:auto; } but also that doesn’t appear to resolve the issue.

    Do you have an idea of what I should do?

    Thanks alot

    • Hey Jonas, well the exact CSS rule you use depends of course on your particular theme. If Jeff’s suggestion did not work for you, I just successfully used #main #content div.product div.summary { float:none; width:auto; } on twentyeleven. As far as where to put the style, you have a couple of options, depending on how ambitious/technical you are: you can edit the style.css directly, you can install a plugin that allows you to add custom css, or you can go all out and create a child theme to contain your changes.

  16. Jonas, I had the same problem, but this css worked for me: .summary { position:relative;left:-280px; }

  17. Great information as you seem to have the line on customizing Woocommerce. My question would be, is it possible to avoid all of this by embedding a single product in a “page” template rather than in the Woocommerce shop pages to remove the product image?

    • You know, I’m not sure as I haven’t tried it. If you try it and/or get it working, definitely comment back, I’d be curious.

  18. hello i am new in wordpress development is there any way to show products in this way http://www.qurbaniudhiya.org/donate/ . please check link i want to show products in two columns with heading and the same layout which i used on this page but i don’t understand how to handle. here in the above link a used wb e commerce plugin but i found woo commerce more flexible. please help me i try a lot but tied now

    Regards

    Shumaila

    • Hey Shumaila, well to achieve that layout of products would require a customization of shop page layout. Doable, but fairly involved, you’d need to contract with someone with WooCommerce/WordPress development experience. Best of luck

  19. Hi there! This is a great post, and very close to what im looking for. I’m currently setting up a Menu for a restaurant, and they have Photos for some of the menu items, but not all of them. So, it would be great if I can find a way to hide the empty-image box for products that have no featured images on the front-end. I could try to use just CSS, or possibly change the default image to something blank or a small icon, but would be great if I could have an “if” statement, or even a custom class field.. Any thoughts?

    Tanx! πŸ™‚

    • Hey, I know it’s been a while so perhaps you’ve already come up with a solution, but I suppose the easiest way would be to override the single-product/product-image.php template, moving that if ( has_post_thumbnail() ) : check up above the images div, so the whole thing gets excluded if there’s no image, rather than rendering the placeholder image

      • Hi, I’m coming into this conversation really late but this is exactly what I’m looking to do (removing image box when there is no image uploaded)
        However, your link in this comment doesn’t work anymore :s
        any chance you could give a new link or explain in more detail how to use this if statement?
        thanks
        mariska

        • I went through and fixed all the broken links I could find, thanks for pointing this out

  20. Hi, really nice post.

    But I am trying to remove/hide the thumbnail, from the single product page, but I still want it to appear on the shop page.

    I have tried :

    remove_action( ‘woocommerce_template_loop_product_thumbnail’, ‘woocommerce_show_product_images’, 20 );

    But it does not work πŸ™

    • Well, not entirely sure I follow, but if you’re just trying to get rid of the product image from the shop/category pages, you’d want to use: remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

      • Thank you for the reply.

        But that is not what I meant.

        Actually I meant the opposite from the action that you wrote.

        I want the thumbnail to appear on the “shop” page where you can see all the products.

        And hidden on the single product page.

        • Ok, in that case you would just want to follow the above article, and add remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 ); to your functions.php. Hope this helps

  21. I have worked threw the first half of this method and it worked great, I’m using the mantra theme and I get the product images to center in the description area. Think you could help me finish this headache so I can move on to the next? http://abstrakttradingden.com/abstraktcollectibles/shop/2011-baseball/2011-topps-update-us59a-matt-kemp/ Here is a link I’m working with right now.

  22. this thread is awesome!!! I have a little tweak to your code i hope you can help me with…. here it is, on my site users can buy flyers that i customize and email back to them. i also provide printing if they desire. so i was cornered into using variations ie download file, print 100, print500, print 1000 etc. In essence i would like to offer printing ala carte.

    1. i would like to use shortcodes to add print prices for my products. i am currently doing this with variations, but its diffiucult to make changes in bulk

    2 using shortcodes i am able to display a “print” product below a design product. but i dont want the placeholder image to show for this product.

    so how can i remove the image using shortcode or how do i write a conditional statement to disable thumbs for the print category products so the image place holder for these print products doesn’t show?

    my page sample: http://mcapromat.com/promat-designs-2/medical-benefits-3-5×8-5/

    • hmm, well the shortcodes make use of the woocommerce template files, which you can certainly override, but I’m not sure whether you can detect the fact that you’re being called from a shortcode. You might have to write your own shortcode in addition to overriding a template file, just not 100% sure off the top of my head. It’s probably possible, but could take some work

  23. Can this be done for a single product?

    • Yeah, certainly, you’d have to hook into an action once the $product global is available and check whether it’s the product you’re looking for, and then unhook the action as I show above if needed. Hope this makes sense

  24. Thank you for your post.

    I used your code to find a solution to removing only the thumbnails below the main product image on the single product page:

    /* Remove product thumbnails below the main product image from product page */

    remove_action( ‘woocommerce_product_thumbnails’, ‘woocommerce_show_product_thumbnails’, 20 );

  25. Hi, when I used the code: remove_action( ‘woocommerce_before_subcategory_title’, ‘woocommerce_subcategory_thumbnail’, 10 ); it removed the images for both categories and sub categories. Is there any way I can show the images for categories and hide only the sub categories thumbnails? Thanks.

    • Hey Jonathan, well I’m not sure whether the following will get you what you’re trying to achieve, but the woocommerce_before_subcategory_title filter includes the current category, so what you could do is instead of unhooking the woocommerce_subcategory_thumbnail(), you could plug in your own version, that checks for subcategories as shown in the following gist: wc-subcategory-thumbnail.php Get rid of the remove_action call and try adding that function to bottom of your theme’s functions.php

  26. Hi Justin, I used the ‘fix’ that Jeff requested above. (https://www.skyverge.com/blog/hide-woocommerce-product-image/#comment-4099) Removing the Category images from the Shop page; however i need the Category title/text (thats below the image)to go away as well.

    I tried to figure it out in the woocom-hooks file, but i could not find the correct string. Can you please help out?

    Thanks in advance for your time and help!

    • Hey Hank, well that stuff is added by the woocommerce/templates/single-product/meta.php template file, so you can either override that and remove the parts that you want, or totally unhook that whole section by adding the following to your theme’s functions.php: remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

  27. Hello Justin,

    Thanks for this awesome post. I have followed the steps you have provided and it worked just like it should do. However, it doesnt look good on the theme im using..

    1. I couldnt fix the style issue properly. Okay the text and etc goes to the left but it goes too much that makes it look like its coming out of the screen from the left πŸ™‚ Im not good with these codes so I wonder if you can help me sort that out? Or I dont even mind putting the images back on again but making them smaller.

    and 2. For some reason, when I added the codes you have provided, it automatically created a sitemap below the product details between the additional information and footer. Have any idea how I can get rid of that? πŸ™‚ Thanks in advance.

  28. Thank you for the excellent info, helped me heaps. And like other people here cannot get “.single-product .product .summary { width: auto; }” to work for my particular theme. I’m using Artisteer to make my themes and that bit worked before but I updated woocommerce and dosnt any more. Have any ideas?

    this is a product on the site that i’m speaking of

    http://gordontayler.com.au/shop/flute-duets-with-piano-accompaniment/over-the-moon-2/

  29. Hi.

    I am trying to add this code

    remove_action( β€˜woocommerce_product_thumbnails’, β€˜woocommerce_show_product_thumbnails’, 20 );

    to the functions.php file to remove the images of my products but I can’t seem to figure out where to place it exactly so that the image is removed.

    Can you paste for me where the code needs to be placed exactly so that it works :).

    Thanks

    Jenn

    • doesn’t need to go anywhere special, just anywhere within functions.php, so long as it comes after the opening PHP tag <?php

  30. Hello,

    This worked beautifully, wondering if you could share your opinion on something else…

    I want to increase the number of product thumbnails on each row from 4 to 6 (on the category listing pages), and I have tried a few different things, including the official solution at http://docs.woocommerce.com/document/change-number-of-products-per-row/ but nothing has worked yet.

    Have you ever needed to do this? Can you share your solution?

    Many thanks, Ross.

    • Hey Ross, the code in the official documentation is correct, but you’ll also need to make sure your theme supports changing that section. Some themes limit the width of the product rows.

      • Hi Max, I think you hit the nail on the head (given so many failed attempts to make this work), any idea what I should be looking for in the theme code? Can you point me in a general direction?

      • Hi Max, I received this from the theme developer…

        “When I use 6 per page, the number of products is correct as I can see that the “first” class is added to the first item in the row and the “last” class is added to the 6th item in the row. However, WooCommerce isn’t making any adjustments to the width in their css so it won’t change even though the code is working correctly. I tested with WordPress’s Twenty Twelve and it behaves exactly the same, so the issue is in WooCommerce’s css output. They may not actually add it so you have to add it to your theme.”

        Does this help?

        Regards,
        Ross

        • Yeah sounds like your theme needs to have the CSS to support more product columns.

  31. Nice one… Worked great thank you!
    WordPress Version: 3.5.1
    Theme Version: Catalyst 1.5.4
    Child Theme Version: Dynamik 1.1
    Woocomerce Version: 2.0.10 with tons of add-ons

  32. Hello!
    please help me somehow if you can: i need to make woocommerce working with wootique to show many products one per line with very small thumbnail, so i could put many products in one page. List/grid toggle does almost this, but the image is very big also products takes more than one line per item.
    thank you!

    • This is exactly what I wish to accomplish as well. It surprises me there is not an extension available to provide this functionality as it is a most useful way of displaying many products to users at once. Especially if those products do not have a significant image to attract users. It would give a quick way to display many products without creating good looking images to go with them all. At the top of the page could be a few images relative to those products, then below a listing of products (as if on spreadsheet) just as Paul describes above.

      Maybe this is an extension idea for some budding programmers reading this forum? Can anybody point us in the right direction for where we should start looking for how to achieve this effect? Thanks in advance πŸ˜‰

  33. hey,
    can you suggest me the way to remove only catalog image from showing up on product description page ?
    actually the catalog image is vertical one and rest of product images are horizontal. i want to keep consistent experience on display page.

    kindly checkout the page : http://elementsmart.com/product/rock-sunglasses-2/

    and suggest some way out.

    Thanks

  34. What I want I want to remove the clickable effect on main product page on single page in woo commerce,, I mean I dont wnat to appear lightbox even I want to make the image non clickable, how to ? or relevant question, how to hyperlink that image to better quality image?

  35. Thank you so much for your article! I’ve managed to get the images (and placeholder) to no longer show on the product list page, and the product details page, but am still seeing the placeholder on the Cart page. – I’m very new at this and appreciate any help you might provide. Thank you in advance.

  36. Hi Justin, i have got rid of the pictre/thumbnail image on the grid list products shop page. Now I am left with a big block of room on the left side. The code you posted in your post dosent work for me but that is maybe becouse it is on the shop products page insted. Do you know what code i need to put in to may css to make it float wide and fill out the big block.

    This code did not work…
    .archive-product .product .summary { width: auto; }

    Please help, would be really thankfull…

    Best reguards
    Martin

    • Hey martin, unfortunately this all depends on the markup and styling of your particular theme/page. There’s no one-size-fits-all solution I’m afraid :-/

  37. Hi Justin! I read through all your comments and they are quite informative. i want to accomplish something on the theme. i have a unique product that i placed on it’s own category. i don’t want this category / product (the unique product) to be displayed along with other categories or products. And i want to style it uniquely…
    I’m wondering the kind of filter i will apply to enable me separate this unique product.
    I will appreciate any help you can render. Thanks

    • Hmm, well there’s no one filter that is going to make this happen for you, it would take a bit of code customization. I’d recommend giving https://codeable.io/ a try for this sort of thing. Best of luck!

  38. Justin can you pm or email me re making a specific customization happen… specifically one where the product-category is looked at and if the product falls in that product category, removes the featured image… put Skyverge Forum in the subject and I’ll be sure to respond.

    • Getting product categories isn’t the most straightforward procedure in the world, but if you’re at all handy with code you can use the wp_get_post_terms() function like so: $terms = wp_get_post_terms( $product->id, 'product_cat' ); to get the set of product categories, and then loop through them and look for the one you want.

  39. hello

    im using woocommerce and rustik theme. im having issues to make image thumbnails show in product details. ive uploaded 5 – 6 images in the specific product page. sometimes the image for thumbnails come out but sometimes dont and sometimes it will only show 2 images for thumbnails. it will randomly pick which images that use for thumbnails. been looking for solutions for past few days and still didnt manage to make it work. thanks in advance

    • Sounds like a theme-specific issue so I’d recommend trying to get some support from the theme author. I know this isn’t always possible, but as a paid theme they should provide some support I’d think. Best of luck!

  40. Hello, Thanks for this great post πŸ™‚ I am having some trouble, and don’t know if I should contact my theme’s support or if you know of a general fix. I am using striking theme and have placed the code into functions.php, but when I try entering the custom css into my themes custom css field but it didn’t work correctly.
    I first tried the css recommended in the article, but then tried one mentioned in your comments section:
    #container #content div.product div.summary { float:none; width:auto; }

    The “product” i’m trying to do this for is http://newsite.krmef.org/store/donate/

    Any suggestions?

    Many thanks!

    • Probably best to contact support for your theme to get that resolved πŸ™‚

    • Hi Jimbo. Try to open the woocommerce.css and change the width 48% to 100% in block:
      .woocommerce div.product div.summary,.woocommerce-page div.product div.summary,.woocommerce #content div.product div.summary,.woocommerce-page #content div.product div.summary{float:right;width:48%;margin-bottom:2em}
      it worked to me

      Justin, great tip! Thanks!

  41. Hi justin,
    I want to make the same like Ariskat above, for only one specific product category, I want to use a customized style (like only for this category show the products in 5 columns instead of 3), but no idea where to start. If I change the settings in custom.css all my categories are being changed. Can you tell where to start please???

  42. Fantastic! Thanks for your helpful tutorial, it all worked as advertised! Thanks for taking the time to help us all out.

  43. Good work with this post, Justin. It solved lot of my woocommerce display problems without removing any core codes of the plugin or theme. So far I managed to remove product description,category,related products etc. from the shop using your ‘remove_action’ filters.

    I would like to know if there’s a way to interchange the position of product thumbnail and product content. ie move product thumbnail to right side and display product title/addtocart on left side. Or if its possible, product thumb on one line and product content the next line rather than displaying both side-by-side. I’m using woothemes with that custom css option.

    Any help will be appreciated. Once again thanks for your time. πŸ™‚

    once again thanks for your time.

  44. I don’t have a wootheme and my theme doesn’t come with a custom.css file. Should I just create a new one and place the code in there? Will that work?

  45. Dear sir/mada
    Thank you for sharing great tutorials on wordpress
    Can you please help me how i could remove the image place holders for product in shops page.
    at the moment when adding a product it automaticaly creates an image place holder even if you dont upload an image. so in my case i would like to create a restuarant menu, however i dont want to have images created as i don’t need that. the following may give you an idea what i want, to appear when i add a product.

    Tikka Masala
    Cooked with almond powder, fresh cream & special red sauce $10.00 Add “Button”

    I would very much appreciate your help.

    thank you

    • Hi, the quickest way to do this would be to add the following to your theme’s functions.php:
      remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

      However, the page styling may then require some work to make everything look okay.

  46. Hey,

    First would like to say thanks to your awesome post, but the second step doesn’t seem to work for some reason, I contacted my theme provicer and he said customization is not included, =.=

    Could you please help me out, this is the URL links: [redacted]

    THanks in advance!
    Peter

  47. Thanks but how can you hide the product gallery image thumbnails below the feature image on the product details page? Your code removes all images.

    • Hi Brad, that’s going to depend on your theme, but something like this in your custom.css could work:

      .attachment-shop_thumbnail {
      display: none;
      }

  48. Hi guys great post, it helped me remove the image.

    Now I am trying to get my product options to move LEFT, and get my product variables to have normal colored writing than white!

    here is a link to my problem page.

    [link redacted]

    I have spent a few weeks on this, just cant do it.

    Hope you can help me

    • Hi David, you can add this to your custom.css:

      .single-product .product .summary { width: auto; }

      and that should fix the width issue created since the image is no longer there. As for the product variable text, I’m not sure why that would be white, but that’s probably a theme setting that you may have to track down. If not, this may work:

      .woocommerce div.summary {color: black; }
  49. Hey Brad, thanks for the great tip!! Worked really well. I changed .single-product .product .summary { width: auto; }to.single-product .product .summary { width: auto; padding-left: 30px;}
    Because the short description was going outside of the body wrapper. Do you think that’s the best way to do it?
    here’s my site – http://www.ckeweddings.com/product/test
    Thanks for your help and AWESOME help!!

  50. Hi, there is anyone who knows how to remove product feature image link on woocomerce 2.20?

    On the product page if I click the product image it sends me to the actual picture page. I need a solution to remove that link on the product image.

    Thanks,

  51. Thanks for a great blog post! I used the code for the functions.php and custom.css in the Canvas theme running on Woocommerce 2.0. Works as you said – but only for one product! Other products have no image but the column is intact, leaving an empty space where the image usually is πŸ™ Do you have any idea why this would happen?

  52. Thanks, this helped me a lot.

  53. Justin,
    Worked great- one question though.. I’m trying to remove almost all of the headers over the description (the item title, the subcategory info and the description and review tabs.. basically I just want just the text. Any idea how to remove the rest of the stuff up there?

  54. Wondering if there is a simple way to remove that blank image area when the product does not have an image? preferably on the category page – doesn’t bother me as much on the detail page.
    appreciate any ideas!

  55. You guys ROCK!!!

    With your help i was able to hide the placeholder image on the single product page AND not have the width wasted by the default bootstrap width class! :-))

    definitely an expert to bookmark for the future.

    Thank you

  56. Hello!

    Any idea how I would remove the URL link from the product images? I want the image to show on the page, but I don’t want the product image to be clickable and open in a lightbox. How do I remove this link?

    (Apologies if you’ve already answered this somewhere in the comments. There were soooo many to read through, I hit TLDR..)

  57. Just read this amazing thread and found a lot of information but no answer to my dilemma.

    My case is that I want to use the featured (or product) image as a photo for the catalog pages only. I do not want it to also display on the product detail page. Out of the box, it is the first large image and first small thumbnail in the lineup on the product detail page. I would rather it only show up on the shop or catalog pages and then have the product detail page only feature the other photos I’ve added to the “Product Gallery” picker.

    I found the following code that gets me half way there. It prevent the featured image from showing up in the small thumbnail lineup (hooray!) but it’s still featured front and center in the main gallery. Does anyone know what I’m missing to hide the featured image from the main gallery as well?

    add_filter(‘woocommerce_single_product_image_thumbnail_html’, ‘remove_featured_image’, 10, 3);
    function remove_featured_image($html, $attachment_id, $post_id) {
    $featured_image = get_post_thumbnail_id($post_id);
    if ($attachment_id != $featured_image) {
    return $html;
    }
    return ”;
    }

    • Just realized I think my issue is the same as “Dhruv” who posted his inquiry above 2 months ago. I didn’t see any solution to his request but if it’s out there let me know! πŸ™‚

      • This is a bit more trick of a request than what the article was originally aimed to tackle. No easy solution off the top of my head I’m afraid, it’s something I’ll have to look into further!

  58. Hi πŸ™‚ I’m impressed with how you are willing to help out with woocommerce adjustments. I am making a site for a client and this is the first site I have done with woocommerce. I have had to make many fixes to make it fit with her site. A question I have is if you can help me to make related products have no image, since she does not have pictures for those products yet. She wants her related products to be a “Complete the Look” section and for it to look like this…

    http://cadenlane.com/lavender-sweet-lace-damask-baby-bedding/

    …where there are no images, but either a drop down or a place to check like the above site. How could I achieve this?

    Thanks!
    Kelly

  59. Thank you for the tip! I was just using div.images { display: none; } to remove the image and adjusting the summary width.

    What are the benefits of using the function to remove the image as opposed to just using css? I guess load and processing benefits?

    Thank you!

    • Hey Frank, there are a few reasons. (1) You’re correct, load time improvements – hiding means that you have to both output the image, then hide it, rather just than remove it. (2) Not every reader has CSS / javascript enabled in their browser. (3) If class names change, the CSS breaks, while actions are less likely to break in the future.

  60. Hi. How do I remove the thumbnail from a related product, which is listed under the product?

    Example: http://websitetechnology.com.au/product/professionally-designed-website/

  61. Hi,

    Somebody asked the same question above but did not get an answer.
    I would like to remove all the thumbnails from my Category pages using PHP if possible.
    I tried using CSS but it also removed my featured products from the homepage which I don’t want to do.

    Please can anybody help?

    Thanks

  62. Hi, I am trying to either hide the product image or wrap the text around it, the method here does not work. I am using a child theme and inserting the code in functions.php in my child theme. Do you know what could be wrong? the product page I want to modify is: http://neobici.com/producto/alquiler-empresarial-neobici/

  63. Hi Justin
    Thanks for sharing this. Is any way to display another product in same page as same way(feature image and product summary) by product id. Thanks in advance.

  64. I’m totally confused, I used the code you mentioned and yet on the page http://siteground215.com/~mabootca/calendar/ the first column Camp 8 box has some image holder that I cannot for the life of me get rid of, least not by the methods described above.

    How do I fix this gap issue?

  65. Hey Justin,

    Thanks for your help with the codes you provided.

    Removing the image did work, but moving the rest of the text did not work unfortunately. I tried literally all the different codes I could find in this post / on the internet, but nothing happens.

    Would you mind having a look how to do it with the Divi Theme?

    Thank you very much in advance,

    Kind regards,

    Johan

    • Justin, did you see my message about the Divi theme issue?

      Thank you in advance,

      Kind regards,

      Johan

  66. This is just to hide.

    What if i want to use the Product Image space for something else?

    For example, instead of the product description is at the below, i want to display it at the Product Image area. Let say i sell memberships, i dont need product image. So at the product page, this problem will happen. Empty area because no product image, then the Product Description is at the below. So ugly. How can make the Product Description to use the Product Image space and then disable the product tabs in total?

  67. Wow, what a great thread! I’m brand new to using child themes, and I’m having a heck of a time getting mine to work. Whenever I paste in any of the mentioned code into my style.css, the layout of my site completely breaks. Whenever I paste in any of the code into my function.php, nothing happens.

    I’m using the Storefront theme with woocommerce, and I was hoping someone here might have some idea what’s going on?

    Here is what I have in my css file:

    /*
    Theme Name: Storefront Child
    Theme URI: http://yourwebsite.com/storefront-child/
    Description: based on Storefront
    Author: BidVids
    Author URI: http://idontknow.com
    Template: storefront
    Version: 1.0.0
    Text Domain: storefrontchild
    */

    @import url(“../storefront/style.css”)

    here’s what’s in my function.php file:

    The reason I need to hide images from the list of products is that I am going to have hundreds of products in one category, and that blank image space takes up a lot of space. I’d hate for my customers to have to scroll through all that. Thank you!

  68. Hello,
    I would like to make conditional stuff but i could not figure out. I want to hide product’s images ( or if it possible i can use simple image about “You can not see the product image except sign in” etc. ) from guests. If guests sign in website and then they can see the product images.
    How can i do this, could you help me please?
    Thanks

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.