WooCommerce has proven itself to be a popular and formidable WordPress e-Commerce plugin. Its biggest strength is the fact that it can be customized in so many ways. There are a massive amount of free and paid extensions that can do everything from integrating third-party services all the way to allowing for complex products and orders.
But there are other ways for developers to customize WooCommerce. Using the many available Hooks, you can both add new functionality or change how existing features work. Hooks, which are categorized as either Actions or Filters, are snippets of code that can be placed into your WordPress theme’s functions.php file or even added into a custom plugin. Virtually everything WooCommerce (or WordPress, for that matter) does can be tweaked.
Note that, while WooCommerce does allow you to create custom templates for your site, it’s usually best to avoid this when possible. New versions of various templates are often released along with plugin updates.
That means any templates you have customized may have to be recreated using the latest versions. Therefore, it’s often much more efficient to use Hooks, as they can often help you reach the same desired results without the need to constantly update.
The following are some basic examples of hooks that will demonstrate just a tiny bit of what they’re capable of. Then we’ll share some excellent resources where you can find useful code snippets and advice.
Example 1: Add Credit Card Logos to the WooCommerce Cart Page
The action ‘woocommerce_after_cart_totals’ provides a built-in way to easily add content under the Cart Totals area of the WooCommerce Cart page. In this case, we’re using FontAwesome icons to display credit card logos.
Beneath the logos will be some text to give a verbal indication of which credit cards the store accepts. You could, of course, customize the contents and look to whatever suits your needs. Actions such as this are great for times when you just need to add content to a specific spot.
Example 2: Change a Text String
In this example, we’re looking to change any instance of the word ‘Shipping’ to instead say ‘Shipping & Handling’. The ‘gettext’ and ‘ngettext’ filters are used to make this happen. The $translated line contains both the text we want to replace (Shipping) and what we want to replace it with (Shipping & Handling). This can be used to change just about any text through your shop.
Just be careful as sometimes you may accidentally replace portions of longer, similar words. For example, swapping the word ‘Shop’ with ‘Order’ may also have an unintended effect on the word ‘Shopping’. That could result in the word being displayed as ‘Orderping’.
WooCommerce Hook Resources
Now that we’ve had just a taste of how hooks can be used to customize WooCommerce, let’s check out some excellent resources for learning more. The sites below will help you discover which hooks are available and provide useful code snippets.
WooCommerce Hook Reference
The official source, with a listing of every single hook available.
Mr. Corson works for WooThemes and is an expert at customizing WooCommerce. His site includes lots of great code snippets and helpful advice.
Super useful WooCommerce code snippets
This collection of snippets tackles some common customizations.
Business Bloomer’s Visual Hook Series
Want to see exactly where a hook resides on a particular page? This visual resource is great for finding what goes where.
60+ snippets you can use to customize Woo, straight from the official codex.
Make Woo Work for You
Part of the beauty of WooCommerce is that there are any number of ways you can shape it to fit your exact needs. This separates it from many SaaS shopping carts out there that essentially are closed systems. But, as the saying goes, with that power comes great responsibility. It’s easy to inadvertently break something while making customizations.
If your store is already live and taking orders, it’s a good idea to try out hook customizations on a separate staging version of the site. Once you’ve got things working properly, you can move the changes over to the live version.
Once you’ve taken the proper precautions, have fun exploring the wide array of available hooks and create a WooCommerce site that sets you apart.
Woocommerce After an Order Before Payment Hook
There are times when you want to do some action like sending the order info to another database or third party integration before payment took place. of course, after payment took place, you might still initial another type of hook which is not explain here, there are tons of them if you google around. However, before a payment is made and after a checkout is place, an order is created. This hook is often ignored and not mention around. And this is the Woocommerce hook i am going to demonstrate here.
2 Woocommerce action hook after an order is made
There are actually two action hook that you can use here which are
Both this hook, allows you to initial your custom function immediately after an order is made such as the one below,
Do bear in mind that the priority here is placed at the highest as compare to the default 10. If you just use the default priority, the chances of your payment getting directly marked as paid rather than going through the normal process of Woocommerce is high. It happens to me as i couldn’t figure out how come all order are being marked as paid without going through any payment selected. It is all due to the action hook used above which you have to take note of the priority to prevent yourself losing money due to unpaid invoice marked as paid automatically.
New order hook
The argument parameter is marked as 1 which is the default since we only really need the order id of the hook as shown below,
Do remember to NOT place any $woocommerce->cart->empty_cart() sentence within these methods as it will remove the item in the cart and leave other checkout method unable to proceed further. Leave the empty_cart instruction to the payment gateway to handle it.
Hooking into WooCommerce Actions
This series walks you through some of the beginner to intermediate skills you’ll need to build your first WooCommerce extension.
Today’s post continues our series on building a WooCommerce extension. We started the series by discussing how to use filters to change your site content, and today’s post will be about actions.
Actions and filters make up the basic building blogs of extending WordPress plugins and themes, as they allow you to change or add code to WordPress, themes, or plugins. WooCommerce is no exception, and includes tons of hooks that you can use within your own plugins.
WooCommerce actions will let us add or remove code to the core plugin, and they’re a foundational piece in extending what WooCommerce can do on your site. You can add actions to add conversion scripts to your checkout, add information to your shop or product pages, add fields to orders, or use them to as triggers for events.
What is an action in WordPress?
The WordPress codex gives us a definition that may or may not be helpful:
In WordPress; an Action is a PHP function that is executed at specific points throughout the WordPress Core.
In basic English: If you think of your page loading like a stretch of open highway, an action is like an on-ramp. While your page is moving from point A (nothing loaded) to point B (page fully loaded) on this highway, there are certain places in the page that you can “merge in” and add your own code. An action provides the place for this to happen.
So how’s this different from a filter? Technically, it’s not. But we don’t want to blow your mind just yet 🙂 .
Filters are used to allow you to change a particular value (be it a variable, text, or something else). Think of filters as a way to replace data or content on the page. Actionsdon’t pass in a value to change or replace; they simply provide the opportunity to “hook” code in or add it at this particular moment in the page load. This lets you add or remove things on the page.
Actions are created using the do_action function. If you see a do_action call in a plugin or theme, this provides an “on-ramp” for you to bring your code into the page at this point, which can add something of its own or influence any of the code that follows.
The most basic actions have this structure:
The “tag” is the action name. This will allow you to use the action to add your own function into the page. However, actions can also pass in “arguments”. The argument works in a similar way to a variable for a filter: arguments provide information you can access in your code. For example, an action that gives me the WooCommerce product would allow me to access any information on that product within my own function (allowing me to, for example, only execute the code for particular products).
do_action( ‘tag’, $arg_1, $arg_2 );
Actions can have as many arguments as needed, which can be used by any code hooking into this action.
Using an action
To add your code into the page using one of these actions, you’ll use the add_action function. This will always have the following structure:
add_action( ‘action_tag’, ‘my_function’, priority);
This will not change, even if the action has arguments that have been / can be passed to your code.
You’ll add your code in via an action similar to this:
If the action contained arguments that I need to use, I’d pass them into my function in the same way I do with a filter:
Example 1: Changing the Storefront Blog Layout
Let’s take a look at the core Storefront theme blog layout:
I’m going to move the post meta to the bottom of the post instead of left-aligned, and display both full width instead. While this is a slightly long example, it’s a pretty easy one to understand because it uses simple actions.
Fortunately, Storefront is very easy to change, and all of the post structure is hooked in via the hooks.php file. This shows us that we can remove the action that adds post meta to the page.
It’s added via this code:
add_action( ‘storefront_single_post’, ‘storefront_post_meta’, 20 );
In order to remove (and then re-add it ourselves), we’ll need to remove this action in our custom plugin / code snippet:
Note:You must keep the same priority when removing an action.
Now let’s talk about re-adding this, as we’ll use an action to do so. I was cued into the storefront_single_post_after action by viewing the hooks.php file above. We could re-add the post meta much later in the single post, but I’d like to use this action to re-add the post meta after the post and above the post navigation (next post / previous post links).
I see this code in the single.php template:
This tells me that I can add my post meta back using this action. I’ll structure my add_action call with this action name, and I’ll set a slightly higher than normal priority to ensure my post meta is added before the post navigation links:
I don’t need to write my own function here, as I’m using the existing storefront_post_meta function.
This moves my post meta to the bottom of the post instead of left-aligned (though we’ll need to tweak our CSS to finish up):
Now here’s the reason I chose this theme 🙂 . We’ll need a final action to wrap this up.
You can try adding some CSS to adjust the widths here to finish our blog layout, but adding them into your child theme won’t work too well. The classes used on a single post are the same as those used in the blog archive, so we need to target them more specifically. They’re also nested the same way, so we can’t go a pure-CSS route. We’ll need to onlyadd this CSS to single posts, but not to blog archives.
We’ll use this action with our function to add our new blog post styles:
Now my blog transformation is complete.
Example 2: Adding a Google Analytics conversion script
Now let’s take a look at an action that passes in an argument. We’ll start with the woocommerce_thankyou action. This action passes in the order id as an argument:
do_action( ‘woocommerce_thankyou’, $order->id );
You can use the order id for any code that hooks into this action (which really means you can get the entire order object from this id). This can be used to display a custom message if a product is present in the order, display a customized message using the customer name, or welcome back certain customers based on role (i.e., if you have subscribers or your own roles).
The most common example of this action in the wild (and the simplest for us to use at this time) is its use with conversion tracking. Let’s add a tracking script for a third-party service using a tracking pixel (this could be used for affiliate programs or Google Analytics).
Assume the tracking pixel looks like this:
Let’s insert that into our page, adding the order amount and number as required.
This will now be added on every “thank you” page that’s displayed in my shop, and will include the relevant order information.