Add Order Status and Due Date to customer account page

When the  status or due date are set for an order we add corresponding tags to the order is Shopify.

The format of the tags added to the are:

w3os:Order Status

w3dd:2023-01-13

"w3os:" is the prefix we use for the order Status. The text after the : is the public name of the status.

"w3dd:" is the prefix we use for the due date. The date that follows is in YYYY-MM-DD format.

 You can add the status and due date to the customer order template by creating a snippet to display each tag and then adding the snippet to your template.

To Display the Custom Status

Steps:

• Create a new snippet.
• Name it "w3-order-status" (you can use any name you'd like)
• add the following code to the snippet

{% for tag in order.tags %}
  {% if tag contains 'w3os' %}
    {% assign status = tag | replace: "w3os:", "" %}
    Order Status: {{ status }}
  {% endif %}
{% endfor %}

• press save
• open the customers/order template. In most 2.0 themes the file is sections > main-order.liquid. You can find the name of the section or template by looking in the templates > customers/order.json file. If you are using an older theme, the file you are looking for is most likely templates > customers/order.liquid
• copy the following code where you want to display the order status

 {%- include 'w3-order-status' -%}

To Display the Due Date

Steps:

• Create a new snippet.
• Name it "w3-due-date" (you can use any name you'd like)
• add the following code to the snippet

{% for tag in customer.order.tags %}
  {% if tag contains 'w3dd' %}
    {% assign date = tag | replace: "w3dd:", "" %}
    Due Date: {{ date }}
  {% endif %}
{% endfor %}

• press save
• open the customers/order template. In most 2.0 themes the file is sections > main-order.liquid. You can find the name of the section or template by looking in the templates > customers/order.json file. If you are using an older theme, the file you are looking for is most likely templates > customers/order.liquid
• copy the following code where you want to display the order status

 {%- include 'w3-due-date' -%}

If you would like to change the date format you can use the following snippet instead of the previous one. It will split the date string into an array which you can use to re-order the parts of the date into any format you'd like. the snippet below will result in DD-MM-YYYY

[0] - YYYY

[1] - MM

[2] = DD

{% for tag in customer.order.tags %}
  {% if tag contains 'w3dd' %}
    {% assign date = tag | replace: "w3dd:", "" %}
    {% assign dateArray = date | split: "-" %}
    Due Date: {{ dateArray[2]}}-{{ dateArray[1]}}-{{ dateArray[0]}}
  {% endif %}
{% endfor %}