htmlcsswordpresswoocommerce

How to give a background color and border-radius to WooCommerce products?


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?


Solution

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