WooCommerce Customize Checkout Fields

I was digging around in WooCommerce while trying to come up with a quote for a client. Part of the scope had me wondering if you could remove some fields from the checkout process. If you aren’t selling physical products a billing address can be too much information and could even be off-putting to potential customers.

I eventually tracked the fields down from the checkout template, to the checkout class to the get_address_fields() method in the WC_Countries class.

Removing Billing Address

Like a lot of things in WooCommerce you can modify values via filter. To remove all the physical address fields from the billing address here is the code I used:

// Remove some checkout billing fields
function kia_filter_billing_fields($fields){
    unset( $fields["billing_country"] );
    unset( $fields["billing_company"] );
    unset( $fields["billing_address_1"] );
    unset( $fields["billing_address_2"] );
    unset( $fields["billing_city"] );
    unset( $fields["billing_state"] );
    unset( $fields["billing_postcode"] );
    unset( $fields["billing_phone"] );
    return $fields;
}
add_filter( 'woocommerce_billing_fields', 'kia_filter_billing_fields' );

Yes this could go in functions.php but that kind of locks you into a specific theme. If this is a permanent change then you probably want to create a site-specific plugin and put it in the wp-content/mu-plugins/ folder.

Add a Custom Checkout Field

While I was fooling around I figured I would see if I could add a custom checkout field. Turns out this is a bit more complex, but ultimately do-able. The following code will add the field to the checkout page, save the data to order meta and display the order meta in the orders admin.

// Add a new checkout field
function kia_filter_checkout_fields($fields){
    $fields['extra_fields'] = array(
            'some_field' => array(
                'type' => 'text',
                'required'      => true,
                'label' => __( 'Some field' )
                )
            );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'kia_filter_checkout_fields' );

// display the extra field on the checkout form
function kia_extra_checkout_fields(){ 

    $checkout = WC()->checkout(); ?>

    <div class="extra-fields">
    <h3><?php _e( 'Additional Fields' ); ?></h3>

    <?php foreach ( $checkout->checkout_fields['extra_fields'] as $key => $field ) : ?>

            <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

        <?php endforeach; ?>
    </div>

<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'kia_extra_checkout_fields' );

