Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #20256

    I am new to theme customization and Firebugs but I make several of customization in my themes until now,

    but I have often the same common problem, sometimes I want to set some CSS properties into specific pages only.

    – Example1:

    I want to hide the “Product category txt” when I insert products into the homepage;

    (http://vestiges.ca/ The text before products: “…Après plusieurs heures de travail…”

    So, I can use this code:

    .term-description {

    display: none;

    But I would like to affect only the homepage (www.vestiges.ca), I don’t want to hide it In the “Product category page” too.

    – Example2

    I want to change the price font size and weight into the category overview pages like this:

    #top .price, #top .price span, #top del, #top ins {

    font-size: 12px;

    font-weight: normal;

    line-height: 18px;


    …But I don’t want to the same thing into the single product page,

    I want to have other CSS properties for single product pages like:

    font-size: 16px;

    font-weight: bold;

    I had already make something similar in Abundance with the help of Devin but I do not really understood how to do it elsewhere

    You can add #top.term-bijoux before .sidebar to keep the changes only on that page or #top.tax-product_cat to keep the changes only on category overview pages.

    Can you give me some cues about “hot to apply css change” only to one specific page like frontage, Products category page or single product page ?

    Thanks !



    Hey Alain,

    WordPress adds page descriptions and tags to the main container for each page. So when you inspect your page with firebug, look at the very top where the top ID is:


    It will have a series of unique identifiers so that you can target just that page. For instance, the home page looks like the above so you can start out your css by selecting:


    Then add the other class selectors that you want to target. Pages have unique ID’s in the form of page-id-#### where ### is the ID of the page. So you could do

    A single product has the class selector single-product on the top ID. So you could have single product specific css by doing the following:

    #top.single-product .someclass{
    some css properties and values;

    If you wanted to only effect a single specific product you could use its post ID. For example this product: http://kriesi.at/themes/replete/product/ (Purchase code hidden if logged out) -group/

    If you wanted to make its title red you would use:

    #top.postid-702 .product_title {
    color: #F00;




    Thanks you Devin, I understand now ;-)

    But, I have a other question:

    How I can change de price size into the single product page without changing

    Related Products price on the bottom of the same page ?

    I tryed:

    /* ———- Bigger and bold product price into single product page ————*/
    #top.single-product .amount{
    font-size: 16px;
    font-weight: bold;
    line-height: 18px;;



    Try using this instead

    .single-product-summary .amount {
    color: red;
    font-size: 16px;
    font-weight: bold;
    line-height: 18px;



Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Setting CSS properties into specific pages only’ is closed to new replies.