How to Edit and Disable Checkout Fields in Woocommerce

January 7, 2012 in PHP, Web Development with 12 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!

12 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.