[Resolved] How to add css to specific archive using element

[Kevin]

Hello.
I am wanting to add following CSS to specific category in Woocommerce.

body {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 100%, rgba(0,0,0,0.6) 0%), url(“/wp-content/uploads/2022/02/De-Mello-Coffee-About-us-bgimage.jpg”) !important;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #000;
}

Is it possible to use element function in some way to add above css to specific category or archive?

[Fernando]

Hi Kevin,

You can specify your CSS selector to target a specific category.

For instance, if I have a product category called accessories, I can set the selector to: body.archive.woocommerce.term-accessories

So, the code would be:

body.archive.woocommerce.term-accessories {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 100%, rgba(0,0,0,0.6) 0%), url(“/wp-content/uploads/2022/02/De-Mello-Coffee-About-us-bgimage.jpg”) !important;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #000;
}

You can try modifying your CSS selector to adhere to the category page you want it to take effect in. Just replace accessories with your category name.

Alternatively, if you would like to use an element to add this CSS code, you may use a Hook Element.

Then, your code would be enclosed in <style></style> tags. For example:

<style>
body {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 100%, rgba(0,0,0,0.6) 0%), url(“/wp-content/uploads/2022/02/De-Mello-Coffee-About-us-bgimage.jpg”) !important;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #000;
}
</style>

Then hook it to wp_head and set the appropriate Display Rules.

Hope this clarifies. 🙂

[Author]

Posts