Hide Information (Text, Price, On Hover) of Related Products in Single Product

Hi,

I am using custom hooks to Change the Position of Related Products to show it under Main Images.
I want to hide the text , on hover etc for it. Only the Image and with link will show. I believe it can be done with Specific Page Css. need some guidance here.

So it will look like

Hello,

I am checking the product page and do not see the text to hide. Please provide the product page URL.

Best Regards

I was trying some CSS and those worked. I was able to hide necessary things that i wanted.

Only works remain is the resizing of the Each Related Products.

Any suggestions ?

After playing with the CSS a little I was able to Resize them, But cant reduce the gap/margin in between

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body.single .woodmart-hover-base.hover-ready:hover .content-product-imagin  {
    visibility: hidden; 
    opacity: 0;
}
@media (min-width: 769px){
body.single .product-grid-item.col-md-3 {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%;
	  min-width:50px;
}
}
@media (min-width: 576px){
body.single .product-grid-item.col-sm-4 {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%;
}
}
body.single .product-grid-item.col-6 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

Best Regards

The Spacing is ok. But hover is still working. Kindly check

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body.single .product-grid-item:hover .woodmart-buttons{
    opacity: 0;
    -webkit-transform: none;
    transform: none;
}

Best Regards

Hi, its working , But the Add to Cart Hover is still showing.
The CSS hides Compare, Wish-list and Quick View button

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body.single .woodmart-hover-quick .woodmart-add-btn {
display:none;
}

Best Regards

Thank you , the hover is hidden.

But one more small issue, on mouse hover still different links/functions are there e.g Links to Compare, Links to Quick View. Only by clicking Upper left portion it takes to the Product.

I want only the link to Product. Can it be done with CSS ?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body.single .woodmart-buttons {
display:none;
}

Best Regards

Thank you ! Working Perfectly !

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts