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

This topic has 16 replies, 3 voices, and was last updated 1 year, 5 months ago by Bogdan Donovan.

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
September 6, 2023 at 1:20 pm #493688

bk5
Participant

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.

September 7, 2023 at 9:50 am #493939
Luke Nielsen
Keymaster
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.
September 7, 2023 at 11:06 am #493991

bk5
Participant

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

September 7, 2023 at 12:08 pm #494038

Luke Nielsen
Keymaster

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

September 7, 2023 at 5:49 pm #494190

bk5
Participant

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.

September 8, 2023 at 9:57 am #494343

Luke Nielsen
Keymaster

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

September 8, 2023 at 5:23 pm #494481

bk5
Participant

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.

September 11, 2023 at 12:18 pm #494895
bk5
Participant
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 */
}
```
September 11, 2023 at 12:19 pm #494896

bk5
Participant

here is the screenshot

Attachments:
You must be logged in to view attached files.

September 11, 2023 at 12:22 pm #494900

Luke Nielsen
Keymaster

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

September 11, 2023 at 12:36 pm #494907

bk5
Participant

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

September 11, 2023 at 12:37 pm #494911

bk5
Participant

screenshots

Attachments:
You must be logged in to view attached files.

September 11, 2023 at 12:45 pm #494917

Luke Nielsen
Keymaster

Hello,

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

https://take.ms/vs3q5

Kind Regards

September 11, 2023 at 1:00 pm #494933

bk5
Participant

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.

September 11, 2023 at 2:36 pm #494959

Luke Nielsen
Keymaster

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

September 11, 2023 at 2:39 pm #494960

bk5
Participant

Hi, This is my site url and there is issue

https://houseofcom2dev.wpengine.com/

September 11, 2023 at 5:02 pm #495039

Bogdan Donovan
Keymaster

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