Woo Product Table Pro offers to display all products or specific products as table in a searchable & sortable table view by Shortcode. Perfect for wholesale stores, product catalogues, order forms, restaurant orders & more. Fully responsive and mobile friendly.
As a WooCommerce Add-ons plugin, first you have to confirm that, WooCommerce is already installed in your site. Also confirm that you have few Products available in your store. See How to install WooCommerce. And add products to your store. After evreything is setup properly, use Woo Product Table Pro Shortcode.
From v7.0.0, we have made our Woo Product table Pro plugin as an addon of our free plugin Woo Product Table – Free WooCommerce Table view solution.
So from now, our free plugin must have to be installed to activate Woo Product Table Pro.
As a WooCommerce Add-ons plugin, first you have to confirm that, WooCommerce is installed in your site. Also confirm that you have few Products available in your Store. See How to install WooCommerce. And add products to your Store.
If you are a Woo Product Table Pro newbie, these steps will help you understand the essentials of successful product table creating and showing. You will learn about:
Create a New Table on WordPress and Product Table edit screen
Select your desired columns to show in product table
Select basic query
Set few conditions on table
Setup advanced search box and mini filter
Customize your table's design
Configure your table's settings
Make your table responsive
Publish the table then copy and paste table's shortcode where you need
Column Title: Give the column a nice name
Disable Description: Don't want to show product short description with product title? By checking this you can hide product short description.
Link Options (Only for Product Title/Thumbnail): You can disable, enable product link or you can enable YITH Quickview on product title and thumbnail. (For YITH Quickview you must have to installed and activated YITH Quickview plugin.)
Wrapper Tag: You can select any tag to wrap this column items. For inner items you need to set tag on that specific columns wrapper tag.
Column Inner Items: Select these items to show up that columns data in this column. These inner items could be order by simply drag and drop.
Wrapper Tag Class: Add custom class to wrapper tag.
Checkbox: This checkbox is responsible for enable/disable this column.
Up/Down Arrow: Using this up and down arrow you can move the column one up/down.
Collapse/Expand: To expand and collapse this section.
Category Includes: Select categories to show products in the table from these categories.
Product Includes: Select single products to only these selected products show in the product table.
Product Exclude: Select single products to exclude them from the product table.
Category Exclude: Select product categories to exclude their products from the product table.
Tag Includes: Select product tags to include their products in the product table.
Ajax Action (Enable/Disable): Enable or disable ajax on product table.
Ajax for Pagination (Enable/Disable): Enable or disable ajax pagination on product table.
Mini Cart Position: Change mini cart position.
Table Head: You can hide or show table head using this option.
Pagination On/Off: You can disable table's pagination from here.
Checkbox Auto check on table Load: Enable or disable all product checked on table load.
Set a class name for Table: Add custom class for custom design.
Temporary Number for Table: Table ID when you need use it.
(Add to cart) Text: Add custom add to cart button text.
(Add to cart(Selected]) Text: Add custom add to cart selected button text.
(All Check/Uncheck) Text: Add custom all check/uncheck label text.
AuthorID/UserID/VendorID (Optional): If you want to show products from specific vendor.
author_name/username/VendorUserName (Optional): If you want to show products from specific vendor.
Product Type (Product/Variation Product): Choose when you want to show only variable product in a table with one click add to cart feature.
Sorting/Order: Set the product table's shorting order.
Order By: Select meta field to short product table.
Set Minimum Price: Set the minimum price condition on product table.
Set Maximum Price: Set the maximum price condition on product table.
Description Type: Set the description type condition on product table.
Only Stock Product: If you want to show only stock products.
Only Sale Products: If you want to show only sale products.
Post Limit/Per Load Limit: The maximum number of products you want to show in one page.
Third Party Addons Supporting: Whenever you need to work other plugin which doesn't working with our product table.
Advance Search Box: Enable/disable advanced search form.
Search From: Select the meta field for search query.
Taxonomy Keywords for Advance Search Box (Separate with comma[,]): Add your custom taxonomies to add below.
Choose [product_cat]: From previous step you can control this field to hide or show in search form.
Mini Filter: Show/hide mini filter above of the table.
Taxonomy Keywords for Filter (Separate with comma[,]): Add taxonomy to show up in mini filter.
Select Template: Design your table with our pre-defined template.(Work-in-progress)
Table Customize: You can customize you product table using this design tab.
Basic Settings: From this section you can control your table specific configuration.
Label Text: From this section you can change all the buttons, input fields, custom messages texts.
External Plugin: From this section you can change external plugin YITH's label text.
Table's Default Content: Change stock, backorder messages.
All Messages: All other messages could be changed from here.
Mobile Column: From this column you can select which columns you want to show in the mobile devices.
Tablet Column: From this column you can select which columns you want to show in the tablet devices.
Drag and Drop Column: You can re-arrange all the items by simply drag and drop.
Ans:Yes, from version (6.0.7), You able to customized Advanced Search Field. It will only work from 6.0.7
Ans:Yes, from version (4.4), You able to customized your table design. It will only work for latest version
Ans:Yes, from version (4.1) each table's configuration is saved as Table ID. You can edit any Table from the Table ID where your pre used table configuration remain same as before.
Ans:Yes, It's compatible with both old and new shortcode.
Ans:Yes, You can use any Post Duplicator plugin. Don't worry about temporay_number of table's. Our plugin will automatically generate new one.
Ans:Yes, It's possible from V4.0 version. If you have old version, Atrributes column will not work.
Ans:Yes, It's possible from V4.0 version. If you have old version, Variations column will not work. Note:
Ans:Product variation automatically displays in action column where Add to cart button available.
Ans:The plugin lets you add product tables to any page,
post or widget by Shortcode. To create a WooCommerce table view, simply choose the options for your product tables on the settings page(Dashboard -> Product Table->Add New Shortcode) and Publish the Shortcode.
You will get a table ID. Copy and paste that table id to your desired Page/Post.You can always contact us for expert advice on advance uses of Woo Product Table Pro.
Ans:Yes, It's possible.
Ans:Yes, there are lot of options to choose which products are included (or excluded) in the table. Select products by category, max-price, min-price, sort etc.
Ans:Yes, you can customize heading of all the columns in the table. Also you can hide the table header if you want.
Ans:We have tested Woo Product Table pro with a range of free and premium themes and are confident that it will work perfectly with your theme.
Ans:Woo Product Table is fully tested with the latest version of WordPress. We always recommend running the most up-to-date version of WordPress, but this plugin supports older installations
Ans:Yes, there are few Youtube Video Tutorial available. Video link for Woo Product Table pro using and configuring.
Ans:Yes. Definitely there is a way. You can show your products in the table according to your selected categories. For doing this go to Dashboard->Product Table->Shortcode Generator) and click on the Basics tab.You will find there a field "Category Includes" . Just click on that field and select your category which you want show, and finally generate the shortcode.
Ans:Yes. You can set a class name for the table. For this Go to shortcode generator (Dashboard->Product Table->Shortcode Generator). Click on the Basics tab and find a field named "Set a Class name for Table" . Set your desired class name in the field. That's it.
Ans:You can easily update our plugin. First, you've to deactive old version. Then, delete it. Now, reinstall again our latest version plugin and active it.
Ans:Yes, it's.You just add the custom field slug inside the shortcode with prefix of "cf_". For example, If your custom slug is color then the shortcode will be just like this, column_keyword='cf_color,thumbnails,product_title" column_title='Color,Thumbnails,Product Title" . Thus you can add custom field into your product table.
Ans:Yes, position can be changed. Also you can hide, if you want. When you generate a shortcode, you will get a drop-down option named "Mini Cart Position" from shortcode generator's Basics Tab. There are three options named Top, Bottom or none. Select anyone from here.
Ans:Our plugin isn't compatible with WooCommerce Product Add-Ons plugin at this moment. We hope to add this in future.
Ans:In our table "Only Stock" products shows by default. But, if you want to change that all products will be shown in the table then you need to change it in the shortcode. For doing this, go to shortcode generator (Dashboard->Product Table->shortcode Generator). After clicking on the conditions tab you will see a drop-down named "Only Stock Product", you can disable/enable from here. Or you can do it by editing the shortcode also. Just add the attribute and value only_stock="no" inside the shortcode. Thanks.
Ans:Yes, you can. To do it, check and enable "Short Message" column from Shortcode Generator and generate shortcode. (Dashboard->Product Table->Column) You can use your preferred column title then using "Short Message" in shortcode.
Ans:Yes. It's 100% responsive. Even you can disable the responsive option, if you want.
Ans:Go to Dashboard and click on product table. Then in the shortcode generator section select column tab. Here will be a shortcode panel of different column. You can edit it here.
Ans:Yes, it's. You can change all types of messages from plugin's configure page. Note: The table's message, i mean the options we will change in configure page, is global. So, it will works for all table. All table will look alike.
Ans:Yes, there is. Go to "Mobile Issue" tab in Shortcode Genarator. You will get a dropdown named "Mobile Responsive" . You can Enable/Disable it by "Yes/No
Ans:Yes, it has. Go to "Mobile Issue" tab from shortcode generator, here you will get a drop-down called "Mobile Responsive". Select "No Responsive" from "Yes/No Responsive" Then, check from "Hide on Mobile" option, which column you want to hide on mobile. Next, generate shortcode.You can edit shortcode , if you want. Use (mobile_hide='here column_keywords with coma').
Ans:Yes, we have a free version too. By which you can check it on your site. Link of free version: https://wordpress.org/plugins/woo-product-table.
Ans:You can do it very easily. To do it, Go to shortcode generator (Dashboard->Product Table->Shortcode Generator). Click on the conditions tab then you will see a field "Set Maximum Price". Set your desired price in the field and generate the shortcode. Done ! For example: You want to show products less than $15 then put the number 15 in the "Set Maximum Price" field.
Ans:Very easily, just avoid adding Thumbnails column. I mean, when you choose column to generate shortcode, choose your necessary column instead Thumbnails column and generate shortcode. That's it.
Ans:Yes, you can hide, if you want, when you generate a shortcode, you will get a drop-down option named "Mini Cart Position" from shortcode generator's Basics Tab. There are three options named Top, Bottom or none. Select anyone from here. Selecting none generate shortcode, it will hide.
Ans:Navigate to Dashboard > Product Table > Configure. Then, select Yes from Disable [Categories and Tags] Link option.
Ans:You can set a class name for the table. For this, go to shortcode generator (Dashboard > Product Table > Shortcode Generator). Click on the Basics tab and find a field named "Set a Class name for Table". Set your desired class name in the field. Use (mobile_hide='here column_keywords with coma') otherwise. That's it.
Ans:Yes, you're able to customize thumbs image for your product's table. Go to Configure page of our plugin (Dashboard->Product Table->Configure). Over there, you will find a input box called "Thumbs Image Size". Set your image size's dimension. Remember, here supports only int/numeric number. So don't insert px or inc etc. Only number. For example if you input 100 then image size will be 100px x 100px.
These screenshots show some of the different uses of our WooCommerce product table by Plugin - Woo Product Table pro. The exact styling will depend on your theme.
<div id="wpt_table_wrapper" class="wpt_customized_table_wrapper wpt_temporary_wrapper_186 wpt_product_table_wrapper dataTable_wrapper "> <h1 class="wpt_table_title">My Favorite Product Table</h1> <table id="wpt_table" class="wpt_customized_table wpt_temporary_table_186 wpt_product_table dataTable_table display dataTable"> <thead> <!-- Table column Row start --> <tr class="wpt_table_header_row wpt_table_head"> <th class="thumbnails">Thumbnail</th> <th class="product_title">Product Name</th> <th class="category">Category</th> <th class="rating">Rating</th> <th class="price">Price</th> <th class="quantity">Qty</th> <th class="action">Action</th> </tr> <!-- End tr .wpt_table_header_row --> </thead> <tbody> <!-- Table body row start --> <tr role="row" slug="hoodie-with-zipper" title="Hoodie with Zipper" product_id="32" id="product_id_32" class="wpt_row wpt_row_serial_1 wpt_row_product_id_32 even"> <td valign="middle" class="wpt_thumbnails"><img width="56" height="56" src="__product_image_link__" /></td> <td class="wpt_product_title"><a target="_blank" href="_product_link__">Hoodie with Zipper</a></td> <td class="wpt_category"><a href="_product_link__" rel="tag">Hoodies</a></td> <td class="wpt_rating woocommerce"> <div class="star-rating" title="Rated 0 out of 5"><span style="width:0%"><strong itemprop="ratingValue" class="rating">0</strong> out of 5</span></div> </td> <td class="wpt_price" id="price_value_id_32"> <span class="wpt_product_price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>45.00</span></span> </td> <td class="wpt_quantity" target_id="32"> <div class="quantity"> <input type="number" class="input-text qty text" step="1" min="0" max="" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" /> </div> </td> <td class="wpt_action" parent_id="32"> <span class="wpt_product_price"><a rel="nofollow" href="/woo-product-table-pro/?add-to-cart=32" data-quantity="1" data-product_id="32" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></span> </td> </tr> <!-- Table body row End --> <!-- Table body row start --> <tr role="row" slug="sunglasses" title="Sunglasses" product_id="29" id="product_id_29" class="wpt_row wpt_row_serial_2 wpt_row_product_id_29 odd"> <td valign="middle" class="wpt_thumbnails"><img width="56" height="56" src="-__Product_image_link_" /></td> <td class="wpt_product_title"><a target="_blank" href="__product_link__">Sunglasses</a></td> <td class="wpt_category"><a href="__category_link__" rel="tag">Accessories</a></td> <td class="wpt_rating woocommerce"> <div class="star-rating" title="Rated 0 out of 5"><span style="width:0%"><strong itemprop="ratingValue" class="rating">0</strong> out of 5</span></div> </td> <td class="wpt_price" id="price_value_id_29"> <span class="wpt_product_price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>90.00</span></span> </td> <td class="wpt_quantity" target_id="29"> <div class="quantity"> <input type="number" class="input-text qty text" step="1" min="0" max="" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" /> </div> </td> <td class="wpt_action" parent_id="29"> <span class="wpt_product_price"><a rel="nofollow" href="/woo-product-table-pro/?add-to-cart=29" data-quantity="1" data-product_id="29" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></span> </td> </tr> <!-- Table body row End --> </tbody> </table> </div>
<?php /** * Taxonomy column generator * clue is: tax_ * * @param type $item_key * @return String */ function taxonomy_column_generator( $item_key ){ $key = 'tax_'; $len = strlen( $key ); $check_key = substr( $item_key, 0, $len ); if( $check_key == $key ){ return $item_key; } } /** * Custom Fields column generator * clue is: cf_ * * @param type $item_key * @return String */ function customfileds_column_generator( $item_key ){ $key = 'cf_'; $len = strlen( $key ); $check_key = substr( $item_key, 0, $len ); if( $check_key == $key ){ return $item_key; } } /** * Making new String/description based on word Limit. * * @param String $string * @param Integer $word_limit * @return String */ function wpt_limit_words($string = '', $word_limit = 10){ $words = explode(" ",$string); $output = implode(" ",array_splice($words,0,$word_limit)); if( count($words) > $word_limit ){ $output .= $output . '...'; } return $output; }
/********************** Template: Default ************************************/ .default_table{ position: relative; border-collapse: collapse; width: 100%; margin: 0 auto; position: relative; } .default_table thead{ border-bottom: 2px solid #36304a; } .default_table thead .wpt_table_header_row th{ height: 50px; color: #36304a; background: #F8F8F8; } .default_table td, .default_table th { padding: 10px; text-align: center; } .default_table tbody tr td{ border: 1px solid #F6F6F6; } .default_table .wpt_row td img{ width: 100px; } .default_table tbody tr{ transition: all .5s; } .default_table .tr_bg_1{ background: #FDFDFD; padding: 10px; } .default_table .tr_bg_2{ background: #FBFBFB; padding: 10px; } .default_table tbody tr:hover{ background: #f7faff; } .default_table tbody tr a.button{ display: inline-block; padding: 10px; background: #36304a; color: #fff; font-size: 14px; border-radius: 3px; font-weight: bold; } /*for hover of default template*/ table#wpt_table.wpt_product_table.default_table thead>tr>th.this_column_sorted { background-color: rgb(245, 245, 245) !important; } /********************** Template: Default ************************************/
(function($) { $(document).ready(function() { var ajax_url,ajax_url_additional = '/wp-admin/admin-ajax.php'; //console.log(ywraq_frontend); //console.log(woocommerce_params); if ( typeof woocommerce_params === 'undefined' ){ var site_url = $('div.wpt_product_table_wrapper').data('site_url'); ajax_url = site_url + ajax_url_additional;//'/wp-admin/admin-ajax.php'; //woocommerce_params //wc_add_to_cart_params }else{ ajax_url = woocommerce_params.ajax_url; } console.log(ajax_url);//Only for Developer if( ajax_url === 'undefined' + ajax_url_additional ){ console.log( 'WOO PRODUCT TABLE is not Available to this page \nOR:::SORRY!!!!: woocommerce_params is Undefine also ajax_url also undefined. So ajax will not work not. Contact with codersaiful@gmail.com' ); return false; } /** * Getting object for config_json from #wpt_table table. * Can be any table. because all table will be same config json data * * @returns {Objectt} */ var config_json = $('#wpt_table').data('config_json'); if ( typeof config_json === 'undefined' ){ return false; } console.log(config_json); load_wpt_cart(ajax_url, 'no'); /** * Load Minicart Normally above at table, although we can set to bottom * * @param String ajax_url * @param boolean true_false * @returns void */ function load_wpt_cart(ajax_url,true_false){ $.ajax({ type: 'POST', url: ajax_url,// + get_data, data: { action: 'wpt_cart_auto_load', }, success: function(data) { if(data.search(config_json.mcart_empty_now) < 200){ //'Your cart is empty.' $('.tables_cart_message_box').html(data); } if(true_false === 'yes'){ $('.tables_cart_message_box').html(data); } }, error: function() { }, }); } $('body').on('click','a.remove',function(){ var setFewSeconds = setInterval(function(){ load_wpt_cart(ajax_url, 'yes'); clearInterval(setFewSeconds); },3000); }); })(jQuery);
I've used the following JavaScript Library.
Select2 jQuery plugin for modern selection in Setting page
Once again, thank you so much for purchasing Woo Products Table Pro - Making Quick Order Table. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question related to the plugin on Codecanyon, Feel free to knock at our email: codersaiful@gmail.com or you might consider visiting the forums and asking your question in the "Item Support" section.