- This topic has 3 replies, 2 voices, and was last updated 7 years, 3 months ago by
.
-
Posts
-
Hi,
I want to add a section in our website which displays product categories for which we used the woocommerce product category element. However the display is not showing up properly.
1. There is no space between the categories
2. We want to hide the count of products against each category.
3. Possible to add a button overlaying the image which will navigate to the products ?
Thanks,
Tia
Hi,
1.2.3, You can add these lines to Custom CSS or style.css of Child Theme:
.woocommerce .yolo-product-category.product-item-wrap{
padding: 0 10px;
}
.yolo-product-category .count{
display: none;
}
.yolo-product-category a:before {
content: "";
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
background-color: rgba(0,0,0,0.5);
z-index: 1;
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
}
.yolo-product-category a:after {
content: "\f002";
font-family: "fontawesome";
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
padding: 7px 14px;
background: #fff;
z-index: 2;
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
}
.yolo-product-category > a{
position: relative;
}
.yolo-product-category > a:hover :after,.yolo-product-category > a:hover:before{
opacity: 1;
}
Best regards,
tinhbeng
You must be logged in and have valid license to reply to this topic.
