background fususu logo boat

Create woocommerce product table instantly without plugins...

small_logo 1751 views

You have lots of woocommerce products? You don’t sastify with the default product display system of woocommerce? You want to show your products in a pro way? Then a woocommerce product table is the best choice. In this Blog, you’ll get specific instructions to create woocommerce product table instanly without plugins.

how to create woocommerce product table pro

You can also see a my working example of woocommerce product table here

Warning This blog is full of useful codes, if you’re not a fan of coding, you just want to create woocommerce product table in a few clicks, and get technical support from experienced IT guys. Then I suggest the plugin below, I guarantee that it’s the best one you’ll find out there.

best woocommerce product table pluginbest woocommerce product table plugin

So… you want to code your own woocommerce product table? Let’s begin!

How to create woocommerce product table without plugins – Step 1 – Make a custom template with full-width support

Display product in this way will require lots of space, you should create a fullwidth custom page template. Just create a new php file in your theme folder, such as wooprotable.php with this code below.

<?php // Template Name: Woocommerce Product Table
    // Author: 
    // Version: v1.0 
get_header(); ?>
<!-- we will insert the main code content here later -->
<?php get_footer(); ?>

Now go to your dashboard and create a new page, notice the page attribute section, you’ll see our new template there. Choose it, save your page, then we move to the next step.

How to create woocommerce product table without plugins – Step 2 – Query all of your products and display them in a table

Next, we will query all of your product and put them all in a table. Put these codes below in the file we created before, right below the table section comment.

 <div id="toppro">
    <table id="top-products" class="sortable">
    <thead style="font-weight:bold;">
            <th><i class="fa fa-image"></i><br />Image</th>
            <th><i class="fa fa-table"></i><br />Name</th>
            <th class="hide-on-mobile"><i class="fa fa-align-left"></i><br />Summary</th>
            <th><i class="fa fa-tags"></i><br />Price</th>
            <th><i class="fa fa-cart-plus"></i><br />Buy</th>
            <!--th><i class="fa fa-thumbs-o-up"></i><br />Likes</th-->
            $pro_query = array(
                'post_type' => 'product',
                'posts_per_page' => -1,
                'meta_query' => array(  /* query only product in stock*/
                        'key' => '_stock_status',
                        'value' => 'instock'    
            $product_query = new WP_Query($pro_query); 
            while($product_query->have_posts()) : $product_query->the_post();
            <td class="product_image">
                 <a target="_self" href="<?php the_permalink(); ?>">
                 <?php $thumb_url = get_the_post_thumbnail_url(get_the_ID(),'small'); ?><img src="<?php echo $thumb_url; ?>" ></a>
            <td class="product_name">
                <a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?> <i class="fa fa-caret-right"></i>
            <td class="product_summary hide-on-mobile">
                 <?php the_excerpt(); ?>      
            <td class="product_price">
                    setlocale(LC_MONETARY,"en_US"); /* display currency */
                    $r_price = get_post_meta( get_the_ID(), '_regular_price', true ); 
                    $s_price = get_post_meta( get_the_ID(), '_sale_price', true ); 
                    if (!empty($s_price)) { 
                        echo '<del>'.money_format("%i", $r_price).'</del><br />'.money_format("%i", $s_price); /* display regular & sale price */
                    } else { echo money_format("%i", $r_price);} 
            <td class="product_buy">
                <a class="susu-button red" target="_self" href="<?php echo get_site_url(); ?>/checkout/?add-to-cart=<?php echo get_the_ID(); ?>">Buy Now</a><!-- click to buy, redirect to checkout or add to cart page -->
    <?php endwhile; 

Then a little CSS to make the table looks nicer. You can remove the Fontawesome part if you theme already have it. Put it in the head tags, in your header.php theme file.

<link rel="stylesheet" href=""/>
        #toppro {overflow-x: scroll;width:100%;}
        #top-products { width:100%; font-size:0.9em;line-height: 1.2em;}
        #top-products td {padding:5px; vertical-align: middle;}
        #top-products thead tr th {font-size:0.9em!important;}
        #top-products .product_image { width:10%; text-align: center;font-size:0.8em;font-weight: bold;}
        #top-products .product_name { width:30%; font-size:0.9em; }
        #top-products .product_summary { width:30%;font-size:0.9em; line-height: 1.3em; }
        #top-products .product_tags { width:10%; text-align: center;font-size: 1em;font-weight: bold;}
        #top-products .product_buy { width:10%; text-align: center;font-size: 1em;font-weight: bold;}
        #top-products .product_comments {width:10%; text-align: center; font-size: 1em;font-weight: bold;}
        @media screen and (max-width:500px) { 
            .hide-on-mobile {display:none;}
            #top-products .product_title {font-size:1em;line-height: 1.1em;}
        @media screen and (max-width: 500px) { .susu-button { font-size: 4vw;}}
        body .susu-button a {color: white!important;} 
       .red {
        background: rgb(148,50,50);
        background: -moz-linear-gradient(-45deg, rgba(148,50,50,1) 0%, rgba(255,138,138,1) 100%);
        background: -webkit-linear-gradient(-45deg, rgba(148,50,50,1) 0%, rgba(255,138,138,1) 100%);
        background: linear-gradient(-45deg, rgba(148,50,50,1) 0%, rgba(255,138,138,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#943232",endColorstr="#ff8a8a",GradientType=1); 

Now if everything is okay, you should see all of your instock products listed on the table.

How to create woocommerce product table without plugins – Step 3 – Make the table sortable and searchable

Thanks to, with their Js library, this step becomes easier than ever. Just add these codes below in your footer.php before the end of body tag.

<link rel="stylesheet" href=""/>
<script src="//"></script>
<script src="//"></script>
jQuery(document).ready( function () {
   jQuery('#top-products').dataTable( {
    scrollToTop: true
 } );

That’s all. Now you know how to create woocommerce product table by your own!

Of course this is just a simple woocommerce product table, but if you spend more time on it, you can customize it as pro as you like. E.g, add ajax add to cart button, show the products’ ratings, ajax filtering the products, v.v… but to me, that’s enough for today.

If you want a woocommerce product table pro with all functions I mentioned above, install in one click, and get support from experts. I suggest you try the plugin I’ve introduced before. A wordpress site with less plugins is better, but sometimes, you can be lazy, right?

best woocommerce product table pluginbest woocommerce product table plugin



You can wait for to get the hidden content, or just share to see it now. Sharing is the key to succeed!


Have a good day!
Fususu wrote on 17/10/2019. Updated 10/10/2020.

P.s. To motivate me, you can google this keyword create woocommerce product table, find my blog there then comment the position. Thank you so much!

Wow, there are (4) Awesome Comments!

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. avatar Rafael

    Very very good content, this helped me a lot. It was very hard to find an example of a product table without using plugins.

  2. avatar Jenny

    Thank you for the code, it exactly what I was looking for.

  3. avatar martin

    where is step 1?

Bài Tiếp Theo (15)