Customize your tracking page via CSS codes

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

20230116_152427.png

Step 2
Enter the CSS codes here, then publish.

20230116_153608.png

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.

20230116_153325.png


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

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;}