Coloring the Woocommerce Shop Container

Or if the mocked up screenshot is not displaying please click here instead:-
https://1drv.ms/u/s!AupwePVGAnIS7jDXEaslNdwSJ75P?e=4xAQ73

Hi there,

This method will add a background image to the #page, and add a transparent background to the content:

body.post-type-archive-product .site-main .inside-article {
  padding: 20px;
  backgoround-color: rgba(255,255,255,0.25);
}

.post-type-archive-product #page {
  background-image: url(full_url_to_background_image);
  background-size: cover;
}

Or how about this CSS method, it will add the background behind the content and allow you to change he background images opacity without affecting the content:

.post-type-archive-product .site-main {
  position: relative;
}

.post-type-archive-product .site-main:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(full_url_to_background_image);
  background-size: cover;
  opacity: 0.25; /* Adjust image opacity */
}
/* optional - add padding to contents */
body.post-type-archive-product .site-main .inside-article {
  padding: 20px;
}

Hi David,

Thanks for your reply. I am not really getting any positive results so far with the suggestions.

I have a site setting CSS as follows which I happy with:

/*Background Image */
.site {
background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("https://darkstories.com.au/wp-content/uploads/2020/08/silhouette_roughborder.jpg.webp");
background-repeat: no-repeat;
width: 100%;
}

For the main shop page (darkstories.com.au/shop/) only....with your suggestions, I was only able to change the opacity somewhat with a blurring effect on the background image. The remaining woocommerce pages (e.g.- cart, products, etc) there was no change.

I'm at a loss to comment intelligently on all the variations I have tried, so at present have reverted back to the original code.

In summary, I am happy with the site background settings, except for the Woocommerce Pages which I want to provide a transparent color that gives the shop some definition. At present the shop displays as random untidy fields. Sorry, I haven't been able to leverage your suggestions with any success so far.

Are there other alternatives you could recommend trying please?

Kind Regards
David

Hi,

If I may suggest:

You can try placing this CSS on a Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/

<style>
.inside-article {
    background-color: rgba(255,255,255,0.25);
    padding: 20px !important;
    box-shadow: 0px 0px 15px 10px rgba(255,255,255,0.25);
}
</style>

You then set the hook to wp_head and set the display rule location to the pages you want it applied. (shop, cart, checkout, products - all products, etc.)

This is how the CSS would look like on your site: https://share.getcloudapp.com/wbuK4xoG

Hi guys,

Thanks so much for that option; it's working very nicely indeed. And apologies for struggling to be clear with what I was trying to achieve. Your support is superb.

Best Regards
David

Thanks so much for that option; it’s working very nicely indeed. And apologies for struggling to be clear with what I was trying to achieve. Your support is superb.

No problem. Glad to be of any help. :D