Support » Theme: Storefront » Add class if page only displays product categories

  • Resolved rookiecop


    I’m building a woocommerce site with Storefront. The customer wants the shop pages to use the full width of the screen if they are listing categories but to be within a narrower container when listing products. There will not be any pages which list both categories and products together.

    The problem is that shop categories and products seem to share the same template with the same classes so Im struggling to find a class to hook into to do this, for example adding a body class based on the category ‘Display type’ (eg if customer selects display type of ‘Subcategories’ then get page to display a class that I can latch onto with css).

    Ive seen code that adds the category name to the body class but that’s not ideal as I would have to amend the css every time the customer adds a new shop category page or decides to rearrange a shop category to show products instaed of sub-categories and vice versa.

    I’m open to any method which will allow me to acheive what I need to do.

    Thanks in advance.

    • This topic was modified 6 months, 2 weeks ago by rookiecop.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi @rookiecop,

    The body tag should have this class when a product category archive is being viewed, tax-product_cat. The overall shop page and product pages should not have that one.

    Try using that as a hook to style the pages differently. Let us know if you have any questions.


    Theme Author Automattic


    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.


Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.