This topic has 5 replies, 2 voices, and was last updated 6 months, 3 weeks ago ago by Jack Richardson
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
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
OK thanks! How can I implement the CSS to have also line between attribute?
Thanks
… also the tab effect width shadows…
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
You must be logged in to reply to this topic.Log in/Sign up