Remove Image from Woocommerce/shop

Hi,

I have some code in a child theme on the php file that adds an image above the navbar. I would like to remove the image but only on the shop page. I am not sure how to edit it so that it does this though. Here is my current php code:

function add_image_above_menu() { ?>

<div id="x-section-1" class="x-section" style="margin: 100px 0px 0px;padding: 100px 0px 45px; background-color: transparent;">
	<div class="x-container max width" style="margin: 0px auto;padding: 0px;">
		<div class="x-column x-sm x-1-1" style="padding: 0px;">
			<img class="x-img x-img-none" src="https://baruchmaayan.com/wp-content/uploads/2017/02/Baruch-Header.png">
		</div>
	</div>
</div>

<?php    
}
add_action('x_after_view_global__slider-above', 'add_image_above_menu');

Hi @SPACECOWB0Y,

Thanks for writing in.

You can add class to that section then add custom CSS so that it will not be displayed on shop for example.

function add_image_above_menu() { ?>

<div id="x-section-1" class="x-section sectionimage" style="margin: 100px 0px 0px;padding: 100px 0px 45px; background-color: transparent;">
	<div class="x-container max width" style="margin: 0px auto;padding: 0px;">
		<div class="x-column x-sm x-1-1" style="padding: 0px;">
			<img class="x-img x-img-none" src="https://baruchmaayan.com/wp-content/uploads/2017/02/Baruch-Header.png">
		</div>
	</div>
</div>

<?php    
}
add_action('x_after_view_global__slider-above', 'add_image_above_menu');

Then add this in your custom CSS:

.woocommerce-page sectionimage{
display:none;
}

Locate your page ID then add it before the sectionimage class so that you will not display it in that specific page.

To locate page id, check the link below.

Hope it helps.

Let us know how it goes.

Thanks.

Hey Nico,

I added the class=“x-section sectionimage” and added your custom CSS. I found the page ID is 6 but nothing happens when I add it before the sectionimage class in the custom css. Here is what I have. Any idea what I am doing wrong?

.woocommerce-page-6 sectionimage{
display:none;
}

Hi there,

Please update this code:

.woocommerce-page-6 sectionimage{
    display:none;
}

to

.woocommerce-page-6 .sectionimage {
    display:none;
}

In case the code doesn’t work, please provide the URL of your site.

Hey X team,

Sorry, that did not work either. The site is https://baruchmaayan.com/

Hi There,

Please try with this CSS instead:

.post-type-archive-product .sectionimage {
    display:none !important;
}

Thanks,

That took care of it. I really appreciate the help.

You’re welcome.