⚠️ Kindly take note :

All code edited will need to re-edit code again if you switch to a new theme template
We do not allow to change or edit the code for the checkout page (which include shipping & payment method) due to security reasons
These steps require to edit coding file that found in the new theme, example: Aroma, Kiddy, Vivid & etc. For 2020 or older themes, may refer this link

In this article:

Change Online Store order status background color.
Change Online Store order status font color.


This customize is to changing order status color at customer account that login from online store to show designated color that suit your businesses. There's 3 types of status in general:
Paid / Fulfilled status (complete order)
Unpaid / Unfulfilled status (pending order)
Cancelled status (Void order)

1. Change Online Store order status background color

Step 1 : From EasyStore admin panel > Channels > Online Store > Edit Source > assets > customer.css > look for:
label-tag (indicate complete order status color)
label-tag.label-tag-warning (indicate pending order status color)
label-tag.label-tag-alert (indicate Void order status color)



Step 2 : change background-color to desired color by searching color code from this website.



There's 2 type of color code being use:
RGBA = Red, Green, Blue, Alpha (Aplha = color transperency, 0 means transperent, 1 = means solid color), example: rgba(0,0,0,0.1)
HEX = Hex codes are a hexadecimal format for identifying colors in HTML, CSS and SVG, example: #faef9b

Step 3: Save.

Example:

Before


After

2. Change Online Store order status font color.

Step 1 : From EasyStore admin panel > Channels > Online Store > Edit Source > assets > customer.css > look for:
label-tag (indicate complete order status color)
label-tag.label-tag-warning (indicate pending order status color)
label-tag.label-tag-alert (indicate Void order status color)



Step 2 : Add this code color: white; to each line that you like to change the font color, may use basic color command (Black, Blue, White, Green, Red and etc)



Example:

Updated on: 23/10/2023