WooCommerce background colour issue

  • Resolved merida90

    (@merida90)


    2 years, 8 months ago

    Hi there,

    I have a problem with the background colour of the WooCommerce shop.
    URL to the shop: https://www.zeroclamp.com/shop-2/

    The area of the products archive has no white background as the rest of the page, but is transparent.

    I cannot find a way how to change the background colour to white.
    When I change the background colour in Elementor nothing happens. The background remains transparent.

    Your help would be appreciated.

    Thank you
    Merida

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @merida90

    Thank you for reaching out!

    I have checked the shop page (https://www.zeroclamp.com/shop-2/) and it seems that the background color is coming from your current active theme. I would suggest reaching out to the theme author to know more details to change the background color.

    —

    I have also tried changing the background color using Custom CSS, and if you do not hear back from the theme author soon, you can try the below Custom CSS as well:

    /* change bg color | 5372997-zen | NS */

body.custom-background {
    background-color: #fff !important;
}

    To implement the above Custom CSS, kindly navigate to WP Admin > Appearance > Customize > Additional CSS > and add the Custom CSS there.

    Let us know if this works for you.

    Thread Starter merida90

    (@merida90)

    Hi Rafy,

    Thank you very much for your reply.

    Your code works perfectly well. The only thing is that the background of the actual website (which is a boxed layout) is also white now.
    https://snipboard.io/ANZbws.jpg

    This should remain light grey, otherwise the website looks a little bit “lost” .
    https://snipboard.io/ThOAbG.jpg

    Do you have an idea how I can restrict this to the body of the website?

    Kind regards
    Merida

    Hi @merida90

    If I understand correctly, you wanted to restrict the background change to the product’s archive section of your page.

    You can try replacing the previous code with the following custom CSS:

    .elementor-element-1fc5b2dc {background-color:white !important;}

    I hope that helps

    Try something like:

    .woocommerce .elementor-container {background-color:white !important;}

    Thread Starter merida90

    (@merida90)

    Thank you all for your replies.

    This makes the background of the WooCommerce container white, which is fine.

    .woocommerce .elementor-container {background-color:white !important;}

    But there is still a border on the right and left side of the container (marked red in the screenshot below) which is transparent. I have no idea how to address this area.
    .woocommerce .elementor-container {background-color:white !important;}

    You have:

    #page {max-wodth:1268px;}

    .elementor-section.elementor-section-boxed>.elementor-container {max-wodth:1140px;}

    Try setting the second one to 1268px too.

    Thread Starter merida90

    (@merida90)

    That worked, thank you very much!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘WooCommerce background colour issue’ is closed to new replies.