Remove WooCommerce Checkout Fields Add Custom Javascript Code WordPress – Javascript Plugin WordPress

How to Remove WooCommerce Checkout Fields? By Adding Custom JavaScript Code in WordPress – Javascript Plugin WordPress

If you are using WordPress Woocommerce to opening a online shop and your product don’t required to do delivering (virtual product like video, music or software), then you are probably think that the checkout fields is a little bit too complexity. It require you buyer to fill up first name, last name, company, address, email and more.

Too many information to fill in tend to checkout time increase and also decrease the user experience on checkout in your website. Some of the checkout fields that are unnecessary for your business, because selling virtual product don’t required delivery, so some checkout fields can be removed.

In order to remove these unnecessary checkout fields, i have tired many plugins, even custom checkout fields pro, they can’t properly remove all these fields, some fields still remain. So today, i’m going to show you how to remove WooCommerce Checkout Fields the easy way by adding Custom Javascript Code in WordPress to execute.

Javascript Code Snippets WordPress Plugin

To remove checkout fields, first we need to get a plugins called “Code Snippets”. This plugins allow us to add custom javascript code to remove checkout fields. There are also many plugins out there allow you to adding add code to your site. However, we use code snippets plugins in this tutorial.

Adding Custom JavaScript Code in WordPress

Second, we have to know how’s adding custom code work. Once you have install the plugins, simply click add new, then you will be taken to the something like the below. Here is the place to write in your code to execute. You can also choose to run the code snippets everywhere in the website, only in administration area(wp-admin area), only on front-end(frontend visitor view) or only run once.

Here we’re target to remove the checkout fields for frontend visitor only, so we should choose “Only run on site front-end”.

Related: How to Get Custom Field Value in WordPress (Display WordPress Custom Fields)

How to Remove WooCommerce Checkout Fields?

Now we’re dive into the main issue, How to Remove WooCommerce Checkout Fields? Here we can use some code snippets to remove woocommerce checkout fields. After you place the code inside code snippets and save you will still facing the same problem with other that cannot totally remove some fields.

Now we can execute simple css to remove these fields. You can copy the complete code from below.

add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );
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] );
    }
  echo '<style>#billing_company_field.form-row,#billing_address_1_field.form-row,#billing_phone_field.form-row,#billing_postcode_field.form-row { display: none; }</style>';
    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'unset_unwanted_checkout_fields' );

This is the result. The code above remove all the checkout fields and keep only first name, last name and email. If you like to keep other fields live, just remove some code snippets.

For example: if you want to keep phone number, just delete “‘billing_phone’,” in the code.

Proceed to paypal as usual, everything work well. Website running smooth, no extra heavy weight burden.

Other WordPress tutorial:

• Latest Way to Add Author’s Profile Photo in WordPress Without Gravatar
• How to Display Last Updated Date Posts In WordPress (Stepbystep)

Install WordPress to your server:

• How To Install WordPress on Bluehost With Free Domain Name
• How to Install WordPress on SiteGround
• How to Install WordPress Manually (That Other Articles Don’t Teach)

Free promote your business/product/service in Maomaochia by submit a guest post.
We've break 1,000 views a day, you can now display an ads on Maomaochia.