Home › Forums › WoodMart support forum › Disable Product Image Change on Hover in Products Archive Layout

Disable Product Image Change on Hover in Products Archive Layout

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 26, 2026 at 11:38 am #731292

    joanthan0077
    Participant

    Dear Support Team,

    Thank you for your previous assistance.

    I am currently adjusting a product category page template on .com using the following path:

    WordPress Dashboard → Layouts → Products archive layout → Edit with Elementor

    This template has not yet been activated on the live website, and the images were imported directly.

    I would like your help with the product image display:

    Image 1: This is the default appearance before hovering over the product. This is the image I want to keep.

    Image 2: When I move the mouse over the product, the displayed image changes to this one. I do not want this image to appear on hover.

    I would like the product to display Image 1 at all times, including when the mouse is hovering over it.

    Could you please explain how to disable this image-switching effect and indicate the exact setting and location? Ideally, I would like to make this adjustment within this template without affecting other pages.

    I have attached both screenshots for reference. Please keep the template inactive on the live website while reviewing this issue.

    Thank you for your help.

    Best regards,
    Jonathan

    Attachments:
    You must be logged in to view attached files.
    October 26, 2026 at 1:54 pm #731302

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Navigate to > Theme Settings > Product archive > Products loop, turn off Hover image and save. This affects every product grid on your site, not just this template.
    https://postimg.cc/phPksRMG

    The Archive products widget doesn’t have its own setting for the hover image. To limit the change to this template, you can use a custom CSS class:

    1. Navigate to Layouts > Products archive layout > Edit with Elementor and select the widget that shows your products.
    2. Open its Advanced tab and type hide-hover-img in the CSS Classes field. Click Update.
    3. Go to Theme Settings > Custom CSS, paste this code into the Global Custom CSS field and save:

    .hide-hover-img .hover-img { 
display: none !important; 
}

    The CSS only works where that class is added, so other pages and product grids won’t change. Product cards in this template will always show the main image, including on hover.

    Best Regards

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)