Woocommerce targeting the shop page only with css

Question

This is what I need to do:

• To target only the main shop page with css (a specific custom class I created as mentioned below).

This is what I've done and tried so far:

• I have an override template of archive-product.php in my child theme.
• In this override template I've added a div with a custom class custom-shop-class just before the product loop start, because I want to target the looped products specifically.
• I tried targeting with class page-id-4 because if I hover over the "shop" page in wp-admin, it gave me http://.../post.php?post=4&action=edit

The problem I'm having is as follows:

• From what I've discovered is that the same archive-product.php template is being used in the other various shop pages and not only in the main "shop" page (correct me if I'm wrong), so when I target my custom-shop-class with CSS, it affects all the other shop pages using the same template file, and it must not.
• There is no unique identifier or class specifically for the shop page, something like the page-id-?? class in the body tag (as in the usual WP pages).

Any suggestions on the best method/solution?

Thanks in advance, Mario.

Answer 1

Set a conditional statement to check for the primary shop page, then echo the div in question if that statement evaluates to true.

WooCommerce Conditional Tag for main shop page:

is_shop()

Example

if (is_shop()) {
echo "<div class='custom-shop-class'></div>";
} else {
echo "<div class='custom-product-category-class'></div>";
}

Alternatively:

<?php if (is_shop()):?>
<div class="custom-shop-class"></div>
<?php else: ?>
<div class="custom-product-category-class"></div>
<?php endif;?>

Conditional Tags | WooThemes Documentation