HomePage › Forums › Themeforest › Piizalian – Fast Food Restaurant WooCommerce Theme › Product color question
- This topic has 14 replies, 2 voices, and was last updated 3 years, 2 months ago by Bakana Media.
-
AuthorPosts
-
July 21, 2021 at 7:29 pm #3198Bakana MediaSupport Expired
Hello,
I would like to differentiate each product by a different colour.
To do this I have modified the CSS but it changes the colour of all my titles.How can I assign a colour to each article title like on the screenshot ?
Thank you in advance
July 21, 2021 at 10:09 pm #3200Hi,
Each product will have a product ID attached to the class in the tag li.
You can combine this product class id to style your own color for each productView demo at: https://prnt.sc/1dz6iou
li.product.type-product.post-317 h2.woocommerce-loop-product__title a { color: #92920f; }
July 22, 2021 at 12:20 am #3204Bakana MediaSupport ExpiredHello again,
Perfect, I managed to change the colour of your title, thanks.
Is it possible to change the colour of the price and also the frame when you move the mouse over it?
July 22, 2021 at 8:55 am #3208– Change color boder hover:
li.product .product-block-list-elementor:hover { border-color: #your-color !important; }
– With Price:
li.product .product-block-list-elementor .price ins { color: #your-color !important; }
if you want to style for each product, you can use
li.post-317.product
July 22, 2021 at 2:19 pm #3214Bakana MediaSupport ExpiredHello,
Incredible, thank you very much
Is it also possible for the “add to cart” or “select options” button?
I just changed the CSS for the price because it doesn’t work:
li.post-4794.product .product-block-list-elementor .woocommerce-Price-amount.amount { color: #your-color !important; }
July 22, 2021 at 3:07 pm #3217Hi,
#1. Price css: I checked with this css code and it works normally: https://prnt.sc/1ea9lur
#2. Add to cart button css:
li.post-4794.product .product-block-list-elementor a[class*=product_type_]:before{ color: #your-color; }
July 22, 2021 at 5:59 pm #3226Bakana MediaSupport ExpiredHi
Small problem when I move my mouse over it: screenshot
When I move my mouse over it, the icon should be white and the background my colour, is this possible?
Thank you again for your help.
July 22, 2021 at 8:48 pm #3229css code for button hover:
.product-block-list-elementor a[class*=product_type_]:hover, .product-block-list-elementor a[class*=product_type_]:focus, .product-block-list-elementor a[class*=product_type_]:active{ background-color: #your-color !important; }
July 22, 2021 at 10:32 pm #3235Bakana MediaSupport ExpiredHi,
Thank you for making this work
However now when I move the mouse over it I don’t get the trolley icon
July 22, 2021 at 11:01 pm #3237The color of the cart icon is matching the background color on hover, so you have to change the color of the cart icon on hover.
July 23, 2021 at 12:50 am #3240Bakana MediaSupport ExpiredHi,
What is the code I need to enter to change this? Because I can’t do it
July 23, 2021 at 1:02 am #3242You can use css code:
li.post-4794.product .product-block-list-elementor a[class*=product_type_]:before:hover{ color: #your-color !important; }
- This reply was modified 3 years, 2 months ago by Supporter.
July 23, 2021 at 1:46 am #3244Bakana MediaSupport ExpiredThis does not work
July 23, 2021 at 8:35 am #3248Oh sorry, please edit this css into:
li.post-4794.product .product-block-list-elementor a[class*=product_type_]:hover::before{ color: #your-color !important; }
July 23, 2021 at 1:59 pm #3261Bakana MediaSupport ExpiredThank you
-
AuthorPosts
You must be logged in to reply to this topic.