WooCommerce: Display Products in a Table Order Form

Interesting, isn’t it? This has been on my to-write list for ages, so today I want to show you my first attempt at turning the Shop page into a list/table of products.

Let’s see how I did this – I will try to comment my PHP as much as possible so you can understand my strategy. Enjoy!

Show WooCommerce products in a table

PHP Snippet: Edit WooCommerce Product Loop Items Display

Before applying CSS, we have to make sure to remove unwanted elements (such as the Sale! badge) and leave just 3 “columns”: title, price, add to cart.

/**
 * @snippet       Edit WooCommerce Product Loop Items Display
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.8
 */
 
// -------------------------
// 1. Change number of products per row to 1
// Note: this is specific to Storefront theme
// See https://docs.woocommerce.com/document/change-number-of-products-per-row/
 
add_filter( 'storefront_loop_columns', 'bbloomer_loop_columns' );
 
function bbloomer_loop_columns() {
return 1;
}
 
// -------------------------
// 2. Remove default image, price, rating, add to cart
 
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
 
// -------------------------
// 3. Remove sale flash (Storefront)
 
add_action( 'init', 'bbloomer_hide_storefront_sale_flash' );
 
function bbloomer_hide_storefront_sale_flash() {
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 6 );
}
 
// -------------------------
// 4. Add <div> before product title
 
add_action( 'woocommerce_before_shop_loop_item', 'bbloomer_loop_product_div_flex_open', 8 );

function bbloomer_loop_product_div_flex_open() {
echo '<div class="product_table">';
}
 
// -------------------------
// 5. Wrap product title into a <div> with class "one_third"
 
add_action( 'woocommerce_before_shop_loop_item', 'bbloomer_loop_product_div_wrap_open', 9 );

function bbloomer_loop_product_div_wrap_open() {
echo '<div class="one_third">';
}
 
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_close', 6 );

function bbloomer_loop_product_div_wrap_close() {
echo '</div>';
}
 
// -------------------------
// 6. Re-add and Wrap price into a <div> with class "one_third"
 
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_open', 7 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_price', 8 );
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_close', 9 );
 
// -------------------------
// 7. Re-add and Wrap add to cart into a <div> with class "one_third"
 
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_open', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 11 );
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_close', 12 );
 
// -------------------------
// 8. Close <div> at the end of product title, price, add to cart divs
 
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_flex_close', 13 );

function bbloomer_loop_product_div_flex_close() {
echo '</div>';
}

CSS: Edit WooCommerce Product Loop Items Display

Now that we’ve set up the new archive pages, we need CSS to complete the job. In detail, we want each element (title, price, add to cart) to look like a table cell.

We’ll use the awesome “flex” property in CSS ๐Ÿ™‚

Note: once again, this CSS is specific to Storefront theme, so you’ll surely need to change some calls to make sure everything triggers.

@media (min-width: 768px) {
 
.site-main ul.products li.product {
    width: 100%;
    float: none;
    margin: 0;
}
 
.site-main ul.products {
border-right: 1px solid;
border-bottom: 1px solid;
margin: 1em 0;
}
 
.site-main ul.products li.product .product_table {
  display: flex;
  flex-wrap: wrap;
}
 
.site-main ul.products li.product div.one_third {
    width: 33.3%;
    float: left;
    margin: 0;
    text-align: left;
    background-color: #eee;
    border-left: 1px solid;
    border-top: 1px solid;
    padding: 1em 2em;
    box-sizing: border-box;
    flex-grow: 1;
    overflow: hidden;
}
 
}

Is There a Plugin For That?

If you’d love to code but don’t feel 100% confident with PHP, I decided to look for reliable plugins that achieve the same result. As usual, I’ve chosen WooCommerce plugin vendors based on marketplace reputation, dedicated support quality, code cleanliness, long-term reliability and – probably almost as importantly – where the “people behind” the plugin are active supporters of the WordPress ecosystem.

1. Bulk Shop for WooCommerce

Sold by: WooCommerce.com – Developed by: Consortia AS – 30 Day Money Back Guarantee

Create product list views and make it possible to shop quantities of products easily. Perfect for wholesale solutions, showing customers all products in a table and enabling bulk shopping. Bulk Shop is also optimized for mobile devices and fully responsive.

2. YITH Quick Order Forms for WooCommerce

Sold by: YITH – Developed by: YITH – 30 Day Money Back Guarantee

Offer customers the opportunity to easily buy all or a range of products. Make it easy to search, select and add to cart products with one click from the same page.

3. WooCommerce Product Table

Sold by: Barn2 – Developed by: Barn2 – 30 Day Money Back Guarantee

Create a quick WooCommerce order form (a table listing some or all of your products) and let customers select and add to the cart quickly. Also handy if your WooCommerce users access and purchase often via mobile devices.

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials. You can start learning how to customize WooCommerce without unnecessary plugins. Watch me code and learn by example!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

14 thoughts on “WooCommerce: Display Products in a Table Order Form

  1. Hi,

    kinda works… but looks pretty ugly with the Divi theme…

    1. Hey Tobias, thanks so much for your comment! You will need to fine tune the PHP with a bit of CSS to make it look less “ugly” ๐Ÿ™‚

  2. Hi Rodolfo, i wanna thank you very much for your good work. Your website and video tutorials are very useful, detailed, and straightforward for newbies like myself. One question though, how do i get the corresponding hooks of other themes in order to perform the same functions

    1. Thank you Adjetey! You’ll need to open the theme files and study the coding, or read the theme documentation if it’s well done ๐Ÿ™‚

  3. Well I was in doubt, I’m starting with WooCommerce, very cool your code but I want to display 4 columns or the first image of the product, what would the code look like?

    1. Hey Danilo, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  4. Hi,

    Thanks for your tutorial, I am using WooCommerce SuperStore theme, this code doesn’t seem to be working with that theme, This code will work with all wocommerce themes?

    1. Hey there, thanks for your comment! I don’t know, can you try this with another theme and let me know if it works? ๐Ÿ™‚

  5. Hi Rodolfo
    Fabulous insights! Is there anyway to make this table printable to pdf I hope so because this would mean a lot ๐Ÿ™‚

    1. Hello Tanya, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  6. First of all, thank you very much for making this website and sharing your snippets. I already use two of them on a site I’m building and I only discovered your website yesterday!

    My question about this script: Can I make it into a shortcode so I can use it on one page only?

    My Use Case: We sell classroom courses, and I love to show a list of upcoming courses separate from the normal Woo Store on our homepage.

    PS. There will be a ‘credits & thank you’-page on the site. Do you mind if I add you to the list, without you 2 things would not have been possible after all.

    1. Hey Verdi, thanks for your kind words ๐Ÿ™‚ Yes, you can turn ANY snippet into a shortcode, just take a look at the WordPress docs ๐Ÿ™‚

  7. Rodolfo,

    Always helpful! Great tutorial !

    Thank you!
    Monica

    1. Thank you Monica ๐Ÿ™‚

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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