How to Embed Track Button Widget to WooCommerce?

Trackdog supports to embed Track Button Widget to your own website now. This tracking widget allows your buyers to enter a tracking number to track shipment. Here, I will show you how to add Track Button to WooCommerce.

Firstly, log in to your WordPress Admin Panel > Pages, and click Add New.

Here, you can add the title ‘Track Your Order’, and select Custom HTML Formatting.

Then you can go to Trackdog, there are three Track Button Styles, you can select one and copy the Embed Code.

Back to WordPress admin and paste the Embed Code here, then publish this page.

You can copy this code and paste to your WooCommerce page directly:

<div style="max-width: 680px; margin: 0 auto; text-align: center;"> <div style="display: flex; margin-bottom: 20px; height:40px;"> <input id="trackNum" maxlength="50" type="text" style="box-sizing:content-box; flex: 1; margin-right: 10px; padding: 0; padding-left: 10px; padding-right: 10px; border: 1px solid #9e9e9e; height: calc(100% - 2px);" /> <input onclick="inputTrack()" type="button" value="TRACK" style=" border: 1px solid #ec640c; border-radius: 2px; padding: 8px 0; width: 80px; height: 100%; color: #fff; font-size: 14px; background-color: #f74b16;"/> </div> <div id="trackContainer"></div> </div> <script src="//static.trackdog.com/static/externalcall.min.js"></script> <script> // <![CDATA[ function inputTrack() { var num = document.getElementById("trackNum").value; if (num === "") { alert("Please enter tracking number"); return; } TDTrackJs.trackAppend({ TD_ContainerId: "trackContainer", TD_Num: num, TD_Code: "", TD_Lang: "", TD_Width: 680, TD_Height: 560 }); } // ]]> </script>

After that, you can preview this page on WooCommerce.

Then you can go to Appearance > Menus to add this page to your menus, for example, I add it to the Desktop Horizontal Menu.

Finished, the Trackdog Track Button has been embedded to your WooCommerce store successfully. You can go to your store and try this feature.