Topic Resolution: Resolved
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #3198
    AvatarBakana Media
    Supported

    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

    #3200

    Hi,

    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 product

    View demo at: https://prnt.sc/1dz6iou

    li.product.type-product.post-317 h2.woocommerce-loop-product__title a {
        color: #92920f;
    }
    • This reply was modified 1 week, 4 days ago by SupporterSupporter.
    • This reply was modified 1 week, 4 days ago by SupporterSupporter.
    #3204
    AvatarBakana Media
    Supported

    Hello 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?

    #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

    #3214
    AvatarBakana Media
    Supported

    Hello,

    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;
    }
    #3217

    Hi,

    #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;
    }
    #3226
    AvatarBakana Media
    Supported

    Hi

    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.

    #3229

    css 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;
    }
    #3235
    AvatarBakana Media
    Supported

    Hi,

    Thank you for making this work

    However now when I move the mouse over it I don’t get the trolley icon

    https://i.ibb.co/3cwnTfv/capture.png

    #3237

    The 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.

    #3240
    AvatarBakana Media
    Supported

    Hi,

    What is the code I need to enter to change this? Because I can’t do it

    #3242

    You 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 1 week, 3 days ago by SupporterSupporter.
    #3244
    AvatarBakana Media
    Supported

    This does not work

    #3248

    Oh sorry, please edit this css into:

    li.post-4794.product .product-block-list-elementor a[class*=product_type_]:hover::before{
       color: #your-color !important;
    }
    #3261
    AvatarBakana Media
    Supported

    Thank you

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.