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.
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;}
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.
That worked, thank you very much!
