Layout presentation of product as a list

  • Resolved tradesouthwest

    (@tradesouthwestgmailcom)


    6 months, 2 weeks ago

    After exploring the documentation and support I could not find a way to rework the “product-list” div so that the “list” of products displayed on the page will show as a table-like view… where all divs (

    .list .product-name,
    .list .product-short-descr, .list .classic-list-image-wrapper,
    .list.archive-listing div.product-attributes,
    .classic-list-image-wrapper,
    .classic-grid-image-wrapper .image,
    .classic-grid-image-wrapper .pseudo

    ) will show as one table row, not a grid or any other setting types, in product-settings.php&tab=design-settings&submenu=archive-design.

    I tried customizer to display grid and display table-cell and display flex to see if this could be done using a simple CSS property or two. Unfortunately I believe the layout can be only controlled via the template or the function that renders the lists.

    Can you guide me through how to do this. Ultimately I would love to have this layout https://www.hantronix.com/page/index/products/graphic without being a table element, of course.

    Please note that I am very happy with your product and will leave a great review soon. If you can help me with refactoring the layout please do. I am a senior WP dev so any action hooks or filters I am willing to try.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author ndre

    (@ndre)

    Hi @tradesouthwestgmailcom,

    You can create a custom template to modify the HTML output: https://implecode.com/docs/ecommerce-product-catalog/product-listing-page-template/

    However, the easiest way is to use the Table View extension. It allows you to display any data with a few clicks in the settings.

    Thread Starter tradesouthwest

    (@tradesouthwestgmailcom)

    Thanks. I was able to use the template method from your link above and it worked fine for me. I had to add a new class name to each div and then told the parent div to display flex which, seems to work well for wide screens…. not needed for mobile.

    .list.archive-listing div.product-attributes{
    display: flex;
    }.product-subcategories li {
    margin: 1em;
    font-weight: 700;
    font-size: larger;}
    .product-subcategories.list li {
    margin: 1em;}
    @media screen and (min-width:800px){
    .hantronix-products {
    line-height: .825;
    max-height:4em;}}

    We still may end up buying Pro version but for now you can close this.

    Plugin Author ndre

    (@ndre)

    Hi @tradesouthwestgmailcom,

    It looks great! Thank you for sharing!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Layout presentation of product as a list’ is closed to new replies.