Articles on: Branded Tracking Page

Add Track Button to WooCommerce Store

Plans: All plans Platforms: All platforms


Overview


WooCommerce is an open-source eCommerce plugin for WordPress. It can easily add eCommerce functionality to the WordPress website. With just a few clicks the plugin can be installed on the WordPress dashboard and set up to get the store up and running.


To give your customers one-click order tracking experience, you can install AfterShip Track Button to your WooCommerce store backed with AfterShip's shipment tracking functionality for a smooth post-purchase experience in a few simple steps.


What you'll learn


In this tutorial, we'll discuss:



Set up order lookup widget


Before adding the track button to your WooCommerce store, set up how it will work and look in the AfterShip Tracking admin and copy the subsequent code to insert in WooCommerce.


Find the complete ** guide ** here.


Add track button to a new page in WooCommerce


Demo


1. Add a new Web Page


  1. Log in to Wordpress admin panel
  2. Go to Pages > Add new > Enter title
  3. Publish


2. Insert Track Button


  1. Log in to Wordpress admin panel > Pages > Select a web page to add Track Button
  2. Click the + icon > Custom HTML
  3. Paste the code you copied from the AfterShip admin in the HTML editor



For example:


<div id=“as-root”></div><script>(function(e,t,n){var r,i=e.getElementsByTagName(t)[0];if(e.getElementById(n))return;r=e.createElement(t);r.id=n;r.src=“https://button.aftership.com/all.js?username=aftershipdemo”;i.parentNode.insertBefore(r,i)})(document,“script”,“aftership-jssdk”)</script>

<div class=“as-track-button” data-size=“medium” data-domain=“aftershipdemo.aftership.com” data-look-up-option=“both” data-btn-label=“Track”></div>


  1. Publish


You can also replace data-domain="track.aftership.com" with AfterShip username or custom domain and apply your carrier settings.


  1. Click on View page to see how the track button looks on your website



Insert Track Button to Order History Page


  1. Log in to your Wordpress admin panel. Scroll down to access the last menu items. You will see AfterShip Tracking option. Click on it to open the settings page of the app.



  • Select the checkbox for Use Track Button at Order History Page



  1. Save changes


Customer experience


The AfterShip Track Button will appear on the order history page once the tracking number is generated for the order on WoCommerce.


Updated on: 06/05/2024