Return to previous page

Category product with attribute data in the preview are lost

This topic has 5 replies, 2 voices, and was last updated 1 weeks, 2 days ago ago by Jack Richardson

Graziano

Participant

April 23, 2024 at 13:54

I’m sorry, related to this ticket that I mark as solved I found that with the new layout you create data are lost as the attached image.
https://www.8theme.com/topic/how-to-add-top-bar-search-and-filter-like-demo-in-category-product-view/#post-392659
I would like to have the product detail same as the demo.

Thanks
Graziano

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#392661 Copied Theme version: 9.3.7

4 Answers
Jack Richardson

Support staff

April 23, 2024 at 15:02
Hello, @Graziano

To display product attributes, you need to have the “Show attributes” option activated, which appears to be already active in your case (screenshot: https://prnt.sc/qBOlMNqX0mXD). By default, we display such attributes on hover to minimize the space taken up by each product. However, if you prefer to have them displayed at first glance, we’ve added the following custom CSS for your Archive Products widget (screenshot: https://prnt.sc/ac3scDH17KUR):
```
selector .etheme-product-grid-spacer,
selector .etheme-product-grid-more-info-btn {
    display: none;
}

selector .etheme-product-grid-fadeIn-area {
    position: static;
    visibility: visible;
    opacity: 1;
}

selector .etheme-product-grid-more-info-inner.limited-height {
    overflow: visible;
    max-height: unset;
}
```
You can see the result here: (https://prnt.sc/e11OSHHO7yUT), or visit your website to confirm.

Looking forward to your response!

Kind regards,

Jack Richardson
#392670 Copied
Graziano

Participant

April 23, 2024 at 15:13

OK thanks! How can I implement the CSS to have also line between attribute?

Thanks

#392672 Copied

Graziano

Participant

April 23, 2024 at 15:20

… also the tab effect width shadows…

#392674 Copied
Jack Richardson

Support staff

April 24, 2024 at 12:40
Dear @Graziano,

I hope this message finds you well. I am writing to inform you about the recent updates we have implemented on your website concerning custom CSS for attribute styling and tab effects.

1. To create border-separated items in attributes, we have successfully added the following custom CSS code. You can view the implementation here: [Screenshot](https://prnt.sc/9wh9nkacALk0):
```
selector .etheme-product-has-fadeIn-content .shop_attributes tr:not(:last-child) {
border-bottom: 1px solid var(--et_border-color);
}
```
2. Regarding your inquiry about the tab effect with shadows, we have also incorporated the following custom CSS code. Please review the changes here: [Screenshot](https://prnt.sc/YCTxWhWSzbJ8):
```
selector .etheme-product-has-fadeIn-content {
box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.15) !important;
}
```
Should you require any additional customizations for your website, please feel free to submit a request through our customization panel at [8Theme Customization Panel](https://www.8theme.com/account/#etheme_customization_panel).

Thank you for choosing us for your website needs. Should you have any further questions or require assistance, please do not hesitate to contact us.

Kind regards,

Jack Richardson
8Theme’s Team
#392805 Copied
Tagged: attribute data loss, product preview issues, woocommerce category product, woocommerce data recovery, woocommerce themes, wordpress e-commerce solutions, wordpress themes
Viewing 5 results - 1 through 5 (of 5 total)