Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – Custom CSS for Columns on Each Product Category

I am currently using custom CSS to evolve my show column layout into 4. However I would like to change this column layout depending upon my product category (Some categories have a different number of products)

www.tattiniboots.com/shop you can see the 4 column layout. However, for instance, on the “Accessories Page” I would like a 2 column layout

Please view the below css to see what I am currently using for my 4 column layout

I have tried using page and post ids along with category ids but they are not working

.page-id-5538 .woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
    margin: 0 3.5% 2em 0;
}
.page-id-5538 .woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
    clear: none;
    margin: 0 0 1 0;
}
.page-id-5538 .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    padding-top: 5%;
    width: 21%;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The answer is here:

    .term-79 ul.products li.product {
    ~ formatting values here ~
}

  2. 0

    WordPress by default adds a unique class to the body tag for categories, pages and other things. Simply use that class to target the categories you need.

    For example, the Accessories page has this class on the body term-accessories.

    So to to add styles just for that page you could do something like this…

    .term-accessories ul.products li.product {
    width: 50%;
}

    Note: If you hit f12 in your browser it will open the inspector tool which you can use to find the classes on the body tag for any page.

    Note 2: If this still “isn’t working”, use the above mentioned tool to inspect the element you are applying the CSS on. You may just need to be more specific with your styles to override the ones already being applied.

    As a last resort you can try adding !important to override any styles, but this isn’t recommended.

    For example…

    .term-accessories ul.products li.product {
    width: 50% !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search