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!

My attempt at using the [products] shortcode inside the Customer Processing Order email didn’t go really well. It outputs a weird list of items, and there is no sign of a product grid.
And here’s the “after”: finally, I’m able to show a grid of products inside WooCommerce Order emails. In this particular case, I’m using the list of related products, but you can use any custom list of course!

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
 * @donate $9     https://businessbloomer.com/bloomer-armada/

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>' : '';
		$html .= '</tbody></table></div>';
		echo $html;

Where to add custom code?

You should place PHP snippets at the bottom of your child theme functions.php file and CSS at the bottom of its 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 guide "Should I Add Custom Code Via WP Editor, FTP or Code Snippets?" and my video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything went 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.

If you think this code saved you time & money, feel free to join 17,000+ WooCommerce Weekly subscribers for blog post updates and 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance!

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

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.

4 thoughts on “WooCommerce: Display Product Grid @ Order Emails e.g. Related Products

  1. Looks pretty useful, thanks for sharing a straight-forward method for adding related products to WC emails. I am going to test it pretty soon although I am afraid that most of the people don’t really read those kind of emails carefully. Do you have any data if this works from marketing prospective?

    1. You won’t know until you test and track it!

  2. Hi, Thanks for this awesome idea.I have a question which is not so related to this topic. Would it be possible to create two (or three) different email formats for an order status email such as order completion?

    The scenario is, we ship some products for same day delivery and some on next day. So we would like to use an email that says ‘your order arrives today’ to the same-day-delievry customers and ‘you order arrives tomorrow’ to the next-day-delivery customers. It would be perfect if we simply could choose the email with a check box. Just dreaming though ๐Ÿ™‚

    1. Hello Joice, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

Questions? Feedback? Support? Leave your Comment Now!

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. 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 BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

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