How to change product category background color based on category

Hi, hope you are well, i have two categories product category 1 and product category 2
i have two questions;

1- how can i change background color of product category 1 to yellow
and product category 2 pages bg color to red

and similary for add to cart buttons and product titles that belong to product category 1 (on shop pages) to yellow and red for product category 2

i did check the cofigurations and its only possible inthe theme to change bg color of all shop pages

but i want to know how can i do that based on product category.

here is an example of the website which is build with your theme
https://happease.me/category/cbd-oils/

Thank You
Bilal Hussain

Hello,

You can set background colors for different pages in Theme Settings -> Styles & Colors -> Pages backgrounds.
The category page inherits the shop page settings.
Please try to use the theme preset to achieve this.
https://xtemos.com/docs-topic/theme-settings-presets/

And for add to cart button background:
Go to Theme Settings -> Styles and Colors -> Buttons.
https://xtemos.com/docs-topic/advanced-button-styles/

For the Product title:
Go to Theme Setting -> Typography -> Advanced ->
https://ibb.co/3TwbPF2
Here you can select the title and customize it as per your need.

Best Regards.

hi,
Thank you for your detailed response! i think im close BUT i still don’t know if this is fully answer my questions.

For the backgrounds, i did check presets but im not sure if i did it correctly or if it works the way i want.

basically i have a product category named “category1” and i want that product category bg color to be red.

from presets i chose “taxonomu – equals – product-cat” and clicked on save and named that preset “category1”

but i dont see any options to set bg color or im not sure what to do from this point forward?

Regarding add to cart buttons and product titles,

actually i know this theme has that advance option but there is no option to choose product category add to cart colors or typography for specific product categries.

because what i am trying to achieve is that i want all product titles and add to cart button colors that belong to “category1” to be red

i know there is custom selector option but how to use that im not sure, like my category that i am targetting, the slug is “category1” or ID is “12”

Hello,

There is an option to set the theme options preset for the particular category, please see the condition in the below screenshot: https://ibb.co/yBc4xfP

Then Edit the preset and set the theme options for that preset and save it: https://ibb.co/j65586V

Best Regards.

Thanks alot! yeah i foudn it!

can you confirm one last thing, i tried to use different product styles for different categories after assigning the preset (rest of the things are happening) but product grid styles is not changing on shop pages.

it always follows whatever the global stlye is

Hello,

Can you please share the WP admin login details of your site and the screenshot of the settings you have made for the particular category?

Best Regards.

Hi, sorry i was able to solve the issue my question was about archive pages product grid designs. i will test one more time and update you! but the main thing to change bg color based on category i was able to do.

Thank You

Hello,

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Best Regards.

sorry asking a different question because i could not find the button to create new topic

can you please update me how to solve this issue, category images are stacked too close with each other apart form first in the list. (see attached image)

can you let me know how to solve this?

Thank You
Bilal Hussain

Attachments:

You must be logged in to view attached files.

Hello,

I have visited your site that you have mentioned in the previous reply. There is no category in the page title. If you have another site then share the wp logins details in the private content i will check and give you a possible solution.

Best Regards.

im trying it on localhost until its done. can you see the image and let me know why it is showing like that? i can do css but i believe it should not show like this by default, plz update?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.wd-nav-product-cat>li>a {
	gap: 20px;
}

Best Regards.

Hi i tried that and it is showing like this now,
i could able to add padding/margin for the image but the first child the “dired mushroom” is already placed exactly like it should be but im curious how come rest of the listings are not following that?

because when i add padding or margin it solves most of the part since dried one is already fine so it gets double space

Attachments:

You must be logged in to view attached files.

Hello,

As soon as your site is moved on a live platform, contact me, I will provide the custom CSS.

Best Regards

[Author]

Posts