Change customer order status color
⚠️ 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:
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
Thank you!