Plugins

WooCommerce styling (1)

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:

Using the WordPress Media Uploader in your plugin options page.

If you are creating a WordPress plugin that requires your users to select or upload media from the plugin options page, it is a good idea to include the one that people feel familiar with. The core WordPress Media Uploader is relatively easy to implement and the user-friendly interface should make your users feel comfortable while uploading media.

For the purpose of this post I am going to assume you already have an options page for your plugin. If you don’t, there are plenty of tutorials on the web to help you achieve this. The code contained within this article was used in a lightweight plugin I developed to allow users to customise their WordPress login page.

The Javascript code.

Firstly, we need to create a javascript file called media-uploader.js (or similar) within the plugin folder. Place the following code in it and save.

When called by the #upload_image_button, this script launches the native WordPress Media Uploader interface and inserts the chosen file in the destination field #background_image.
As an example, in my plugin the destination field gets saved in the plugin options as the background image for the login page.

The function code.

Next, we need to register the script and enqueue it using the following code in the main plugin file:

Registering and enqueueing lets the WordPress core know where the script is located and any dependencies it has. wp_enqueue_media enqueues all scripts, styles, settings, and templates necessary to use all media JavaScript APIs. wp_register_script has a number of parameters:-
wp_register_script( $handle, $src, $deps $ver $in_footer)

  • $handle is what you use to refer to your script
  • $src path to the file within your plugin – use plugins_url(‘your-file.js’, __FILE__) to get the URL root of the plugin
  • $deps an array of registered script handles that this script depends on
  • $ver script version number
  • $in_footer option to enqueue the script before the closing </body> tag instead of in the <head>

See the WordPress Functions Reference for a more detailed description of these.

Both scripts and styles are properly enqueued by attaching the function to the admin_enqueue_scripts hook. Note that we are using the admin hook rather than wp_enqueue_scripts as we are not dealing items that appear on the front-end.
The add_action hook allows us to specify precisely at what point the defined function is added during script execution.

The form code.

Lastly, we need to add a couple of fields to our plugin options page – a button that calls the Media Uploader script and a text field that saves the URL of the image to the database:

As you can see, for my plugin I have registered a setting on the options page called background_image which is selected using the Media Uploader.

I have also given the Insert Image button the button-primary class to maintain the default WordPress look.


Now we can use the WordPress Media Uploader on our plugin options page.

Conclusion.

Adding the familiar native WordPress media uploader to your plugin options page should be relatively straightforward.

If your javascript file is called by the desired element, and you have registered and enqueued the scripts correctly, you should have it working in no time.

In my next post, I will explain how to add the native WordPress color picker for use on your plugin options page.