FunnelKit Documentation
Get unstuck with our helpful reference material

FunnelKit Automations

Custom Code Snippets to Change the Design Template of the “Order Items” Merge Tag

FunnelKit Automations includes a merge tag to display order items in emails and other marketing content, such as WhatsApp. 

While the merge tag offers eight different ways to include order items in emails, we sometimes receive queries from users who want to make minor changes to the existing template. 

The most common customer requests are about the Product List (Line Separated) Template of Order Items merge tag. This template offers two line options: List Separated by Product Name and List Separated by Product Name and Quantity.

order items product list line seperated merget tag

In this documentation, we’ll share some common design changes customers often request and the custom code snippets you can use to implement them.

Use Case #1: Add a Line Break in Product List Line Separated (Product Names)

By default, this merge tag {{order_items template='line' type_line='separated-product-name'}} shows the product in a single line separated by “-”.

Note: The default code uses \n\r, which results in a line break in plain text (like a WhatsApp message). However, in email or HTML, no line break will appear.

default order details line seperated

To add a line break in the email body or any HTML content, you need to add the following code snippet. 

You can use a simple plugin like Code Snippets to add a custom code snippet to your WooCommerce store without editing any existing file. 

Note:You can use this filter “bwfan_line_separator” to add a line break.

Custom Code Snippet 

// Filter to customize the line separator output in the order item merge tag.
// This replaces the default line break with an HTML <br> tag.

add_filter('bwfan_line_separator', 'custom_output', 10, 3);
function custom_output($format, $product, $atts) {
    return '<br>'; // Adds a line break in HTML output (useful in emails or formatted messages)
}

Now, after adding the code snippet, here’s how the new order item data will appear with a line break using the same  {{order_items template='line' type_line='separated-product-name'}}  merge tag.

merge tag with new line

Note: It’s important to mention that in debug mode, the default output includes a line break because it’s plain text. On the other hand, with the custom code, a <br> tag is used. Don’t worry, it will display properly with a line break as shown above.

Here is a demo of the same merge tag with and without a custom code snippet. 

debug mode of merge tag

Use Case #2: Change The Symbol In Product List Line Separated (Product Name)

As you saw above, the products are separated by the symbol “-”.

Custom Code Snippet

// Filter to customize the symbol used to separate items in the order item merge tag.
// This replaces the default symbol (like a dash) with a custom one like ***

add_filter('bwfan_line_separator_symbol', 'bwfan_line_separator_symbol', 10, 3);
function bwfan_line_separator_symbol($format, $product, $atts) {
    return "***"; // Unicode emoji for green tick (U+2705)
}

Here’s how the output will look with the above code.

product line seperated merge tag with new line and custom symbol

Note: If you want to replace the default symbol with any emoji, you can use the Unicode. For instance, for a green tick emoji( ✅), use "\u{2705}";

order items with emojis

Use Case #3: Change Quantity Position In Product List Line Separated (Product Names And Quantity)

If you use the {{order_items template='line' type_line='separated-product-name-with-quantity'}} merge tag, then here is how the default outcome looks (first product name, then X, and then the quantity):

default product with quantity

But if you want to change the position of the quantity and put the quantity at the start, you need to use this code. 

Custom Code Snippet 

// Filter to customize how each product is formatted in the order item list.
// This changes the format to show quantity first, then an "X", followed by the product name.

add_filter( 'bwfan_line_separator_formate', function( $formatted_product, $separator, $product_name, $product_quantity, $attr ) {
    // Custom format: quantity first, followed by 'X' and then product name
    return "$product_quantity X $product_name";
}, 10, 5 );

Here is the output (using only this filter): 

custom quantity followed by product

Note: If you want the list to be separated by line breaks, add a custom symbol and adjust the quantity order; you need to use all three code snippets.

custom symbol, line break quantity first in order details merge tag

Use Case #4: Add Custom Design to Product Rows Template

If you choose the Product Row template for the Order Item merge tag, you need to use the following: {{order_items template='product-rows'}}.

Here’s how it will appear: 

order items row default view

Now, to add custom design to it, you need to change the path. 

By using this filter, you can change the template path

apply_filters( 'bwfan_cart_items_template_path', $file_path, $cart, $data, $attr )

Here is the custom code. 

bwfan_cart_items_template_path
add_filter('bwfan_cart_items_template_path', function($file_path) {
    // Force plain text output
    header('Content-Type: text/plain');
    return get_stylesheet_directory() . '/bwfan-templates/plain-text-template.php';
});

Ready to Transform Your Store?

Join 38,315+ successful store owners who trust FunnelKit to power their businesses.
Conversion Optimized Checkout Pages
Increase Revenue with Smart Upsells
Capture Emails & Recover Abandoned Carts
Automate Winbacks & Repeat Sales
877+ 5 star reviews on WordPress.org
Transform your store to power your business with FunnelKit
877+
 Reviews
4.9
🚀 Maximize Your Profit with FunnelKit – Highest Rated with 877+ 5-Star Reviews
Get Started
chevron-downarrow-right