WooCommerce: Display Product Grid @ Order Emails e.g. Related Products

Bad news first – we’ve seen how to add content to any WooCommerce order email, however I did not specify that if you use the [products] shortcode that’s not going to work unfortunately. The reason behind this, in plain English, is that… it just doesn’t work, and it outputs a weird list of “Sale!” list items (see screenshot below)!

So, I want to fix this, and find a WooCommerce email-compatible way to show a grid of products based on a list of product IDs (for example, the list of related products based on the ordered items), and make sure I can actually see product images, titles, prices and a link. Enjoy!

PHP Snippet: Display Related Products Grid @ WooCommerce Customer Processing Order Email

Note 1: you can target any WooCommerce email. Here, I’m adding content to the Customer Processing Order email, but you could do it on the Completed one only, or all of them. Check this guide to find out the email ID you should use in the snippet below.

Note 2: in the snippet I’m calculating the Related Products from the order items. You can use a custom list of product IDs instead if you wish – simply remove the $related calculations, and edit the foreach iterable_expression from “array_slice( $related, 0, $limit )” to “array( 123, 456, 789 )” where 123, 456 and 789 are the product IDs you want to show.

Note 3: I’m displaying 3 columns and 2 rows of products. Change $cols = 3 and $limit = 6 based on your requirements ($cols = 4 and $limit = 4 would give you 4 items in 1 row).

/**
 * @snippet       Product Grid @ WooCommerce Emails
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 7
 * @community     https://businessbloomer.com/club/
 */

add_action( 'woocommerce_email_after_order_table', 'bbloomer_add_product_grid_specific_email', 20, 4 );
  
function bbloomer_add_product_grid_specific_email( $order, $sent_to_admin, $plain_text, $email ) {
	
	if ( $email->id == 'customer_processing_order' ) {
		
		$related = array();
		foreach ( $order->get_items() as $item_id => $item ) {			
			$related = array_merge( wc_get_related_products( $item->get_product_id() ), $related );
		}
		if ( ! $related ) return;
		shuffle( $related );
		$related = array_unique( $related );
		
		echo '<h2>Related Products</h2>';
		
		$html = '';
		$col = 1;
		$cols = 3;
		$limit = 6;
		$html .= '<div><table style="table-layout:fixed;width:100%;"><tbody>';		
		foreach ( array_slice( $related, 0, $limit ) as $product_id ) {
			$product = wc_get_product( $product_id );
			$html .= ( $col + $cols - 1 ) % $cols === 0 ? '<tr>' : '';
			$html .= '<td style="text-align:center;vertical-align:bottom">';
			$html .= $product->get_image();
			$html .= '<h3 style="text-align:center">' . $product->get_title() . '</h3>';
			$html .= '<p>' . $product->get_price_html() . '</p>';
			$html .= '<p><a href="' . get_permalink( $product_id ) . '">' . __( 'Read more', 'woocommerce' ) . '</a></p></td>';
			$html .= $col % $cols === 0 ? '</tr>' : '';
			$col++;
		}
		$html .= '</tbody></table></div>';
		
		echo $html;
		
	}
}

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: Add Content to a Specific Order Email
  Customizing WooCommerce emails via the WordPress dashboard is not easy and – sometimes – not possible. For example, you can’t edit or add content to them unless you’re familiar with code. Well, here’s a quick example to learn how to add content to any WooCommerce default order email. In this case study, our goal is […]
• WooCommerce: Display All Products Purchased by User
  When a WooCommerce customer is logged in, you might want to show them the list of previously purchased products (maybe in a custom “My Account” tab). This is helpful when customers tend to buy the same products over and over again, and therefore you can help them “order again” without having them to search the […]
• WooCommerce: How to Add a Custom Checkout Field
  Let’s imagine you want to add a custom checkout field (and not an additional billing or shipping field) on the WooCommerce Checkout page. For example, it might be a customer licence number – this has got nothing to do with billing and nothing to do with shipping. Ideally, this custom field could show above the […]
• WooCommerce Visual Hook Guide: Emails
  WooCommerce customizers: the Visual Hook Guide is back! Here’s a visual HTML hook guide for the WooCommerce Emails. 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. Let me know in the comments if this […]
• WooCommerce: Display Out of Stock Products (Shortcode)
  A client of mine wanted to show out of stock products on a separate page – so I coded a simple shortcode for you all! You can use this shortcode for different goals. For example, you might want to display what products you’ve sold to enhance customer trust / social proof. So let’s see (1) […]

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