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
10 years ago · Last reply by Support Assistants 10 years ago

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 10 years, 2 months ago

    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 10 years, 2 months ago

    thank you worked well

  3. Support Assistants 10 years, 2 months ago

    Glad we could help :)

  4. Frank 10 years, 2 months ago

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

  5. Support Assistants 10 years, 2 months ago

    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 10 years, 2 months ago

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

  7. Support Assistants 10 years, 2 months ago

    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 10 years, 2 months ago

    That fixed it Thanks for all your help :)

  9. Frank 10 years, 2 months ago

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

  10. Frank 10 years, 2 months ago

    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 10 years, 2 months ago

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

  12. Frank 10 years, 2 months ago

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

  13. Frank 10 years, 2 months ago

    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 10 years, 2 months ago

    Can I add a hover to this?

  15. Frank 10 years, 2 months ago

    By hover I mean have the shadows disappear on mouse over

  16. Support Assistants 10 years, 2 months ago

    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 10 years, 2 months ago

    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 10 years, 2 months ago

    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 10 years, 2 months ago

    oooh works!! tyvm :)

  20. Support Assistants 10 years, 2 months ago

    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