Home › Forums › WoodMart support forum › How to Customize Homepage Product Widget Layout in Mega Electronics Theme

How to Customize Homepage Product Widget Layout in Mega Electronics Theme

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 13, 2026 at 1:14 am #704123

    Jam
    Participant

    Hello,

    I am using the Mega Electronics theme on my website, and I would like to customize the product widget on the homepage.

    The current product card layout looks like this:

    I would like to change it so that it looks like this:

    Specifically, I would like the product card to be structured as follows:

    * Product image (same as now)
    * Product title
    * Product category (keep it as it is)
    * Below the category, add a small specifications area (custom short description)
    * Show the regular price crossed out, and display the discounted price highlighted below
    * Add an additional small text below the price
    * Keep the “Add to Cart” button at the bottom

    I have seen similar product layouts available in some themes, but I am a new user and I am not sure how to achieve this setup with Woodmart and Elementor.

    Could you please advise the best way to achieve this using Woodmart / Elementor / WooCommerce?

    Thank you.

    January 13, 2026 at 12:53 pm #704193

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    You need to choose the “show summary on hover” style. Navigate to Theme Settings > Product Archive > Product Styles > Choose the “show summary on hover” product style. Then, show “excerpt” in the Hover content in the Theme Settings > Product Archives > Product Styles.

    This product style will show your short description on grid products: https://ibb.co/hFb3kmhn

    Best Regards,

    January 13, 2026 at 5:46 pm #704260

    Jam
    Participant

    Alright, I did that, but I want the excerpt to be visible all the time, and that the product looks like this:

    https://ibb.co/bjWbcdyS

    https://ibb.co/bjWbcdyS

    January 14, 2026 at 10:39 am #704319

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Can you share the page URL so I can further check on your site and give you a possible solution?

    Best Regards,

    January 15, 2026 at 3:13 am #704461

    Jam
    Participant
    January 15, 2026 at 1:29 pm #704536

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Please try to add the following CSS in Theme Settings > Custom CSS:

    body .wd-hover-with-fade .fade-in-block {
    opacity: 1 !important;
    position: static !important;
    visibility: visible !important;
}
    body .wd-hover-with-fade .content-product-imagin {
    display: none !important; /* Hides the main image on hover */
}

    Best Regards,

    January 19, 2026 at 7:03 pm #705134

    Jam
    Participant

    This helped just for the short description visibility, and this doesn’t work quite well, is it possible to customize it just like the photo I have sent you?

    * Product image (same as now)
    * Product title
    * Product category (keep it as it is)
    * Below the category, add a small specifications area (custom short description)
    * Show the regular price crossed out, and display the discounted price highlighted below
    * Add an additional small text below the price
    * Keep the “Add to Cart” button at the bottom

    https://ibb.co/rR5jJHLG

    I assume that this needs to be changed in custom code, can you please explain how to do that on the child theme?

    January 20, 2026 at 11:17 am #705215

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Sorry, but at the moment, there is no option in Theme Settings to achieve this. However, you can choose a related product style and use the available settings to enable or disable the elements you want to show or hide.

    If you want to be more specific, The woocommerce/content-product-fw-button.php file is responsible for the hover effect on the product grid. You can edit the theme file at your own risk.

    Best Regards,

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