[Resolved] Coloring the Woocommerce Shop Container

[David]

Hello,

I am hoping you can assist please in relation to the webpage https://darkstories.com.au/shop/

The site has a transparent background with a background image that I am happy with. For the Woocommerce Shop, Cart and Product pages I wish to provide some definition either via a different background color(with partial transparency) or an overlay(with partial transparency).

I have tried several page specific css setups but have not made any progress. Would you be able to advise of any suggestions please? I have a attached a mocked up version of the page to explain the kind of effect I am aiming for (all done using Microsoft Paint)!

Best Regards
David

[David]

[David]

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

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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

[Elvin]

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

A wise man once said:
"Have you cleared your cache?"

[David]

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

[Elvin]

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. 😀

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts