How to add a Cainiao tracking page (unbranded) to your site

[the_lyall]

I’ve seen a few different posts about this while searching for a solution myself so I’ve made my own solution and thought I’d share it here.

There are a few reasons why I wanted to use Cainiao rather than 17Track:

1. 17Track includes ads on the page which show on your site if you use an iframe.
2. The Cainiao tracking details are more accurate, detailed, recent and easier to understand (in my experience). It also has (on desktop) the nice progress animation at the top.
3. If you or your customer Googles '17Track' it brings up a lot of negative reviews saying that it's a scam. Obviously just because 17Track is used by scammers doesn't mean it's a scam itself, but the negative reviews can lower customer confidence in your own site.

Essentially the process involves adding the Cainiao tracking page in an iframe and automatically taking the tracking number from the query string and adding it to the iframe URL, so you can use it as the tracking page for email and My Account links without the customer having to enter their tracking number.

For example, you can use a tracking link like this: https://ecorelos.com/order-tracking/?LN844243263CN



You will notice that I’ve cropped the tracking after the most recent events and that is deliberate. If you leave enough space (on desktop view only) the page will add a footer section which includes links to AliExpress etc. which I don’t want. If you crop the frame the page doesn’t add the footer as it won’t fit in the frame. On mobile view it doesn’t show anyway.

STEPS:

• Create a tracking page
• Create the dynamic iframe link (works with any carrier)
• Add the link to the page
• Update the plugin tracking setting
• Add CSS

• Create a tracking page

In WooCommerce go to Pages > Add New and create a page called something logical. I used ‘Order Tracking’ but you can use anything you want.
That’s all for now. If you have any SEO or XML Sitemap plugins, update those settings so that this new page isn’t indexed as you don’t want it to be crawled.

• Create the dynamic iframe link

For this you’ll need to add the plugin ‘Insert PHP Code Snippet’. Once added, go to the PHPCode Snippets settings and click ‘Add New PHP Code Snippet’.

Give it a name – I called mine ‘TrackingFrame’ but you can call it anything.

For the content, add the following:

<iframe class="trackingframe" src="https://global.cainiao.com/detail.htm?mailNoList=<?php echo $_SERVER['QUERY_STRING']; ?>" width="100%" frameborder="0" scrolling="no">

Explanation:
class="trackingframe" gives the frame a CSS class so you can target it with CSS later

src="https://global.cainiao.com/detail.htm?mailNoList= is the URL of the tracking page to use, minus the tracking number. You can use any carrier tracking link here

<?php echo $_SERVER['QUERY_STRING']; ?> is the PHP code which takes whatever query string is in the current page URL (i.e. whatever is after a question mark like google.com?1234 would mean ‘1234’ is the query string) and adds it to the iframe URL.

width="100%" frameborder="0" scrolling="no" are iframe attributes to make the frame full width, without a border and non-scrollable.

Save the snippet and the plugin will show you the shortcode you can use to add that snippet to a page (in my case [xyz-ips snippet="TrackingFrame"]).

• Add the link to the page

Go back to the empty tracking page you created and insert the shortcode you just created into the page body.

Now when you visit that page, the iframe will look at the page URL and copy the query string. So if you add a query string such as tracking.com/mypage?CN1234 the iframe URL would be https://global.cainiao.com/detail.htm?mailNoList=CN1234.

If you access the page directly (without a query string) it will show the Cainiao error/no tracking page. Therefore I don’t have the page accessible through the front end, only via the My Account tracking links and the email tracking links.

• Update the plugin tracking setting

Go to the AliDropship settings and enter your new tracking page as the custom tracking link. My example from the start would be https://ecorelos.com/order-tracking/? and the plugin will add the tracking number to the end of the URL

• Add CSS

Now this part will vary heavily depending on which theme you’re using. For example, I added a negative margin to the top of the iframe to ‘slide it under’ the header to hide the top banner. However you can also add a 100% width div to the page to overlap the header instead (which is what I did first but then changed my mind).
Without this part, the page will work but will be Cainaio branded. My CSS is below as an example:

