Return to previous page

Custom listing for b2b Quick view and table view

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

Dominic Legare

Participant

January 9, 2026 at 03:10

Hello, I am looking to create a table view for a b2b shop.
Have you already integrate it with Woocommerce table product listing.

Is it possible to integrate quickview button in the shop store. Do you have a short code, button or class that we can integrate?
Thank you

#463915 Copied

5 Answers

Jack Richardson

Support staff

January 9, 2026 at 10:12

Hello @Dominic Legare,

Thank you for contacting us.
We appreciate your interest in creating a table view for your B2B shop. Our theme is fully compatible with WooCommerce, and you can use various plugins or custom solutions to display products in a table format.

Regarding the Quick View feature, our theme includes a built-in Quick View option that can be enabled in the Theme Options panel. If you would like to add a custom button or shortcode, you can use a shortcode similar to the following:
[quick_view id=797]Custom text[/quick_view]
Please note that the “id” parameter should be dynamically set based on the current product.

Best regards,
Jack Richardson
The 8Theme’s Team

#463955 Copied

Dominic Legare

Participant

January 9, 2026 at 14:25

thnaks for fast response and the shortcode possibilities

I have created a functions.php and css and i have created new view more table. here’s code that will maybe help other dev!
Maybe possibilities to reduce code with classes and other stuff.

/* --------------------------------------------------------------------------
 * INJECT custom list (VIA HOOKS XSTORE)
 * -------------------------------------------------------------------------- */

add_action( 'etheme_product_grid_list_after_product_item_content', 'ote_inject_custom_list_view', 10 );

function ote_inject_custom_list_view() {
    global $product;
    if ( ! $product ) return;
    ?>
    
    <div class="custom-list-view-wrapper">
        <div class="custom-list-card">
            
            <div class="list-cell-image">
                <a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>">
                    <?php 
                    $img_url = get_the_post_thumbnail_url($product->get_id(), 'thumbnail'); 
                    if($img_url) {
                        echo '<img src="' . esc_url($img_url) . '" alt="' . esc_attr($product->get_name()) . '" />';
                    } else {
                        echo wc_placeholder_img('thumbnail');
                    }
                    ?>
                </a>
            </div>

            <div class="list-cell-info">
                <h3 class="list-title">
                    <a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>">
                        <?php echo $product->get_name(); ?>
                    </a>
                </h3>
                <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
                    <span class="list-sku">SKU: <?php echo ( $sku = $product->get_sku() ) ? $sku : 'N/A'; ?></span>
                <?php endif; ?>
            </div>

            <div class="list-cell-price">
                <?php echo $product->get_price_html(); ?>
            </div>

            <div class="list-cell-stock">
                <?php 
                if ( $product->is_in_stock() ) {
                    $stock_qty = $product->get_stock_quantity();
                    if ( $product->is_on_backorder() ) {
                         echo '<span style="color:#e67e22;">Sur commande</span>';
                    } elseif($stock_qty) {
                        echo '<span style="color:#27ae60;">' . $stock_qty . ' en inventaire</span>';
                    } else {
                        echo '<span style="color:#27ae60;">En Stock</span>';
                    }
                } else {
                    echo '<span style="color:#c0392b;">Rupture</span>';
                }
                ?>
            </div>

       <div class="list-cell-actions">
    <?php
    // Get dynamic data
    $pid = $product->get_id();
    $sku = $product->get_sku();
    $name = $product->get_name();
    $url = $product->add_to_cart_url();
    // Classes CSS for button like theme standard 
    // Add 'ajax_add_to_cart' 
    $btn_classes = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ? 'ajax_add_to_cart' : '',
    ) ) );
    ?>
    
    <a href="<?php echo esc_url($url); ?>" 
       class="<?php echo esc_attr($btn_classes); ?> etheme-product-grid-button" 
       data-product_id="<?php echo esc_attr($pid); ?>" 
       data-product_sku="<?php echo esc_attr($sku); ?>" 
       aria-label="Add to cart: <?php echo esc_attr($name); ?>" 
       rel="nofollow">
       
       <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
            <path d="M23.76 4.248c-0.096-0.096-0.24-0.24-0.504-0.24h-18.48l-0.48-2.4c-0.024-0.288-0.384-0.528-0.624-0.528h-2.952c-0.384 0-0.624 0.264-0.624 0.624s0.264 0.648 0.624 0.648h2.424l2.328 11.832c0.312 1.608 1.848 2.856 3.48 2.856h11.28c0.384 0 0.624-0.264 0.624-0.624s-0.264-0.624-0.624-0.624h-11.16c-0.696 0-1.344-0.312-1.704-0.816l14.064-1.92c0.264 0 0.528-0.24 0.528-0.528l1.968-7.824v-0.024c-0.024-0.048-0.024-0.288-0.168-0.432zM22.392 5.184l-1.608 6.696-14.064 1.824-1.704-8.52h17.376zM8.568 17.736c-1.464 0-2.592 1.128-2.592 2.592s1.128 2.592 2.592 2.592c1.464 0 2.592-1.128 2.592-2.592s-1.128-2.592-2.592-2.592zM9.888 20.328c0 0.696-0.624 1.32-1.32 1.32s-1.32-0.624-1.32-1.32 0.624-1.32 1.32-1.32 1.32 0.624 1.32 1.32zM18.36 17.736c-1.464 0-2.592 1.128-2.592 2.592s1.128 2.592 2.592 2.592c1.464 0 2.592-1.128 2.592-2.592s-1.128-2.592-2.592-2.592zM19.704 20.328c0 0.696-0.624 1.32-1.32 1.32s-1.344-0.6-1.344-1.32 0.624-1.32 1.32-1.32 1.344 0.624 1.344 1.32z"></path>
       </svg>
       <span class="button-text">Add to cart</span>
    </a>

    <span class="show-quickly search-icon-loupe" data-prodid="<?php echo esc_attr($pid); ?>">
       <i class="et-icon et-zoom"></i> </span>
