Target only woocommerce shop page with CSS

Hi guys, after trying to find the usual page class “.page-id-” in the body tag of the shop page and it has none, I did some googling to try do this and found some reference to the theme too.

Basically, I have an override page template archive-product.php in Dazzling’s child theme. In there I created a div with a custom class custom-shop-class-mario.

The problem I’m having is, the archive-product.php template is used for some of the other WC pages too. I need to target only the shop page with css, but it doesn’t have a unique page-id.

In the wp-admin, if I hover over the shop page, the tooltip says /post.php?post=4&action=edit … to which I tried using a class .page-id-4 but it didn’t work.

Any idea how I can uniquely identify/target the shop page?

Thanks in a advance.
Mario.

Hi Mario,

I hope you are well today and thank you for your question.

Could you please share me the shop page URL from your site so that i can you to specifically target it?

Kind Regards,
Movin

Hi Movin, thanks for the reply. I went to stack overflow because I was pressed for time to resolve it and there was indeed a good solution I got today, by putting in an IF statement code in the archive-product.php file (the override in child theme). I tested it on my test site and it worked, I’m still going to do it on the live site today.

I can gladly share the link of the shop and also the stack overflow thread, where it may help others:

I understand it gets busy by you and I always appreciate your help. I was running out of time :slight_smile:

Awesome great to see you got that found.

Please advise if you have more questions.

Have a fantastic day!