How to Edit and Disable Checkout Fields in Woocommerce

January 7, 2012 in PHP, Web Development with 32 Comments

This is just a quick post that shows you how to edit or disable the checkout fields in Woothemes WordPress shopping cart Woocommerce. It may make all the Magento developers jealous to see how nearly trivial it is – but I couldn’t see a good blog post explaining it, so here goes.

Disabling and Editing Checkout

To use the WordPress API, I made a simple little plugin that listens for the filter event and then makes some changes to the arrays.

The anatomy of a plugin is really just a class definition, in the constructor you listen for events and bind them to functions of that class. In those functions, you do the real grunt work. In this case, that’s where I weed out disabled fields, and swap in my edited field definitions.

Hopefully the way the code is laid out makes the actual editing/disabling is performed self-evident. To see the full range of available fields and options, please see the underlying array declaration in the core file woocommerce/classes/checkout.class.php.

My class looks like this:

class woocommerce_disable_checkout_fields {
 
	var $update_billing;
	var $disabled_billing;
	var $disabled_shipping;
	var $update_shipping;
 
	public function __construct() { 
 
		// If you do not have shipping on checkout, then only billing will have an effect
		$this->disabled_shipping = array('shipping_last_name');
		$this->update_shipping = array();
 
		$this->disabled_billing = array('billing_last_name', 'billing_address_1', 'billing_address_2', 'billing_city', 
						'billing_postcode', 'billing_country', 'billing_state');
		$this->update_billing = array(
			'billing_first_name' 	=> array(
				'name'=>	'billing_first_name',
				'label'                 => __('Name','wc_disable_checkout_fields'),
				'placeholder'  		=> __('Name','wc_disable_checkout_fields'),
				'required'              => true,
				'class'                 => array('form-row-first')
				),
			'billing_company'         => array(
				'label'                 => __('Company','wc_disable_checkout_fields'),
				'placeholder'  		=> __('Company','wc_disable_checkout_fields'),
				'required'              => false,
				'class'                 => array('form-row-first')
				),
			'billing_email' 	=> array(
				'label'                 => __('Email','wc_disable_checkout_fields'),
				'placeholder'   	=> __('you@yourdomain.com','wc_disable_checkout_fields'),
				'required'              => true,
				'class'                 => array('form-row-first')
				),
			'billing_phone'         => array(
				'label'                 => __('Phone','wc_disable_checkout_fields'),
				'placeholder'   	=> __('Phone number','wc_disable_checkout_fields'),
				'required'              => true,
				'class'                 => array('form-row-first')
				)
			);
 
		// Filters for checkout actions
		add_filter( 'woocommerce_shipping_fields', array(&$this, 'filter_shipping'), 10, 1 );
		add_filter( 'woocommerce_billing_fields', array(&$this, 'filter_billing'), 10, 1 );
	} 
 
 
	// array_flip is a somewhat smelly way to make a normal array into an associative one
	function filter_shipping( $fields_array ) {
		$fields_array = array_replace($fields_array, $this->update_shipping);
		return array_diff_key($fields_array, array_flip($this->disabled_shipping));
	}
 
	function filter_billing( $fields_array ) {
		$fields_array = array_replace($fields_array, $this->update_billing);
		return array_diff_key($fields_array, array_flip($this->disabled_billing));
	}
 
 
}

This disables most of the billing fields, and edits a couple of others. It doesn’t touch shipping because on the site I’m building this for, the products are all digitally delivered. It looks like this (with a few CSS tweaks):

To complete the plugin, at the end of your class definition, you can just instantiate your plugin class to kick things off.

$woocommerce_disable_checkout_fields = new woocommerce_disable_checkout_fields();

That’s all there is to it.

Download

You can download the file here and drop it into your wordpress install. It’s provided as is with no promise of any maintenance!

Update 0.2: Moved the variable initialization to the constructor so that inline translation can be used if desired.

Ease of Modification

Note how much easier the learning curve for WordPress+Woocommerce is, compared to Magento. Within an hour I have managed to edit the checkout fields, and publish some code that I’m pretty sure will make it really easy to do this in a maintainable and upgradeable way.

One of the reasons it’s so easy is the filter API for WordPress. This innocuous little comment in the Woocommerce code was perfect:

// Define shipping fields in an array. This can be hooked into and filtered if you wish to change/add anything.

It gives all the hinting required to lead you to make changes the right way – although it’s tempting just to hack the core code, my experience has been that’s a very bad idea.

Admittedly my code is not a proper UI-based plugin yet, but if there’s enough interest, I’ll turn it into one (so comment below if you’d like a plugin for this).