</div>
            
        </div>
    </div>
    <?php
}

Css:
/* ============================================================
   1. FORCE FULL WIDTH (Theme Override)
   ============================================================ */
/* Cancel theme width restriction so it takes the full line */
.type-list .etheme-product-list-content,
.type-list .etheme-product-grid-content,
.type-list .product-details {
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Hide default theme elements we don't want to see */
.type-list .etheme-product-grid-image,
.type-list .product-image-wrapper { display: none !important; }

/* Hide all content except our custom wrapper */
.type-list .etheme-product-grid-content > *:not(.custom-list-view-wrapper) {
    display: none !important;
}

/* ============================================================
   2. TABLE STRUCTURE (GRID - DESKTOP)
   ============================================================ */
.type-list .custom-list-view-wrapper {
    display: block !important;
    width: 100%;
}

.custom-list-card {
    display: grid;
    /* Columns: Image | Info | Stock | Price | Actions */
    grid-template-columns: 80px 1fr 15% 15% 180px; 
    gap: 20px;
    align-items: center; /* Center everything vertically */
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    background: transparent;
}

/* IMAGE (Your settings: 60px, no radius) */
.list-cell-image img { 
    width: 60px; 
    height: 60px; 
    object-fit: contain; 
    border-radius: 0px; 
    background: #fff;
    display: block;
}

/* ============================================================
   3. TITLE AND SKU (Verticality & Lato)
   ============================================================ */
.list-cell-info { 
    display: flex; 
    flex-direction: column; /* FORCE ONE UNDER THE OTHER */
    justify-content: center;
    align-items: flex-start;
    gap: 5px; /* Space between Title and SKU */
}

/* Title: Lato 16px */
.list-cell-info h3, 
.list-cell-info .product-title { 
    font-family: 'Lato', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 !important;
    color: #333;
    text-transform: none;
}

/* SKU, Stock and others: Lato 13px */
.list-cell-info .sku_wrapper, 
.product-sku,
.list-sku,
.list-cell-stock { 
    font-family: 'Lato', sans-serif !important;
    font-size: 13px !important;
    color: #000;
}

/* ============================================================
   4. PRICE (Your settings: 15px)
   ============================================================ */
.list-cell-price { 
    text-align: right; 
    font-weight: bold; 
    color: #000;
    font-size: 15px !important;
    font-family: 'Lato', sans-serif !important;
}

.list-cell-stock { 
    text-align: center; 
    white-space: nowrap;
}

/* ============================================================
   5. ACTIONS (ALL BUTTONS + MAGNIFIER)
   ============================================================ */
.list-cell-actions { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    gap: 15px; 
}

/* BUTTON FIX:
   Targets .button (for out of stock/read more) AND .add_to_cart_button (for add to cart)
   This ensures they all have the same size.
*/
.list-cell-actions .button,
.list-cell-actions .add_to_cart_button {
    margin: 0 !important;
    width: auto !important;
    display: inline-flex !important; 
    align-items: center;
    justify-content: center;
    gap: 8px; /* Icon/text space */
    
    /* Size standardization */
    font-size: 13px !important;
    padding: 8px 15px !important;
    line-height: 1.2 !important;
    min-height: 38px; /* Force identical height for all */
}

/* Specific style for SVG icon in the button */
.list-cell-actions .button svg,
.list-cell-actions .add_to_cart_button svg {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
    margin-top: -1px; 
}

/* THE MAGNIFIER: Clickable and transparent */
.show-quickly, .search-icon-loupe {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    font-size: 18px; 
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.show-quickly:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* ============================================================
   6. TABLET (768px to 1024px) - "OPTIMIZED ROW" MODE
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .custom-list-card {
        display: grid;
        /* Optimized structure: Stock/Price columns take just the necessary space (auto) */
        grid-template-columns: 60px 1fr auto auto 140px; 
        gap: 15px; 
        padding: 10px 0;
        align-items: center; 
    }
    
    .list-cell-image img { width: 60px; height: 60px; }

    /* Reduced fonts for tablet */
    .list-cell-info h3 { font-size: 14px !important; margin-bottom: 2px !important; }
    .list-cell-info .sku_wrapper { font-size: 11px !important; }

    /* Stock and Price in compact mode */
    .list-cell-stock, 
    .list-cell-price {
        display: block !important; /* Force display */
        white-space: nowrap; /* Prevent text wrapping */
        font-size: 13px !important;
        text-align: right; /* Aligned to the right for cleanliness */
    }

    .list-cell-actions {
        justify-content: flex-end;
        gap: 5px;
    }

    /* Buttons slightly smaller on tablet */
    .list-cell-actions .button,
    .list-cell-actions .add_to_cart_button {
        font-size: 11px !important;
        padding: 5px 10px !important;
        min-height: 30px;
    }
}

/* ============================================================
   7. MOBILE (Less than 768px) - "COMPRESSED" MODE
   ============================================================ */
@media (max-width: 767px) {
    .custom-list-card {
        /* Image left | Everything else right */
        grid-template-columns: 60px 1fr; 
        grid-template-rows: auto; 
        gap: 0px 12px; 
        padding: 10px 5px;
        align-items: start;
    }

    .list-cell-image {
        grid-row: 1 / span 5; 
        width: 100%;
        margin-top: 2px;
    }

    /* --- INFO --- */
    .list-cell-info { 
        grid-column: 2; 
        margin-bottom: 2px;
        min-width: 0; /* Avoids text crushing */
    }
    
    /* --- PRICE --- */
    .list-cell-price { 
        grid-column: 2; 
        text-align: left; 
        margin-bottom: 2px;
        font-size: 14px !important;
    }
    
    /* --- STOCK (Visible!) --- */
    .list-cell-stock { 
        display: block !important;
        grid-column: 2; 
        text-align: left; 
        margin-bottom: 6px; 
        font-size: 12px !important;
        color: #666;
    }

    /* --- ACTIONS --- */
    .list-cell-actions {
        grid-column: 2;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        height: 35px; /* Fixed height for alignment */
    }

    /* Reduced buttons for mobile (Add to cart & Out of stock) */
    .list-cell-actions .button,
    .list-cell-actions .add_to_cart_button {
        margin: 0 !important;
        transform: scale(0.95);
        transform-origin: left center;
        min-height: 35px;
    }

    .show-quickly, .search-icon-loupe {
        font-size: 20px;
        padding: 5px;
        display: flex;
        align-items: center;
    }
}

#463994 Copied

Jack Richardson

Support staff

January 9, 2026 at 14:35

Hello @Dominic Legare,

Thank you for your message and for sharing your custom code and CSS solution. We truly appreciate the time and effort you have taken to contribute your work, as it may indeed be helpful for other developers in the community.

Your implementation looks well structured and demonstrates a clear understanding of how to extend the theme’s functionality using hooks and custom styling.

Thank you again for your valuable input and for being an active part of our community.

Best Regards,
Jack Richardson
The 8Theme’s Team

#463995 Copied

Dominic Legare

Participant

January 9, 2026 at 15:54

My pleasure.
Thanks for your nice theme and happy to share ideas and code with you!!
Dom
https://dwebtech.ca

#464001 Copied

Jack Richardson

Support staff

January 9, 2026 at 16:24

Hello @Dominic Legare,

Thank you very much for your kind words and for sharing your ideas and code with us. We truly appreciate your support and are delighted to know that you are enjoying our theme.

Best Regards,
8Theme’s Team

#464004 Copied

Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Custom listing for b2b Quick view and table view’' has been successfully resolved, and the topic is now closed for further responses

Custom listing for b2b Quick view and table view

Explore our best WordPress WooCommerce Themes collection