如何给WooCommerce产品一个背景颜色和边框半径?

Question

我想更改Woocommerce目录中所有产品的标签的背景颜色。在我做的一个商店里，我没有做任何事情，背景变成了白色，我很喜欢，但我没有添加任何样式来实现这一点。

我想改变背景颜色，并添加一个border-radius，甚至一个阴影，正如你在这个例子中看到的。

我使用了所有的类，并一个接一个地添加css来获得border-radius和box-shadow，但是我没有得到它。

背景，改变了整个页面的background和box-shadow，也被添加到所有产品标签的容器中，如图所示。

我应该怎么做才能改变产品的背景色，并给他们border-radius和box-shadow只到产品选项卡。

.product-small div{  
border-radius: 40px 20px 40px 20px;
}
.col-inner {
-webkit-box-shadow: 3px 4px 5px lightgrey;
}

正如我所说，我在整个产品的类别中进行了测试，但没有成功。首先，我取了一个产品的原理图，如下图所示，然后我给每个产品添加了css，但我得到的唯一的东西是我们在图像中看到的，阴影遍布了整个块

这是每个产品表的结构:

<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>

我怎样才能只给每个产品标签一个背景色和框影?

我应该对哪个类应用样式?

Answer 1

查看HTML结构，似乎您应该尝试像这样为.product-small类添加样式。

.product-small {
background-color: #ff0000;
border-radius: 40px 20px 40px 20px;
box-shadow: 3px 4px 5px lightgrey;
}

我还没有在IDE中测试它，但可能它应该工作。