Lastly, this is my first public foray into Woocommerce, so if I’m doing it wrong, let me know, I’ll save further embarrassment!

32 Responses to “How to Edit and Disable Checkout Fields in Woocommerce”

Razvan January 7, 2012 at 12:18 pm #

Hy!
Great, just what I was looking for.
I tried to add a translation for the fields but I get this error:
Parse error: syntax error, unexpected ‘(‘, expecting ‘)’ … wp-content\plugins\disable-checkout-fields.php on line 39:
‘label’ => __(‘Name’, ‘woothemes’),

Please any idea!
Thank you!
Ashley January 7, 2012 at 4:58 pm #

Hi Razvan.

The __() is a function call, so if you want to do any inline translation you’ll have to move it to the constructor, rather than as part of the variable declaration. I’ve updated the code to show this, as using translations is a cleaner way of doing it.
Razvan January 8, 2012 at 9:24 am #

Thank you very much..it works like a charm!
Razvan January 8, 2012 at 11:21 am #

My big challenge now is to have two sets of fields, one for individual billing (Name, ID number, etc) and one for legal entity (Company, Trade Register Number, etc) and to be able to hide or show this fields but to disable the validation for the hidden fields.
So far you have done a great job for me, a designer
Razvan January 11, 2012 at 6:51 am #

Another problem is that on the Orders Section (Admin) the billing and shipping info it does not get replaced with the new/updated fields.
Lane January 13, 2012 at 10:00 am #

I been working with Magento for about a year now, and I can’t stand how unweildly it is to work with. Is it just me? What’s the future for Magento?
Iwebsquare January 16, 2012 at 12:39 am #

This is Exactly what i am looking for, thanks for sharing this.
Jim Munroe January 29, 2012 at 4:41 pm #

When I add this as a plugin and activate it, I get this when I get to checkout:

Fatal error: Call to undefined function array_replace() in /home/nmk/public_html/ghostswithshitjobs/wp-content/plugins/woocommerce-aschroder-customize-checkout/disable-checkout-fields.php on line 82

It’s a virtual downloadable product, if that makes a difference.
Ashley January 30, 2012 at 12:11 pm #

Hi, Jim

Google that error, there are several solutions – it is to do with PHP version 5.3 vs 5.2. Here’s one of the top hits which describes the problem and a solution: https://github.com/fabpot/Twig/issues/420

Also, you should check out this blog post, regarding for help and trying to solve it first:
http://mattgemmell.com/2008/12/08/what-have-you-tried/

Thanks,
Ashley
Sheila February 12, 2012 at 6:20 pm #

Thank you for the informative post, this is just what I am looking for but i am definitly green.

You wrote:>>>
To complete the plugin, at the end of your class definition, you can just instantiate your plugin class to kick things off.

$woocommerce_disable_checkout_fields = new woocommerce_disable_checkout_fields();

What does this mean? Where would I put this line of code?
Sarah February 13, 2012 at 2:50 pm #

Thank you for the amazing post I didn’t understand that much cause Im a beginner .
I was wondering what is the code for adding a delivery date option in the checkout page and where should I paste it ?

Thank you SO MUCH !
Karl February 22, 2012 at 8:38 am #

THANK YOU! I’m doing my best to use this, but I would love to see a plugin for modifying WooCommerce checkout fields.
Endle February 23, 2012 at 11:16 pm #

Thanks Bro! Works a treat. I had to change all array_replace to array_merge and, then updated the fields I wanted to show and everything does exactly what I wished for. Perfect!
Ashley February 26, 2012 at 12:39 am #

Hey Karl, by love do you mean you’d buy one?
Margaret March 4, 2012 at 5:55 am #

Hi, I’m wondering about the same thing as Sheila. I’ve installed your plugin but I do not know where I am supposed to paste

$woocommerce_disable_checkout_fields = new woocommerce_disable_checkout_fields();

There is no core file named woocommerce/classes/checkout.class.php in my woocommerce but there is a file called woocommerce/classes/class-wc-checkout.php

Is that the same? If so, where in that file do I paste your code?

I tried pasting it below the definition, i.e. around line 63 in the class-wc-checkout.php file but to no avail. The checkout page is still blank.

Any help would be appreciated. Maybe some of the readers know where the code is to be pasted?
Leland March 12, 2012 at 2:38 am #

Would be great if you turned this into a UI based drag/drop addon for Woocommerce. It would sell very well I bet. Thanks for tutorial.
Andrew March 15, 2012 at 3:57 pm #

Anyone got any example code that allows you to add fields and other types of fields in to your billing fields?

I’ve tried adding this to the array for a field, with no luck:

