Home>Support>shadow box on product categories and maybe even the products themselves

shadow box on product categories and maybe even the products themselves

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi I am using the boxed layout, with my category page as my home page https://critterscorners.com. Would there be anyway to lift them with shadow boxes?

Thanks in Advanced
Frank

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago Support Assistants

    Hi Hellzbellz

    You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    /* WooCommerce */
    
    .woocommerce ul.products li.product a img {
    	box-shadow: 0 0 20px #000 !important;
    }
    

    You might also need to install the SiteOrigin CSS Editor.

    I’m not sure this would work for single product images as you already have a box around those images:

    https://critterscorners.com/product/3-volt-lithium-battery-2-pack/

  2. 9 years, 6 months ago Frank

    thank you worked well

  3. 9 years, 6 months ago Support Assistants

    Glad we could help :)

  4. 9 years, 6 months ago Frank

    actually another question, can the category title be included on the shadow box and rounded corners?

  5. 9 years, 6 months ago Support Assistants

    You can try replacing our previous CSS rule with the following:

    .woocommerce #page-wrapper ul.products li.product, .woocommerce-page ul.products li.product {
        margin: 0 13px 2.992em 0;
        box-shadow: 0 0 15px #000 !important;
        padding: 10px;
    }

    We have to adjust the padding and margin to make it work so it’s a bit more complicated than the previous option.

  6. 9 years, 6 months ago Frank

    ok did that and now it’s back to just a flat page

  7. 9 years, 6 months ago Support Assistants

    Try changing that rule to:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        margin: 0 9px 2.992em 0;
        box-shadow: 0 0 15px #000 !important;
        padding: 10px;
    }
    
  8. 9 years, 6 months ago Frank

    That fixed it Thanks for all your help :)

  9. 9 years, 6 months ago Frank

    Is there a way to just do this to the parent category page (home page)?

  10. 9 years, 6 months ago Frank

    don’t know what caused this but since I added th shadow code m individual product page dosen’t work now :(
    I removed the code and it still doesn’t work. I will try to disable the plugins and any else i can think of.

    example page
    https://critterscorners.com/product/sand-thermo-bird-perch-large/

  11. 9 years, 6 months ago Frank

    Nevermind I disabled all my plugins I found the culprit. I was also able to re inable it all is well

  12. 9 years, 6 months ago Frank

    also figured out how to do on home page is good. can just close topic

  13. 9 years, 6 months ago Frank

    found out that the plugin WooCommerce Dynamic Gallery LITE & the custom css plugin I installed to just have the boxes on the home page don’t work together. so for now i just disabled the WooCommerce Dynamic Gallery LITE plugin (didn’t really need it)

  14. 9 years, 6 months ago Frank

    Can I add a hover to this?

  15. 9 years, 6 months ago Frank

    By hover I mean have the shadows disappear on mouse over

  16. 9 years, 6 months ago Support Assistants

    Hi Frank

    You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover {
        box-shadow: none !important;
    }
    

    You might also need to install the SiteOrigin CSS Editor.

  17. 9 years, 6 months ago Frank

    hi,

    Thanks for the quick reply

    The code works but it removes the whole box is there a way to just have it remove the shadow and leave the box? Sort of making it look like the box is being pressed

  18. 9 years, 6 months ago Support Assistants

    Try changing both the rules to:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        margin: 0 9px 2.992em 0;
        box-shadow: 0 0 15px #000 !important;
        padding: 10px;
        border: 1px solid #ccc;
    }
    
    .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover {
    	box-shadow: none !important;
    }
  19. 9 years, 6 months ago Frank

    oooh works!! tyvm :)

  20. 9 years, 6 months ago Support Assistants

    Great news :) Thanks for the update.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More