Remove Header Image from Woocommerce

  • Been trying to figure out how to remove the header image from my woocommerce generated pages with this css:

    .page-id-245, .custom-header-media img {
display: none;
}

    But it seems to also remove the header image from the other pages as well. What am I missing?

Viewing 6 replies - 1 through 6 (of 6 total)

  • a woocommerce page might have the CSS body class of .woocommerce or .woocommerce-page;

    try to use that in your CSS;
    example:

    .woocommerce-page .custom-header-media img {
display: none;
}

    for more precise help, please post a link to your site.

    Thread Starter nootkan

    (@nootkan)

    Hi Michael, thanks for your reply. I’ve tried different css like .woocommerce, .woocommerce-page-id-245, etc with no luck. Everything I try seems to remove the header images on all pages but leaves the background color and branding.

    Unfortunately the url isn’t live but resides on my local server.

    Here is the header code if that helps:

    <body class="archive post-type-archive post-type-archive-product logged-in admin-bar no-customize-support wp-custom-logo woocommerce woocommerce-page group-blog hfeed has-header-image has-sidebar page-one-column colors-light">
<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

	<header id="masthead" class="site-header" role="banner">

		<div class="custom-header">

		<div class="custom-header-media">
			<div id="wp-custom-header" class="wp-custom-header"><img src="https://localhost/mysite/wp-content/uploads/2018/02/cropped-nicepike3-1.jpg" width="2000" height="1284" alt="" srcset="https://localhost/mysite/wp-content/uploads/2018/02/cropped-nicepike3-1.jpg 2000w, https://localhost/mysite/wp-content/uploads/2018/02/cropped-nicepike3-1-300x193.jpg 300w, https://localhost/mysite/wp-content/uploads/2018/02/cropped-nicepike3-1-600x385.jpg 600w, https://localhost/mysite/wp-content/uploads/2018/02/cropped-nicepike3-1-768x493.jpg 768w, https://localhost/mysite/wp-content/uploads/2018/02/cropped-nicepike3-1-1024x657.jpg 1024w" sizes="100vw" /></div>		</div>

	<div class="site-branding">
	<div class="wrap">

		<a href="https://localhost/mysite/" class="custom-logo-link" rel="home" itemprop="url"><img width="405" height="250" src="https://localhost/mysite/wp-content/uploads/2018/02/cropped-logo-med-1.png" class="custom-logo" alt="" itemprop="logo" srcset="https://localhost/mysite/wp-content/uploads/2018/02/cropped-logo-med-1.png 405w, https://localhost/mysite/wp-content/uploads/2018/02/cropped-logo-med-1-300x185.png 300w" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" /></a>
		<div class="site-branding-text">
							<p class="site-title"><a href="https://localhost/mysite/" rel="home">Home</a></p>
			
							<p class="site-description">Site Title</p>
					</div><!-- .site-branding-text -->

		
	</div><!-- .wrap -->
</div><!-- .site-branding -->

</div><!-- .custom-header -->
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You need to show us your woocommerce page using an emulation tool like CodePen, CSSDesk or jsFiddle.

    make sure NOT to set a comma in your CSS;

    this is how it should look like:

    .woocommerce .custom-header-media img { display: none; }

    and make sure to clear your browser cache after each change to the CSS…

    Thread Starter nootkan

    (@nootkan)

    Michael, thanks again the new css without the comma worked fine. It removed the header image and left the background color with the site-branding and logo left behind which I can live with.

    Thread Starter nootkan

    (@nootkan)

    Andrew, thanks for your reply. I will save this thread for future reference in how to show my source code when using local host.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Remove Header Image from Woocommerce’ is closed to new replies.