Question

How do I loop through line items in a WooCommerce order in HTML email?

  • 23 August 2023
  • 7 replies
  • 166 views

I’m trying to create a zap that fires an “order shipped” email when I update the status in Woocommerce that sends via Brevo.


To do this I have to create a HTML email template and insert the dynamic data fields where necessary.

I have done all of this fine, except I cannot figure out how to create a loop for my HTML table to output the line items for name, quantity and image of each product ordered. 

I currently have: 

 

{% for line_item in line_items %}<tr><td> <table class=t308 role=presentation cellpadding=0 cellspacing=0 align=center><tr> <!--[if !mso]><!--><td class=t309 style="background-color:#F0F0F0;overflow:hidden;width:560px;padding:20px 20px 20px 20px;"> <!--<![endif]--> <!--[if mso]><td class=t309 style="background-color:#F0F0F0;overflow:hidden;width:600px;padding:20px 20px 20px 20px;"><![endif]--> <div class=t315 style="display:inline-table;width:100%;text-align:left;vertical-align:middle;"> <!--[if mso]> <table role=presentation cellpadding=0 cellspacing=0 align=left valign=middle><tr><td class=t320 style="width:10px;" width=10></td><td width=84.33566 valign=middle><![endif]--> <div class=t321 style="display:inline-table;text-align:initial;vertical-align:inherit;width:21.22959%;max-width:221px;"><div class=t322 style="padding:0 10px 0 10px;"> <table role=presentation width=100% cellpadding=0 cellspacing=0 class=t323><tr> <td class=t324><a href=1. Line Items Image Src: https://merchmi…d-with-RFID.jpg style="font-size:0px;"><img class=t325 style="display:block;border:0;height:auto;width:100%;Margin:0;max-width:100%;" width=84.33566433566433 /></a></td> </tr></table> </div></div> <!--[if mso]> </td><td class=t320 style="width:10px;" width=10></td><td class=t328 style="width:10px;" width=10></td><td width=335.66434 valign=middle><![endif]--> <div class=t329 style="display:inline-table;text-align:initial;vertical-align:inherit;width:78.77041%;max-width:820px;"><div class=t330 style="padding:0 10px 0 10px;"> <table role=presentation width=100% cellpadding=0 cellspacing=0 class=t331><tr> <td class=t332 style="overflow:hidden;"><table role=presentation width=100% cellpadding=0 cellspacing=0><tr><td> <table class=t337 role=presentation cellpadding=0 cellspacing=0 align=center><tr> <!--[if !mso]><!--><td class=t338 style="width:600px;"> <!--<![endif]--> <!--[if mso]><td class=t338 style="width:600px;"><![endif]--> <h1 class=t344 style="margin-bottom:0;Margin-bottom:0;font-family:BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif,'Oswald';line-height:16px;font-weight:700;font-style:normal;font-size:14px;text-decoration:none;text-transform:none;letter-spacing:-1.56px;direction:ltr;color:#1A1A1A;text-align:left;mso-line-height-rule:exactly;mso-text-raise:1px;">1. Line Items Name: Premium Printed…RFID Smartcard</h1></td> </tr></table> </td></tr><tr><td><div class=t336 style="mso-line-height-rule:exactly;mso-line-height-alt:10px;line-height:10px;font-size:1px;display:block;"> </div></td></tr><tr><td> <table class=t347 role=presentation cellpadding=0 cellspacing=0 align=center><tr> <!--[if !mso]><!--><td class=t348 style="width:600px;"> <!--<![endif]--> <!--[if mso]><td class=t348 style="width:600px;"><![endif]--> <h1 class=t354 style="margin-bottom:0;Margin-bottom:0;font-family:BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif,'Source Sans 3';line-height:22px;font-weight:500;font-style:normal;font-size:14px;text-decoration:none;text-transform:uppercase;letter-spacing:-0.56px;direction:ltr;color:#1A1A1A;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;"><span class=t394 style="margin-bottom:0;Margin-bottom:0;font-weight:400;text-transform:none;mso-line-height-rule:exactly;">Quantity</span>: 1. Line Items Quantity: 50,200</h1></td> </tr></table> </td></tr><tr><td><div class=t355 style="mso-line-height-rule:exactly;mso-line-height-alt:15px;line-height:15px;font-size:1px;display:block;">&nbsp;</div></td></tr><tr><td> <table class=t357 role=presentation cellpadding=0 cellspacing=0 align=center><tr> <!--[if !mso]><!--><td class=t358 style="border-top:1px solid #CCCCCC;width:600px;padding:15px 0 0 0;"> <!--<![endif]--> <!--[if mso]><td class=t358 style="border-top:1px solid #CCCCCC;width:600px;padding:15px 0 0 0;"><![endif]--> <h1 class=t364 style="margin-bottom:0;Margin-bottom:0;font-family:BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif,'Source Sans 3';line-height:22px;font-weight:400;font-style:normal;font-size:14px;text-decoration:none;text-transform:none;letter-spacing:-0.56px;direction:ltr;color:#1A1A1A;text-align:left;mso-line-height-rule:exactly;mso-text-raise:2px;">Subtotal: £1. Line Items Subtotal: 89.50,578.00</h1></td> </tr></table> </td></tr></table></td> </tr></table> </div></div> <!--[if mso]> </td><td class=t328 style="width:10px;" width=10></td> </tr></table> <![endif]--> </div></td> </tr></table> </td></tr>{% endfor %}

But nothing is outputted on the test email at all (not even the table) - so I’m presuming maybe “line_items” is not the correct variable to call??
 


This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

7 replies

Userlevel 7
Badge +14

Hi @theskywasgreen 

Good question.

Please post detailed screenshots with how your Zap steps are configured to help give us proper context.

The actual steps of the Zap don’t really affect the logic - all of this logic needs to be within the HTML coding of the email itself but I need to know which variables Zapier uses for these items in order to loop through them.

 

I’ve attached a screen shot for some clarity if this helps but I am not sure it will.

 

Zapier provides easy to input variables from a dropdown which it has pulled from Woocommerce, but this isn’t helpful when trying to figure out what to actually refer to in the loop itself (hopefully Screenshot 2 clarifies what I mean where it says line items name).

 

Screenshot 1:

 

Screenshot 2:

 

Thankyou

Userlevel 7
Badge +14

@theskywasgreen 

Can you post screenshots with how the email should look when there are multiple line items. (not the HTML)

For example, it looks like there are 2 line items with quantity 50 and 200. Is that right?

It’s likely you will need to use a Code step to parse/prep the line items data for use in the HTML.

 

Yes, there are two line items in this test order!

So this is my HTML email template design with the looping attached - 

 

And here is the email that comes through during the test:

As you can see, it skips over the table completely and jumps to the next section.

Thanks,

Nicky

Userlevel 7
Badge +14

@theskywasgreen 

When you say “looping” can you be more specific with screenshot to clarify what you mean?

 

Hi Troy,

The email designer has this dynamic content for looping data so this is what I input in the for loop statement. 

Does this help?

 

Thankyou!

Userlevel 7
Badge +14

@theskywasgreen 

I believe those dynamic email tags for Brevo will only work if the info is already in Brevo for the recipient to use in the email template.

Help articles from Brevo:

https://help.brevo.com/hc/en-us/articles/360000591680-Repeat-a-block-of-items-in-your-emails

https://help.brevo.com/hc/en-us/articles/4403454001426-Advanced-Repeat-a-block-of-items-using-for-loops