.trackingframe{
    margin-top:-80px; //move it up 80px to hide the header
    height:100%;
    width:100%;
    z-index:-1; //make it go under the header instead of over it
    overflow-x:hidden; //hide the horizontal scrollbar
    min-height:585px; //set the height that I want to show
}

The height of the header is 80px on desktop and 50px on mobile, so use CSS media queries to target smaller screens separately.

That's all!

 

[Cloud-Miner]

You're a legend, mate. This is exactly what I was looking for.

 

[Enov]

Thanks for the tip!

 

[Cloud-Miner]

Did anyone face negative repercussions (abandoned carts, refund requests, cancelled orders etc) so far since the Cainiao iframe shows China as the origin of shipping destination?

Granted, customers may still know the origin thanks to the packaging but could the very name of China (in the present world scenario) on the tracking orders page give them a fright?

 

[Mar]

Did anyone face negative repercussions (abandoned carts, refund requests, cancelled orders etc) so far since the Cainiao iframe shows China as the origin of shipping destination?

Granted, customers may still know the origin thanks to the packaging but could the very name of China (in the present world scenario) on the tracking orders page give them a fright?

Personally, I don't see any issue with products originating from China. It is something to live with. If you check your gadgets, more often than not, they are made in China. I believe, people accept the fact.

 

[Cloud-Miner]

If you check your gadgets, more often than not, they are made in China. I believe, people accept the fact.

True, do you also mention China in your shipping policy page just so the customers get a fair idea beforehand where the products they are purchasing are sourced from? IMO it helps in establishing 'trust'.

 

[Mar]

True, do you also mention China in your shipping policy page just so the customers get a fair idea beforehand where the products they are purchasing are sourced from? IMO it helps in establishing 'trust'.

I don't advertise China anywhere in my sites, but I don't spend time and effort to hide, e. g. Ship from China and other signs of China. If anything China is bad, AliExpress which everybody know originated from China and is China until now, would not have succeeded.

 

[the_lyall]

Did anyone face negative repercussions (abandoned carts, refund requests, cancelled orders etc) so far since the Cainiao iframe shows China as the origin of shipping destination?

Granted, customers may still know the origin thanks to the packaging but could the very name of China (in the present world scenario) on the tracking orders page give them a fright?

They don't see the tracking page until after their order has been placed and shipped, so too late to abandon cart or cancel the order once shipped. I don't mention China on the site but if you read between the lines ('shipping direct from the manufacturer/supplier' and the long delivery times) it kinda says so. I'm not stating it but I'm not going out of my way to hide it and if anyone asks I will always tell them the truth.

 

[the_lyall]

Did anyone face negative repercussions (abandoned carts, refund requests, cancelled orders etc) so far since the Cainiao iframe shows China as the origin of shipping destination?

Granted, customers may still know the origin thanks to the packaging but could the very name of China (in the present world scenario) on the tracking orders page give them a fright?

