Product archive layout questions

[Johnn91]

Hello WD Staff,

Mouseover effect:
In the product archive layout, is it possible to add a mouse hover effect similar to the one in the Xtemos products gallery category component on the shop page? I mean, when the user hovers over the category component, there is a slight zoom-in effect that seems to be built into the component by default. Can I add a similar effect to the product thumbnails ? Additionally, is it possible to add that effect (zoom-in, zoom-out effect) to the image icons on the homepage ? Currently, in the Homepage category all images zoom out, but in the product category gallery, only the central part of the icon zooms in and out and the image is the same. Maybe Could I add some JS code or something similar to achieve the same effect if the effect I want already exists somewhere in your theme or component ?

Category name link (hover-mask (css class)):
In the product archive layout, when the Xtemos category component has a name that is relatively long (usually on mobile), can we decide where we can break the line? For example, if the word is “Dermocosmetics”, on some mobile devices the word becomes “Dermocosmeti” and “cs” breaks the line. Can we add some character or something through code to break the line where i want like “Dermo” and then “cosmetics” in a new line (like a br html) ? It would be more appealing for sure. Is this possible?

As a reference, the link to the product page is in the private section.

Thanks.

• This topic was modified 8 months, 1 week ago by Johnn91.
• This topic was modified 8 months, 1 week ago by Johnn91.

Hi Johnn91,

Thanks for reaching to us.

To assist you in the best possible manner, I kindly ask that you please provide me screenshots that illustrate the issues to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Regards,

Hi, of course.

1. The first video (in private content) is an explanation on how to get the mousehover effect on product thumbnails. How can I apply this effect there? Or maybe a similar effect.

2. The second video (in private content) is a demonstration of a word breaking and going to a new line in the mobile version. How can I choose the characters where the word breaks and goes to a new line so I can break it differently? That’s because if there is not enough space, instead of:

Dermocosmeti
ci

I would want to achieve:

Dermo
cosmetici

^this above would have more sense in our language.

Hope it helps! I think it might be something to set in the theme or through code.

Hi Johnn91,

Thanks for details.

1. Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.elementor-widget-wd_archive_products .product-image-link img{
    transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18);
}

.elementor-widget-wd_archive_products .product-image-link:hover img{
    transform: scale3d(1.1, 1.1, 1);
}

2. You can edit the layout > switch to Mobile editor and you can change font-size of title in the mobile devices https://ibb.co/LCd3P9g

Regards,

1. Thanks 🙂
2. Yes, i tried this previously, but reducing the font-size would make the font too small to read from mobile. Isn’t there another solution that could be implemented while leaving the font size as it is?

Hi Johnn91,

Thanks for details.

2. I kindly recommend you use Character spacing and Word spacing options https://ibb.co/xsSyTvH It can be useful for all categories instead of specific ones.

Regards,

2. Indeed.

Thank you.

Hi Johnn91,

Thanks for reaching to us.

First of all, I’m really sorry have taken long time to reply you due to the weekend.

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts