WooCommerce Products Loop – WPQuickies

Creating a custom login page for a WordPress website isn’t difficult.  There are several ways you can implement your own or client brand designs.

Sitting on top of WordPress, WooCommerce is the fastest growing e-commerce shop on the internet just now.

There are thousands of WooCommerce themes helping you create your shop, but what if you want to go that one step further and customise how products are displayed uniquely for your customers?

Understanding how WooCommerce displays products in theme pages is the first step to customising the experience.

What Is the WooCommerce Products Loop?

Whenever a list of products is displayed on a WooCommerce store page, the code that produces the products list is called the “Products Loop”.

The terminology mirrors WordPress’s blog post loop, where your blog posts list is output on the blog and archive pages.  The principal is the same.

The coding concept is pretty simple to understand for those of you with no development background.

A loop checks to see if more products (for a specific condition) are left to display.

If there are, the product details are grabbed from the database, rendered to screen, and the process then restarts or loops around until no more products are left to display.

Why Is The WooCommerce Products Loop Important To Me?

There may be circumstances where you want a listing of specific products displayed on a page that can’t be done with regular shortcodes.

In this case, you would likely need to insert a custom products loop code into your shop page template.

Every WooCommerce theme and search and filter plugin uses custom product loops to display product results.

Where To Find The WooCommerce Products Loop?

The WooCommerce products loop has evolved over the past four or five years since Automattic acquired WooCommerce.

Gone is the single chunky code loop spitting out PHP combinations mixed with HTML.

The WooCommerce products loop is now a refined, hookable affair.

The best place to find the raw WooCommerce products loop is in the template file /template/archive-product.php. 

The /template/ folder in the WooCommere plugin contains templates you can copy to your child theme to customise certain WooCommerce pages.

You can view the archive-product.php file at https://github.com/woocommerce/woocommerce/blob/6.5.0/plugins/woocommerce/templates/archive-product.php. 

The WooCommerce Products Loop Code

I’ve removed many comments from the original code to show the current loop’s simplicity.

if ( woocommerce_product_loop() ) {
	do_action( 'woocommerce_before_shop_loop' );
	woocommerce_product_loop_start();
	if ( wc_get_loop_prop( 'total' ) ) {
		while ( have_posts() ) {
			the_post();
			do_action( 'woocommerce_shop_loop' );
			wc_get_template_part( 'content', 'product' );
		}
	}
	woocommerce_product_loop_end();
	do_action( 'woocommerce_after_shop_loop' );
} else {
	do_action( 'woocommerce_no_products_found' );
}

I’ll explain what is happening in the code at a very high level.

The actual products loop is surrounded by a conditional IF statement, lines 1, 13 and 15, which check to see if this is the WooCommerce product loop; otherwise, it reports to the browser that no products are found on line 14.

Lines 2 and 12 allow you to hook or run your functions to output content directly before and after the product loop using the WordPress hook names ”woocommerce_before_shop_loop’  and ”woocommerce_after_shop_loop’.

Don’t worry if you don’t know how to use WordPress hooks, just know that it’s possible.

Lines 3 and 11 starts and ends the WooCommerce products loop, respectively.  

The ‘woocommerce_product_loop_start’ function sets up pointers and counters and prepares the WordPress database to be queried.

The ‘woocommerce_product_loop_end’ function closes the database connection, resets pointers and tidies things up, ready for another WordPress query.

Lines 4 and 10 contain a conditional statement to check how many total products there are in the database to loop through and only runs the code inside the statement if the total number of products is above zero.

Lastly, lines 5 to 9 runs the actual WooCommerce products loop where the product information is retrieved from the database and output to the browser.

Line 8 calls another template, /templates/content-product.php, to output the product data. 

You can view that template online here https://github.com/woocommerce/woocommerce/blob/6.5.0/plugins/woocommerce/templates/content-product.php.

Alternative Custom WooCommerce Products Loop

WooCommerce documentation is pretty good, and they have an alternative code sample for a custom WooCommerce products loop at https://woocommerce.com/document/sample-products-loop/.

<ul class="products">
	<?php
		$args = array(
			'post_type' => 'product',
			'posts_per_page' => 12
			);
		$loop = new WP_Query( $args );
		if ( $loop->have_posts() ) {
			while ( $loop->have_posts() ) : $loop->the_post();
				wc_get_template_part( 'content', 'product' );
			endwhile;
		} else {
			echo __( 'No products found' );
		}
		wp_reset_postdata();
	?>
</ul><!–/.products–>

The code above is very similar to the one we just looked at, but rather than having all those WooCommerce functions to set things up, this code snippet uses the WP_Query object to set up the database query to get product data.

The product search criteria are set from the $arg array on lines 3-6.

In the above code snippet, the query looks for post types ‘product’, with page pagination set to return 12 products per page.

You can set up your query conditions by adding conditions to the $arg variable and referencing the WP_Query documentation at https://developer.wordpress.org/reference/classes/wp_query/.

Summary

There’s a lot more detail to the WooCommerce products loop that I’ve excluded in this talk – I wanted this to be a very high-level overview.

To customise the WooCommerce products loop, you’ll need to understand how to use WordPress hooks and filters.  

Maybe that could be a topic for another day.

Do you still have questions about the WooCommerce Products Loop?

Ask in the comments below.

#WPQuickies

Join me every Thursday at 1 pm Sydney time for some more WPQuickies – WordPress tips and tricks in thirty minutes or less.

Broadcasting live on YouTube and Facebook.

Suggest a #WPQuickies Topic

If you have a WordPress topic you’d like to see explained in 30 mins or under, fill out the form below.

https://forms.gle/mMWCNd3L2cyDFBA57

Watch Previous WPQuickies