By default, the tracking page will auto-inherit styles from your store theme. If you want to do some custom changes, here is the instruction.

Note: some basic understandings of CSS code may be required, if you can't figure it out, don't hesitate to contact us directly, we are always glad to help you.

Step 1
Navigate to your WooCommerce admin → Appearance → Themes  → Customize → Additional CSS

Step 2
Enter the CSS codes here, then publish.

Step 3
Then, you can see the corresponding effect on the Tracking page in your store.

In this case, we filled in the CSS code to change the color of the icons above progress bar.

Here is some of the CSS code we have prepared for you:

• Center the tracking section
• Customize the input fields
• Customize the track button
• Add some padding to the top of the tracking page
• Solve the issue that the order status's text is overlapped
• Change the color of the icons above progress bar
• Change the color of tracking detailed info
• Hide SKU

Center the tracking section

.pp-tracking-section .tracking-form .box-form {text-align: center}

Customize the input fields

.pp-tracking-section .tracking-form .box-form input {padding: 10px; border: 1px solid #e6e6e6}

Customize the track button

.pp-tracking-section #pp-btn-trk-1, .pp-tracking-section #pp-btn-trk-2 {background: #000; border: 1px solid #000; color: #FFFFFF; border-radius: 2px; padding: 10px 22px}

Add some padding to the top of the tracking page

@media screen and (min-width: 768px) {.pp-tracking-section {padding-top: 160px !important}}

Solve the issue that the order status's text is overlapped

.pp-tracking-section .progress-bar-style .progress-bar-node > span > b {width: 108px; word-wrap: break-word !important}

Change the color of the icons above progress bar

.pp-tracking-section .progress-bar-style .progress-bar-node svg {fill: #ffffff !important}

.pp-tracking-section .progress-bar-style .progress-bar-node-disabled svg {fill: #eeeeee !important}

Change the color of tracking detailed info

.pp-tracking-section .pp_tracking_result_parent {color:#000;}

Hide SKU

.pp_tracking_info_img__sku {display: none !important;}