[Resolved] Coloring the Woocommerce Shop Container

Home Forums Support [Resolved] Coloring the Woocommerce Shop Container

Home Forums Support Coloring the Woocommerce Shop Container

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1616646
    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

    Mocked Up Screenshot

    #1616647
    David

    #1616649
    David

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

    #1616722
    David
    Staff
    Customer Support

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

    #1617924
    Elvin
    Staff
    Customer Support

    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?"

    #1618054
    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

    #1618087
    Elvin
    Staff
    Customer Support

    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?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.