I want to change the background color of the tabs of all the products in the Woocommerce catalog. In a store that I did, without me doing anything the background changed to white and I liked that, but I did not add any styles to make this happen.
I want to change the background color and add a border-radius
, even a shadow as you can see in this example.
I have used all the classes and added one by one the CSS to get the border-radius
and box-shadow
, however I don't get it.
The background, changes the background
of the entire page and the box-shadow
, is also added to the container of all product tabs as shown in the image.
What should I do to change the background color of the products and give them border-radius
and box-shadow
only to the product tab.
.product-small div{
border-radius: 40px 20px 40px 20px;
}
.col-inner {
-webkit-box-shadow: 3px 4px 5px lightgrey;
}
As I say, I did tests in the classes of the entire product without success. First I took the schematic of a product that I show below, and then I was adding the CSS to each one of them, but the only thing I got was what we see in the images, the shadows are all over the block
This is the structure of each product sheet:
<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>
How can I give a background color and box-shadow only to each product tab?
What is the class to which I should apply the styles?
Looking at the HTML structure it seems you should try adding style to .product-small
class like this.
.product-small {
background-color: #ff0000;
border-radius: 40px 20px 40px 20px;
box-shadow: 3px 4px 5px lightgrey;
}
again I haven't tested it in IDE, but possibly it should work.