Targeting the shop page only

1 Views

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:

Read More
  • 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?

Post Views: 1

Related posts

Leave a Reply

3 comments

  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

  2. Using the filter body_class with the is_shop conditional you can target the main WooCommerce shop page.

    add_filter( 'body_class', 'woo_shop_class' );
// Add WooCommerce Shop Page CSS Class
function woo_shop_class( $classes ) {
  if ( is_shop() )  // Set conditional
    $classes[] = 'woo-shop'; // Add Class
return $classes;
}

    The code goes in your themes functions.php file.

  3. To build on the answer provided here, how might I go further and add a unique identifier to the shop page based on the active WPML language? (I’m basically trying to reduce a font size on the German version of the shop page only – it’s proving surprisingly difficult to do)