Site logo

Archived topic

Make a Border to Woocommerce products

5 replies · Started by Ritesh on May 21, 2021

Viewing posts 1–6 of 6

Hi Can we achieve the below things

1] Give a Solid/Dot Border to Woocommerce Product Catalog. And Add shadow on Mouse hover
https://prnt.sc/1389hys

2] Give only one Solid/Dot line under between two product in Catalog
https://prnt.sc/1389jrw

Looking forward for your valuable response

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Hi there,

i assume these are two separate options as adding a border around products and a border between products is not simple so:

Option 1;

#wc-column-container .product {
    padding: 5px 10px;
    border: 1px solid #ccc;
    box-shadow: 0 5px 8px 3px rgba(0,0,0,0);
    transition: box-shadow 0.2s ease;
}
#wc-column-container .product:hover {
    box-shadow: 0 5px 8px 3px rgba(0,0,0,0.2);
}

Option 2:

#wc-column-container .product:not(:last-child) {
    padding-bottom:30px;
    border-bottom: 1px solid #ccc;
}

Awesome !

Glad to be of help

This archived topic is closed to new replies.