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.

Share:

Leave a Reply