How to Customize Homepage Product Widget Layout in Mega Electronics Theme

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.

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,

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

Hello,

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

Best Regards,

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,

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

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

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