WooCommerce: Product List View @ Shop

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 as opposed to the default grid.

This is especially suitable to B2B WooCommerce shops, or for those websites where customers don’t really need to see huge product images and are used to order “from a product form”.

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!

With a few lines of PHP, I was able to turn the Shop page into a list/table of products

PHP Snippet: Show Products In a Table @ WooCommerce Shop / Category / Archive Pages

/**
 * @snippet       Products in Table @ Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 6
 * @community     https://businessbloomer.com/club/
 */

// -------------------------
// 1. One product per row, 50 per page

add_filter( 'loop_shop_columns', 'bbloomer_one_product_per_row', 9999 );

function bbloomer_one_product_per_row() {
	return 1;
}

add_filter( 'loop_shop_per_page', 'bbloomer_redefine_products_per_page', 9999 );
 
function bbloomer_redefine_products_per_page( $per_page ) {
  $per_page = 50;
  return $per_page;
}
 
// -------------------------
// 2. Remove link, sale badge, rating
 
add_action( 'woocommerce_before_shop_loop_item', 'bbloomer_remove_default_shop_elements', 1 );

function bbloomer_remove_default_shop_elements() {
	remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
	remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
	remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
	remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
	remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 6 ); // STOREFRONT
}
 
// -------------------------
// 3. Use CSS grid to build a table
 
add_action( 'woocommerce_after_shop_loop', 'bbloomer_products_grid_css' );

function bbloomer_products_grid_css() {
?>
	<style>
		ul.products.columns-1 li.product {
			display: grid;
			column-gap: 10px;
			grid-template-columns: 5% 55% 1.5fr 1fr;
			margin: 0;
			place-items: center;
			border-bottom: 1px solid;
		}
		ul.products.columns-1 li.product > * {
			margin: 0;
			padding: 10px;
		}
	</style>
<?php
}

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 custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages
    I’ve created a visual HTML hook guide for the WooCommerce Archive Page (which is the same page for the Shop, Category, Tag pages). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can […]
  • WooCommerce: Hide Prices on the Shop & Category Pages
    Interesting WooCommerce customization here. A client of mine asked me to hide/remove prices from the shop page and category pages as she wanted to drive more customers to the single product pages (i.e. increasing the click-through rate). As usual, a simple PHP snippet does the trick. I never recommend to use CSS to “hide” prices, […]
  • WooCommerce: How to Remove the “Default Sorting” Dropdown
    If the WooCommerce product sorting functionality (“Default Sorting” dropdown) is a waste of space or you don’t need that select box at all, you may want to remove it. No matter if you prefer custom code or a simple plugin – hiding the product sorting dropdown is a piece of cake. Enjoy!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent 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. Follow @rmelogli

18 thoughts on “WooCommerce: Product List View @ Shop

  1. Hello Rodolfo, this is a perfect solution, thank you!!!

  2. Rodolfo,

    Always helpful! Great tutorial!

    Thank you so much…

  3. 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” ๐Ÿ™‚

  4. 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 ๐Ÿ™‚

  5. 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

  6. 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? ๐Ÿ™‚

  7. 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

  8. 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 ๐Ÿ™‚

  9. Rodolfo,

    Always helpful! Great tutorial !

    Thank you!
    Monica

    1. Thank you Monica ๐Ÿ™‚

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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