Hiding featured image on pages

I would like to be able to have a featured image for thumbnail purposes for our pages but do not want the image to display once you click into the page. Is there a way to hide this image? Please review page at the link below to see example.

Hello Buck,

Thanks for writing in!

Please add following CSS under Pro > Theme Options > CSS:

.page .entry-featured {
    display: none;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

Thanks for the response but this is not a solution. I had tried this code as well. Unfortunately this code also disables all product images as well. I need a work around to disable thumbnails from appearing as the header image on a page. Are you aware of anyway around this?

I also attempted using .entry-thumb but that removes the featured image completely from the pages but it doesnt affect the products.
The image attached shows how I would like them to look from a thumbnail perspective. The pages without images and just text just look sloppy. Hope this helps give you more information.

Hi Buck,

Is the sidebar on your page is necessary? If not, you can use the Blank - No Container | Header, Footer page template. This template does not output featured image on the page itself even if you set one for your page. And yes it should output the thumbnail.



If the sidebar is needed, please update the given CSS code to this instead:

.page-template-default article>.entry-featured {
    display: none;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

Hi Friech, yes the sidebar is needed for on-page filtering of products. I have tried inserting your code but unfortunately, it did not work. It didn’t hide any of the images from my testing. I am familiar with the chrome browser tool and what I noticed while using it is that the thumbnail image and the featured image use the same class to identify them. Is there any other way that the header image could be hidden that you can think of?

Hi Buck,

Yes, it has the same class entry-featured, but my selector is very specific: article>.entry-featured this means to target the entry-featured that is a direct child of article tag, so it should only affect the big feature image, not the thumbnails.

Please add it on Theme Options > CSS and clear your caching plugins and browser’s cache.

CSS Combinators

Cheers!

I have cleared all the cache while attempting this including the dns cache from cloudflare. The code does not affect anything unfortunately. Could you think of anything that I might have in place that would be restricting this from working?

I completely went through my css from that section and found one syntax error a few lines above that was the issue. I apologize for the inconvenience. But thank you so much for your help.

Hi Buck,

No worries at all. In case you want to check for CSS errors in your code, you may use this site’s tool:

http://csslint.net/

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.