Home › Forums › WoodMart support forum › Change Product Category Hover Effect

Change Product Category Hover Effect

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 9, 2025 at 2:15 am #644172

    emancilla0410
    Participant

    Hi, I was wondering if there is an option in the category style that displays the category title on hover. I searched in
    Theme Settings → Product Archive → Categories Style but couldn’t find anything.

    I want something similar to image7. I have three categories, but only the title “Ferretería” is visible due to the hover activation.

    Attachments:
    You must be logged in to view attached files.
    March 10, 2025 at 2:17 pm #644476

    Hung Pham
    Keymaster

    Hi emancilla0410,

    Thanks for reaching to us and appreciate your patience.

    Please provide URL of the mentioned page, so I can take a closer look.

    Regards,

    March 11, 2025 at 7:31 pm #644905

    emancilla0410
    Participant

    I want to show the title on hover for the product category section.

    March 12, 2025 at 12:26 pm #645160

    Hung Pham
    Keymaster

    Hi emancilla0410,

    Thanks for the link.

    I can see the title are now showing. Did you resolved the issue yourself?

    Regards,

    March 12, 2025 at 10:06 pm #645348

    emancilla0410
    Participant

    No. What I want is to set the default state as hidden, and when you hover then show the title. Can you please help me?

    March 13, 2025 at 2:26 pm #645598

    Hung Pham
    Keymaster

    Hi emancilla0410,

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

    /* Hide h3 by default with opacity */
.category-grid-item .wd-entities-title {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show h3 when category-grid-item is hovered */
.category-grid-item:hover .wd-entities-title {
    opacity: 1;
}

    Regards,

    March 25, 2025 at 1:52 am #648608

    emancilla0410
    Participant

    thanks, it is working almost perfect. I need now to the background opacity to be darker. I tried but only could get what you see in the image below. I need the full box to be darker, not just the title box

    Attachments:
    You must be logged in to view attached files.
    March 25, 2025 at 2:18 am #648612

    emancilla0410
    Participant

    I could fix it, instead of using the .wd-entities-title class I used .wd-cat-content class, but a new issue arises. When changing the browser zoom the hover effect it does not work properly, watch the video for further references.

    Attachments:
    You must be logged in to view attached files.
    March 25, 2025 at 9:11 am #648674

    Hung Pham
    Keymaster

    Hi emancilla0410,

    It caused by the woman image https://ibb.co/jP3pv3q3

    You can edit page > select Block and add bigger z-index value https://ibb.co/v6rYpd8v > Clear browser cache and double check.

    Regards,

    March 25, 2025 at 8:08 pm #648968

    emancilla0410
    Participant

    Hi, thanks. I saw that you help me by removing the image but now the custom css is not working for the whatsapp joinchat button and I tried to add the woman image back without success, can you please help me

    March 26, 2025 at 3:45 am #648998

    emancilla0410
    Participant

    I was able to solve the issue. But something weird is happening with the custom JS, sometimes do not save the changes and the code is not updated

    March 26, 2025 at 7:54 am #649010

    Hung Pham
    Keymaster

    Hi emancilla0410,

    You should deactivate all plugins (except Required Plugins) and then reactivate them one by one. This makes it very easy to isolate the plugin causing problems.

    Regards,

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