Modern Product Grid Cards (SCSS)
Restyles the WooCommerce shop grid into clean cards with rounded images, consistent spacing, aligned buttons and a hover effect.
Opens WPIDE on
Code
$card-bg: #ffffff;
$card-radius: 10px;
$card-shadow: 0 1px 6px rgba(0, 0, 0, .08);
$accent: #2271b1;
.woocommerce ul.products li.product {
display: flex;
flex-direction: column;
padding: 12px 12px 16px;
border-radius: $card-radius;
background: $card-bg;
box-shadow: $card-shadow;
text-align: center;
transition: box-shadow .2s ease, transform .2s ease;
a img {
margin-bottom: 12px;
border-radius: $card-radius - 4px;
}
.woocommerce-loop-product__title {
font-size: 1rem;
line-height: 1.35;
}
.price {
color: $accent;
font-weight: 600;
}
.button {
margin-top: auto;
}
&:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
&:hover {
transform: none;
}
}
}Notes
Change the variables at the top to match your brand. Works with the classic shop loop markup.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.