Product Card Border

  • zwidem07

    (@zwidem07)


    2 years ago

    Hi

    I am showing category products in my home page as a block – Products by Category.

    I want to put a border around the product card. I used the below code;

    .woocommerce ul.products li.product {
border: 2px solid #ccc;
box-sizing: border-box;
padding: 10px;

}

    However this only puts a border on products appearing on the Shop Page but not on the products on home page.

    Please assist.

    Customising Product Catalog >> Product Card >> Styles doesnt work as well

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @zwidem07,

    Products shown on “Featured Collection” section in homepage is a separate element, so it needs special CSS selector. You can find it with the web browser’s inspector tool.

    Try adding this CSS code:

    .wc-block-product-new .wc-block-grid__products .product-grid {
  border: 2px solid #ccc;
  box-sizing: border-box;
  padding: 10px;  
}
    Thread Starter zwidem07

    (@zwidem07)

    Thanks this worked.

    Hi @zwidem07,

    You’re welcome!

    Can you mark this topic as resolved to indicate you got the solution from my previous thread? You may raise a new topic for your other question.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Product Card Border’ is closed to new replies.