add to cart on over animation and hover content deactivate

Hello,

Try to use this custom to disable the hover effect:

.xts-product .xts-product-thumb:hover .xts-product-hover-image {
    opacity: 0;
}

.xts-prod-design-summary-alt .xts-product:hover {
    transform: none;
}

Kind Regards

Hello,

This one should work:

.xts-product .xts-product-thumb:hover .xts-product-hover-image {
    opacity: 0;
}

.xts-prod-design-add-to-cart .xts-product:hover  {
    transform: none;
    box-shadow: none;
}

.xts-prod-design-add-to-cart .xts-product .xts-product-content-footer-inner {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.xts-prod-design-add-to-cart .xts-product .xts-product-content {
    transform: translateY(-25px);
}

https://gyazo.com/7da86d26f469e771acccebf927018e3b

Kind Regards

Hello,

The buttons are hidden so it’s impossible to show them and do not partially cut off the image. In this case, we can make the buttons to be displayed on hover otherwise I suggest you change the product design to another one.

Let me know if you have any questions.

Kind Regards

Hello,

If you want to hide it on a mobile, use a below custom CSS:

@media (max-width: 767px) {
  .xts-prod-design-add-to-cart .xts-product-add-btn {
  	display: none;    
  }
}

But a better solution is to use the Loco Translate plugin and make that title shorter.

Kind Regards

Hello,

Please clarify the h3, h4 tags for product titles? Or where exactly do you mean?

Kind Regards