Which template do I alter in CSS to affect all Product pages?

  • Resolved sangredeespana

    (@sangredeespana)


    7 months ago

    So I just finished changing the css and colors, etc. on the Main page, using CSSHero. I was wondering, which page would I alter for Products, so that no matter how many products I add the pages are all the same, instead of having to change each generated page individually. So basically, just alter the main one which would also cascade to all subsequent additional product pages. Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Stef

    (@serafinnyc)

    This often times will depend on the way you built the site and if you used any page builder templates etc. Hopefully you didn’t.

    Writing CSS so that it is applied to all products will depend on the class you are targeting. You’ll always use the class selector though so that it applies throughout the website.

    To differentiate products on specific pages you can use the main template name. For instance on Category pages the class is “Archive” and on PDP or Single Product pages the class is “Single-Product” these classes are found in the body portion of the source code

    <body class="product-template-default single single-product postid-323 logged-in admin-bar"

    Hope that helps

    Thread Starter sangredeespana

    (@sangredeespana)

    Thanks!

    Thread Starter sangredeespana

    (@sangredeespana)

    So are you saying make a general page and then copy it? Or is changing the template enough for all copies or new instances?

    Plugin Support omarfpg a11n

    (@omarfpg)

    Hi @sangredeespana,

    Since the product pages use a template (single-product.php) you can apply CSS to said template and it’ll apply for all the products, and at the same time you make sure that your changes are only applied for the product pages, to avoid any unwanted style changes in any other page. To do this, you can target the body class .single-product at the beginning of all your CSS rules.

    You can learn more about customizing product pages here: https://woocommerce.com/posts/customize-product-page/.

    If you have any further questions please let us know! ??

    Cheers!
    -OP

    Thread Starter sangredeespana

    (@sangredeespana)

    Thanks! One final question. Since I am using a plugin to change the css (CSSHERO) is there a “master page” that I would “load” on the browser to make changes to and then they cascade to all the other product pages? For example, where would I go to lets say… https://www.xxxxxxxxxxx.com/????????????

    to make these changes using the interactive CSS styler plugin? I have some preloaded pages that came with the theme setup, do I just go to one of them, make changes, and it cascades to the others, even when generating a new page? Thanks again. Hopefully that makes sense.

    Thread Starter sangredeespana

    (@sangredeespana)

    Also, can someone offer a screen shot on Product pages vs Category pages, and any other pages and how they are “different”? Im new to woocommerce and its structure… still a little confusing. Thx

    Plugin Support Shameem R. a11n

    (@shameemreza)

    Hi @sangredeespana

    Since I am using a plugin to change the css (CSSHERO) is there a “master page” that I would “load” on the browser to make changes to and then they cascade to all the other product pages?

    CSS Hero doesn’t exactly work with a “master page” concept. Instead, it allows you to edit the CSS of individual pages. However, if you’re making changes to common elements across your site (like headers, footers, or product layouts), those changes will reflect on all pages with these elements.

    If you want to apply a consistent style across your website, you should edit these common elements. Any new page generated will also carry these styles as long as the same elements are used.

    Also, can someone offer a screen shot on Product pages vs Category pages, and any other pages and how they are “different”? Im new to woocommerce and its structure… still a little confusing.

    Product pages and Category pages are indeed different. Product pages are individual pages for each product you sell, while Category pages are where multiple related products are grouped together.

    Product pages typically contain detailed information about a product, including its price, description, images, and more.

    On the other hand, Category pages display a list of products that fall under a specific category, providing a brief overview of each.

    I hope this clears up any confusion. If you have any other questions, feel free to ask!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Which template do I alter in CSS to affect all Product pages?’ is closed to new replies.