如何为WooCommerce产品卡片添加背景色、border-radius及阴影？

问题说明 #

需要为WooCommerce商品目录的产品卡片添加以下样式：

• 白色背景色
• 自定义圆角（border-radius: 40px 20px 40px 20px）
• 柔和阴影效果

此前尝试的CSS代码存在范围错误：

• 设置背景色时影响了整个页面
• 阴影被添加到产品卡片的外层容器而非卡片本身

测试的错误代码：

.product-small div{  
border-radius: 40px 20px 40px 20px;
}

.col-inner {
-webkit-box-shadow: 3px 4px 5px lightgrey;
}

产品卡片的HTML结构：

<div class="product-small col has-hover product type-product post-967 status-publish instock product_cat-galleteria-ecologica shipping-taxable purchasable product-type-simple">
<div class="col-inner">
  <div class="badge-container absolute left top z-1">
    <div class="product-small box">
      <div class="box-image">
        <div class="image-none">
          <a href="http://" target="_blank" rel="noopener noreferrer"></a>
        </div>
        <div class="image-tools is-small top right show-on-hover"></div>
        <div></div>
        <div></div>
      </div>
      <div class="box-text box-text-products text-center grid-style-2">
        <div class="title-wrapper"></div>
        <div class="price-wrapper"></div>
        <div class="add-to-cart-button"></div>
      </div>
    </div>
  </div>
</div>

解决方案 #

正确的目标类 #

从HTML结构可以看出，.product-small.box 是单个产品卡片的核心容器，所有样式应该直接应用到这个类上，避免影响其他元素。

最终CSS代码 #

/* 单个产品卡片核心样式 */
.product-small.box {
  background-color: #ffffff; /* 设置白色背景 */
  border-radius: 40px 20px 40px 20px; /* 自定义圆角 */
  box-shadow: 3px 4px 12px rgba(211, 211, 211, 0.6); /* 柔和阴影，参数可按需调整 */
  overflow: hidden; /* 确保卡片内的图片、内容不会超出圆角范围 */
}

/* 可选：调整卡片内边距，优化内容排版 */
.product-small.box .box-image,
.product-small.box .box-text {
  padding: 15px;
}

代码说明 #

• .product-small.box 精准定位每个产品卡片，避免样式扩散到页面其他区域
• overflow:hidden 解决图片或内容溢出圆角的问题
• 阴影使用rgba设置半透明效果，匹配目标网站的柔和风格
• 可选的内边距调整让卡片内容不会紧贴边框，提升视觉体验

内容的提问来源于stack exchange，提问作者Estudiante