WooCommerce Checkout Manager

2
777 views
Woocommerce checkout manager
Woocommerce checkout manager

In the previous post, You had been guided how to Create Shipping ClassesAnd basically, shipping classes only matters when it comes to the checkout page and your customer had made a decision to buy something. Thus, making your checkout page look more organic and charismatic is super crucial since you want to retain lifetime value customers and avoid losing sales. In this post, I’ll introduce to you Woocommerce Checkout Manager.

Firstly, you should be aware of the followings:

  • Use a child theme, if you’re using a third-party theme that you didn’t code yourself.
  • Some knowledge of WordPress filter hooks useful but not essential.

Ready! Begin.

Checkout Page – Removing Form Fields

This is how the default checkout page look like in an user’s local installation of WordPress with a Storefront child theme activated:

Default checkout form
Default checkout form

For example, I want to extract the Company Name, Phone, and second Address field out of the form.

Step 1: open functions.php in your code editor

Step 2: Type in

function storefront_child_remove_checkout_fields($fields) {
unset( $fields ['billing'] ['billing_address_2'] );
unset( $fields ['billing'] ['billing_company'] );
unset( $fields ['billing'] ['billing_phone'] );
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'storefront_child_remove_checkout_fields' );

The abovementioned code runs through the woocommerce_checkout_fields filter hook that can be found in the class-wc-checkout.php file in WooCommerce.

You should build a custom function (I called mine storefront_child_remove_checkout_fields).

This custom function takes a variable storing the form’s fields as argument & removes the unwanted fields (which are in the form of nested arrays) using the unset() PHP function. Afterward it returns the variable with the modified fields then uses WordPress add_action() to hook the custom function to the woocommerce_checkout_fields filter hook.

Save your work after make sure everything is as expected.

To sum up, the code works well if you only want to get rid of specific fields just on the Checkout page. However, when you also want to clean up the WooCommerce form on the My Account page. In order to do that, you must come to another code.

My Account Page – Removing Form Fields

After applying the above code, Visit the My Account page and click on the Addresses option to edit your addresses (or add new one).

Default my account form
Default my account form

Notice all the fields you removed earlier are still there. To get rid of those, WooCommerce provides another filter hook: woocommerce_default_address_fields, which you can find in the class-wc-countries.php file in WooCommerce.

Add the same snippet you used earlier to your functions.php file, but this time you are using a different filter hook.

function storefront_child_remove_unwanted_form_fields($fields) {
unset( $fields ['company'] );
unset( $fields ['address_2'] );
return $fields;
}
add_filter( 'woocommerce_default_address_fields', 'storefront_child_remove_unwanted_form_fields' );

After saving your work and the Company and second Address line fields should be gone if you check the result on the front end.

However, in the form there is still the Phone field. To remove it, you’ll need one more filter hook, that is also located in the WooCommerce class-wc-countries.php file: woocommerce_billing_fields.

Here’s the code you need:

 

function storefront_child_remove_phone($fields) {
unset( $fields ['billing_phone'] );
return $fields;
}
add_filter( 'woocommerce_billing_fields', 'storefront_child_remove_phone' );

Save your work and then the Phone form field should also be gone.

Conclusion

As one might notice, while all the codes above look alike, it’s just a matter of targeting the right form fields as array items and filtering them through the appropriate WooCommerce hook.

Read more about modifying the checkout form fields using actions and filters. Click to this WooCommerce documentation page.

Also visit this Action and Filter Reference on the WooCommerce website for a list of WooCommerce filter and action hooks.

Finally, you just walked through with me on one aspect of Woocommerce Checkout Manager, let me know if you have any questions or results. We are happy to help.

Cheers!

Leave a Reply

2 Comments on "WooCommerce Checkout Manager"

Notify of
avatar
Sort by:   newest | oldest | most voted
Saud Razzak
Guest

Thanks! This was a very helpful article. A few Days ago I also wrote about WooCommerce Manager Plugin Guide.
Here is the link below:
https://www.cloudways.com/blog/woocommerce-checkout-manager-plugin-for-wordpress/

Saud Razzak
Guest

Thanks! This was a very helpful article. A few Days ago I also wrote about WooCommerce Checkout Manager Plugin Guide.
Here is the link below:
https://www.cloudways.com/blog/woocommerce-checkout-manager-plugin-for-wordpress/

wpDiscuz