Add Track Button to WooCommerce Store
Plans: All plans Platforms: All platforms
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.
In this tutorial, we'll discuss:
Set up order lookup widget
Add track button to a new page in WooCommerce
Insert Track Button to Order History Page
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.
Log in to Wordpress admin panel
Go to Pages > Add new > Enter title
Publish
Log in to Wordpress admin panel > Pages > Select a web page to add Track Button
Click the + icon > Custom HTML
Paste the code you copied from the AfterShip admin in the HTML editor
For example:
Publish
You can also replace data-domain="track.aftership.com" with AfterShip username or custom domain and apply your carrier settings.
Click on View page to see how the track button looks on your website
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
Save changes
The AfterShip Track Button will appear on the order history page once the tracking number is generated for the order on WoCommerce.
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
Add track button to a new page in WooCommerce
Insert Track Button to Order History Page
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
1. Add a new Web Page
Log in to Wordpress admin panel
Go to Pages > Add new > Enter title
Publish
2. Insert Track Button
Log in to Wordpress admin panel > Pages > Select a web page to add Track Button
Click the + icon > Custom HTML
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>Publish
You can also replace data-domain="track.aftership.com" with AfterShip username or custom domain and apply your carrier settings.
Click on View page to see how the track button looks on your website
Insert Track Button to Order History Page
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
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
Thank you!