I just re-read the last part... If by 'present world scenario' you mean COVID-19 then I don't think it's an issue unless the customer is particularly racist (might be a strong word to use but I can't think of a better one). In terms of COVID I'd be more worried about a parcel coming from the US or UK at the moment!

 

[Mar]

They don't see the tracking page until after their order has been placed and shipped, so too late to abandon cart or cancel the order once shipped. I don't mention China on the site but if you read between the lines ('shipping direct from the manufacturer/supplier' and the long delivery times) it kinda says so. I'm not stating it but I'm not going out of my way to hide it and if anyone asks I will always tell them the truth.

If customers really want to find out, they will know that the product come from China and that is even before the order is shipped. That is why again, I don't spend time and effort to hide it.

 

[Rahm]

Personally, I don't see any issue with products originating from China. It is something to live with. If you check your gadgets, more often than not, they are made in China. I believe, people accept the fact.

Yes, I agree. It is stated in my website that the product are kept in warehouse in China. I am more concern of products coming from nations badly hit by covid-19 at the time being. U.S.A still at the top of the charts. Some of my parcel took 7 weeks to reach my customer in Vancouver, Canada.

 

[Direct Webstore]

do you also mention China in your shipping policy page

I do.

 

[Enov]

Just a suggestion, add a noindex/nofollow to the tracking page if you have custom integrated one, to avoid increase in bounce rate.

 

[antelope04]

I'm two years late to this, but I have some modifications that I based off of @the_lyall's awesome solution.

I wanted a more white-label solution, so I found issue with embedding Cainiao, even though that animation at the top is cool.

Even with scolling="no" and all the other margin/size modifications to hide links, the link to the actual cainiao page is still there with the static bottom bar (copy link)


So this is what I did:



I'm using two (optionally three) plugins:

1. Woody Snippets
2. Insert PHP Code Snippet
3. Header Footer Code Manager by 99robots (optional for last step)

<iframe class="trackingframe" src="https://track.trackingmore.com/plugins.php?express=cainiao&<?php echo $_SERVER['QUERY_STRING']; ?>" width="100%" frameborder="0" scrolling="no"></iframe>

The main differences are that I can hide their copy link & logo better, plus because of what I'm about to show soon, the link is no longer https://example.com/track/?LP9283220828, it is https://example.com/track/?tracknumber=LP9283220828.

Here's my CSS, but as you know, the margin depends on the page you're inserting it in. The min-height is perfect for hiding their copy link banner.

.trackingframe {
    margin-top: -60px;
    min-height: 540px;
    width: 100% !important;
    z-index: -1 !important;
    overflow-x: hidden !important;
}

I also wanted a search bar on my tracking page because sometimes orders have more than 1 tracking code and I didn't want customers messing around with the URL. This is how I achieved that:

If you don't want a search bar, stop here and follow these steps, otherwise skip this part:
You don't need to have your URL look like https://example.com/track/?tracknumber=LP9283220828. Specifically, you could have it the exact same way @the_lyall did it, except instead of Cainiao, it would be TrackingMore. The only reason mine adds the tracknumber=(tracking number here) is because I wanted the search functionality and this was the easiest way. So unless you like the way that looks, here's how to change it:

1. Change src="https://track.trackingmore.com/plugins.php?express=cainiao&<?php echo $_SERVER['QUERY_STRING']; ?>" in the iframe to src="https://track.trackingmore.com/plugins.php?express=cainiao&tracknumber=<?php echo $_SERVER['QUERY_STRING']; ?>"
2. Update your AliDropship settings with the correct URL so that your customers get a working link. It should look something like this: https://example.com/tracking/?{tracking_number}

How to add a search bar

1. In Woody Snippets, add a new JS snippet and add this code:
   

       function trackOrders(){
       var action_src = "https://example.com/tracking?" + document.getElementsByName("tracknumber")[0].value;
       var trackbar = document.getElementById('trackbar');
       your_form.action = action_src ;
   }

2. Linking type: Inline code
3. Name it something and Publish. I called mine TrackSearch
4. Copy the shortcode and place it somewhere on the page above where you want your search bar. In Elementor, I added it as a shortcode element and placed it in the same row but above the shortcode for the search functionality
5. In PHP Code Snippets, create a new snippet and name it what you want. Mine is TrackingSearchBar. Add:
   

   <div class="sbar">
   <form id="trackbar" onsubmit="trackOrders()">
   <input type="text" value="<?php echo $_GET['tracknumber']; ?>" class="stext" name="tracknumber" placeholder="Search for your tracking number..." required>
   <input type="submit" class="sbutton" value="Search">
   </form>
   </div>

   I wanted the search bar to have the tracking number filled in already when the customer clicks the tracking link so I added value="<?php echo $_GET['tracknumber']; ?>". <?php echo $_GET['tracknumber']; ?> grabs whatever the tracknumber equals.
6. Add the TrackingSearchBar shortcode to the page, somewhere beneath the JS shortcode we created above. The shortcode will look like [xyz-ips snippet="TrackingSearchBar"]
7. Important to note: I overlayed the iframe beneath the search bar, which is at the top, so if you want to do the same, set the background of the search bar's parent div to white and z-index: 2. As long as you set the iframe's z-index lower, it'll work.
8. My theme automatically set the styles for the inputs and button, so all I had to do was set the width:
   

   .stext {
       width: 50vw !important;
   }

All the above does is change the end part of the URL - the part after tracknumber= - to whatever the customer inputs into the search field. For example, if they search "hello123", the URL would look like https://example.com/track/?tracknumber=hello123.

Copy link functionality

I liked the "copy link" functionality both Cainiao and TrackingMore have, so I added my own. This is when you'll use the third optional plugin, so if you want to do this, you'll need that.

Here's how I did it:

1. Head over to Header Footer Code Manager and add a snippet
2. I called mine "Copy to clipboard"
3. Type: HTML, Specific Pages, choose your Tracking page, Location: Header
4. I'm using ClipboardJS, so I'm loading the library from an external CDN with this code:
   

   <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>

5. Publish
6. Create a new PHP snippet with Insert PHP Code Snippet with this code:
   

   <script>
   new ClipboardJS('.cpbtn');
   </script>
   
   <style>
   .cpbtn{color:#ffffff;background-color:#44bdf2;transition:0.2s all ease;}#foo{width:300px !important;}
   </style>
   
   <!-- Target -->
   <input type="text" id="foo" value="https://example.com/tracking/?tracknumber=<?php echo $_GET['tracknumber']; ?>">
   
   <!-- Trigger -->
   <button class="cpbtn" data-clipboard-target="#foo">
       Copy your tracking link
   </button>

   <?php echo $_GET['tracknumber']; ?> - inputs the tracking number at the end
7. Change the .cpbtn CSS styles to whatever works for you, or don't - it's up to you

Final Step

Don't forget to update your AliDropship settings with the correct URL so that your customers get a working link. It should look something like this: https://example.com/tracking/?tracknumber={tracking_number}

Finishing Touches

If you want to hide the iframe when there's no tracking code, you can use this simple CSS to do so:

iframe[src="https://track.trackingmore.com/plugins.php?express=cainiao&"] {
          display: none;  
    }

What this does is hide the iframe when tracknumber=(tracking code) doesn't exist in the iframe. Of course if the URL still has tracknumber= but no tracking number after the =, the iframe will not be hidden. There are definitely ways to solve this issue but this is good enough for me.

Done!

PS. Thanks @the_lyall for your guide, it really helped me a lot. Funnily enough, the first thing I noticed was that you're using the same theme as me. It's a good theme - but if you want customers to be able to scroll through the tracking timeline on your iframe, but not the page itself, set your z-index to 0 or above. Also, your iframe doesn't have a closing tag, which breaks the footer of your page.

 

[chris37]

I'm two years late to this, but I have some modifications that I based off of @the_lyall's awesome solution.

I wanted a more white-label solution, so I found issue with embedding Cainiao, even though that animation at the top is cool.

Even with scolling="no" and all the other margin/size modifications to hide links, the link to the actual cainiao page is still there with the static bottom bar (copy link)
View attachment 15706

So this is what I did:

View attachment 15707

I'm using two (optionally three) plugins:

1. Woody Snippets
2. Insert PHP Code Snippet
3. Header Footer Code Manager by 99robots (optional for last step)

<iframe class="trackingframe" src="https://track.trackingmore.com/plugins.php?express=cainiao&<?php echo $_SERVER['QUERY_STRING']; ?>" width="100%" frameborder="0" scrolling="no"></iframe>

The main differences are that I can hide their copy link & logo better, plus because of what I'm about to show soon, the link is no longer https://example.com/track/?LP9283220828, it is https://example.com/track/?tracknumber=LP9283220828.

Here's my CSS, but as you know, the margin depends on the page you're inserting it in. The min-height is perfect for hiding their copy link banner.

.trackingframe {
    margin-top: -60px;
    min-height: 540px;
    width: 100% !important;
    z-index: -1 !important;
    overflow-x: hidden !important;
}

I also wanted a search bar on my tracking page because sometimes orders have more than 1 tracking code and I didn't want customers messing around with the URL. This is how I achieved that:

If you don't want a search bar, stop here and follow these steps, otherwise skip this part:
You don't need to have your URL look like https://example.com/track/?tracknumber=LP9283220828. Specifically, you could have it the exact same way @the_lyall did it, except instead of Cainiao, it would be TrackingMore. The only reason mine adds the tracknumber=(tracking number here) is because I wanted the search functionality and this was the easiest way. So unless you like the way that looks, here's how to change it:

1. Change src="https://track.trackingmore.com/plugins.php?express=cainiao&<?php echo $_SERVER['QUERY_STRING']; ?>" in the iframe to src="https://track.trackingmore.com/plugins.php?express=cainiao&tracknumber=<?php echo $_SERVER['QUERY_STRING']; ?>"
2. Update your AliDropship settings with the correct URL so that your customers get a working link. It should look something like this: https://example.com/tracking/?{tracking_number}

How to add a search bar

1. In Woody Snippets, add a new JS snippet and add this code:
   

       function trackOrders(){
       var action_src = "https://example.com/tracking?" + document.getElementsByName("tracknumber")[0].value;
       var trackbar = document.getElementById('trackbar');
       your_form.action = action_src ;
   }

2. Linking type: Inline code
3. Name it something and Publish. I called mine TrackSearch
4. Copy the shortcode and place it somewhere on the page above where you want your search bar. In Elementor, I added it as a shortcode element and placed it in the same row but above the shortcode for the search functionality
5. In PHP Code Snippets, create a new snippet and name it what you want. Mine is TrackingSearchBar. Add:
   

   <div class="sbar">
   <form id="trackbar" onsubmit="trackOrders()">
   <input type="text" value="<?php echo $_GET['tracknumber']; ?>" class="stext" name="tracknumber" placeholder="Search for your tracking number..." required>
   <input type="submit" class="sbutton" value="Search">
   </form>
   </div>

   I wanted the search bar to have the tracking number filled in already when the customer clicks the tracking link so I added value="<?php echo $_GET['tracknumber']; ?>". <?php echo $_GET['tracknumber']; ?> grabs whatever the tracknumber equals.
6. Add the TrackingSearchBar shortcode to the page, somewhere beneath the JS shortcode we created above. The shortcode will look like [xyz-ips snippet="TrackingSearchBar"]
7. Important to note: I overlayed the iframe beneath the search bar, which is at the top, so if you want to do the same, set the background of the search bar's parent div to white and z-index: 2. As long as you set the iframe's z-index lower, it'll work.
8. My theme automatically set the styles for the inputs and button, so all I had to do was set the width:
   

   .stext {
       width: 50vw !important;
   }

All the above does is change the end part of the URL - the part after tracknumber= - to whatever the customer inputs into the search field. For example, if they search "hello123", the URL would look like https://example.com/track/?tracknumber=hello123.

Copy link functionality

I liked the "copy link" functionality both Cainiao and TrackingMore have, so I added my own. This is when you'll use the third optional plugin, so if you want to do this, you'll need that.

Here's how I did it:

1. Head over to Header Footer Code Manager and add a snippet
2. I called mine "Copy to clipboard"
3. Type: HTML, Specific Pages, choose your Tracking page, Location: Header
4. I'm using ClipboardJS, so I'm loading the library from an external CDN with this code:
   

   <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>

5. Publish
6. Create a new PHP snippet with Insert PHP Code Snippet with this code:
   

   <script>
   new ClipboardJS('.cpbtn');
   </script>
   
   <style>
   .cpbtn{color:#ffffff;background-color:#44bdf2;transition:0.2s all ease;}#foo{width:300px !important;}
   </style>
   
   <!-- Target -->
   <input type="text" id="foo" value="https://example.com/tracking/?tracknumber=<?php echo $_GET['tracknumber']; ?>">
   
   <!-- Trigger -->
   <button class="cpbtn" data-clipboard-target="#foo">
       Copy your tracking link
   </button>

   <?php echo $_GET['tracknumber']; ?> - inputs the tracking number at the end
7. Change the .cpbtn CSS styles to whatever works for you, or don't - it's up to you

Final Step

Don't forget to update your AliDropship settings with the correct URL so that your customers get a working link. It should look something like this: https://example.com/tracking/?tracknumber={tracking_number}

Finishing Touches

If you want to hide the iframe when there's no tracking code, you can use this simple CSS to do so:

iframe[src="https://track.trackingmore.com/plugins.php?express=cainiao&"] {
          display: none; 
    }

What this does is hide the iframe when tracknumber=(tracking code) doesn't exist in the iframe. Of course if the URL still has tracknumber= but no tracking number after the =, the iframe will not be hidden. There are definitely ways to solve this issue but this is good enough for me.

Done!

PS. Thanks @the_lyall for your guide, it really helped me a lot. Funnily enough, the first thing I noticed was that you're using the same theme as me. It's a good theme - but if you want customers to be able to scroll through the tracking timeline on your iframe, but not the page itself, set your z-index to 0 or above. Also, your iframe doesn't have a closing tag, which breaks the footer of your page.

WOW i'm impressed. Good work .

One question only that bother me.

Funnily enough, the first thing I noticed was that you're using the same theme as me.

How are using same theme as him ? That is a custom theme.

I even check the stylesheet and is unique . I like that theme too

But again good work

 

[antelope04]

WOW i'm impressed. Good work .

One question only that bother me.


How are using same theme as him ? That is a custom theme.

I even check the stylesheet and is unique . I like that theme too


But again good work

Thank you! I'm happy I was able to help

The theme he and I are using is called Shoptimizer. The best way to check which theme someone is using is by going to the home page, or wherever you know WordPress is installed, checking the source, and searching for "themes". You'll find something like this:



As you can tell, after /wp-content/themes/, it says "shoptimizer".

 

[chris37]

Thank you! I'm happy I was able to help

The theme he and I are using is called Shoptimizer. The best way to check which theme someone is using is by going to the home page, or wherever you know WordPress is installed, checking the source, and searching for "themes". You'll find something like this:

View attachment 15709

As you can tell, after /wp-content/themes/, it says "shoptimizer".

The_iyal deleted the name from his theme, so was not appearing in the search name of the analize theme.. Nice you locate the file..

I will check that theme. Thank for pointing out.

 

[kospui]

Hello, how are you? Thank you very much @the_lyall and @antelope04 for the contribution and explanation on how to create a custom page for those of us who use the alidropship plugin.

I want to ask you for help because I have followed all the steps exactly and I am having a serious problem. In my case I have followed the steps described by @the_lyall and I have used CAINIAO. On the one hand, I have correctly created the order tracking page, I have used the "Insert PHP Code Snippet" plugin and I have inserted the PHP through a shortcode.

The serious problem I have is that, although the PHP seems to work fine, it seems that there is something that breaks the web and makes the dropdown menu stop working, the footer disappears, etc. Could it be that the PHP generates an error and that other PHP's on the web are not being executed?

I hope you can help me. The template I use is Woodmart, I have all the plugins updated and also the platform. I attach some screenshots.

 

[antelope04]

but if you want customers to be able to scroll through the tracking timeline on your iframe, but not the page itself, set your z-index to 0 or above. Also, your iframe doesn't have a closing tag, which breaks the footer of your page.

The serious problem I have is that, although the PHP seems to work fine, it seems that there is something that breaks the web and makes the dropdown menu stop working, the footer disappears, etc. Could it be that the PHP generates an error and that other PHP's on the web are not being executed?

Follow my steps instead of lyall's because mine is updated and fixes things that are broken with lyall's steps. (Make sure the bolded sentence above is not the issue.)

 

[kospui]

Follow my steps instead of lyall's because mine is updated and fixes things that are broken with lyall's steps. (Make sure the bolded sentence above is not the issue.)

Hello @antelope04 , how are you? Thank you very much for the answer, you have helped me a lot and I have managed to correctly implement your system through TrackingMore.

One last question, I have tried to somehow translate the iframe into Spanish but it has been impossible for me. I have also looked on the Trackingmore website to find out if the possibility existed, but I don't see it. Do you know if there is any possibility that the iframe shows the results in Spanish? I know that the Trackingmore website can be translated into Spanish and other languages, I'm not sure if this possibility also exists for its iframes.

Any information will be of great help. Thank you very much!