Have been trying to change some colors but no luck

This topic has 7 replies, 2 voices, and was last updated 1 year, 9 months ago ago by Olga Barlow

  • Avatar: nixatsnow
    nixatsnow
    Participant
    May 5, 2022 at 08:20

    Hi, i’ve been trying to change some colors on the shop page. unlike creating the single product page from scratch in elementor which has quite a bit flexibility with selectors and every other settings within each container, could not get it to work applying these colors and paddings into the global css settings of the theme.
    below are the items i could not get it to work even with yellowpencil. something i’m doing is not working
    it’s working when i did inspect page source and edited ( https://prnt.sc/Z8IrihEgPsdl ) but not when applied to the theme css

    trying to:
    1- widgets on the shop side bar and products on the loop with white background and 10px padding all the way around
    2-products on the loop with 10px margins between each other

    Also, what is the selector name for the product title, brand, categories, reg. and sale price on the product loop?

    Please, contact administrator
    for this information.
    6 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 5, 2022 at 18:19

    Hello,

    1) Use the below code to apply border around widgets in the sidebar

    .sidebar .sidebar-widget {
        border: 1px solid #e1e1e1;
        padding: 10px;
        background-color: #fff;
        margin-bottom: 15px;
    }

    Use below code to add border around the products

    .content-product {
        border: 1px solid #e1e1e1;
        padding: 10px;
        background-color: #fff;
    margin-bottom: 0; 
        padding-bottom: 0;
    }

    Or a combination of them if you want to apply that for both:

    .sidebar .sidebar-widget, .content-product {
        border: 1px solid #e1e1e1;
        padding: 10px;
        background-color: #fff;
    }
    .sidebar .sidebar-widget {
        margin-bottom: 15px;
    }
    .content-product {
        margin-bottom: 0; 
        padding-bottom: 0;
    }
    

    Also, you can enable Theme Options > WooCommerce > Shop > Product styles > Products Bordered Layout option and you’ll get the following bordered layout https://prnt.sc/dDSTUKefptRG

    2) Use the below code
    .products .product {padding: 5px;}

    Regards

    Avatar: nixatsnow
    nixatsnow
    Participant
    May 5, 2022 at 20:28

    Thanks Olga! – i placed the combo CSS above but the sidebar widget boxes toggles have dissapeared https://prnt.sc/VzBvOLJk8PXk

    And also, i thought the padding all they way around would actually put the padding all the way around but it is not. https://prnt.sc/KnpYzWdLEQAR

    i also commented out the above combo CSS you provided and tried to do it your 3rd option with bordered product option turned on in the settings with the .products .product {padding: 5px;} CSS but that also didnt fix the spacing between the rows. weird thing is that the customizer shows the padding properly between products – https://screenrec.com/share/5vCO6gVG3K

    but when exited out and on to the actual shop page after publish, and clear cache even on a private browser mode, it doesnt – https://screenrec.com/share/ade0KQOGIi

    —–

    https://screenrec.com/share/vr7bUemInL

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 5, 2022 at 23:32

    Hello,

    Add the below code to fix the toggle

    .s_widgets-open-close .sidebar .sidebar-widget:not(.sidebar-slider)>.widget-title>span:after {
        z-index: 0;
    }

    Below code to fix the bottom space below the product

    .products .product {
        margin-bottom: 15px;
    }

    Regards

    Avatar: nixatsnow
    nixatsnow
    Participant
    May 5, 2022 at 23:33

    Thank you!

    Avatar: nixatsnow
    nixatsnow
    Participant
    May 5, 2022 at 23:33

    I will plug the above now and let you know if any further issues.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 5, 2022 at 23:40

    Hello,

    Yes, sure.

    Regards

  • Viewing 7 results - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.