Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #17494
    Lucas
    Supported

    Hello, I would like to know how to modify the CSS code of the theme in order to be able to modify this element in photo : https://ibb.co/4W6sJjX

    I know that I have to work on the child file, and that I have to duplicate the css file. But I can’t find the tag in the css file that corresponds to the framed place on the picture.

    I would like all the products in the store to have a specific color in the background and that the writing of the product is white.

    Can you tell me the lines and file indicating this change?

    #17526

    Ok, please copy this css code to file style.css:

    ul.products li.product .product-block, ul.products .wc-block-grid__product .product-block, .wc-block-grid__products li.product .product-block, .wc-block-grid__products .wc-block-grid__product .product-block{
    background-color: #your-color !important;
    }
    ul.products li.product h2 a, ul.products li.product h3 a, ul.products li.product .woocommerce-loop-product__title a, ul.products li.product .wc-block-grid__product-title a, ul.products .wc-block-grid__product h2 a, ul.products .wc-block-grid__product h3 a, ul.products .wc-block-grid__product .woocommerce-loop-product__title a, ul.products .wc-block-grid__product .wc-block-grid__product-title a, .wc-block-grid__products li.product h2 a, .wc-block-grid__products li.product h3 a, .wc-block-grid__products li.product .woocommerce-loop-product__title a, .wc-block-grid__products li.product .wc-block-grid__product-title a, .wc-block-grid__products .wc-block-grid__product h2 a, .wc-block-grid__products .wc-block-grid__product h3 a, .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-product__title a, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title a{
    color: #your-color !important;
    }
    #17532
    Lucas
    Supported
    This reply has been marked as private.
    #17575

    Hi,

    #1. Please copy this css code to file style.css ( child-theme):

    li.product .product-block:hover .content-product-imagin{
    background-color: #your-color;
    }

    #2. Change color:

    – Category:

    ul.products li.product .posted-in a, ul.products .wc-block-grid__product .posted-in a, .wc-block-grid__products li.product .posted-in a, .wc-block-grid__products .wc-block-grid__product .posted-in a{
    color: #your-color !important;
    }

    – the number of comments:

    ul.products li.product .technocy-count-review, ul.products .wc-block-grid__product .technocy-count-review, .wc-block-grid__products li.product .technocy-count-review, .wc-block-grid__products .wc-block-grid__product .technocy-count-review{
    color: #your-color !important;
    }

    – Price:

    ul.products li.product .price, ul.products .wc-block-grid__product .price, .wc-block-grid__products li.product .price, .wc-block-grid__products .wc-block-grid__product .price{color: #your-color !important;}

    #17600
    Lucas
    Supported

    Perfect! There is just one small thing left to fix:
    The change of color of the price in promotion as on the following screenshot:
    https://ibb.co/MMWBS9d

    And the “…” that also appear in the base color of the theme when the title is too big. (https://ibb.co/frgD8Rm)

    #17625

    Hi,

    #1. Price sale:

    ul.products li.product .price del, ul.products .wc-block-grid__product .price del, .wc-block-grid__products li.product .price del, .wc-block-grid__products .wc-block-grid__product .price del{
    color: #your-color !important;
    }

    #2. title:

    ul.products li.product h3.woocommerce-loop-product__title{
    color: #your-color !important;
    }
    #17647
    Lucas
    Supported
    This reply has been marked as private.
    #17675

    Ok,

    ul.products li.product .price ins, ul.products .wc-block-grid__product .price ins, .wc-block-grid__products li.product .price ins, .wc-block-grid__products .wc-block-grid__product .price ins{
    color: #your-color !important;
    }
    #17686
    Lucas
    Supported
    This reply has been marked as private.
    #17688
    Lucas
    Supported
    This reply has been marked as private.
    #17692

    Try to use css code:

    ul.products li.product .product-caption-bottom, ul.products .wc-block-grid__product .product-caption-bottom, .wc-block-grid__products li.product .product-caption-bottom, .wc-block-grid__products .wc-block-grid__product .product-caption-bottom{
        background-color: #your-color !important;
    }
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.