Create woocommerce product table instantly without plugins | FuSusu

Create woocommerce product table instantly without plugins...

849 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 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;">
        <tr>
            <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-->
           
         </tr>
    </thead>
    <tbody>
        <?php 
            $pro_query = array(
                'post_type' => 'product',
                'posts_per_page' => -1,
                'meta_query' => array(  /* query only product in stock*/
                    array(
                        'key' => '_stock_status',
                        'value' => 'instock'    
                    ),
                )
            );
            $product_query = new WP_Query($pro_query); 
            while($product_query->have_posts()) : $product_query->the_post();
        ?>
        <tr> 
            <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>
            <td class="product_name">
                <a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?> <i class="fa fa-caret-right"></i>
                </a>
            </td>
            <td class="product_summary hide-on-mobile">
                 <?php the_excerpt(); ?>      
            </td>
            <td class="product_price">
                <?php 
                    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>
            <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 -->
            </td>   
        </tr> 
    <?php endwhile; 
    wp_reset_postdata();
        ?>  			
    </tbody>
    </table>
    </div>

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="https://cdn.fususu.com/cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
        #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); 
}
</style>

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 datatables.net, 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="https://cdn.fususu.com/cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/preview/scrollToTop/dataTables.scrollToTop.min.js"></script>
<script>
jQuery(document).ready( function () {
   jQuery('#top-products').dataTable( {
    scrollToTop: true
 } );
});
</script>

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

TREASURE CHEST

!!!



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

UNLOCK NOW!

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


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!

Don't hesitate to leave a comment, I'll reply in... 86400s!


Leave a Reply

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