Adding Custom Descriptions and Identifying PHP Files for Product Grid and Archiv

I want to show a short description under the product rating on my website’s product grid and archived product sections. I need to find out which PHP file controls the hover effect on the product grid and how products are displayed on the shop/categories page. I’ve attached screenshots to help you understand, and I’d like your help in adding my custom code.

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

Hello,

The woocommerce/content-product-fw-button.php file is responsible for the hover effect on the product grid from your screenshots.

Also, we do not recommend editing the parent theme, I suggest you use the child theme for it.

https://xtemos.com/docs-topic/setup-child-theme/

I’d be happy to assist if you have any other questions or concerns.

Kind Regards

• This reply was modified 1 year, 5 months ago by Luke Nielsen.

Ok perfect , can you please tell me for the shop page ” Product achieve ” file responsible for content. The above you provided is for product grid only

Hello,

Here is that file: woocommerce/archive-product.php.

If you’d like to contact us, we are here for whatever questions you may have.

Kind Regards

Hi Luke,

I made a special code to display a brief product description on the product grid. But I have a problem: I want this short description to appear only when you hover over the product, not when you just look at it without hovering.

Also, I need your help in adding the same short description feature to products in the shop/categories, I tried to add the code on archive-product.php but that does not work. However, for these products ( the shop page and categories page products ), I want the short description to be visible all the time, not just when hovering. I would really appreciate your help with this.

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say but right now there is no option in Theme Settings available for that. It requires Customization and this is beyond our limitations and support policy scope.

Hope you can understand our limitations.

Kind Regards

Hello, alright, could you please just help me with that product grid issue? When I hover over each product, the products underneath are dragged down. If you could just provide me with any code or any sort of advice, that would be great. Issue is shown in screenshot

Attachments:

You must be logged in to view attached files.

Hello Can someone please help me with it , I am waiting for almost 3 days now , when someone hover over product grid the grid expend and bottom products are dragged down making any empty space. The css code i used is

.wd-more-desc-inner {
    font-size: 12px;
    line-height: 1.2; 
    font-family: Helvetica, Arial, sans-serif;
}

.product-element-bottom .wd-more-desc-inner {
    display: none;
    position: relative;
    overflow: hidden;
}

.product-wrapper:hover .product-element-bottom .wd-more-desc-inner {
    display: block;
}

.product-grid-item {
    position: relative;
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
    width: 100%;
    z-index: 1;
}

.product-grid-item:hover {
    transform: scale(1.1);
    z-index: 1000;
    position: relative; /* Add this line to ensure proper stacking */
}

.wd-products-element {
    position: relative; /* Add this to establish a stacking context */
}

here is the screenshot

Attachments:

You must be logged in to view attached files.

Hello,

I apologize for the delay.

We have other product grid styles with different hover, so I suggest you navigate to Theme Settings -> Product archive -> Products styles -> and set another style in “Hover on product” area: https://take.ms/2pPjT

Kind Regards

Now that you have suggested me to change style , I have did. But it is complete opposite of what i want . The star rating, prices, add to basket button everything is gone . How do i can bring them back

screenshots

Attachments:

You must be logged in to view attached files.

Hello,

Just change to the style that was before in the same path in Theme Settings.

https://take.ms/vs3q5

Kind Regards

Hello , I did what you said . Can you please take my issue serious, I am having empty space issue when someone hover over my product . This is genuine issue and can be fix with css code , As a support please look into it , I am asking for this help for months now , I have provided you with css , Just a little change from your side can fix my issue , If you need website access , I can give you site access . But please take it serious this is my request , I dont want to change the complete theme just because of this issue .

Attachments:

You must be logged in to view attached files.

Hello,

At the moment we do not see any problems with your site as you shown in the screenshot: https://monosnap.com/file/qHlXZ763guKTpmhWmfQ7KzsPIB2UzE

Looking forward to hearing back from you!

Kind Regards

Hi, This is my site url and there is issue

https://houseofcom2dev.wpengine.com/

Hi,

Empty space issue between products is caused by your changes related to the “Full width button” product design structure and your custom CSS code. Adding custom text content to product hover (https://prnt.sc/cTg88lbVIocy) and showing it on hover is changing following product height, making it higher relative to other products’ height equal to showed custom text content (https://prnt.sc/_gfrvX7M5Un5).

In this case, removing the following “empty space” is impossible using only simple custom CSS code, since it requires changing product structure and using additional custom JS code to calculate dynamic custom text content height for each individual product alongside with more changes on mobile devices where there is no hover state. Making these changes is out of our theme support scope because it requires additional code customization and its work can’t be guaranteed for the next theme updates.

Unfortunately, as you can see from our demo site, there is no such predefined product design in the theme, but Woodmart has similar designs in which content is showing on hover:

– Show summary on hover (Video https://gyazo.com/08b8ac807c0e523d87d3995dfc5ffbc5), (Demo https://woodmart.xtemos.com/shop/)
– Full width button (Video https://gyazo.com/7aae5ca276297d298e9bf7e15993b444) (Demo https://woodmart.xtemos.com/shop/?opt=full_width_button)

Both of these product hover designs have their bottom “fade-in-block” (screenshot https://prnt.sc/-DD-rTZZU1do) and all content placed inside this block will be shown on hover alongside all additional background height JS calculations (https://prnt.sc/drYQJmz5rIH4) and proper work on mobile devices.

Kind Regards

[Author]

Posts