Creating refreshable AJAX content in Woocommerce with Fragments

Awhile back a client of ours had a request to build them a custom “Footer Bar Popup” for their Woocommerce site. The main purpose of this popup was to help let customers know that they could unlock free shipping, and how far away they were. We gave our client the ability to edit the Free Shipping amount, as well as some other modifications. I figured I’d write a quick tutorial on building something similar, albeit stripped back to the basics. This footer bar had a few basic requirements (plus the others that I have stripped out of this post for the sake of simplicity):

• Update when adding or removing items from the cart without a page refresh
• Hide when nothing is in the cart
• Update any open tabs on the site
• Show the remaining total needed for Free Shipping
• Have a custom message when the customer has qualified for Free Shipping

This same concept isn’t limited to a footer bar, and the same concepts can be used to create some really cool concepts. Some of the same concepts can be applied to help you move the shipping calculator on checkout. The end result ended up looking something like this (gray bar at the bottom):

With that, let’s begin. You’ll want to add the following to your functions.php and stylesheet, respectively. The following code was tested on the latest Woocommerce and WordPress versions (2.6.14 and 4.7.3) with the latest version of the Twenty Seventeen Theme (1.1).

Again, this is just a very basic example that can be built out and customized in so many ways. My example uses a hardcoded price of $75 to get free shipping for simplicity. You will have to naturally make sure this is true in Woocommerce’s settings, as this is just a visual notification for the customer. You could also modify the popup to have a “close” button in order to allow the client to dismiss the popup.

If you’re looking for some Custom Woocommerce Development for your next project, feel free to give us a call at (323) 912-1125 or Contact Us.