Remove featured image from product page gallery

  • Resolved clawduda

    (@clawduda)


    4 years, 9 months ago

    Hi,
    I need some help please, with a customization that I need to do on my woocommerce.
    So, for a product I have set a featured image ( product image ) and I have added 4 pictures in the product gallery too.

    I need to make it so that the featured image is NOT displayed on the product page itself. Basically make it so that when viewing a product, only the images in the gallery are displayed

    I have tried using the following code in functions.php

    add_filter('woocommerce_single_product_image_thumbnail_html', 'remove_featured_image', 10, 2);
function remove_featured_image($html, $attachment_id ) {
    global $post, $product;

    $featured_image = get_post_thumbnail_id( $post->ID );

    if ( $attachment_id == $featured_image )
        $html = '';

    return $html;
}

    This works but with one big issue.

    Basically this does remove the featured image from the product page but the little thumbnails near that allow you to switch pictures on the product page still contain the featured image thumb
    So the first picture in the gallery is displayed now as the first picture but the little thumbnail for it is actually from the product/featured image.

    If anyone has a suggestion on how to fix this please, I would be in your debt.

    Thank you
    Claudiu

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there Claudiu,

    I tried out your code on my personal site, and it seems to be doing exactly what you want it to do — I am not seeing the issue you described.

    I have a product with images set like this (dog pic for featured image, and a bunch of other random ones in the gallery):

    image settings
    Link to image: https://d.pr/i/F7xi1u

    Then viewing it on the frontend, the featured image is removed from both the top part and the list of little thumbnail images:

    frontend product images
    Link to image: https://d.pr/i/Yetxte

    If you are seeing different behavior on your site, then it could be due to the way your custom theme is loading those images. Please try temporarily switching back to the default Storefront theme to see if you see different behavior with the images. If so, then you may need to dig into the theme code to see what is causing that.

    I hope that helps! Have a wonderful day!

    Recently I’m facing issue with the product thumbnail.Whenever I’m uploading images it gets uploaded and I’m selecting the image to be thumbnail for the product,an empty product image appears and i cannot delete the empty image which appears as a bug and there is no attachment and no information about the image.

    I have attached the screenshots below:

    View post on imgur.com

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    Thank you for providing those screenshots.

    To clarify, this is separate from your previous question regarding your custom code not working the way you expected, correct? Now this is just when you upload a new image to be used as the featured image, it shows up in the Media library as a blank image with no attachment information.

    That is certainly not expected behavior, and issues like that are generally caused by a conflict with code in either a custom theme or another active plugin on the site.

    I’d recommend creating a staging site (if you don’t have one already, your hosting company might offer one as part of your package — alternatively, you can use a free plugin like WP Staging for quickly creating a new test site). Then on the staging site, disable everything except for WooCommerce, switch back to the Storefront theme, and then try uploading a new image to see if you experience the same issue.

    We have a guide for conflict testing here:
    https://docs.woocommerce.com/document/how-to-test-for-conflicts/

    I hope that helps!

    Thank you for your response.

    NO,but my new image gets uploaded when i upload.But when i select that image and set to feature image it resets back to a blank image,this problem occurs only on featured image tab.In product gallery it works fine.

    I will include the screenshots before and after:

    View post on imgur.com

    I had attached some text description in image.

    • This reply was modified 4 years, 8 months ago by sarfbazaar.
    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    Thank you for providing the screenshots. Yes, I do see what you mean, however as mentioned that is certainly not expected behavior with the core WooCommerce plugin. I did some testing on a few of my different personal sites (with your PHP snippet from above still applied), but did not see the same issue. Also, I am not seeing other reports of this from other users.

    Also, you had mentioned that it works fine for the Product gallery, but there are issues with the “featured image on the product”. From your screenshot I see that it is saying “featured image” on that page as well, however on the main product image upload screen it should be “Product Image” and “Set product image” for the button. Are you using the “Set product image” option from the edit product page?

    Set Product Image
    Link to image: https://d.pr/i/ZkWwOE

    Since this issue appears to be specific to your site (as I cannot reproduce it on my sites and other users are not reporting this), please proceed with the conflict testing as described in my last message to narrow down what might be causing this.

    Let us know how that testing goes.

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    We haven’t heard back from you in a while, so I’m going to mark this thread as resolved. If you have any further questions, please start a new thread.

    Have a wonderful day!

    With using the above code is there a way to make it work for specific categories rather than across the whole site?

    hi.

    Could you tell me which is the path of this functions.php file to paste this code,
    Thank you

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    Could you tell me which is the path of this functions.php file to paste this code,

    If you’re copying it to a functions.php file, you would want to create a child theme and copy the code into the functions.php file in the root of that child theme folder (otherwise changes will be lost when updating your theme). If you are unsure about child themes and functions.php files, an easier method might be to use the Code Snippets plugin instead: https://www.ads-software.com/plugins/code-snippets/

    Both methods are described in this guide:
    https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/

    I hope that helps!

    Hey arriving to the party a little late here. Thanks @clawduda for this solution. Its a great start but I am having the same issue you described when viewing on mobile (on desktop I use stacked view so there are no thumbnails). The featured image thumbnail still appears and then each thumbnail is out of sync with the image that displays.

    Perhaps easiest if you take a look (on mobile): https://flaxstaging.wpengine.com/product/eucalyptus-signature-shirt/

    @kellymetal are you able to help at all?

    Thread Starter clawduda

    (@clawduda)

    Hi,
    sorry I did not reply sooner

    @twenty50cards I found out the issue. You have the same problem and this is what I did to fix it.

    It happened to us because we have “variable” products, not simple products.
    In short, you need to go to the first default variable and select a thumbnail for it. Unless you manually set a picture for a variable from the variable product menu then it will use the default product image instead ( which in our case it is the picture that we would want to not show on the product page )

    Hope it helps.

    @clawduda Super many thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Remove featured image from product page gallery’ is closed to new replies.