This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

shadow box on product categories and maybe even the products themselves

Resolved 20 replies customizationthemetheme-vantage
Frank
Started · Latest reply by Support Assistants

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.

Need fast email support? Get SiteOrigin Premium

Replies

20
  1. 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. Frank

    thank you worked well

  3. Support Assistants

    Glad we could help :)

  4. Frank

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

  5. 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. Frank

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

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

    That fixed it Thanks for all your help :)

  9. Frank

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

  10. 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. Frank

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

  12. Frank

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

  13. 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. Frank

    Can I add a hover to this?

  15. Frank

    By hover I mean have the shadows disappear on mouse over

  16. 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. 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. 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. Frank

    oooh works!! tyvm :)

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

Have a different question or issue?

Start New Thread