Customize your WooCommerce Store using WordPress Hooks

WordPress hooks

Last updated - February 24, 2020

In this article we’re going to introduce one of the most important topics when developing WordPress themes or plugins for WordPress: WordPress hooks, and we’ll explain the difference between action hooks and filter hooks.

Hooks are embedded throughout the WordPress core, most WordPress themes and all top WordPress plugins. WordPress Hooks are an event-driven system that allows you to add your own new code, or edit existing code within the WordPress eco-system.

WooCommerce Hooks

WordPress hooks are essentially php functions that let you add your own code to WordPress, or edit existing code throughout WordPress without having to edit the core files when customizing your WordPresss site, and/or WooCommerce store.

Hooks are used throughout WooCommerce too, allowing developers to easily add their own custom functions via action hooks, or edit the functionality built into the WooCommerce plugin to further customize your online store via the filter hooks.

WooCommerce Actions & Filters:

There are 2 different types of hooks you can use to further customize your WooCommerce store. While it is recommended that you DO NOT edit your theme or plugin files directly, it is recommended that you either create a child theme and then insert your php code snippets into the functions.php file, or you can use the WooCustomizer plugin which lets you edit a lot of filters without needing to know how to code.

Actions Hooks:

Action hooks are placed throughout WooCommerce using the do_action( ‘action_name’ ) function, and so, you can use the action name to specify where you want to execute the code you are adding.

To add your custom code you simply create a new php function with your code inside, and you specify where you want the code to run by adding the action name as the first parameter in the  add_action() function.

Example:

add_action( 'action_name', 'your_custom_function_name' );
function your_custom_function_name() {
// Your code
}

So you are simply saying to the WooCommerce code – “add my action when this do_action runs”.

Filter Hooks:

Filter hooks are called throughout WooCommerce using the apply_filter( 'filter_name', $variable ) function. This allows you to manipulate the variable that is passed into the function and then return the variable value as you need it.

Example:

add_filter( 'filter_name', 'your_custom_function_name' );
function your_custom_function_name( $variable ) {
// Your code editing the variable
return $variable;
}

Similar to the action hook, you create your own php function and specify on which filter to use it, but this time you are passing in a variable that already exists, and using your function to manipulate the output to what you need it to be.

With Filter hooks you need to return a value.

Are you unsure about creating a child theme, adding or editing your own php functions using the WooCommerce hooks yourself?

Customize your WooCommerce Store with WooCustomizer

Have a look at the new WooCustomizer plugin… WooCustomizer comes with a lot of functionality to edit and further customize your WooCommerce store without having any coding knowledge or needing to add your own code.

WordPress Hooks

WooCustomizer offers a lot of the existing WooCommerce hooks for editing and adding extra functionlaity to your WooCommerce store.

Some features that the WooCustomizer plugin offers:

  • Edit product ‘On Sale’ banners for Shop & Product pages
  • Edit ‘Add to Cart’ buttons for the different product types
  • Remove any Shop, Product, User Account and or Cart page elements
  • Add ‘New Product’ or ‘Sold Out’ banners to your Shop products
  • Customize the design of the Add to Cart buttons, sale banners and more
  • Edit User Account Tabs & basic Checkout fields for users
  • Add product statistics to the website front-end for Administrator users
  • Add a Login / Logout menu item to any chosen menu

+ lots more

Download WooCustomizer

Wanting more for your WooCommerce Store?

WooCustomizer also comes with a premium version which offers a lot extra to increase sales and add extra useful features to your WooCommerce shop.

WooCustomizer Pro includes:

Catalogue Mode for WooCommerce

Easily remove all the ‘add to cart’ and purchase functionality from your WooCommerce store, turning your shop into a beautiful online catalogue. Apply these settings to all products, selected products, or only to logged out users, prompting users to create an account and log in to purchase your products.

WordPress Hooks

Custom Thank You Pages for WooCommerce

WooCustomizer offers the ability to build your own custom Thank You pages for WooCommerce, using the default WordPress editor or any other page builder you like. Redirect the customer to your new default Thank You page, redirect them to different pages depending on the products they’ve bought, or redirect them to pages depending how they purchased the products in your store.

WordPress Hooks

Product Quick View for WooCommerce

Give your users the option to preview the full product information and easily ‘add to cart’ or browse the images all from within a popup on your shop or archive pages. This helps your users browse the store quicker.

WordPress Hooks

 

WooCommerce Ajax Search

Help users find your products quicker? Add a simple ajax product search to your search bar, widgets areas or shop page, to display a prediction of products when your users start typing to search for your products.

WordPress Hooks

WooCommerce Menu Cart

Turn on WooCustomizers Menu Cart for WooCommerce and select which menu you’d like to display a WooCommerce cart in. Add a drop down mini cart basket so your users can add or remove products, view their cart or go straight to checkout.

View WooCustomizer

Use our special coupon to receive 15% off your first purchase for WooCustomizer

LW15OFF

Start editing with hooks!

Now that you have an understanding of how WordPress hooks work in WordPress and WooCommerce, you can easily add or edit the functionality you need on your WooCommerce online store.

Please Note: Don’t forget this code should always be added to a child theme or to a site customizations plugin so that you do not lose the edits when you update your WordPress theme.

If you’re still a little unsure about adding your own code to further edit your WooCommerce store, then we recommend trying out the WooCustomizer plugin. It takes all the available WooCommerce hooks and creates a visual interface in which to edit the code, all built into the WP Customizer, plus it offers a lot more such as product statistics, login/logout menu items and lots more.

LEAVE A REPLY

Please enter your comment!
Please enter your name here