‘type’ => ‘select’,
‘options’ => array(
‘Option 1′ => ‘Option 1′,
‘Option 2′ => ‘Option 2′
)
Lafanter March 16, 2012 at 9:45 am #

It didnt work for me. After installing the plugin, the whole checkout page went blank. Its easier to just go to the countries class and // comment out the field you dont want to add in the check out at the bottom of the file.
ahmad March 18, 2012 at 3:05 am #

it’s worked for me but when i click the place order button i get a list of errors
Notice: Undefined index: billing_country in D:\x\htdocs\wpwc\wp-content\plugins\woocommerce\classes\class-wc-checkout.php on line 176

Notice: Undefined index: billing_state in D:\x\htdocs\wpwc\wp-content\plugins\woocommerce\classes\class-wc-checkout.php on line 177
.
.
.
Camilo Bejarano March 19, 2012 at 5:30 pm #

Dude! just what i was looking for. But can I remove the phone number
Sheila March 20, 2012 at 3:21 pm #

This plug is was working for me until the last woocommerce upgrade. I am experiencing the same as Lafanter where the screen is blank – just the header “Checkout” is displaying. I tried uninstalling and reinstalling the plugin again to no avail. Anyone know what might have changed that needs to be upgraded in the plug?
huma March 24, 2012 at 3:45 am #

yes Sheila you are right it is not working with lates woocommerce upgraded that is 1.5.2
if you upgrade the woocommerece you have to find out the other option may be customize the latest plugin but i think if your work is fine then why you would update the plugin it is not good work if you updates the plugin with out taking the back up of all including files and DB

THanks

Best Regards
Huma Naseem
huma March 24, 2012 at 3:57 am #

Hello Ashley !
please help me what can i do now and please tell us all what sould we do with new updated version of woocommerece
thanks a lot for this kindness
John March 25, 2012 at 10:48 pm #

This seems to work with the latest updated WooCommerce v1.5.2.1

Thank you so much for posting this.

I teach a class on how to build e-commerce sites for people on social assistance and I’m deep into the process of moving the curriculum from Magento to WordPress + WooCommerce since I first discovered it in October 2011.

Your plug-in is great. If you’d like help to make the admin side of this plug-in I would love to offer my assistance.
Sheila March 26, 2012 at 11:06 am #

For those of you that are getting a blank page, do what user Endle wrote on Feb 23.
Look for array_return and replace it with array_merge. There are 2

function filter_shipping( $fields_array ) {
$fields_array = array_merge($fields_array, $this->update_shipping);
return array_diff_key($fields_array, array_flip($this->disabled_shipping));
}

function filter_billing( $fields_array ) {
$fields_array = array_merge($fields_array, $this->update_billing);
return array_diff_key($fields_array, array_flip($this->disabled_billing));
}
Umar March 30, 2012 at 11:13 am #

Is there a way to have an email me button as opposed to add to cart in WooCommerce? I just need to make a site where its possible to add products, but the customer doesnt want any online payments (but still wants to be able to easily add/remove products).So everytime the email me button is pressed I hook in some javascript or something to pop open a popup or something?
Samir April 12, 2012 at 6:39 am #

Anyone know where to find the index.php file in woocomm? OR if you know how to add a class to the shop’s title – help us all suffering from the woocommingitis.

Thanks.
Angela April 18, 2012 at 2:58 pm #

PLEASE make this a plugin! I’d certainly pay for it. I understand the logic of the code edits, but whenever I try to hook in I end up with errors, and to be honest I just don’t have the time to mess with it… that’s why good people like yourself make a living!
Rich April 20, 2012 at 7:57 am #

Hey, awesome stuff maybe this would solve a little problem with layout in woocommerce I am having because field liek first and last name layout next to each other and i cannot figure how to drop to next line. Maybe i can just do this to shut off those fields from displaying.

Thank You for spending the time to do this.
mehmet April 22, 2012 at 8:29 am #

Hi,
I want to add two new field registration form. Using Woocommerce. I tried hard, I could not. Please help ..
David Horn May 1, 2012 at 2:35 am #

Perfect – thanks for this. Yes, I’d pay for this if it were on Code Canyon or something similar. Got to be worth $5 of anyone’s money to be able to customise the checkout forms. Good luck, and thanks again!
Anton Vasilescu May 13, 2012 at 2:17 pm #

I’m trying to use the plugin but I am getting this error:

Fatal error: Call to undefined function array_replace() in /home/antonv/public_html/3dessentials.com/3dewp/wp-content/plugins/woocommerce-aschroder-customize-checkout/disable-checkout-fields.php on line 82

Anybody has an idea to why is this happening?