// save the extra field when checkout is processed
function kia_save_extra_checkout_fields( $order_id, $posted ){
    if( isset( $posted['some_field'] ) ) {
        update_post_meta( $order_id, '_some_field', sanitize_text_field( $posted['some_field'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'kia_save_extra_checkout_fields', 10, 2 );

// display the extra data in the order admin panel
function kia_display_order_data_in_admin( $order ){  ?>
    <div class="order_data_column">
        <h4><?php _e( 'Extra Details', 'woocommerce' ); ?></h4>
        <?php 
            echo '<p><strong>' . __( 'Some field' ) . ':</strong>' . get_post_meta( $order->id, '_some_field', true ) . '</p>'; ?>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'kia_display_order_data_in_admin' );

Add the field to order emails

The easiest way to add data to the emails is to add our meta to the list of meta that WooCommerce will print out automatically. For WooCommerce 2.2, this can be achieved as follows:

// pre-WooCommerce 2.3
function kia_email_order_meta_keys( $keys ) {
    $keys['Some field'] = '_some_field';
    return $keys;
}
add_filter('woocommerce_email_order_meta_keys', 'kia_email_order_meta_keys');

But note, that this approach has been deprecated and starting with WooCommerce 2.3, you will do it the following way:

// WooCommerce 2.3+
function kia_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
    $fields['some_field'] = array(
                'label' => __( 'Some field' ),
                'value' => get_post_meta( $order->id, '_some_field', true );
            );
    return $fields;
}
add_filter('woocommerce_email_order_meta_fields', 'kia_email_order_meta_keys', 10, 3 );

Hope that helps you. I think there are a few plugins out there now if this was too intimidating, so I would suggest using one of those.

Note: This was tested with WooCommerce 2.2. Any prior or later versions, I can’t promise will be exactly the same.

Posted in Snippets | Tagged , | 6 Responses

Custom styles for TinyMCE 4.0 in WordPress 3.9

The release of WordPress 3.9 saw the update of the included TinyMCE editor to version of 4.0 and this caused no small amount of havoc for people who’d been customizing the text editor. In the past, one was able to define one’s own custom styles and modify the block formats like so:

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

function mce_mod( $init ) {
    $init['theme_advanced_blockformats'] = 'p,h3,h4';
    $init['theme_advanced_styles'] = "Big Header=bigheaderclass; Red Header=redheaderclass";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

You’re a Real Button Now

But surprise! With the update this doesn’t work any more. Digging into the TinyMCE scripts, the formats appear to now be a custom tinyMCE button. You can see that the formatselect button is added to mce_buttons_2; in the class-wp-editor.php;. And then I tracked that to tinymce.js :

editor.addButton('formatselect', function() {
    var items = [], blocks = createFormats(editor.settings.block_formats ||
    'Paragraph=p;' +
    'Address=address;' +
    'Pre=pre;' +
    'Heading 1=h1;' +
    'Heading 2=h2;' +
    'Heading 3=h3;' +
    'Heading 4=h4;' +
    'Heading 5=h5;' +
    'Heading 6=h6'
);

With that in mind, it appears that to modify the block formats, we’ll need to change the editor.settings.block_formats. And theme_advanced_syles; has now become style_formats; in the TinyMCE init object.

Putting it All Together

function mce_mod( $init ) {
    $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4';

    $style_formats = array (
    array( 'title' => 'Bold text', 'inline' => 'b' ),
    array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ),
    array( 'title' => 'Red header', 'block' => 'h1', 'styles' => array( 'color' => '#ff0000' ) ),
    array( 'title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1' ),
    array( 'title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2' )
);

    $init['style_formats'] = json_encode( $style_formats );

    $init['style_formats_merge'] = false;
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

function mce_add_buttons( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

Small caveat: I’m not sure where to add the styles for the drop-down items themselves. In the TinyMCE sample, the “Red Headline“ option is red. I couldn’t figure this out. If you do please let me know in the comments!  

Posted in Snippets | Tagged , | 10 Responses

WooCommerce Name Your Price 2.0 released! Now with Variable Product Support

In the summer of 2012, I was visiting one of my best friends in New Orleans… cooking lots of tacos and mixing lots of margaritas. While there, one of my earliest clients contacted me and wanted to be able to sell his books for whatever the customer was willing to pay. Did I know a way to do that with WooCommerce he asked? Well no, but I’m only working on my taco recipes at the moment so maybe I can look into it?

I started to poke around and ask some questions at Github and someone else contacted me to tell me that he’d buy this right away if it existed. I took these two people as the least-scientific version of “Idea Validation” imaginable and decided to give this thing a whirl.

About a month later I had a working prototype up and for sale at WooThemes. It only worked on simple products and then with a little more effort on subscriptions. I was pretty content to leave it at that, but one request kept coming back… can this work with variable products?

For a long time the answer was no, or maybe, or I’m working on it, but mostly no. You see, I’m also a semi-professional athlete so I am not a full-time coder… and variable products are complicated! But after an extremely long “beta” process I am pumped to announce that Name Your Price 2.0 now supports variable products! You can pick and choose which variations will be Name Your Price enabled, so you can all customers to set a price on all a product’s variations or just one. This feature does require WooCommerce 2.1 or greater. Version 2.0 was a pretty major overhaul, so be careful if you were overriding any templates. There’s some documentation coming on that.

Finally, Name Your Price for variable products

Finally, Name Your Price for variable products

So if this was holding you back from purchasing Name Your Price, head over to Woothemes and pick up your copy!

Important: Support requests are not handled in the comments and must go through WooThemes.

Posted in Plugins | Tagged | 11 Responses