Archived topic
Make a Border to Woocommerce products
5 replies · Started by Ritesh on May 21, 2021
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 :)
Please refer this link
https://the-mencare-co-6aed26.ingress-earth.easywp.com/shop/
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