Colour per each product catergory

[Anonymous]

Hello there YoloTheme team,

we would like to give each product category their own colour. For example we have currently setup 3 different colour categories of vehicles. Each of these should have other colours for the highlights.

This section the Sports one should be yellow as it is right now: https://workspace.access-motor.com/produkt-kategorie/fahrzeuge/atv/sport/

The next one is the Basic section these products should have orange highlights: https://workspace.access-motor.com/produkt-kategorie/fahrzeuge/atv/basic/

And there will be more sections coming up.

How do we get this done?

 

Best regards

Add New Note to this Reply

[Jackie]

Hi.

Thank you for contacting us.

What is the color want to show on each category? Can you give me some idea? We will help you check it again.

Thanks.

Add New Note to this Reply

[Anonymous]

Hello dear Jackie,

• the colors we would like to change are the Store Button underneath the short description
• the highlight color from the tabs on the right side
• the breadcrumb dots
• the hover from the add-to-wishlist button
• the hover color from the categories and tags
• the HOT or SALE colour per each category
• and if possible also give each menu widget category its respective color

I hope this helps you out. Everything that is possible we will gratefully be happy to implement.

Best regards

Add New Note to this Reply

[Anonymous]

Hello dear YoloTHEME Team,

 

is there an update to our request?

 

Best regards.

Add New Note to this Reply

[Jackie]

Hi again.

• the colors we would like to change are the Store Button underneath the short description: where the colors? can you give me the link or image about that?
• the highlight color from the tabs on the right side? Where the color? can you give me the link or image about that?
• the breadcrumb dots: you can use the custom CSS below to change the color of the dot:
• html .yolo-breadcrumb-wrap ul.breadcrumbs > li:before {
  1. background-color: #ffcc00;
  }
• the hover from the add-to-wishlist button: you can use the custom CSS below:
• html .site-content-single-product .single-product-info .summary-product-wrap .single-product-function .yith-wcwl-wishlistaddedbrowse a:hover:before, html .site-content-single-product .single-product-info .summary-product-wrap .single-product-function .yith-wcwl-wishlistexistsbrowse a:hover:before, html .site-content-single-product .single-product-info .summary-product-wrap .single-product-function .yith-wcwl-add-button a.add_to_wishlist:hover:before {
  1. background-color: #ffcc00;
  }
• the hover color from the categories and tags:
• html a:hover {
  1. color: #ffcc00;
  }
• the HOT or SALE color per each category
• Sale background color:
• .product-flash-wrap .product-flash:nth-child(2) {
  1. background-color: #000;
  }
• hot:
• html .product-flash-wrap .product-flash.on-hot {
  1. background-color: #00dcff;
  }
• and if possible also give each menu widget category its respective color: i'm not sure about the question. Can you show me some example?

Thanks.

Add New Note to this Reply

[Anonymous]

This reply has been marked as private.

Add New Note to this Reply

[Jackie]

Hi again.

Where the location you have added the custom CSS? Please let us know again.

For the add to cart button, you can try the CSS below to change the color:

html .site-content-single-product .single-product-info .summary-product-wrap form.cart .button, html .site-content-single-product .single-product-info .summary-product-wrap form.cart .added_to_cart {

1. background-color: #ffcc00;

}

Do you want to change the menu item on the mega menu? https://prnt.sc/p3wags

For the menu item, maybe we can help you add the custom CSS.

Please check it and let us know again.

Thanks.

Add New Note to this Reply

[Anonymous]

Unfortunately none of these have helped us out so far. Please check if you can find a way to implement it by trying yourself.

Best regards

Add New Note to this Reply

[Jackie]

Hi again.

The add to cart button, highlight link get the color from primary color: https://prnt.sc/pae5bo

If you want to change that color, you also can try to change the primary color.

Or if you want to set another color, please let me know the color code, I'll help you check it again.

https://prnt.sc/pae5bo

Thanks.

Add New Note to this Reply

[Anonymous]

Hello dear Jackie,

if we would change the primary colour we would change it for the entire site. Our purpose is to change it for just our seperated categories or each product itself. We tried to implement it as custom css in the page layout section but this didn't work out correctly.

If you need more help to understand our need please do not hesitate to ask.

Best regards

Add New Note to this Reply

[Jackie]

Hi again.

Please check the body class, you will the post id for each page/ product page as you want: https://prnt.sc/pbpdu5

Then you can use that class to CSS the style for each page as you want with the different color.

Please check it again.
Thanks.

Add New Note to this Reply

[Anonymous]

This reply has been marked as private.

Add New Note to this Reply

[Jackie]

Hi again.

No, I don't say you need to add the class to the body. :(.

You can use the postid class on the body class to CSS for your page style as you want. As you know postid is a unique ID on your site.

Example on your page, I have added the custom CSS below:

.postid-3370 .site-content-single-product .single-product-info .summary-product-wrap form.cart .button,
.postid-3370 .site-content-single-product .single-product-info .summary-product-wrap form.cart .added_to_cart {
   background-color: #e10e1f;
}

to change the background color of the add to cart button.

Please check it again.

Thanks.

Add New Note to this Reply

[Author]

Posts