Category product with attribute data in the preview are lost

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

  • Avatar: Graziano
    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

    Please, contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    4 Answers
    Avatar: Jack Richardson
    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

    Avatar: Graziano
    Graziano
    Participant
    April 23, 2024 at 15:13

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

    Thanks

    Avatar: Graziano
    Graziano
    Participant
    April 23, 2024 at 15:20

    … also the tab effect width shadows…

    Avatar: Jack Richardson
    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

  • Viewing 5 results - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.