Creating a WordPress plugin to style WooCommerce
WooCommerce is a highly powerful eCommerce platform that can be greatly enhanced using any of the hundreds of extensions currently available.
Built on WordPress, it acts as a modular system making it easy to add features and customisations.
But what if you simply need to change the word “Cart” to “Basket”, add a “Continue Shopping” button or even use Font Awesome icons instead of the standard icons that are used within WooCommerce? Here are the answers.
WooCommerce best practices state that in order to keep your modifications after updating to a newer version, there are two ways to customise:
- Plugin – minor changes
- Child theme – major alterations
As we will be making minor styling changes only, we will create a plugin.
For the purpose of this post I am going to assume you know how to go about creating the structure for a WordPress plugin file. Your plugin should be very lightweight as it will only consist of one file.
Changing the word “Cart” to “Basket” in WooCommerce.
Here in the UK, we would usually refer to a “Shopping Cart” as “Shopping Basket” and so users of our online shop would expect to see the text “View basket” and “Add to basket” across the site. To change this, we simply need to add to following function to switch the text from “View Cart” to “View Basket”
It is worth noting that some older posts on this subject explain how you can update the language option (WPLANG) in the wp-config.php file by simply amending or adding in the line define ('WPLANG', 'en_GB');
This is no longer the case, however, as WPLANG
was deprecated in WordPress 4.0.
How to add a “Continue Shopping” link in WooCommerce.
Making navigation easier for your customers is crucial to ensure they have the best possible user experience with your online shop. Adding a “Continue Shopping” or “Return to Store” link to the WooCommerce message that appears after adding an item to the basket, can help to keep your customers engaged and may even lead to an increased spend.
By default WooCommerce does not have this, so we can add it to our online shop using the following function to the plugin:
How to use Font Awesome icons in WooCommerce.
Using Font Awesome icons can be a great way of adding a bit of individuality to your online shop. After all, it’s the little touches that set your site apart from everyone else’s.
First, we make sure the latest version is available to us in WordPress by adding the following to our plugin file:
Next you will need to grab the css selectors and add your own rules to the custom css section of your WordPress theme. Personally, I prefer to use the Inspect element tool in Chrome to do this.
Below are a couple of examples from an online shop I developed using the Avada WordPress theme:
Here I replaced the shopping cart and checkout icons with the basket and shopping bag. Check out the Font Awesome bootstrap cheat sheet for a list of character references.
These are just a few examples of the customisations you can achieve using a few lines of code in a plugin. I hope they illustrate just how easy it is to tailor your WooCommerce shop to your liking.
The final code for the plugin looks like this: