Simplify Free WooCommerce Checkout Page

2
381 views
simplify-free-woocommerce-checkout-page
Simplify free woocommerce checkout page

In the previous post, You had been walked through Woocommerce Checkout Manager. Apart from that, in this post, I’ll introduce to you how to Simplify Free WooCommerce Checkout Page.

But first of all,

Why Do You Want to Change WooCommerce Checkout Page

In default, both WooCommerce Checkout page and My Account page display a form to gather visitors’ data like first and last name, address, phone number, email address, etc. That is fine when you, a store owner, need all that info from your visitors.

Woocommerce default checkout page
Woocommerce default checkout page

On the other hand, if  you don’t want to know everything, then it’s best to keep your website’s form as simple as possible by removing unnecessary form fields. This achieves a few things:

  • The page looks cleaner.
  • Makes it easier for customer to purchase because they don’t need to provide too many info.
  • The less personal information you keep about your visitors the better. Just simple as that

Simplify Free Checkout Page

If you’re selling free virtual products, such as a free membership with WooCommerce Memberships, you may want simplify this checkout form even more. Since when customers purchase a free item, you may require almost none of the checkout fields. This is how the free checkout page should look like.

Simplify free checkout
Simplify free checkout

 

Fortunately, it’s really easy to check if the checkout has no cost with the WC()->cart->needs_payment() check. We can use this to take a few actions to simplify the free WooCommerce checkout if no payment is needed, such as conditionally removing some billing fields.

Let’s walk through some steps we can take to simplify the free checkout, and then put it together into a usable snippet.

1. Remove Coupon Forms

First, you probably don’t want the coupon form for your free checkout, as there’s nothing to discount. Using ! WC()->cart->needs_payment() as a check assumes that the checkout total is $0, so there’s no shipping costs or order payment needed. As a result, we can safely remove the coupon input.

// remove coupon forms if you don't want a coupon for a free cart
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

The only instance you may need this form is if you use something like Free Gift Coupons, which isn’t providing a discount with the coupon, so the form could still be needed.

2. Disable Order Notes

You may want to gather order notes from the customer for the free order. However, our goal here is to completely simplify the free checkout, so I’m going to remove that entire “Additional Information” section of the checkout.

// Remove the "Additional Info" order notes
add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );

We can do so with the woocommerce_enable_order_notes_field filter , as we can set this tofalse so there are no order notes.

3. Unset Unnecessary Fields

Since we don’t need to charge a credit card, we probably don’t need most of the billing fields in this checkout. I’m going to unset some billing fields here, and you can choose with fields you want to remove from the checkout form.

// Unset the fields we don't want in a free checkout
function unset_unwanted_checkout_fields( $fields ) {
// list of the billing field keys to remove
$billing_keys = array(
'billing_company',
'billing_phone',
'billing_address_1',
'billing_address_2',
'billing_city',
'billing_postcode',
'billing_country',
'billing_state',
);
// unset each of those unwanted fields
foreach( $billing_keys as $key ) {
unset( $fields['billing'][$key] );
}
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'unset_unwanted_checkout_fields' );

You can find a list of all checkout fields in the WooThemes documentation.

This is what does most of the work in simplifying the free WooCommerce checkout.

4. Try Adjusting the CSS?

This one will be up to you to handle, as which fields you’ve removed may affect the layout of your checkout fields. In my case, my “create account” fields are slightly messed up since they’re trying to fit in next to the email field.

I could make the email field full width or put some space between these guys to make this look a bit neater. Let’s add some CSS in this snippet so it’s only added when the checkout is free and these fields are removed.

Putting it Together

As a final note, we’ll wrap all of this code in a check for WC()->cart->needs_payment() so we can be sure we only remove these fields when no payment is needed. You can find the full snippet here to add wherever you keep custom code on your site.

<!--?php // only copy if needed /** * Removes coupon form, order notes, and several billing fields if the checkout doesn't require payment * Tutorial: http://skyver.ge/c */ function sv_free_checkout_fields() { // Bail we're not at checkout, or if we're at checkout but payment is needed if ( function_exists( 'is_checkout' ) &amp;&amp; ( ! is_checkout() || ( is_checkout() &amp;&amp; WC()-&gt;cart-&gt;needs_payment() ) ) ) {&lt;br ?--> return;
}
// remove coupon forms since why would you want a coupon for a free cart??
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
// Remove the "Additional Info" order notes
add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );
// Unset the fields we don't want in a free checkout
function unset_unwanted_checkout_fields( $fields ) {
// add or remove billing fields you do not want
// list of fields: http://docs.woothemes.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/#section-2
$billing_keys = array(
'billing_company',
'billing_phone',
'billing_address_1',
'billing_address_2',
'billing_city',
'billing_postcode',
'billing_country',
'billing_state',
);
// unset each of those unwanted fields
foreach( $billing_keys as $key ) {
unset( $fields['billing'][$key] );
}
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'unset_unwanted_checkout_fields' );
// A tiny CSS tweak for the account fields; this is optional
function print_custom_css() {
echo '
<style>.create-account { margin-top: 6em; }</style>
';
}
add_action( 'wp_head', 'print_custom_css' );
}
add_action( 'wp', 'sv_free_checkout_fields' );

Again, when we’ve added this entire snippet, our free WooCommerce checkout will be greatly simplified, as we’re only asking for name and email:

Simplify free checkout
Simplify free checkout

Conclusion

Through on this article, you have learned how to Simplify Free WooCommerce Checkout Page. If you have any difficulty in any step, don’t hesitate to ask us on the comment bellow. We are happy to help!

 

 

Leave a Reply

2 Comments on "Simplify Free WooCommerce Checkout Page"

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

Hi guy, I think this is exactly what I need. Unfortunately I am not developer and I really don’t know what to do with this type of code for example.:
// Remove the “Additional Info” order notes
add_filter( ‘woocommerce_enable_order_notes_field’, ‘__return_false’ );

Thank you for reply 🙂

Cindy
Admin

Hi Will,
I’m Cindy from WooBeginner and I’m glad to help you solve your question.
You can add this type of code into the file “functions.php” of the theme

If you have any question, feel free to contact us.

wpDiscuz