≡ Menu

Customizing the WooCommerce Checkout Page

img

How to Customize the WooCommerce Checkout Page

Many questions related to customizing the WooCommerce checkout page have been brought up recently.  As you’ll soon see it is possible to modify fields in the checkout page without spending money on expensive extensions for WooCommerce.  However, before we dive into the details I want to share a quick story to help put it all in perspective.

Way back in 2007 I got my start in the eCommerce business.  I was fresh out of college and knew very little about average order size, payment gateways, SSL certificates or any of the standard eCommerce jargon.  Somehow I was able to land a job as an account manager with an up-and-coming software as a service company.  Their main product was a custom eCommerce platform for small to mid-sized businesses.  I soon found myself working directly with the two guys that owned the company.  Stress levels were high but looking back at it now, the knowledge gained was worth it.

In working with hundreds of clients (over a 2 year period) I learned that no two eCommerce sites were the same.  Each had their own unique characteristics and needs especially in regards to the checkout process.  The out of the box checkout page we had was a starting point but our clients were always looking to customize the fields within it to fit their specific needs.

That was more than five years ago and at the time, making updates to fields on the checkout page was a process to say the least.  Being the middle-man, I had to determine the changes our clients wanted to make and then communicate that to our in-house developers.  They would then give me an estimate of how long it would take, how much it would cost and when they could get started which I would have to communicate back to the client.

My point in telling you that short story is that customizing the checkout page of an eCommerce site used to be a big deal that took time and money.  However, thanks to the combination of WordPress and WooCommerce it’s now easy to customize fields on the checkout page of your eCommerce site.

In this tutorial on customizing the WooCommerce checkout page we’ll show you how to do the following;

  • create a child theme and functions.php file to ensure your customizations are saved
  • modify field labels and placeholder text
  • remove fields
  • add custom fields
  • make fields not required or required

Create a Child Theme before making WooCommerce Checkout Modifications

Customizing the WooCommerce checkout page is a matter of making modifications to your themes functions.php file.  Hooking into the woocommerce_checkout_fields filter allows us to modify any fields on the checkout page.  However, before we jump into the customization details we need to first talk about the correct way to make updates via the use of child themes.

It’s very important that you first install a child theme and make updates to the functions.php file within it.  Do not make updates to the parent files because all customizations will be lost when you upgrade to the latest version of your theme.  The use of a child theme ensures that your hard work is preserved.

So start by reviewing our “Safely Customize your Site with Child Themes” tutorial to learn how to create a child theme (for any theme).  After your child theme has been created you need to add a functions.php file to it.

Here’s how add a functions.php file to your Child Theme

Now that you have a child theme you need to go one step further and create a functions.php file.  The functions.php file for the child theme simply consists of PHP open and close tags as shown here…

child theme functions Customizing the WooCommerce Checkout Page

Copy and paste the following into Notepad++ to create the functions.php file and upload it to the root of your Child theme…

<?php
/*    All child theme functions go here
----------------------------------------------- */

	
?>

Make sure to save the file as “functions.php”.  All customizations will go in-between the PHP open and close tags.  You’re now ready to properly make updates to the WooCommerce checkout page.

Watch the tutorial video below to learn how to create a child theme (and add a functions.php file to it) so that your WooCommerce checkout page customizations will be saved when you upgrade to the latest version of your theme…

How to Change WooCommerce Checkout Field Labels, Placeholder text and Remove Fields Entirely

Now that you know how to properly make updates to your site via the use of child themes, let’s dive into customizing the WooCommerce checkout page.  Specifically, let’s start by learning how to change field labels and the placeholder text within the fields.  We’ll end this segment by showing you how to remove fields from the checkout page entirely.

Customizing WooCommerce Checkout Field Labels and Placeholder Text

Let’s start by showing you how to change WooCommerce checkout field labels and the placeholder text within the fields.  We’ll use the “Order Notes” field as our first example.  Say we want to change the default label (Order Notes) and the placeholder (Notes about your order, e.g. special notes for delivery) to something new.

To modify the Order Notes field Label and the Placeholder text do the following…

In the WordPress admin go to Appearance > Editor > functions.php of your child theme > paste the following code between the PHP open and close tags…

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
     $fields['order']['order_comments']['placeholder'] = 'My new placeholder';
     $fields['order']['order_comments']['label'] = 'My new label';
     return $fields;
}

Here’s what that will look like on the WooCommerce checkout page…

change labels on woocommerce checkout Customizing the WooCommerce Checkout Page

You can change the label as well as the placeholder to anything you’d like by modifying the “My new placeholder” and “My new label” text in the code above.

In addition to the “Order Notes” field, it is possible to modify the label and placeholder for any fields on the checkout page and here’s how to do that…

Let’s say we want to change the “Company Name” field label and add a placeholder to it.  We would do that by making a few simple tweaks to the hook as shown below…

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['billing']['billing_company']['placeholder'] = 'Enter Company Name';
$fields['billing']['billing_company']['label'] = 'Business Name';
return $fields;
}

Here’s what that update looks like on our WooCommerce demo site…

modify company name field Customizing the WooCommerce Checkout Page

Shipping Address field labels and placeholders are changed in the same way.  For example, you could change the “Address” field label to “Shipping Address” and placeholder to “Enter your Shipping Address” with the following PHP snippet…

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['shipping']['shipping_address_1']['placeholder'] = 'Enter your Shipping Address';
$fields['shipping']['shipping_address_1']['label'] = 'Shipping Address';
return $fields;
}

Here’s a screen capture of what that looks like on the Checkout page of our demo site…

change shipping field label Customizing the WooCommerce Checkout Page

So you can use that same snippet of PHP to change the labels and placeholders for any of the checkout fields.

How to Remove Fields from the WooCommerce Checkout Page

Now lets take a look at how to remove fields entirely from the WooCommerce checkout page.  Again lets use the “Order Notes” field in our first example.  Say we want to remove the field from the checkout page.  To remove the Order Notes field paste the following hook between the PHP open and close tags…

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
unset($fields['order']['order_comments']);

return $fields;
}

Here’s what that looks like on our demo site…

remove order notes field Customizing the WooCommerce Checkout Page

If you want to remove multiple fields from the checkout page simply add additional “unset($fields” to the hook.  For example, say you wanted to remove the Order Comments, Phone and Email fields.  You would copy/paste the following code into the functions.php file within your child theme…

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
unset($fields['order']['order_comments']);
unset($fields['billing']['billing_phone']);
unset($fields['billing']['billing_email']);

return $fields;
}

Here’s what that modification to the checkout page looks like on our demo site…

remove multiple fields from woocommerce checkout Customizing the WooCommerce Checkout Page

Here’s the full list of WooCommerce fields.  Use this list to modify any fields on the checkout page…

array passed to woocommerce checkout fields Customizing the WooCommerce Checkout Page

Take a few minutes to watch our tutorial video below which demonstrates how to do the following…

  • Modify WooCommerce Checkout field labels and placeholder text
  • Remove any of the fields on the WooCommerce checkout page

Adding Custom Fields to the WooCommerce Checkout Page

Every business has its own unique traits and in many cases that requires adding custom fields to the checkout.  The good news is that with WooCommerce it’s easy to add functional, custom fields to the checkout process.  In fact, it’s as simple as copying the PHP snippet below and pasting it into the functions.php file within your child theme.

To add a custom field to your checkout copy/paste the following code in your child theme functions.php file…

/**
* Add the field to the checkout
**/
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) {

echo '<div id="my_custom_checkout_field"><h2>'.__('My Field').'</h2>';

woocommerce_form_field( 'my_field_name', array(
'type'          => 'text',
'class'         => array('my-field-class form-row-wide'),
'label'         => __('Fill in this field'),
'placeholder'       => __('Enter something'),
), $checkout->get_value( 'my_field_name' ));

echo '</div>';

}

/**
* Process the checkout
**/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
global $woocommerce;

// Check if set, if its not set add an error.
if (!$_POST['my_field_name'])
$woocommerce->add_error( __('Please enter something into this new shiny field.') );
}

/**
* Update the order meta with field value
**/
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');

function my_custom_checkout_field_update_order_meta( $order_id ) {
if ($_POST['my_field_name']) update_post_meta( $order_id, 'My Field', esc_attr($_POST['my_field_name']));
}

Here’s a screen capture of what it looks like on our demo site…

add custom field to checkout Customizing the WooCommerce Checkout Page

Watch the video below to learn how to add special custom fields to the WooCommerce checkout page.  They will show up when you look at the Order Details in the WordPress admin…

How to Make WooCommerce Checkout Fields Required or Not Required

At this point, you’ve learned how to change field labels, placeholders, add custom fields and remove fields altogether.  The last thing I want to show you is how to make WooCommerce checkout fields not required or required depending on the specific needs of your WordPress powered eCommerce site.

It’s possible to make any of the WooCommerce checkout fields required or not required.  The important thing to note is that “true” makes the field required and “false” makes it not required.

For example, to make the Billing Address “Phone” field not required paste the following code between the PHP open and close tags in the functions.php file of your child theme…

add_filter( 'woocommerce_billing_fields', 'wc_npr_filter_phone', 10, 1 );

function wc_npr_filter_phone( $address_fields ) {
$address_fields['billing_phone']['required'] = false;
return $address_fields;
}

Below is a screen capture of what it looks like on our demo site when we make the Billing Address “Phone” field not required…

make woocommerce checkout fields not required Customizing the WooCommerce Checkout Page

Here’s how to make a field that is not require, required.  Take the Shipping Address “Company Name” field for example.  Let’s say we want to make that field required.  Using a slightly modified version of the same snippet of code as above we can change the Shipping Address “Company Name” field to required and here’s how…

add_filter( 'woocommerce_shipping_fields', 'wc_npr_filter_company', 10, 1 );

function wc_npr_filter_company( $address_fields ) {
$address_fields['shipping_company']['required'] = true;
return $address_fields;
}

Pasting the above code between the PHP open and close tags in the functions.php file of your child theme will result in the following…

make woocommerce checkout field required Customizing the WooCommerce Checkout Page

Take a few minutes to watch our tutorial video below to see how to make WooCommerce checkout fields not required or to make them required…

For your reference:

  • Learn more about the importance of using child themes when customizing your WordPress site here, “Why use a Child Theme
  • To learn more about how checkout fields are loaded into WooCommerce refer to WooThemes documentation on “Customizing checkout fields using actions and filters
  • We use a Mystile Child theme in the videos above, however, this will work with any theme
  • The process for creating a child theme is the same for all themes

Please use the new Upload WP Community Forums to post questions and comments on Customizing the WooCommerce Checkout page.  Thanks

Teddy Triton

I'm a blogger and the founder of UploadWP.com. Upload WP was originally created as a training tool for my Flippa.com clients. Having bought and sold a large number of WordPress sites on Flippa, I needed an effective and efficient way to teach people how to make updates to their new sites. Upload WP was the answer and the site has since grown into a leading WordPress Tutorials destination. I enjoy helping people solve their WordPress related issues. If you have any questions or a WP issues that you need help with, please leave a comment below and we'll do our best to help.

View all contributions by

{ 296 comments… add one }

  • Amelie April 26, 2013, 12:43 pm

    Thank you very much Adam for this tutorial. Again I find them so helpfull and usefull! Thanks for the time given.
    I havn’t cerated a child theme so fare, doing my changes in custom.css. But my concern is the changes I’ve done in the Woocommerce template. I’ve modifyed some php pages in it. What will hapen if I update woocommerce plugin? Is it possible to do something like a child theme to save the changes?
    Thanks

    Reply
    • Teddy Triton

      Teddy Triton April 26, 2013, 11:29 pm

      Hi Amelie,

      Thanks for letting me know that our WooCommerce tutorials have been useful. The updates that you’ve made in the custom.css box in the Theme Options > Display Options > General settings should be fine when you update to the latest version of WooCommerce. Going forward however, you should install and use a child theme to ensure your updates are saved. Here is the link to download the Mystile Child theme we created. Simply download it, unzip it > upload it like you would any other theme > activate it and any changes you make to the style sheet and/or functions.php will be preserved when you upgrade to the latest version of you theme…

      Click the link below to download our Mystile Child theme…

      http://uploadwp.com/wp-content/uploads/Mystile-Child-Theme.zip

      Reply
  • woocommerce April 29, 2013, 9:37 am

    Expression of thanks that helped me a lot.

    Reply
    • Teddy Triton

      Teddy Triton April 29, 2013, 9:52 pm

      I’m glad to hear it was helpful and thanks for your support.

      Adam

      Reply
      • redman June 2, 2013, 9:27 am

        Hi , i notice upon completing the removal of company name , there will be an ” X ” appearing beside the Checkout and also “s” appearing beside Have a coupon , how do we remove them ?

        Reply
  • Rodney Lee May 7, 2013, 3:27 am

    Thanks Adam, I find your tutorials very useful. However I have a problem when activating the child theme on my wootique theme. After activating the child theme, everything looks normal except the content background suddenly shrinks up at the back from its content (seems like its unable to load the sidebar-right.png). Maybe it will be better if I can let you take a look at my screenshot. Not too sure if you can help on this. Thanks.

    Reply
    • Teddy Triton

      Teddy Triton May 8, 2013, 1:48 pm

      Hi Rodney,

      I’d be happy to take look at it. Please send me the link to your site and/or a screen shot so I can take a closer look and hopefully find a solution. Thanks,

      Adam

      Reply
  • Karin May 9, 2013, 10:07 am

    Adam, Your site has provided immense help to me over the past two weeks as I’ve been trying to build my ecommerce site using Mystile and Woocommerce. Thank you. I’m now trying to figure out the final elements for my site and am stumped. I sell photo engraved pendants and want the customer to choose a pendant shape then have the opportunity (probably in cart, not checkout, right?) to input the text they want engraved, choose a font style, and upload their photo. Do you have experience with the gravity form plug-in http://www.woothemes.com/products/gravity-forms-add-ons/
    and if so, do you think this is the right investment for me to accomplish what I need?

    Reply
    • Teddy Triton

      Teddy Triton May 9, 2013, 2:30 pm

      Hi Karin,

      I have used the Gravity Forms plugin in the past and was really happy with it. Actually, I used it on a clients site (it was a business style WordPress site) a couple years ago and they were very pleased with it as well. I’ve not yet used Gravity Forms in conjunction with WooCommerce but my guess is that it will give you the functionality that you need.

      Here’s a tutorial video I found on YouTube that shows you “How to setup Gravity Forms with WooCommerce“…

      http://youtu.be/Kz2pw_a8MTM

      Please let me know if this helps and thanks for the positive feedback on our WooCommerce tutorials!

      Adam

      Reply
      • Veronica November 3, 2014, 9:13 pm

        Hi Adam thanks for the tutorial. it is very helpful..i have online clothing store which is fashion folks.. However I have a problem in customizing images on the shop section in my website i have no idea what’s going on there… why the gaps appear in between the images? if you have time to do so can you help me by visiting http://fashionfolks-id.com.. thank you so much for your help…

        best regards,

        veronica

        Reply
  • Imran May 11, 2013, 12:58 pm

    Hi Adam

    Firstly, many thanks for all the effort you’ve put in to put the tutorials together here and on YouTube. I’ve been working my way through them this week and the pace at which you explain is perfect to follow.

    My question is, what widget did you use for the Subscribe (email) in the right hand column?

    Reply
    • Teddy Triton

      Teddy Triton May 11, 2013, 2:41 pm

      Hi Imran,

      Thanks for letting me know that our WordPress tutorials are helping. I very much appreciate the support. It keeps us motivated so thanks for that.

      The subscribe widget used in this tutorial is the “Woo – Subscribe / Connect” widget. Here’s our tutorial video on how to setup “Woo – Subscribe and Connect”…

      Also, here’s where you’ll find the full (written and video) Woo Subscribe and Connect tutorial…

      http://uploadwp.com/canvas-theme-tutorial-4-widgets-and-subscribe-connect-setup/

      Thanks again for your support!

      Adam

      Reply
  • Mikkel Hansen May 13, 2013, 3:09 pm

    Hi Adam,

    I haven’t found a solution yet, so I will ask you here on your website, as you told me on YouTube.
    I hope you have an idea how to help me. :)

    _____________

    Hey Adam!

    Thanks for many great videos! It really helped me build my WooStore. Right now I’m learning to build a store – and I just reinstalled WordPress, WooCommerce and WooStore at my domain to try it all again.

    There is just a problem, that I don’t know how to fix.
    My store-buttom is mixed up. It is in three parts – and is not looking like your at WorldCupTees.com at all.

    I have uploaded a screenshot to my website at: http://mikkelhansen.net/woostore/.

    Can you tell me how to change that?

    There is also another fail on the page, which also is a fail at WorldCupTees.com. The (+) & (-)-button does not work as it should. If I use my iPhone it does work, but with safari and FireFox it does not. Look at the second picture at http://mikkelhansen.net/woostore/.

    Can I remove this function? My customers can’t buy more than one at a time, so it would be great if I could remove it.

    I hope you can help me. (-:

    Best regards
    Mikkel Hansen
    Denmark

    Reply
    • Teddy Triton

      Teddy Triton May 14, 2013, 3:46 pm

      Hi Mikkel,

      Thanks for your questions regarding the WooStore theme and for the positive feedback on our WooCommerce tutorials. In regards to your second question with the plus and minus buttons not working with WooStore… Are you referring to them not working on the product detail page, the shopping cart or both? I just tested WorldCupTees.com in Firefox and Chrome and could not recreate the issue. The + and – buttons worked properly on the product detail page and in the shopping cart page.

      I took a look at the screen shot you provided and see what you mean in regards to the shopping cart button showing up in 3 places in the top navigation. Without looking in the WordPress admin, it’s difficult to say what might be causing that issue.

      My suggestion would be to go to Fiverr.com and search for “WordPress” > you’ll find a bunch of gigs that will help fix any WordPress or CSS related issue > give one of them a try. For $5 you can usually get any issue fixed. I often use Fiverr when I have issues that I can’t figure out on my sites and it almost always works.

      However, before going to Fiverr, I’d be happy to take a closer look at your site. If you want to create a user login so that I can access your WordPress admin I will try to fix the issues. The “Contact” form in the footer of UploadWP.com goes to my email. So if you want to create a user account for me to login and send me the info via the Contact page form I will do my best to help. Thanks.

      Adam
      p.s. here’s the link to our Contact page

      Reply
  • Niels May 14, 2013, 8:37 am

    Hi great site. i have a problem when i activate the child theme all the icons disappear. You can check out my comparison here. http://www.tuinontwerpen3d.nl/problem.jpg

    Can you help me get the icons back?

    Reply
  • Sam May 17, 2013, 6:05 am

    Hi Adam,

    This is a fantastic article, and has given me great insight in to what I’m working on at the moment.
    I’m trying to add some custom fields to the checkout page which I have got working now after reading your article. However I want these fields to appear only when the product category of the products in the cart is (‘Subscriptions’).
    Is there a way to show these custom fields conditionally based on the product?

    Thank you
    /Sam

    Reply
    • Teddy Triton

      Teddy Triton May 27, 2013, 9:36 am

      Hey Sam,

      That is a great question. I’m honestly not sure if it’s possible to conditionally show your custom fields based on the product that’s being purchased. I will have to do some research and testing on that one before I can say it is or is not possible. In the meantime, I’m going to go ahead and publish your comment with the hopes that someone else out there might know the answer and share it with us.

      Thanks again for your question and for letting me know the info on Upload WP has been helpful. Your support is very much appreciated.

      Adam

      Reply
      • Lisa Kuntz May 28, 2013, 9:50 pm

        Adam,
        Thanks this article has been very helpful!

        I am trying to do the same thing Sam asked about. I have a digital product that has a free trial version. I want them both to run through woocommerce so I can set up the followup emails properly & keep all orders in the same database. However on the free trial download, I want to only require a name and email.

        Your tutorial has helped me figure out how to do this, however I only want to omit fields on one product.

        Do you have suggestions on how to do this?
        Thanks!

        Reply
        • Teddy Triton

          Teddy Triton May 29, 2013, 7:47 pm

          Hey Lisa, Great question and I’m glad to hear that the videos have helped. Without having time right now to do some research / testing I’m honestly not sure if its possible to omit certain woocommerce checkout fields based on the product being purchased. It very well may be possible and there is a good chance that someone else out there reading this has a solution. So I will go ahead and publish this comment and ask for feedback / suggestions from our readers. Thanks for your support and positive feedback Lisa.

          Adam

          Reply
    • Dragan June 7, 2013, 5:42 am

      One more person here eagerly waiting to find out how to do this :)

      Btw. great site, Teddy. Bookmarking it.

      Reply
  • Ravi May 18, 2013, 1:02 pm

    Hi Teddy,

    A very nice and comprehensive tutorial there. But I wanted to achieve a little more checkout page customization. I don’t want to overwhelm a customer with so many fields hence my boss wants me to completely remove shipping portion, I’d be extremely happy if you could explain me that.

    Regards.

    Reply
  • Deborah May 23, 2013, 6:59 pm

    Okay, I am a total newbie.
    Your first instruction is:
    “All that you need to create a child theme is access to the directory in which your WordPress site is stored and a text editor (Notepad++ for Windows works great, as does Text Wrangler for Mac.)”
    Is the directory you are referring to on my host site, or the Wordpress admin location? Thanks in advance,
    Deborah

    Reply
    • Teddy Triton

      Teddy Triton May 23, 2013, 10:27 pm

      Hi Deborah,

      Thanks for your question. Have you had a chance to checkout our tutorial on, “Safely Customize your Site with Child Themes“? If not, please check that out because I think it will help answer some of the questions about child themes. If you still need help let me know and I’ll help you create one for your theme. Thanks,

      Adam

      Reply
  • NKWP May 30, 2013, 7:20 am

    Adam, awesome tutorial….

    Quick question…is there a way to make the coupon code field required? If so, could you advise.

    Reply
    • Teddy Triton

      Teddy Triton May 31, 2013, 7:49 am

      That’s a good question. I’m honestly not sure if or how to make the “Have a Coupon?” option required. I’ll look further into it asap and let you know what I find.

      If anyone else out there knows how to make the Coupon field required on the WooCommerce Checkout page please share it with us here.

      Thanks,

      Adam

      Reply
  • Ola May 30, 2013, 10:11 am

    Thanks Teddy Triton, You have indeed helped me a lot in the customization of my checkout page, however am having issues with the fields i added. They are not showing in the users page or the mail sent to me. Thus its really affecting me as i cant tell which of the fields value were selected. I would appreciate if you can help in this regards. Thank you so much as i await your response.

    Reply
    • Teddy Triton

      Teddy Triton June 1, 2013, 7:43 am

      Hi Ola,

      Please let me know what the URL is to your site and I will take a closer look at the issue. Thanks – Adam

      Reply
  • Rudd May 30, 2013, 11:19 am

    Wow. A very detailed tutorial. Thanks for your time and effort!

    Reply
  • Luke May 31, 2013, 6:05 am

    Hi Teddy,

    Thanks for this awesome tutorial! It helped me alot, but now i need to change the order of the checkout-elements.
    I’m German and because of the annoying german rules for shops the “order”-button needs to be directly after the price. This meens, that i have to put before the table, where the products are listed.
    Could you tell me what I have to do to solve this problem?

    Thanks for an answer!

    Reply
    • Teddy Triton

      Teddy Triton June 6, 2013, 10:07 am

      Hi Luke,

      Thanks for letting us know that our WooCommerce tutorials have been helpful. Positive feedback like that keeps us motivated to make more tutorials. In regards to your question on moving the “order” button so that it appears directly after the price… I have a couple follow up questions that will help me understand exactly what you’re trying to do.

      On which page(s) does the Order button (I’m assuming by Order button you mean “Add to Cart”) need to show up directly after the price? In other words, does it need to show on the /shop page and the product detail pages? Or just at the product detail level? Please specify the pages that you need this modification on.

      Also, what theme are you using?

      Please provide more specific info and we’ll do our best to help. Thanks again for the positive feedback.

      Adam

      Reply
      • Luke June 12, 2013, 3:16 pm

        First of all, sorry for my late answer and thanks for your answer.

        What I meant was the checkout page. Normally you fill in your address and so on. At the end of the page there’s a table in which the products that you will buy are listed.
        Next to the final-price is the selection-area for the payment.
        And then, there is the button “Buy”.

        Now I would like to have the payment selection before the table. The “Buy” button will then be directly under the final price.

        Thanks again for your help, Luke

        Reply
  • Beth May 31, 2013, 11:20 pm

    Hi Adam – Really GREAT tutorials, I have some familiarity with WP, but had never had an e-commerce site and was really nervous about it. Your tutorials here and on YouTube were amazingly helpful and I’m off to a good start. However, my site is very basic, it’s a site providing transcription services, very few actual products and all virtual, however, I need customers to be able to upload a file or provide a link during the order process, and then we provide them with the completed Word doc when the order is completed.

    I am not as concerned about getting the completed file to the customer as I am with the upload at the checkout process. The customer can use the order notes to place any instructions or a URL, and ideally, I would like a file upload option just below the order notes box.

    I’ve been doing research, and I found this extension:

    http://www.woothemes.com/products/product-add-ons/

    And I wondered if you were familiar with it, or if you think this would be an appropriate extension to provide an upload file box/field on the checkout page. I did try several free plugins that supposedly provided this feature, but they simply didn’t work, or provided the upload option on the order status page, which yes, would be an option, but seems very awkward for the customer to complete an order and then have to go to the order status page to then upload the file.

    If you have any familiarity with this extension, I would really appreciate your input. If you know of any other way of accomplishing what I need, I’m definitely open to suggestions.

    Thank you SO much for all your help and great tutorials!
    Beth

    Reply
    • Teddy Triton

      Teddy Triton June 1, 2013, 5:39 pm

      Hi Beth,

      Thank you very much for the positive feedback in regards to our WooCommerce tutorials. I’m happy to hear that they have been helpful and it keeps me motivated to make more.

      Regarding adding upload functionality to the checkout page…

      I’ve not had a chance to test the Product Add-ons extension for WooCommerce. However, I just read through the description and it looks like it should work well for what you’re doing if your OK with the upload and Special notes option being on the Product Detail Page and Not on the WooCommerce Checkout page. From what I can tell, the Product Add-ons extension shows up at the product detail level. If that’s OK with you, then this extension should work great. My suggestion would be to contact their support and ask if it’s possible to use this extension on the Checkout page or if it only works at the product detail level.

      Thanks again for the positive feedback and please let me know if I can help with anything going forward.

      Adam

      Reply
      • Beth June 2, 2013, 9:05 pm

        Thanks for the great feedback and comments on the Product Add-ons. Especially for pointing out that it would not be on the checkout page, which I had not noticed, but I think that being on the product detail page may work out just fine.

        Thanks again!!
        Beth

        Reply
  • Chris June 2, 2013, 11:38 am

    Hi, Thanks for the help on this, saved me some money from buying the extension :o)
    I have a quetion though, I am trying to make my custom field to be required and add this code

    add_filter( ‘woocommerce_shipping_fields’, ‘wc_npr_filter_my_custom_checkout_field’, 10, 1 );

    function wc_npr_filter_my_custom_checkout_field( $address_fields ) {
    $address_fields[‘shipping_my_custom_checkout_field’][‘required’] = true;
    return $address_fields;
    }

    but can not seem to get it to work, any help? Thanks!

    Reply
    • Teddy Triton

      Teddy Triton June 6, 2013, 12:35 pm

      Hi Chris,

      Thanks for your question and for letting us know this WooCommerce tutorial was helpful. When you paste the code in the functions.php of your child theme does the custom field show up but the field isn’t required? Or, does the custom field not show up at all? Also, what is the URL to your site so I can take a closer look? Let me know and I’ll test it out on one of our WooCommerce demo site and try to get it to work.

      Thanks,

      Adam

      Reply
  • Steve June 5, 2013, 1:42 pm

    Great tutorial, Teddy.
    Thanks,
    Steve

    Reply
  • Wouter June 6, 2013, 3:13 pm

    Excellent, this is what I was looking for. Unbelievable that Woocommerce doesn’t support this from the get-go. Thanks so so much!
    One question: how would you code a checkbox or radiobutton?
    I want to add an option to the checkout procedure where customers choose if they want to receive a newsletter or not.
    Making a customfield to just add their emailaddress is a bit silly since they already enter their emailaddress in a different field.
    Any clue on how to achieve this?

    Reply
  • Tom June 7, 2013, 3:25 am

    Hi Adam,

    Can i add a custom field beneath the postcode field in the woocommerce check out page ?

    Best regards
    Tom

    Reply
  • Gil June 8, 2013, 4:15 pm

    Great tutorial Teddy.
    I am kind of new to woocommerce and really looking for something similar, however, in my case I just want to show special information about the product (e.g this purchase will grant you 30 stars credit), show it in the product page, checkout page and emailed to the client. it seems very simple to me but I can’t find a good answer. in your tutorial you demonstrate using a custom field (my field) and show it on the checkout page but you use an input filed. I only want to show short note to the customer without him being able to edit it. is that possible?

    Thanks
    Gil

    Reply
  • Furkan June 9, 2013, 5:32 pm

    Thanks for tutorial. That’s really amazing. I have a question, though. I added multiple custom fields, but only one of them are showing up when someone orders something from the shop.

    And As I tried to add this code:

    “/**
    * Add the field to the checkout
    **/

    three times, because I want to add three fields, my website crashed. So in a nutshell could you tell me is there any way to insert more than one fields which will work?

    Reply
    • Rafael June 24, 2013, 1:25 pm

      Please scratch the previous post. Had to correct a few things..

      /**
      * Add the field to the checkout 1 + 2
      **/
      add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

      function my_custom_checkout_field( $checkout ) {

      echo '<div id="my_custom_checkout_field"><h3>'.__('Titel Text').'</h3>';

      woocommerce_form_field( 'THIS_IS_FIELD_1', array(
      'type' => 'text',
      'class' => array('my-field-class form-row-wide'),
      'label' => __('Label Text 1 <abbr class="required" title="required">*</abbr>'),
      'placeholder' => __('Placeholder Text 1'),
      ), $checkout->get_value( 'THIS_IS_FIELD_1' ));

      woocommerce_form_field( 'THIS_IS_FIELD_2', array(
      'type' => 'text',
      'class' => array('my-field-class form-row-wide'),
      'label' => __('Label Text 2 <abbr class="required" title="required">*</abbr>'),
      'placeholder' => __('Placeholder Text 2'),
      ), $checkout->get_value( 'THIS_IS_FIELD_2' ));

      echo '</div>';

      }

      /**
      * Process the checkout 1 + 2
      **/
      add_action('woocommerce_checkout_process', 'THIS_IS_FIELD_1_PROCESS');

      function THIS_IS_FIELD_1_PROCESS() {
      global $woocommerce;

      // Check if set, if its not set add an error.
      if (!$_POST['THIS_IS_FIELD_1'])
      $woocommerce->add_error( __('<b>Field 1</b> is a required field.') );
      }

      add_action('woocommerce_checkout_process', 'THIS_IS_FIELD_2_PROCESS');

      function THIS_IS_FIELD_2_PROCESS() {
      global $woocommerce;

      if (!$_POST['THIS_IS_FIELD_2'])
      $woocommerce->add_error( __('<b>Field 2</b> is a required field.') );
      }

      /**
      * Update the order meta with field value 1 + 2
      **/
      add_action('woocommerce_checkout_update_order_meta', 'THIS_IS_FIELD_1_UPDATE');

      function THIS_IS_FIELD_1_UPDATE( $order_id ) {
      if ($_POST['THIS_IS_FIELD_1']) update_post_meta( $order_id, 'Field 1 Text', esc_attr($_POST['THIS_IS_FIELD_1']));
      }

      add_action('woocommerce_checkout_update_order_meta', 'THIS_IS_FIELD_2_UPDATE');

      function THIS_IS_FIELD_2_UPDATE( $order_id ) {
      if ($_POST['THIS_IS_FIELD_2']) update_post_meta( $order_id, 'Field 2 Text', esc_attr($_POST['THIS_IS_FIELD_2']));
      }

      /**
      * Add the field to order emails 1 + 2
      **/
      add_filter('woocommerce_email_order_meta_keys', 'THIS_IS_FIELD_1_EMAIL');

      function webpresentatie_titel_order_meta_keys( $keys ) {
      $keys[] = 'Field 1 Text';
      return $keys;
      }

      add_filter('woocommerce_email_order_meta_keys', 'THIS_IS_FIELD_2_EMAIL');

      function webpresentatie_subtitel_order_meta_keys( $keys ) {
      $keys[] = 'Field 2 Text';
      return $keys;
      }

      Reply
      • Teddy Triton

        Teddy Triton June 25, 2013, 2:06 pm

        Wow – thanks for sharing this with everyone Rafael! This will be very helpful to many people looking to further customize the WooCommerce checkout page. Thanks again for sharing.

        Adam

        Reply
      • Ania August 6, 2013, 4:08 pm

        Hi Rafael,
        Thanks for this code! I wanted to add multiple custom fields to my checkout, and this code works well UNTIL I get to the "add to order emails" code. This part of the code breaks my site completely, both front- and back-end – I have to go into cPanel to change the code back. I'd definitely like the custom fields I've added to show up in order emails, so I'd really like to get this to work. I thought there might be a problem with the "webpresentatie_titel" part of the code, and I changed this to "woocommerce_email" – that didn't work. Can you or anyone else out there let me know how to fix this code, or provide alternative code so that the custom field text is added to order emails? Many thanks!!

        Reply
        • Ania August 8, 2013, 12:58 pm

          Never mind! I figured out the code for adding custom fields to order emails myself! It should be (at least this works for me..):

          /**
          * Add the field to order emails
          **/
          add_filter('woocommerce_email_order_meta_keys', 'THIS_IS_FIELD_1_order_meta_keys');

          function THIS_IS_FIELD_1_order_meta_keys( $keys ) {
          $keys[] = 'FIELD 1 Description';
          return $keys;
          }

          add_filter('woocommerce_email_order_meta_keys', 'THIS_IS_FIELD_2_order_meta_keys');

          function THIS_IS_FIELD_2_order_meta_keys( $keys ) {
          $keys[] = 'FIELD 2 Description';
          return $keys;
          }

          Reply
          • Teddy Triton

            Teddy Triton August 8, 2013, 6:59 pm

            Thanks for sharing with us Ania!

          • Tyler August 14, 2013, 1:55 pm

            Ania's email method worked for me- except I'm only getting the first field and not my second field in the emails. But both fields show up under the order details on the woocommerce admin page.

      • Pete June 25, 2014, 9:23 am

        Wow some create coding and great information here, however
        what no one seems to has answered is what code do you put in the admin_new_order.php file for these fields to show.
        I get the code working so it shows and seems to work on the checkout page as suggested, however Nothing shows on the email itself.

        Any suggestions please

        Reply
  • Kristy June 11, 2013, 11:42 am

    Thank you for the great tutorial. I was wondering how I could make these custom fields editable to customers after they placed an order? Kind of like they can update their billing or shipping address, I would like them to be able to update the custom fields associated with their order.

    Reply
  • Tim June 12, 2013, 8:42 am

    Hello, and thanks for this really good tutorial! It helped me a lot!

    I just have one question.

    I want to change the size of some of the checkout fields. So instead of 2 on 1 line, I remove one of the fields, and the other one should be wide. How can I do that?

    Thank you :-)

    Reply
    • Teddy Triton

      Teddy Triton June 14, 2013, 8:07 am

      Hi Tim – I’m glad to hear that our WooCommerce tutorials have been helpful. Thanks for the positive feedback and for your question. I’m not sure how to widen checkout fields without spending some time playing around with it. I’ll spend some time working on it this weekend.

      If anyone out there knows how to change the size of WooCommerce checkout fields please share it with us here. Thanks,

      Adam

      Reply
  • John Langlois June 14, 2013, 8:05 pm

    Thank you for such detailed information and responding to your readers.
    I hope you can provide some insight on the WooCommerce API.
    I want to validate some fields in a variable product.
    Specifically, I want to make sure the buyer selected the right quantity available of each variation.
    Most of the interactions I have seen with the content of the cart are happening with filter hooks. However, I don’t think those allow one to essentially validate the moment. I might be able to change a value, but I can’t display an error message and go back to the cart.

    Am I correct in thinking that I need to add an action for that, something like

    add_action(‘woocommerce_checkout_process’, ‘my_custom_checkout_field_process’);

    function my_custom_checkout_field_process() {
    global $woocommerce;
    If the fields fail the test, redirect to the cart
    );
    }
    If this is not the proper place to validate the cart, is there a better way?

    Thanks

    Reply
    • Teddy Triton

      Teddy Triton June 16, 2013, 12:51 pm

      Hi John,

      I appreciate the positive feedback on our tutorials. You raise a great question on validating WooCommerce checkout fields for variable products. Off the top of my head I’m honestly not sure in regards to adding an action. I’ll need to do some research and testing before I can give you a reliable answer. In the meantime, I will go ahead and publish your comment with the hope that there is someone out there that can chime in with a good answer. I’ll update this comment after I’ve had some time to look further into it.

      Thanks again for your support,

      Adam

      Reply
  • John June 21, 2013, 5:54 pm

    Thank you so much. This helped me heaps and saved me cash! I removed all the billing address and phone details. Is there any reason why I would need them if I am only accepting payments through PayPal?

    Reply
    • Teddy Triton

      Teddy Triton June 22, 2013, 7:49 am

      Thanks for letting me know this tutorial was helpful John. If you're using PayPal to process orders then you can really streamline the checkout which it sounds like you've done that. Best of luck with your site and let me know if I can help with anything going forward.

      Adam

      Reply
  • Simon June 25, 2013, 11:59 am

    Hey Teddy, thank you very much! That's a very good tutorial. One of the best i've seen so far! Good work!

    I've just one small question, is there a way to set a field value like that?

    $fields['billing']['billing_company']['value'] = 'My new value';

    Like setting a value by default? I tried 'value' and 'text' but that didn't work.

    Reply
    • Teddy Triton

      Teddy Triton June 25, 2013, 1:28 pm

      Hi Simon,

      First of all, thank you for the super positive feedback on this WooCommerce checkout page tutorial. Your support is very much appreciated. I'm not sure that I'm completely understanding your question in terms of the type of field you'd like to add to the checkout page. Please provide some more detail in terms of what you're looking to do and I'll try to figure out a good solution.

      Thanks again,

      Adam

      Reply
      • Simon June 27, 2013, 2:54 am

        Hi, I just noticed that

        $fields['billing']['billing_company']['default'] = 'My new default';

        does what I wanted to do. Thanks everything's great!

        Reply
        • Teddy Triton

          Teddy Triton June 28, 2013, 9:37 am

          Hi Simon – I'm glad to hear that it worked for you. Thanks for the positive feedback.

          Adam

          Reply
  • Mary July 1, 2013, 3:42 am

    Terrific tutorials. Thanks for these

    I have the same question I have seen asked but not yet answered… How to get custom fields to appear in emails, etc

    I added custom fields to check out. ( delivery and pickup dates for a rental company) but they are not appearing in the emails confirming the order or any other documents (invoice, delivery note, email notification of new order). I see the fields within the order data in the woocommerce admin panel.

    Do you have a video on this?

    Reply
    • Teddy Triton

      Teddy Triton July 2, 2013, 12:00 pm

      Hi Mary – thanks for the complements on our WooCommerce tutorials. Regarding you're question on getting custom WooCommerce checkout fields to appear in emails…

      Please take a look at Rafael's comment. In it he shares code that should be exactly what you're looking for. Let me know if that helps.

      Adam

      Reply
  • Henrik July 2, 2013, 3:22 am

    Hi

    I'm looking for a way to change checkout fields depending on which
    payment gateway you choose.

    The store has 2 different payment options. Credit card and Invoice. When choosing invoice I would like to have the alternative shipping address to be greyed out as the shipping address need to be the same as invoice address for sake of fraud prevention. How do I solve this?

    //Henrik

    Reply
    • Teddy Triton

      Teddy Triton July 2, 2013, 12:38 pm

      Hi Henrik – You raise a great question regarding changing WooCommerce checkout fields based on payment gateway. Off the top of my head I'm not sure how to do that but chances are good one of our readers does. I'll go ahead and publish this comments and ask anyone that might know how to do this to chime in with the solution.

      Thanks,

      Adam

      Reply
  • Jason July 2, 2013, 10:58 pm

    Hi thank you for this great tutorial, it has helped me out so much. I just had one quick question. Instead of creating a completely new field, how would I add new field to an existing field such as the billing address section. And is there a way to change the title of the fields, such as "Billing Address" to something else?

    Thanks,

    Jason

    Reply
    • Connie July 15, 2013, 9:32 pm

      I am wondering the same thing. I want to change the title for the entire "Shipping Address" section to "Delivery Address" because we do not offer shipping, but we do deliver. Is this possible?

      Reply
      • Teddy Triton

        Teddy Triton July 16, 2013, 9:53 am

        Great question Connie. I will play around with the WooCommerce checkout page later today and see if I can figure out how to change the "Billing Address" and "Shipping Address" labels.

        In the meantime, if someone else knows how to do this please share it with us.

        Thanks,

        Adam

        Reply
  • Cynthia July 4, 2013, 2:53 am

    Hi
    You referred me here from Youtube.
    I am trying to change the text on the checkout fields for the billing address which i have set to be the same as the shipping address. i want the billing address label to be "Your Physical Address" and the billing address placeholder to be " Enter Your Physical Address for Delivery"

    My code is
    // Hook in
    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

    // Our hooked in function – $fields is passed via the filter!
    function custom_override_checkout_fields( $fields ) {
    $fields['billing']['billing_address_1']['placeholder'] = 'Your Physical Address';
    $fields['billing']['billing_address_1']['label'] = 'Enter Your Physical Address for Delivery';
    return $fields;
    }

    Reply
    • Teddy Triton

      Teddy Triton July 4, 2013, 2:13 pm

      Hi Cynthia,

      Try the CSS below…

      // Hook in
      add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

      // Our hooked in function – $fields is passed via the filter!
      function custom_override_checkout_fields( $fields ) {
      $fields['billing']['billing_address_1']['placeholder'] = 'Enter Your Physical Address for Delivery';
      $fields['billing']['billing_address_1']['label'] = 'Your Physical Address';
      return $fields;
      }

      Please let me know if that works for you. Thanks,

      Adam

      Reply
  • Craig Grella July 4, 2013, 10:52 am

    By far, this is the best info I've read on woo-commerce custom fields.
    Thx.
    Craig

    Reply
  • Daniel July 5, 2013, 3:15 am

    Hello,

    Mainly searching for how to add fields that have already been created with the Custom Extra Field woocommerce plugin, or even the above and wanting to edit the way my custom fields look and fit into my invoices etc.. the above didn't achieve that for me, rather it just listed above the default fields which didn't look very nice. Instead within your desired email you are wanting to edit. In my case: The New Order Email

    I done the following: open up: admin-new-order.php "Or the one your editing"

    Then add your custom field wherever you want it. The code looks like this:

    <?php if ( $order->order_custom_fields['mobile'] ) : ?>
    <p><strong><?php _e( 'Mobile:', 'woocommerce' ); ?></strong> <?php echo $order->order_custom_fields['mobile'][0]; ?></p>
    <?php endif; ?>

    Replace the first and third word 'mobile' with the name of your field 'my_field_name' and then the second word 'Mobile:' you can change to whatever you want: 'I like my new field:'

    I hope that helps someone :) It'll also not display fields the customer hasn't entered which is cool. No blank fields saying Fax: and nothing next to it.

    Peace,
    Daniel

    Reply
    • Teddy Triton

      Teddy Triton July 5, 2013, 8:45 am

      Thanks for sharing this with everyone Daniel!

      Reply
  • @joehobot July 6, 2013, 7:09 pm

    Nice tutorial, left you also positive feedback on video too. One thing that I have problem with is seeing the custom info in my "orders" . So I am able to add fields just fine but when customer orders the product I do not get those fields displayed in admin console. Am sure I need to add some type of code for admin too, but am not sure where?

    Any help would be appreciated! Also you might want to add "buy me beer button on here" :)

    Reply
    • Teddy Triton

      Teddy Triton July 8, 2013, 3:51 pm

      Hey Joe – thanks for the positive feedback on our tutorial video. It sounds like you've been able to create a custom field on the WooCommerce checkout page but have not been able to map it so that it shows in the admin. Please review the, "Adding Custom Fields to the WooCommerce Checkout Page" section of this tutorial which will show you the additional steps you need to take to get the custom field to show up in the admin. Please watch the video and use the code associated with that section and you should be good to go. Thanks,

      Adam

      Reply
      • santosh sharma July 23, 2013, 7:21 pm

        Hi
        I got through your part 3 Adding Custom Fields to the WooCommerce Checkout Page video tutorial but don't find code which will show custom fields on admin dashboard. Please help me i am also want to implement this.

        Reply
        • Teddy Triton

          Teddy Triton July 25, 2013, 10:22 am

          Hi Santosh – Please see the section of our Customizing the WooCommerce Checkout Page that's titled, "Adding Custom Fields to the WooCommerce Checkout Page". In that section you'll find the code you're looking for.

          Reply
  • Lisa July 8, 2013, 2:23 pm

    I've been watching all your WooCommerce tutorials – thank you! You said there to ask questions here so I hope it's ok.

    I've spent a week adding products and now I've run into a problem that I can't figure out how to solve. I'm hoping you may know the solution. I've tried everything I've found in forums and nothing has worked. I'm not a web developer but have learned to design my own website (so don't understand everything and don't dare to touch things I don't know about).

    Here's the error and what I've done so far:
    I am getting this error on all woocommerce cart and checkout pages when I tried to develop them.

    Fatal error: Call to a member function is_visible() on a non-object in /home/nextgen/public_html/wp-content/plugins/woocommerce/templates/content-product.php on line 25

    Have tried uninstalling woo and re-installing. Rebuilt my permalinks. Uninstalled all plugins. I use Headway Theme. The cart showed up in 2012 them but the store did not (it's the opposite in Headway theme). After I re-installed WooCommerce, I now get the same error on my shop page and it wasn't there before. Although it loads correctly with the shop.

    I really need to get this done ASAP. Thanks for your time and help!

    Reply
    • Teddy Triton

      Teddy Triton July 8, 2013, 2:29 pm

      Hi Lisa,

      The issue you're describing with the WooCommerce Cart and Checkout pages is definitely unusual. I've not yet come across the error that you're getting. My suggestion would have been to deactivate the plugin > delete the plugin > reinstall it and recreate the WooCommerce pages. However, it sounds like you've already tried that and it didn't work.

      If anyone out there has run into the same or similar issue and knows of a possible solution, please feel free to share it with us here.

      Thanks,

      Adam

      Reply
  • jbk July 11, 2013, 2:46 am

    Just wondering if any one has a snippet to unset free shipping at checkout when a product with a specific class (e.g. No Free Shipping) is in the cart?

    Reply
  • Jennifer July 11, 2013, 4:50 pm

    Hi Adam-
    This was immensely helpful in learning the RIGHT way to edit your site without risking damage in the future with updates. I have a related question about editing the CART page:

    My client offers either FedEx shipping or Local pickup and on the cart page there is a link that says 'Calculate Shipping' and drops down for the customer to enter their city state and zip which will then return an estimate for FedEx.

    The problem is that my client thinks this is totally unnecessary for the people who want to choose Local Pickup and he wants the wording changed from "Calculate Shipping' to something more like 'Enter Your Location to See Your Shipping and PickUp Options'.

    Would adding code to the new functions.php file I added to my child theme folder also be the place to edit this? How do I find the code to change that?

    Also, my client wants shipping explanations to show at the top of the Checkout page… is there a way to simply add some text to the top of the Checkout page to further instruct the customer before they enter their billing and shipping info? Do I have to do that with new code in the functions.php file or can I add the text to the actual PAGE in the backend of Wordpress?

    I would be forever grateful if I could find some answers to these questions that have had me stumped for weeks now.

    Reply
    • Teddy Triton

      Teddy Triton July 11, 2013, 9:26 pm

      Hi Jennifer – First of all – I very much appreciate the super positive feedback on our WooCommerce tutorials! I'm fairly confident that I can provide a solution for changing the wording on the WooCommerce Cart page as well as adding text to the top of the WooCommerce Checkout page. What theme are you using? Let me know so I can Firebug it…

      Thanks,

      Adam

      Reply
      • Jennifer July 12, 2013, 9:37 am

        Hi Adam,
        I'm using the Wootique theme that I customized myself, I figured yesterday after playing around out that you can add text to the top of both the CART and CHECKOUT pages just by editing the actual pages that WooCommerce creates in Wordpress itself. Doesn't seem to be causing any problems that I can see so far.

        Here are the pages you can see that I added text at the top of each one in an attempt to 'steer' the customer and help them to not be confused:
        1) http://borderspringsfarm.com/shop/cart/
        2) https://borderspringsfarm.com/shop/checkout/

        The reason I had to add so much info to explain is because the checkout page was not showing any shipping options when you first arrived there, and my client freaked out thinking that a customer might be able to go all the way through an order without paying for shipping. (Although I was assured by WooCommerce support that that would not happen unless it was a downloadable product that didn't require shipping).

        So… for a while I wasted time trying to skip the Cart page altogether, and just direct people straight to the Checkout page (that didn't really work out well, got some code from WC support that didn't work for me).

        But now, I think just adding the descriptive text at the top might work out fine, but I still would like to change the 'Calculate Shipping' to something more appropriate for my situation.

        Reply
        • Teddy Triton

          Teddy Triton July 15, 2013, 11:48 am

          Thanks for sharing that Jennifer! It's good to know that you can add more descriptive text to any of the WooCommerce Pages by simply editing the page itself. Thanks again for sharing your knowledge with the UploadWP.com community. I'm sure it will be helpful to many people.

          Adam

          Reply
  • Brad Soucy July 16, 2013, 7:10 pm

    Hello Adam,

    I've watched all these tutorials, thanks for making them. I'm making my first Wordpress site with WooCommerce, and I'm wondering it's possible to make the shipping calculator in the cart a required field. I tried using the functions you suggested for the checkout page, but it doesn't seem to work with the shipping calculator. For this site I want people to be able to see the shipping cost before they advance to the checkout page, and if they don't select a state with the shipping calculator, the shipping cost reads "0" on the checkout page. Thanks for your help!

    Brad

    Reply
    • Teddy Triton

      Teddy Triton July 18, 2013, 10:28 am

      Hi Brad,

      That's a good question… I've not yet played around with the WooCommerce Cart page enough to know for sure how to make the shipping calculator a required. What's strange is that the shipping cost on the cart page is displaying as 0 when a state is not selected. I'm going to publish this comment and ask for help from other WooCommerce users on this one. I'll spend some time later today looking into it further and update this comment if/when I find a solution.

      Thanks,

      Adam

      Reply
  • Laurie Baines July 17, 2013, 12:55 pm

    I'm new to wordpress and working on developing my skills. My first ecommerce site is almost complete (that would be site #2 for me).

    My client threw me a curve ball!

    I need to add a Tax ID# field to my woocommerce checkout that will also eliminate the tax if there is an ID# in the box.

    I have a basic understanding of functions, hooks etc, but of course don't want to "break it"

    Is there anyone that would be willing to walk me through this? I want to learn, not just be given the info.

    Appreciate any help!

    Reply
    • Teddy Triton

      Teddy Triton July 17, 2013, 2:41 pm

      Hi Laurie,

      That is a curve ball for sure! So it sounds like you need to add a custom field (Tax ID#) and I'm assuming that will not be a required field. Then, if a tax id is entered into the field it would override / eliminate sales tax on the products in the cart. Is that a correct interpretation?

      If so, I'd have to spend more time looking into how to make that work because I'm honestly not sure off the top of my head. I'm going to go ahead and publish your question and ask the Upload WP community to chime in with possible solutions to this.

      Thanks,

      Adam

      Reply
      • Laurie Baines July 17, 2013, 8:37 pm

        thank you! I certainly appreciate the help! right now, I'm implementing the custom field that will not be required. From this amazing tutorial, I feel I can make that happen!

        Reply
      • Laurie Baines July 24, 2013, 10:40 am

        I've been able to create a custom field for the tax ID#, make it not required. Now I'm stuck.

        Here's what I'm thinking this needs to do:

        If there is a Tax ID# in the field == tax is recalculated to be none & the cart updated.

        I found some other info on this, but it's not quite right I get an error and not sure why. So much to learn!

        add_action( 'woocommerce_checkout_update_order_review', array(&$this, 'taxexempt_checkout_update_order_review' ));
        function taxexempt_checkout_update_order_review( $post_data ) {
        global $woocommerce;

        $woocommerce->customer->set_is_vat_exempt(FALSE);

        parse_str($post_data);

        if ( isset($tax_exempt_checkbox) && isset($tax_exempt_id) && $tax_exempt_checkbox == '1' && !empty($tax_exempt_id))
        $woocommerce->customer->set_is_vat_exempt(true);
        }

        The sample used a check box, name and field. I removed the checkbox & name, but it still didn't work. Help?

        Also found this:
        } add_action( 'woocommerce_calculate_totals', 'remove_tax_for_exempt' );
        function remove_tax_for_exempt( $cart ) {
        global $current_user;
        $ok_taxexp = get_the_author_meta( 'granted_taxexempt', $current_user->ID );
        if ($ok_taxexp){ // now 0 the tax if user is tax exempt
        $cart->remove_taxes();
        }
        return $cart;

        which looked like it would work, but for some reason my order information disappeared and I couldn't process the order.

        HELP Please! Hate not having a solution for my client and leaving him hanging while I scramble. Thank you!

        Reply
        • Teddy Triton

          Teddy Triton July 25, 2013, 10:19 am

          Hi Laurie,

          I completely understand your frustration and wish I had a good answer for you. I'm just honestly not sure on this one. Have you looked into possible using an extension for woocommerce? There might be one that adds this type of functionality.

          If anyone out there can chime in and help Laurie find a solution to this it would be greatly appreciated.

          Reply
  • Rafael Casas July 22, 2013, 2:48 pm

    After I make the child theme and functions.php file the changes are made on the site but when I update the functions. php it goes blank and I have to select back. When I close and reopen my browser to the checkout page, I receive the same error (the screen is blank white). Do you have any suggestions to why this occurs?

    Thanks

    Reply
    • Teddy Triton

      Teddy Triton July 23, 2013, 8:40 am

      Hi Rafael,

      Most likely there is something wrong / incorrect with the code that you're pasting into the functions.php of the child theme. Please let me know / show me the code you're using and I'll do my best to trouble shoot it.

      Thanks,

      Adam

      Reply
      • kad January 9, 2014, 11:43 am

        Hi teddy, happy new year and thanks for the child theme tutorial, this made my week brighter lol

        I do have a white page too when i add this code:
        http://pastebin.com/v46eTX2w

        the function in question is "is_purchasable"
        My goal is to make a membership site where the (membership product) can be bought and others cant until membership is bought and confirmed.
        Using groups, groups woocommerce, subscription woocommerce.

        Best regards

        Reply
        • Teddy Triton

          Teddy Triton January 9, 2014, 4:09 pm

          Hi Kad,

          Happy New Year to you as well! I'm not sure I'm following you're question. Are you making updates to functions.php in your child theme and you're getting a white screen when using the php in the link you provided? Please use our Community Forums to post your question and please provide as much detail as possible. That will make it easier for me and other Upload WP community members to help you. Here's the link to our forums…

          http://uploadwp.com/community/index.php

          Reply
          • Kad January 11, 2014, 5:44 am

            ok, thank you very much for the advice, ill join there and discuss the matter.
            regards

  • Riley July 24, 2013, 12:33 am

    Do you have any video tuts on how to customize the woocommerce checkout layout? For example, I want to change the layout of the form and if possible split pages up (having billing and CC on first page, charge card, then get shipping info from customer).

    Thanks!

    Reply
    • Teddy Triton

      Teddy Triton July 24, 2013, 8:33 am

      Hi Riley – We do not yet have tutorials on customizing the layout of the WooCommerce checkout page, just the fields. I'll add that to our list of tutorials to work on though. If anyone out there can point Riley in the right direction it would be greatly appreciated.

      Reply
      • Riley July 24, 2013, 7:12 pm

        Thanks! I have been hacking away at it. But I am sure I am not doing it as effective or as efficient as possible. Thanks again for you help!

        Reply
  • Alex July 25, 2013, 2:33 pm

    Hi,

    Is it possible to re-oder the field in "edit my address page" for "billing address" & "shipping address"

    Reply
  • Bobby July 25, 2013, 4:51 pm

    Hello, nice article and I'm sure I will need to read it a couple times.

    On my site, I'm trying to see if I can implement a way to ask the users if they want to subscribe to our newsletter on the checkout page.

    Is it feasible to add a yes/no option for this and then automatically add them to a MailChimp newsletter list?

    Thank you.

    Reply
  • Giovanni July 28, 2013, 3:32 pm

    Hi there,
    thank you for your great post. Could you please tell me how to set a drop down field on the WooCommerce checkout page? I have looked everywhere but I cannot find any solutions.

    Reply
    • Teddy Triton

      Teddy Triton August 3, 2013, 7:52 am

      Hi Giovanni,

      Thanks a great question on adding a drop-down field to the WooCommerce checkout page. I'd have to spend some time looking into the code to figure that out. I will update this post when I have the solution.

      Thanks,

      Adam

      Reply
  • Burton August 5, 2013, 2:20 pm

    Thanks for the instructions on customizing the checkout page. I have one problem though. After configuring the child page, and installing the fields that I need, the PLACE ORDER button has somehow lost it's link to complete the order. Instead it just sits there when pressed. How do I restore the link so it will complete the checkout process and send the client to the thank you page.

    Reply
    • Teddy Triton

      Teddy Triton August 6, 2013, 11:44 am

      Hi Burton,

      Is this happening when the customer pays via Credit Card with Mijireh Checkout? Or is it also happening when PayPal and Cash on Delivery are used? I just tested it with Credit Cart (Mijireh checkout) and it took me to the payment page. I did not complete the order but it looked like it would work. Please provide more detail as to with what payment method this issue is happening and I'll do my best to help.

      Adam
      p.s. I love your site and you're products!

      Reply
  • Cory August 5, 2013, 7:32 pm

    Hi Adam,

    Really have enjoyed your videos. Have learned alot over the months.

    As my site is still in the developing stages, I'll be selling sheet music via a PDF file and also CD's of my music. One digital and one physical product.

    How can I set up my checkout page that whenever I have a customer buying a digital product, the only thing that is required is their name and email address.

    And when they purchase a physical and or a digital product, then the default checkout page in WooCommerce appears, requiring their full address.

    Won't be necessary to collect their address with a digital product. But with a physical product, yes.

    So I am not sure the best way to set this up. Just to use the tutorial here in part 4 of this series to make just the name and email mandatory? Or create another new checkout page that would be triggered by a digital product?

    Many Thanks,
    Cory

    Reply
    • Teddy Triton

      Teddy Triton August 6, 2013, 11:29 am

      Hi Cory,

      To start, my recommendation would be to keep it simple and just make the Name and email fields mandatory. If a person purchases a CD but does not enter their shipping info you'll have their email and can contact them to get it. My guess is that in most cases that won't be an issue. Thanks for your question and for letting us know that our WooCommerce tutorials have been helpful. Best of luck with your site, CoryLavine.com and let me know when more questions come up.

      Adam

      Reply
      • Cory August 7, 2013, 8:54 pm

        Thanks Adam for the advice.

        Reply
  • Cory August 7, 2013, 9:55 pm

    Hi Adam,

    To remove the Phone and Company, both those worked fine. I tried to remove the Zip below and did not have any luck. Not sure why that did not work for me. Also, tried city and address. Puzzled about this. Using Dynamik-Builder for Genesis and is in the Customs Functions. Have not taken a look yet at the shipping.

    add_filter( 'woocommerce_billing_fields', 'wc_npr_filter_phone', 10, 1 );

    function wc_npr_filter_phone( $address_fields ) {
    $address_fields['billing_phone']['required'] = false;
    return $address_fields;
    }

    add_filter( 'woocommerce_billing_fields', 'wc_npr_filter_zip', 10, 1 );

    function wc_npr_filter_zip( $address_fields ) {
    $address_fields['billing_zip']['required'] = false;
    return $address_fields;
    }

    Thanks Again,
    Cory

    Reply
  • Alex August 14, 2013, 6:33 pm

    Hi,
    Is it possible to add my custom field onto "Order Received" page(the page just after you click "place order" on the checkout page)? I managed to add a custom field into checkout and email from your tutorial, which is brilliant. I just want to make it even better. Cheers.

    Reply
    • Teddy Triton

      Teddy Triton August 17, 2013, 1:33 pm

      Hi Alex,

      I'm glad to hear that our tutorials helped you add custom fields to the checkout page of your WordPress site. I'm not sure on adding custom fields to the WooCommerce Order Received page. I'll have to play around with that and see if I can figure it out. In the meantime, I'll go ahead and publish this comment and ask the UploadWP.com community help with this.

      Thanks,

      Adam

      Reply
  • jennifer August 15, 2013, 12:14 pm

    Hello,

    Thanks, great tut. I followed it but for some reason, the custom fields don't populate in the order area. Any idea why?

    Reply
    • Teddy Triton

      Teddy Triton August 16, 2013, 11:40 am

      Hi Jennifer – So the custom fields that you created for the checkout page are not mapping to the back end after the order has been place? Or, are you referring to the placeholder text that shows up in the custom fields on the checkout page? Also, please send me the link to your site so I can trouble shoot it.

      Thanks,

      Adam

      Reply
      • Jennifer August 16, 2013, 3:05 pm

        Hi, yes exactly, it's not showing up in the order's details (the custom fields that I added).

        Reply
        • Teddy Triton

          Teddy Triton August 18, 2013, 6:59 pm

          Hi Jennifer,

          Please post the exact code that you're pasting into the functions.php of your child theme. I'll then test it on one of my demo sites and hopefully figure out what's going on. Thanks

          Reply
  • ed August 18, 2013, 11:36 pm

    I'm trying to change the wording for "DOWNLOAD FILE" on the order confirmation page and in My Account page. Do you have any suggestions for doing this? I have a downloadable product but the term DOWNLOAD FILE doesn't really apply for my business so I need it to say something like "PRODUCT LINK" etc. THANKS!

    http://www.clipular.com/c?14371141=aWBe3cr1HtKsimpDayf522JPHv0&f=.png

    Reply
    • Teddy Triton

      Teddy Triton August 29, 2013, 7:09 am

      Hi Ed,

      Please take a few minutes to review our latest tutorial on "Overriding WooCommerce Template Files via a Child Theme". That tutorial should point you in the right direction in terms of changing the wording for Download File on the My Account and Thank You pages. I believe the two files you'll have to modify are…

      /checkout/thankyou.php

      and

      /myaccount/my-downloads.php

      Reply
  • jennifer August 19, 2013, 4:00 pm

    I figured it out that I didn't name and map fields accordingly, but thank you anyways! Your tut. is great.

    But lastly…is there a way to make these custom fields actually go INTO the user field in the dash board? For example, in the users page you can see the basic info plus all the stuff they entered at checkout (my custom checkout fields)??

    Reply
    • Teddy Triton

      Teddy Triton August 19, 2013, 7:25 pm

      Hey Jennifer – I'm glad to hear that you got it figured out and thanks for sharing the solution. Most likely, there are other people that are struggling with the same thing but now have the solution thanks to you. I'm not sure in regards to your question on making the custom fields go into the user profile in the WordPress admin. I'd have to do some testing before I can say it is, or it is not possible.

      If anyone out there knows the answer to Jennifer's question please share it with us.

      Thanks,

      Adam

      Reply
  • jennifer August 20, 2013, 10:24 am

    Slipped my mind — how can we add a custom picklist/drop down field on checkout? And is there a way to make it remember the contents of the custom field so on each subsequent checkout, they don't have to fill out all those details again?

    Reply
    • Teddy Triton

      Teddy Triton August 22, 2013, 8:02 pm

      Hi Jennifer – Adding a drop-down and/or radio buttons to the WooCommerce checkout page is something I've not yet figured out how to do. I'm going to play around with it today and if / when I figure it out I will post it here.

      If anyone else out there knows how to add custom drop-down fields to the WooCommerce checkout page please let us know. Thanks

      Reply
      • David November 2, 2013, 11:37 am

        Theres a free WP plugin called Woo Radio Buttons

        I'm trying to find out how to display different content once you click a radio button on the product page.

        Any help would be appreciated!

        Reply
  • sean August 22, 2013, 2:40 pm

    The "Shipping Address field labels and placeholders" PHP snippet line 8 missing a }

    Reply
  • Will Butler August 23, 2013, 2:57 pm

    Awesome tutorials, Adam! I want to add the field "Add shipping insurance" to the checkout and have a numeric value added to the grand total. The field should consist of either radio buttons or a drop-down. Do you have a script that could make this happen? I'm new to WooCommerce so still learning how it all works. Really appreciate your help, thanks!

    Will

    Reply
  • Will Butler August 23, 2013, 3:49 pm

    Addendum to previous post: I just realized the shipping insurance field will need to appear on the cart page because the checkout page has already calculated the order total.

    Reply
    • Teddy Triton

      Teddy Triton August 28, 2013, 7:53 am

      Hi Will – In think the best way to get the functionality you're looking for is via the use of the "Product Add-ons" extension for WooCommerce. It will allow your customers to select "shipping insurance" and will add it onto the price. Here's the link to view this extension… http://www.woothemes.com/products/product-add-ons/

      Reply
  • Gaetano August 31, 2013, 4:13 pm

    Hi Adam,

    I love the videos lots of details to help folks get started. Also great work answering questions about WOOCOMMERCE.

    My questions is this:
    I created a custom field. The field is added using function php and shows up on all checkout pages. I only want it to show up on when ONE particular product is chosen. I would need to read through the cart for this product, that it is added. Then check can ensure that this field displays it to capture additional information.

    Example: SWIM CAP – personalization. I would need a name to capture.
    Purchase or add cap to cart. Then this cap needs the name. But if the user adds another product we do not want to show the custom field we added (force added) using function php. How can I hide it? Do you know which template I can use and where or what code I can place into the mix to hide this custom field?

    Thanks for all the help.

    Using WP – 3.6
    WOOCOMMERCE – 2.0 .13

    Custom Child theme – publish is parent.

    Reply
  • Youl September 3, 2013, 7:24 pm

    Hi,

    Thanks a lot for this tutorial wich makes me gain skills, time and money !
    I added many custom field and all appears to be ok !

    But tought i have a 'select' type field with 4 options and i want to force the customer to select one, with none selected by default, in order to check if they filled it.
    My verification doesn't work if the first option is the default selection because it's always filled.

    Do you know how to define a blank default state in a custom select field ?

    Reply
    • Teddy Triton

      Teddy Triton September 4, 2013, 7:14 am

      Hi Youl,

      Thanks for your question and I'm glad to hear that our WordPress tutorials have helped. That's a great question in regards to defining a blank default state in a custom field on the WooCommerce checkout page. I'll have to do some testing to figure that out and I'll ask for help on this one from the Upload WP community. Please chime in if anyone knows how to define a blank default option when creating a custom field.

      Thanks,

      Adam

      Reply
  • steve September 7, 2013, 12:32 pm

    Great tutorial. I installed your example and it worked perfectly. Thank you.

    Would you know the correct syntax to get a pulldown menu to appear instead of a text box?

    I have been using this pulldown menu in older versions of WooCommerce, but can not get it to work with 2.0.

    ?>
    <html>
    <p></p>
    <p>How did you hear of us?</p>
    <select name="order_comments">
    <option value="Option1">Please Select</option>
    <option value="this is the first selection</option>
    <option value="SelectedOption1">This is selected option 1</option>
    <option value="SelectedOption2">This is selected option 2</option>
    <option value="SelectedOption3">This is selected option 3</option>
    <option value="SelectedOption4">This is selected option 4</option>
    <option value="Google">Google</option>
    <option value="Other">Other</option>
    </select>
    </html>
    <?php

    Any suggestions would be greatly appreciated.

    Reply
    • Teddy Triton

      Teddy Triton September 7, 2013, 6:20 pm

      Hi Steve – Thanks for letting us know that the PHP for customizing the WooCommerce checkout worked for you. I'm honestly not sure how to get the pull down menu to work with WooCommerce 2.0. I'm going to go ahead and ask for help on this one from the UploadWP.com community. I'll play around with it and see if I can get it to work.

      Reply
  • peter September 11, 2013, 8:17 pm

    great tutorial, wondering if anyone can help me with this;

    I want to put a couple of validation checks on the checkout page and wasn't sure where they go exactly (ie. functions.php or class-wp-checkout.php)

    1. checking time on server eg; (psuedo)

    if $time == outside_operating_hours
    alert("sorry we are closed …")
    disable_placeorder();

    2. checking to see if the zipcode is within a range eg: (psuedo)

    if $postcode != deliverable_postcodes
    alert("sorry we do not deliver to your postcode pls try again…")
    disable_placeorder();

    Reply
    • Teddy Triton

      Teddy Triton September 13, 2013, 7:32 am

      Hi Peter – Thanks for your question on putting validation checks on the WooCommerce checkout page. Off the top of my head I don't have a good answer for this one so I'm going to publish your comment and ask for help from the Upload WP community.

      If anyone out there can answer Peter's question on adding validation checks please chime in. Thanks

      Reply
  • Temi September 16, 2013, 5:06 pm

    Great Tutorial!

    Please i need help on this.
    I have a problem with my woocommerece shopping cart. It does not update/empty after a successful payment or confirmed order. Payment processor redirects to Order confirmed page but the shopping cart still remains intact with all the products. I have two payment processors with plugins and its the same story when order is placed with the two.

    any ideas on how to resolve this?

    Reply
    • Teddy Triton

      Teddy Triton September 16, 2013, 6:24 pm

      Hi Temi,

      Thanks for the positive feedback and for your question. It's possible that the issue is caused by a plugin. From what I can tell, it looks like you're using a number of social media plugins. Try disabling all of your plugins (except woocommerce) and then run a test order. If that fixes the issue, then activate the plugins one by one until you find the offending plugin. Start there, if that does not work let me know and we'll try something else.

      Reply
  • Rosiee007 September 19, 2013, 6:39 am

    Hi Adam!
    I want to be able to add a complete 'medical form' just above the 'Your order' section on the Checkout page. Is that possible? How do I change the position of the new fields from the top right side of the Checkout page to where I want. The customer has to fill the medical form before proceeding with the order.
    Thanks!

    Reply
    • Teddy Triton

      Teddy Triton September 19, 2013, 7:34 am

      Hi Rosiee007 – Given that you need to add an entire medical form to the WooCommerce checkout page, your best option is probably to use an extension / plugin. Specifically, the "Checkout Field Editor" plugin is what I have in mind. With the Checkout Field Editor extension you should be able to easily add the medical form to the checkout page.

      Reply
      • Rosiee007 September 20, 2013, 7:24 am

        Thank you Adam!
        I will download and try this plugin too. Didn't come across this one before.
        Thanks a lot!
        Rosiee

        Reply
  • Rosiee007 September 19, 2013, 7:29 am

    Hey Adam,
    Just posted a question, but I'll try using this plugin to do what I'm trying to do:
    http://wordpress.org/plugins/woocommerce-checkout-manager/
    Great job with the YouTube videos and this blog! Helped me a lot!!
    Rosiee

    Reply
  • alf September 27, 2013, 9:59 pm

    Hi thanks for the awesome tutorial you provided for us, this is the best one! i swear!

    I have an issue that needed your help with.

    I used the filter 'woocommerce_checkout_fields' to remove fields on my checkout page, I remove the following fields:

    unset($fields['account']['account_username']);
    unset($fields['account']['account_password']);
    unset($fields['account']['account_password-2']);

    yes it successfully remove the fields on my checkout page, the problem is when I click submit the fields I remove is still required! is there a hook to change required to not required on account fields? I see your tutorial for this but it covers shipping./billing fields, I also check woocommerce hooks reference and cannot see any hook to modify an account fields.

    Cheers! and thanks in advance

    Reply
    • Teddy Triton

      Teddy Triton October 1, 2013, 1:46 pm

      Hi Alf – Your support and feedback is very much appreciated! I'm honestly not sure so I'm going to go ahead and publish your question and ask for the UploadWP.com community to help. Most likely there is someone out there that knows the answer and will share it with us here. Thanks

      Reply
  • Mary September 29, 2013, 9:34 am

    Hi
    On checkout – how do I remove the default link

    ' returning customer ' click here to login here'

    as this is confusing some NEW users –
    I rather NOT have it on the page and allow them to login with the login button at the top of the page

    Reply
    • Teddy Triton

      Teddy Triton October 2, 2013, 5:19 pm

      Hi Mary,

      To remove the "Returning Customers" message you'll need to follow our tutorial on "Overriding WooCommerce Template Files". Most likely the file to modify is… checkout/form-login.php

      Let me know if you need help with this.

      Reply
      • popadmin December 10, 2013, 10:54 am

        I have the same Problem but cant find out what exactly i have to change. Can you please help me?

        Thank you very much.

        Reply
  • dyer September 30, 2013, 10:02 am

    Hi great customise tutorials, I want to change back to shop button when the cart is empty and redirect to another page. This is the code I want to change but not sure how to as I mainly work with HTML.

    <p><a class="button" href="<?php echo get_permalink(woocommerce_get_page_id('shop')); ?>"><?php.

    Any advice?
    thanks Dyer

    Reply
    • Teddy Triton

      Teddy Triton October 1, 2013, 7:47 am

      Hi Dyer,

      Thanks for your question. Please let me know the URL to your site and the page that you want the "Back to Shop" button to redirect to when the Cart is empty. I'll do my best to get you the info you need and I'll also ask the Upload WP community to chime in with their suggestions.

      Thanks

      Reply
  • Dave Murphy October 1, 2013, 11:45 am

    thanks for the great tutorial!
    I've downloaded and installed wootique child theme – thanks you for that also- and am trying to make changes to my checkout page.
    <?php

    /* All child theme functions go here

    ———————————————– */
    // Rename 'Republic of Ireland' to 'Ireland'

    add_filter( 'woocommerce_countries', 'rename_ireland' );

    function rename_ireland( $countries ) {
    $countries['IE'] = 'Ireland';
    return $countries;
    };
    function add_my_country( $country ) {
    $country["NI"] = 'Northern Ireland';
    return $country;
    }
    add_filter( 'woocommerce_countries', 'add_my_country', 10, 1 );
    // Hook in
    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

    // Our hooked in function – $fields is passed via the filter!
    function custom_override_checkout_fields( $fields ) {
    $fields['order']['order_comments']['placeholder'] = 'Any special requests?';
    $fields['billing']['billing_address2']['clear']=true;
    $fields['billing']['billing_state']['placeholder']='County';
    $fields['billing']['billing_state']['label']='County';
    $fields['billing']['billing_postcode']['label']='Postcode';
    $fields['billing']['billing_postcode']['placeholder']='Postcode';
    $fields['billing']['billing_postcode']['required']=false;
    return $fields;
    }
    ?>
    Everything works fine untill line 25 where I try to clear billing_address2 and nothing works after that.
    The top part of the code would be of use to anyone trying to change the countries list in woocommerce. That part works!
    I'm pretty sure I have followed your excellent tutorial correctly but just can't figure out what I'm doing wrong. Any help would be most greatfully received.
    Dave murphy

    Reply
    • Teddy Triton

      Teddy Triton October 1, 2013, 12:36 pm

      Hey Dave – Thank you very much for the positive feedback. I'm glad to hear that our WooCommerce tutorials have helped and that you're using our Wootique child theme. From what I can tell looking at your code everything looks correct.

      I'm going to ask for help from the Upload WP community on this one. If anyone out there can look at what Dave has shared and help him it would be greatly appreciate.

      Reply
      • Dave Murphy October 10, 2013, 10:31 am

        After a lot of work I arrived at a compromise by deleting the State and the Zip code fields completely and adding a new post code field for Northern Ireland only. This still left 3 lines for address which is sufficient here. I used the woocommerce checkout manager plugin and also added woocommerce email validation plugin as woocommerce checkout page does not have validation. See http://organiccoffee.ie
        The only thing I can't do is to remove the placeholder text in address2 field which just sound weird to Irish ears. Here a suite refers to furniture!
        Thanks again for the great tutorial

        Reply
        • Teddy Triton

          Teddy Triton October 13, 2013, 9:06 am

          Hi Dave,

          Nice work on your site, organiccoffee.ie. You've done a great job customizing the checkout. I want to make sure that I'm following you're question… The placeholder text that you're looking to remove is… "Apartment, suite, unit etc. (optional)"

          Is that correct? Let me know and I'll do my best to get you a solution.

          Reply
          • Dave Murphy October 14, 2013, 11:16 am

            That's it. It's to do with slight differences in language. Irish addresses would always start with Apt no if appropriate in the first line not the second line and to Irish ears a 'suite' is a sofa(couch) and 2 armchairs, Something to sit on rather than part of an address!
            Thanks again for your help.
            Dave

          • Teddy Triton

            Teddy Triton October 14, 2013, 7:22 pm

            Dave I apologize – I sent a response to your comment that was meant for Alex. I will work on getting you an answer.

          • Bill Potter October 17, 2013, 2:26 pm

            No need for apology. I am retired programmer and mcse, I select the canvas theme to have to learn. It seems that every time I have a problem I realize what was wrong after I put in writing. I realized where the terms & conditions were pointing to after my first request.

            Thanks for the fast reply.

            Have a blessed day….

  • Filippos October 2, 2013, 1:24 am

    Hello! I have seen your tutorials and they are vary useful! Thanks to you I have made a lot of minor changes for now. However, I have a problem. How can I change the menu button when I am using the mobile version? You see the red button is not understandable as menu by most. So, I want to write in there "Menu". How can I do that? Thank you!

    Reply
  • juanma October 4, 2013, 3:16 am

    hi teddy, great blog, i have my woocommerce ready and im searching some method to allow me add +3% value for my credit card buyers, in way that would increase the price of my default value but i need to assign that in my checkout process, when the user select to pay by CC (after to select the payment method).

    can you help me with these?
    regards
    juanma

    Reply
    • Teddy Triton

      Teddy Triton October 4, 2013, 7:37 am

      Hi Juanma – Thanks for the complements on our site. Have you looked into using an extension for WooCommerce? An extension is most likely your best bet to increase price for credit card customers. If you do a Google search for "WooCommerce Extensions" you'll find the full list.

      Reply
  • من October 4, 2013, 8:20 am

    Wooooooooow, Perfect, Number1♥

    Reply
  • Smart Tuning October 6, 2013, 7:36 am

    Mystile by WooThemes ( vesion 1.2.1 i think it's latest one…) . Check my screenshot here: For safety reason I just blurred the logo and the url of the site…

    Reply
    • Teddy Triton

      Teddy Triton October 7, 2013, 9:19 am

      For some reason, the link to the screen capture you provided did not work. Please send it again. Thanks

      Reply
  • Harish October 7, 2013, 3:43 pm

    Hi,

    This is awesome tutorial. I learned a lot from this. I am providing service which is completely online, so I removed complete billing address fields from checkout page. However there appears some text which I am not able to remove. The text is

    "Additional information"

    Create an account by entering the information below. If you are a returning customer please login at the top of the page."

    While additional information appears as heading, the rest appears like paragraph.
    Below this line is the box for Password and Confirm password.

    I want to remove the text. Is there a way to do it? I was able to remove the paragraph text but not the heading text (Additional information)

    Any help is appreciated. Thank you.

    Reply
    • Teddy Triton

      Teddy Triton October 8, 2013, 7:02 am

      Hi Harish,

      Thanks for the complements on our Customizing the WooCommerce Checkout Page tutorial. To remove "Additional Information" as well as the additional text please refer to our tutorial on Overriding WooCommerce Template Files. I believe that will point you in the right direction. Here's the link to view that tutorial…

      http://uploadwp.com/overriding-woocommerce-template-files/

      Reply
  • john October 15, 2013, 3:04 pm

    This is a great tutorial! One question, i need to add a custom checkbox to checkout. Can you supply the code necessary for that input field?

    Thanks for any help.

    Reply
    • john October 15, 2013, 3:40 pm

      Three additional follow-up questions:
      1) Is the new custom field required by default?

      2) Is the location of the new field dependent on the "woocommerce_after_order_notes" add_action? If so, can that be altered to place the new field elsewhere?

      3) Is the new custom field included in the order email/admin email?

      Reply
  • Glenda October 16, 2013, 12:41 pm

    This has been amazingly helpful, thanks!!

    I'm struggling with one last cosmetic detail – which is the placement of the custom fields on the page. While after the order notes is fine… I want my custom fields to be page width (keeping the billing and shipping columns in the columns above). I've tried all kinds of things (i.e., ending the div tag, guessing at "woocommerce_before_order_heading") but I'm not getting anywhere.

    Suggestion would be very welcome and appreciated!

    Reply
    • Teddy Triton

      Teddy Triton October 19, 2013, 1:54 pm

      Hi Glenda,

      Thanks for letting me know this tutorial on customizing the WooCommerce checkout page has been helpful. I'm going to publish your question and ask for help from the Upload WP community on this one…

      If anyone out there can help Glenda with this please chime in. You're help is greatly appreciated.

      Reply
  • Mar October 17, 2013, 11:07 am

    After I did this edit of line six

    // Hook in
    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

    // Our hooked in function – $fields is passed via the filter!
    function custom_override_checkout_fields( $fields ) {
    $fields['order']['order_comments']['placeholder'] = 'customized here';
    $fields['order']['order_comments']['label'] = 'customized here';
    return $fields;
    }
    Parse error: syntax error, unexpected T_STRING in /home1/mmm/public_html/wp-content/themes/theme-child/functions.php on line 6
    I would highly appreciated if there is anything I could do fix it. I basically went back to my file manager and edited the functions.php file to strictly <? php ?>
    Then I was back online.

    Thanks,
    Mar

    Reply
  • john October 24, 2013, 12:44 pm

    Is the location of the new field dependent on the "woocommerce_after_order_notes" add_action? If so, can that be altered to place the new field elsewhere? Like say after the billing email field?

    Note: I've broken apart my group of questions, from above, into an individual question.

    Reply
  • Rich Brady October 26, 2013, 6:42 am

    Can anyone shed any light as to why the check boxes borked when I upload a child theme? CSS is identical to parent theme and child functions.php looks like this:

    <?php
    /* All child theme functions go here
    ———————————————– */

    // Hook in
    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

    // Our hooked in function – $fields is passed via the filter!
    function custom_override_checkout_fields( $fields ) {
    $fields['billing']['billing_address_1']['placeholder'] = 'House name or number';
    $fields['billing']['billing_address_2']['placeholder'] = 'Street address';
    $fields['billing']['billing_postcode']['placeholder'] = 'Postcode';
    $fields['billing']['billing_state']['placeholder'] = 'County';
    $fields['shipping']['shipping_address_1']['placeholder'] = 'House name or number';
    $fields['shipping']['shipping_address_2']['placeholder'] = 'Street address';
    $fields['shipping']['shipping_postcode']['placeholder'] = 'Postcode';
    $fields['shipping']['shipping_state']['placeholder'] = 'County';
    return $fields;
    }

    ?>

    Thanks in advance,

    Rich

    Reply
  • Zen October 28, 2013, 4:06 am

    Found what I needed here. Just want to say thanks :) Good job.

    Reply
  • Craig November 4, 2013, 5:50 am

    Hi There,

    I have a massive spreadsheet with postal codes and towns within South Africa that we can deliver our gifts to. We cannot deliver throughout South Africa as some towns are to far away. I somehow need to have this implemented within the checkout, so that customers can select only specified postal codes.

    Do you have any advise on how best I can do this?

    Thanks

    P.S it;s about +/- 4500 postal codes and towns..within South Africa.

    Reply
    • Teddy Triton

      Teddy Triton November 4, 2013, 6:56 am

      Hi Craig,

      You're best bet is the use of a shipping extension / plugin for WooCommerce. The one shipping extension that stands out is, "Table Rate Shipping". There are other shipping extensions as well so I would start by looking through all of them. Just do a google search for "woocommerce shipping extensions" and you'll find the full list.

      Reply
  • brooke November 5, 2013, 6:39 am

    Hello there,

    Just wondering if you could help me with my cart page please. When I click on the icon in the top menu (customer navigation) nothing happens – the page does not load. Ive been going over this for a few hours now and cant find a solution anywhere.
    Thanks in advance :)
    Kind regards
    Brooke

    Reply
    • Teddy Triton

      Teddy Triton November 6, 2013, 12:23 pm

      Hi Brooke –

      What theme are you using? Without your site being live it's difficult to try and recreate the issue. Please let me know and I'll do my best to find a solution. Thanks

      Reply
  • Teddy Triton

    Teddy Triton November 6, 2013, 10:30 am

    As an eCommerce / online store owner, the best way to communicate (in most cases) with you're customers is via email. So, what happens when they input an incorrect email address on the WooCommerce Checkout page?

    A common way alleviate this problem is to force customers to confirm their email address on the checkout page. If you have ever signed up for an account with a website, you have no doubt been asked to enter your email twice. This is an important fail safe to ensure you have the proper data for your customers.

    To add an email validation field to your WooCommerce site simply download, install and activate the WooCommerce Email Validation extension. That's it! The plugin works seamlessly and adds an email confirmation field to the check out page. Never worry about customers accidentally entering the wrong email address again.

    Watch Adam Barndt demonstrate how to add an email validation check to the checkout page in his "WooCommerce email Confirmation Extension Tutorial"…

    http://youtu.be/DqG1UMRAS6s

    Reply
  • Imran November 6, 2013, 3:43 pm

    Hi there! Thnx for this wonderfull tutorial, it has helped me alot with figuring out how the checkout page is configured!

    I still have one question though:

    I want to add a custom field just like the one in your tutorial but only on a different place, like after Company name for example.

    How can i do this?

    I would be very very pleased if you could help me out on this one ! :)

    Reply
    • Teddy Triton

      Teddy Triton November 6, 2013, 4:44 pm

      Hi Imran,

      My suggestion would be to try the "WooCommerce Checkout Manager" extension plugin. I've not yet had a chance to test it out but from the description, it says you can create new fields and organize them how you want. It's a free extension and here's the link…

      http://wordpress.org/plugins/woocommerce-checkout-manager/stats/

      Let me know if it helps.

      Reply
  • MItch November 6, 2013, 11:02 pm

    Awesome Videos and Tutorials!

    Im trying to add a 'Agree to terms and conditions' checkbox to the checkout page, and I would like to make this a required field, that users must check before they can checkout.

    Any suggestions? I feel like a lot of websites could benefit from this !?!?

    Thanks in advance

    Reply
    • Teddy Triton

      Teddy Triton November 8, 2013, 7:11 am

      Hi Mitch,

      Here's how to add an "Agree to Terms and Conditions" page and check box in WooCommerce…

      Step 1. Create a new page called "Terms"… In the WP admin go to Pages > Add New > title it "Terms" > add your content in the body of the page > Publish page

      Step 2. Set the Terms Page ID… In the WP admin go to WooCommerce > Settings > click the "Pages" tab > under Page Setup you'll see "Terms Page ID" and a drop-down next to it > select the Terms page you created > Save changes

      That's it… go to the WooCommerce Checkout page and you'll see the Terms and Conditions check-box appear.

      If you go to our woocomm demo site, digitaldownloadsdemo.com you'll see the terms and condition box appear on the checkout page.

      Reply
    • Teddy Triton

      Teddy Triton November 8, 2013, 7:59 am

      Hi Mitch,

      You're question was the inspiration for a new video tutorial. The following video walks you through the steps of adding a Terms and Conditions check-box to the WooCommerce checkout page…

      http://www.youtube.com/watch?v=LebOCs3fn5k&feature=share&list=UUAPwuoY8SlcPtwx_KPw-yOQ

      Reply
  • Travis Campbell November 10, 2013, 1:27 pm

    Hi Teddy,

    Thanks for the great tutorials! I have three questions regarding Mystile I was hoping you could help with:

    1) How can I increase the ammount of products shown in each row on my homepage and shop page from 4 to 5?
    2) How can I relocate the "I agree to the terms…" check box on the checkout page so that it is on top of the submit button?
    3) How can I change the checkbox styling as shown in google chrome? I think it is very unintuitive and would prefer a normal looking checkbox.

    Many thanks in advance!

    Travis

    Reply
    • Teddy Triton

      Teddy Triton November 12, 2013, 2:08 pm

      Hi Travis,

      Thanks for your support and positive feedback on our WordPress and WooCommerce tutorials! The good news is that I have an answer for 1 of your questions. I'm still working on solutions to the other two and will update this comment when I have them.

      I made a tutorial video that shows you how to "Display 5 Products in a Row on the WooCommerce Shop Page for the Mystile Theme". Here's the link to watch that tutorial video…

      http://youtu.be/IEbB_pQ2lAQ

      Make sure you have your Mystile Child Theme active and in the WordPress admin go to Appearance > Editor > in your Stylesheet (style.css) paste the custom CSS below…

      @media only screen and (min-width: 768px) {
      ul.products li.product {
      width: 16.05%!important;
      }
      }

      Next, click on Theme Functions (functions.php) and paste the following PHP…

      remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
      add_filter('loop_shop_columns', 'loop_columns');if (!function_exists('loop_columns')) { function loop_columns() { return 5; }}
      if ( empty( $woocommerce_loop['columns'] ) ) { $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );}

      Do to some formatting issues with publishing PHP in comments, you're probably better off copy/pasting it from there into your functions.php from here…

      http://uploadwp.com/wp-content/uploads/php-to-display-5-products-on-mystile-shop-page.txt

      Please note, you can get a Mystile Child theme by subscribing to our Newsletter.

      Reply
      • Adam March 4, 2014, 12:33 am

        Hi,
        Sorry about the earlier comment, I figured out my problem.
        By following your instructions I am able to get 5 products in a row on Shop page of woocommerce,

        As I have my 'Product Categories' also displayed in my Shop page, I misunderstood that by following your instructions I will be able to get 5 Categories in a row …. which did not happened! though I have now space enough for the 5th category.

        Please let me know if there is a way where I can get 5 categories in a row also in my Shop page.

        Best regards
        Adam

        Reply
        • Teddy Triton

          Teddy Triton March 4, 2014, 6:12 am

          Hi Adam,

          I'm glad to hear your were able to figure it out. In regards to displaying 4 categories in a row on the Shop page… Please use the Upload WP Community Forums here… http://uploadwp.com/community/index.php

          Posting in the forum is the best way to get help from us and other Upload WP users. Thanks

          Reply
      • danish ayub May 21, 2014, 2:04 am

        Dude, you are a lifesaver, thank you so much. i followed your tutorial for showing 5 products in a row, but unfortunately i have run into a problem, on shop page products are being shown as promised by your tutorial, but on the product page, the "related products" pictures are zoomed in gigantic size. please help me out here.

        Reply
        • Teddy Triton

          Teddy Triton May 24, 2014, 6:27 pm

          Glad to hear our WordPress tutorials have been helpful. For help adjusting the size of the Related Product images please checkout the Upload WP Community forums.

          Reply
  • TG November 12, 2013, 8:26 am

    How do you figure out what the field names are?

    for example, for modifying the "shipping company", you said to input the following:

    add_filter( 'woocommerce_shipping_fields', 'wc_npr_filter_company', 10, 1 );
    function wc_npr_filter_company( $address_fields ) {
    $address_fields['shipping_company']['required'] = true;
    return $address_fields;
    }

    what if I want to make a different field "required", and this field is from another plugin? I want to make the purchase order field required, and this is a field from another plugin called "woocommerce purchase order". How do you figure out what the field_names and $functions are?

    Reply
    • Teddy Triton

      Teddy Triton November 15, 2013, 1:28 pm

      Hi TG,

      So the "WooCommerce Purchase Order" extension by default does not make the PO field required? That seems odd that they would not build that functionality into the plugin / extension. I'm doing a tutorial on a WooCommerce Checkout Manager extension that you might find useful. Here's the link to view the first video… http://youtu.be/IP1rk-t1y3s

      Reply
  • Katie November 13, 2013, 12:37 pm

    Hi guys! Thanks for the amazing tutorial, it was exactly what I needed! I wanted to also suggest that you create a follow-up tutorial to show us how to add these custom form field values to the WooCommerce CSV Export plugin as well.
    Thanks again!!

    Reply
    • Teddy Triton

      Teddy Triton November 13, 2013, 5:50 pm

      Thanks for the positive feedback and support Katie.

      Reply
  • Shaobo November 14, 2013, 10:08 pm

    How can I change the order of these fields?
    In China,
    the natural address order is "Country – > Province – > City "
    the natural name order is "Family Name -> Last Name"

    Thanks!

    Reply
    • Teddy Triton

      Teddy Triton November 15, 2013, 9:42 am

      Hi Shaobo,

      Thanks for your question. I'm in the process of making a tutorial on a really cool plugin that helps with customizing the WooCommerce Checkout page. The extension plugin is called, "WooCommerce Checkout Manager" and I have the first video done which you can view here…

      http://youtu.be/IP1rk-t1y3s

      Let me know if that helps.

      Reply
  • Katharine November 19, 2013, 11:24 am

    Thanks for all of your helpful videos!
    How would you go about allowing customers to enter credit card/payment information but not have the processing go through? We're looking to create more a catalog/order system but want to be able to approve processing the orders ourselves– this is for wholesale so we want buyers to easily place order requests but not actually process the payments until we review them.
    Also, is there a way to create a box under each product to type in the quantity desired?

    Reply
  • Barry November 20, 2013, 12:13 pm

    Hi,

    I'm hoping you can help. I've been searching for days and simply can't believe what I need isn't available. I asked a tech that helps us and she also said it doesn't seem to be out there. I simply want to have the ability to add an optional insurance radio button or check box on the checkout page with a set amount to choose if they want insurance. The amount would always be the same, lets say $2.95 for example. If they choose "Yes" to accept it, it would simply add to the shipping charges and the total would be listed for the entire order below. I can't believe I'm the first person to need this??? Would greatly appreciate any guidance you can offer.

    Regards,
    Barry

    Reply
    • Teddy Triton

      Teddy Triton November 23, 2013, 4:01 pm

      Hi Barry – Thanks for your question on a plugin / extension to add a shipping insurance check box option to the WooCommerce checkout page. Basically, it would be a check-box that gives customers the option to add shipping insurance > when they click the box the shipping insurance cost is automatically added to the shipping cost and life is good. I've spent about 20 minutes searching for an extension that adds that functionality and have not yet found anything. I can't believe that either! It seems like a no brainier that someone would have created a plugin to add that functionality but I've not yet found it.

      If anyone in the Upload WP community knows of an extension for Woocommerce that allows site owners to add an option "shipping insurance" check-box to the WooCommerce Checkout page please share it with us. You'll be helping many people that are looking for a solution to this. Thanks

      Reply
  • Alejandro November 27, 2013, 8:55 am

    You have information about custom payment gateway? I want a simple gateway that only provide indications payment screen in the order received and email

    Reply
  • Celia December 7, 2013, 2:09 pm

    Thanks for your help with customizing the WooCommerce checkout page. Also thanks for putting together your list of favorite WooCommerce themes. I like Foxy by Elegant Themes and I love Tyrion on Themeforest… Anyone looking for WooComm compatible themes should check it out…

    http://uploadwp.com/woocommerce-themes/

    Reply
  • Teddy LECLERC December 13, 2013, 10:49 am

    Hi,

    I want to insert a QuForm under the notes and i want it appear on the admin.
    The goal is quiet simple, my website is a drive and i've to insert a calendar with time in order to take off the order on the shop.

    Do you have an idea, the way i'll have to make it possible ?

    Great thanks to you,

    Teddy to Teddy ;-)

    Reply
    • Teddy Triton

      Teddy Triton December 14, 2013, 6:03 pm

      Hi Teddy,

      I've not had a chance to try and integrate a QuForm into the WooCommerce checkout page and WP admin. I'm going to approve this comment and ask for help from the Upload WP Community on this one.

      Reply
  • Justine December 14, 2013, 10:45 am

    Hello, thank you for this great tutorial. I was able to rename my placeholders and remove fields on the checkout page, but how do i do the same for fields on the 'edit address' page. Please help.

    Reply
    • Teddy Triton

      Teddy Triton December 14, 2013, 4:53 pm

      Hi Justine,

      Thanks for letting me know our tutorials have helped in customizing the checkout page of your site. In regards to modifying the "My Account" page… Please refer to our tutorial on Overriding WooCommerce Page Templates here… http://uploadwp.com/overriding-woocommerce-template-files/

      That should point you in the right direction.

      Reply
  • Sam December 20, 2013, 11:58 pm

    is there a way to do a child theme for wooCommerce? say I make modification to some of the built in functionality..
    Thanks

    Reply
  • Sam December 21, 2013, 1:32 am

    hummm.. i just found this
    http://uploadwp.com/overriding-woocommerce-template-files/
    VERY helpful!!!!

    But it was not clear if i could change a php file in the woocommerce folder like woocommerce-template.php

    I am trying to disable the add-to-cart button based on group membership. I am able to do this, but I want to do this as a child theme in case I am upgrading woocommerce.

    Reply
  • Amj December 21, 2013, 5:07 pm

    Thank you for such a good post. Could you please guide us how to change PLACE ORDER button with PayPal button. I am looking to replace PLACE ORDER button with PayPal button image so I have to add paypal button url.
    Also I would like to add a heading above email field.
    Any idea how I can do these two changes.

    Reply
    • Teddy Triton

      Teddy Triton December 23, 2013, 6:49 pm

      Hi – Thanks for your questions Amj. Let me just make sure I'm understanding your question. You're looking to replace the blue "Place order" button on the checkout page with a PayPal button? Does the PayPal icon not show up next to the radio button? Also, you're looking to modify the email field title? You should be able to modify the email field title with the "WooCommerce Checkout Manager" plugin which you can learn more about here… http://youtu.be/IP1rk-t1y3s

      Please post your question with as much detail as possible in our brand new Upload WP Community Forums. Specifically, you should post your question in the following forum…

      http://uploadwp.com/community/index.php?forums/customize-woocommerce-checkout-page.13/

      Reply
  • Zafi Que December 24, 2013, 6:54 am

    Hi Teddy

    Great article, quick question, I am working on an eCom Site and I want to "Paginate" the checkout page like a wizard style, first section/page displays order summary, and then when user click "Next" it requests the "User & Shipping details" and then they click next again for the "Payment Details". Is there a plugin or solution for this.

    Regards

    Zafi

    Reply
    • Teddy Triton

      Teddy Triton December 24, 2013, 8:10 am

      Hi Zafi,

      Thanks for the complements on our tutorial. I unfortunately do not know of a checkout page pagination plugin. Not saying that one doesn't exist, but I've not found one yet. Your best bet would probably be to find a theme that has it built in. There are a bunch of high quality woocommerce ready themes at ThemeForest and chances are good you'll find one that has the pagination you're looking for built in.

      Reply
  • Hugo January 2, 2014, 6:54 pm

    Hi!
    Can I move "ship to billing address" checkbox line. The new place would be right below "Shipping Address" title.
    Thanks!

    Reply
  • TakeBarcelona January 4, 2014, 5:42 pm

    Hello everybody.

    There's a new plugin for checkout customization available on wordpress.org: WooCommcerce Poor Guys Swiss Knife (http://wordpress.org/plugins/woocommerce-poor-guys-swiss-knife/) which offers a lot of customization features for free and without restrictions.

    Regards.
    tb

    Reply
  • mark January 6, 2014, 11:33 am

    Super informative tutorials – thank you!

    Would know a proper way to include a Return to Cart link/button to the checkout page?

    Reply
    • mark January 6, 2014, 12:12 pm

      No need I figured it out. Thanks.

      Reply
      • Teddy Triton

        Teddy Triton January 7, 2014, 11:07 am

        Nice! If you could please share the solution with us Mark I'm sure it would be a big help to others. Thanks

        Reply
    • Teddy Triton

      Teddy Triton January 7, 2014, 11:05 am

      Glad to hear our tutorials have been helpful. Thanks for the positive feedback.

      Reply
  • Alan January 7, 2014, 9:05 am

    Hi Adam,

    Many thanks for all your tips on this page and via your YouTube videos..
    It has really helped me develop my WordPress skills.. I appreciate your time and effort very much..

    I won't ask any questions as you have given me lots of information already :)

    Thanks again,
    Alan

    Reply
    • Teddy Triton

      Teddy Triton January 7, 2014, 11:01 am

      Thanks for the kind words and support Alan. It's very much appreciated!

      Reply
  • Anthony O January 8, 2014, 10:39 am

    First of all you tutorials have been very helpful. I wanted to ask if you could tell me how I can add "title" drop down i.e Mr /Miss/ Mrs before the Name on the billing and shipping address. I find it quite strange that the guys over at WC left out an essential element of identification.
    Thanks in advance for your help.

    Reply
  • Samantha January 20, 2014, 5:48 pm

    Hey Adam! Your tutorials are such a big help, Thank you! Do you know how to make "Shipping Address" say "Delivery Address" and "Deliver to billing address" at that checkbox? Any advice would help! Thanks again!

    Reply
  • Aaron January 23, 2014, 11:00 am

    Hi, how do you add one under Your Order Form above but just above the Payments? on checkout

    Aaron

    Reply
  • Pulsar February 2, 2014, 2:28 pm

    Hey Adam I'm looking for help.
    How change this text: "Ship to billing address?" in checkbox?

    <div class="col-2">

    <p id="shiptobilling" class="form-row">
    <input id="shiptobilling-checkbox" class="input-checkbox" type="checkbox" value="1" name="shiptobilling" checked="checked"></input>
    <label class="checkbox" for="shiptobilling-checkbox">

    Ship to billing address?

    </label>
    </p>

    Reply
  • Chirag February 11, 2014, 10:21 am

    Hi Teddy, nice tutorials. I'd like to know how to move "payments_methods" class above "shop_table" in WooCommerce checkout page. Can this be done using hooks?

    Reply
    • Teddy Triton

      Teddy Triton February 11, 2014, 7:05 pm

      Hi Chirag,

      Thanks for your question and complements. Most likely it can be done using hooks. I'll spend some more time looking into it if you can post it as a new thread in our Upload WP Forums here… http://uploadwp.com/community/index.php

      Reply
  • A Catalan February 26, 2014, 11:22 pm

    Hey guys,
    I have a question. The mystile theme advertises that they include three short codes that I've been looking all over for: mini features, sticky notes, and sales.
    Where are these? Has anyone had any luck with this ?
    I've tried adding the short codes to my mystile child theme and it made a mess of things- didn't work!
    Please advise!
    I am trying to get the three mini features on homepage above Recent Products.
    website: http://www.urbarian.org
    Thanks!

    Reply
  • josh March 5, 2014, 2:23 pm

    Hi Teddy,

    In my WooCommerce checkout process the order is Login, Billing Address, Payment Method, and then Order Review.

    I plan to use both credit cards and Paypal and only sell digital products. If a user wants to pay with Paypal I really don't need the billing info at all. Is there a way to change the checkout order so that Payment Method is chosen before Billing Address and Billing Address is not required if PayPal is selected?

    Thanks for the great tutorial.

    Reply
  • Roy Vincent Niepes March 10, 2014, 9:08 pm

    Can we change the billing address? I mean the title itself…

    Reply
  • Jay March 17, 2014, 5:13 pm

    Hi Teddy,

    Good stuff. However I have a slightly different situation. I am not sure if this it the proper forum, but I will ask anyway as it does have to do with woocommerce checkout page.

    In our website we have two types of payments: purchase a product, and make a payment on account. We have the purchase part working just fine using the Checkout page. However, I am not sure how, or if it can be done, to hook up a payment process through the checkout page. We currently have a form page where the user enters all there info including credit card, but all it does is send out an email, and sends nothing to the Moneris payment gateway. Is there a solution using woocommerce and the checkout page or at least the payment portion? Or do have another suggestion?

    Cheers ….

    Reply
  • Greta March 21, 2014, 9:55 am

    I saw your tutorial and I decided to download and try woocommerce. I would like to ask you if you can help me because I have a problem. In shopping check-out page, the PLACE ORDER (PLACE AN ORDER) button, button is unclickable or inactive.
    If I do not pass this problem I'll have to give up :-(
    thanks anyway

    Reply
    • Teddy Triton

      Teddy Triton March 21, 2014, 4:28 pm

      Hi Greta,

      Thanks for watching our tutorials and for giving WooCommerce a try. I'd be happy to help solve the Place Order button issue. Please join the Upload WP Community Forums here… http://uploadwp.com/community/index.php

      Posting your question in the forum will help me help you and it will allow many other WooCommerce users help you as well. Thanks and I'll see you in the forums.

      Reply
  • Liam March 25, 2014, 12:05 pm

    Fantastic stuff, thanks very much this is so helpful!

    Reply
  • Rio March 29, 2014, 4:44 am

    Hi,

    1. Is there any way to make the Coupon Code to be mandatory?
    2. And to keep the payment method keep displayed even the coupon is for 100@ discount?

    Thanks in advance
    Rio

    Reply
    • Teddy Triton

      Teddy Triton March 30, 2014, 11:13 am

      Hi Rio,

      Thanks for your question on woocommerce coupon setup. Most likely it is possible to make the coupon field required. To better help you and others that have similar questions, please go to the Upload WP Community Forums here… http://uploadwp.com/community/index.php

      We have active members that are more than willing to help. Chances are excellent, if you join and start a new thread in the "WooCommerce Coupons" forum you'll get a quick solution. It's free and easy to join so hopefully I'll see ya there.

      Reply
  • yavar khan April 11, 2014, 1:22 am

    I am using Customizr theme and my woocommerce checkout and other form fields seem too short. can you pls help me out?

    Reply
    • Teddy Triton

      Teddy Triton April 14, 2014, 12:22 pm

      Hi Yavar – we'd be happy to help but this is not the best place. Please use the Upload WP Community Forums here… http://uploadwp.com/community/index.php

      Its easy to join and you're sure to get an answer to adjusting your checkout field forms there.

      Reply
  • Krista April 11, 2014, 6:15 pm

    Hi,
    Great info here! I have a few questions:

    1. How can I change the order that the billing address fields appear on my site? Right now, Country is before State, which seems atypical/unexpected from a user standpoint.
    2. When someone registers during checkout, how can I have the site return them to the cart screen instead of taking them to their dashboard?
    3. When someone has a cart total of $0 (i.e. used a coupon), how can the site either a. skip the payment info screen, or b. add text to the payment info screen instructing them to click the "Order Review" button to proceed?

    Thanks so much for any help you can give.
    Krista

    Reply
    • Teddy Triton

      Teddy Triton April 12, 2014, 5:41 pm

      Hi Krista,

      Thanks for your questions but to better help you and others that have similar questions, please post them in the Upload WP Community Forums here… http://uploadwp.com/community/index.php

      We have many active members that are more than willing to get you solutions fast. Thanks and I'll see ya in the forums.

      Reply
  • Rachel April 18, 2014, 2:38 pm

    How can I add a custom field that is a dropdown?

    Reply
    • Teddy Triton

      Teddy Triton April 18, 2014, 3:03 pm

      Hi Rachel,

      Thanks for your question. Have you had a chance to look through the Upload WP Forums? If not, my suggestion is to start there… http://uploadwp.com/community/index.php

      If you don't find the solution, please feel free to join the forums and start a new thread. Thanks and see you in the forums.

      Reply
  • Lewy Blue April 25, 2014, 5:18 pm

    Great post, and very well explained. However there is one issue I've had – some fields cannot be changed with this method. For example, try adding the line
    >$fields['billing']['billing_state']['label'] = 'County';
    and the label will stubbornly remain 'State/County'.

    Not to mention that the address area in the "My Account" page is unaffected by any of this.

    After some searching I found the solution; there is a filter called 'woocommerce_default_address_fields' which takes precedence over the 'woocommerce_checkout_fields' filter.

    I think that where possible it's better to use 'woocommerce_default_address_fields' as it affects all occurrences of the field being edited. For example, the following removes the postcode field from every address area:

    [code] add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );

    function custom_override_default_address_fields( $address_fields ) {
    $address_fields['postcode']['required'] = false;
    unset($address_fields['postcode']);

    return $address_fields;
    }
    [/code]

    The address fields that can be edited this way are:
    country
    first_name
    last_name
    company
    address_1
    address_2
    city
    state
    postcode

    Reply
  • Peter McNeice May 8, 2014, 2:24 pm

    Adam,

    Do you know if it's possible to use woocommerce as a shop and set up the checkout process to circumvent payment altogether? My client isn't ready for ecommerce just yet, but would like customers to be able to order from their site. Maybe add the online ordering later.

    Can I set up the checkout process to not require payment to finish and issue a purchase order or "reserve this item" type of order instead? The customer would pay when picking up, or include a phone number for the store to call and process credit card payment over the phone.

    Thanks.

    Reply
    • Teddy Triton

      Teddy Triton May 11, 2014, 8:43 am

      Hi Peter,

      Do a Google search for "WooCommerce Catalog Mode Extension" and you should find a solid solution. Also, checkout the Upload WP Community Forums because you'll probably find answers there as well….

      http://uploadwp.com/community/index.php

      Reply
  • Joshua May 9, 2014, 5:52 am

    Hi Adam,

    I have a few customization's on checkout page. i was success full with few things but i am not able make the below mentioned customization's. My website is http://www.rutisrobe.com.

    I need you kind help in getting these things sorted out. I have more to share but for now i need to do these changes.

    1.Change state/county label to State in billing and shipping & place holder as Select State.
    2.Change Postcode/ZIP to PIN Code in billing and shipping

    For the above i am using the code but i am not able to see the changes with these lines of code.

    $fields['billing']['billing_state']['placeholder'] = 'Select State';
    $fields['billing']['billing_state']['label'] = 'State';

    $fields['shipping']['shipping_state']['placeholder'] = 'Select State';
    $fields['shipping']['shipping_state']['label'] = 'State';

    $fields['billing']['billing_postcode']['label'] = 'PIN Code';

    $fields['shipping']['shipping_postcode']['label'] = 'PIN Code';

    I have to remove the following options on the Checkout page.

    1.Remove Returning customer option.
    2.Remove Have a Coupon option.
    3.Remove Create an Account option.
    4.Remove Direct transfer option.
    5.Remove cheque payment option.

    Currently i successfully completed removing billing/shipping company, LastName not mandatory on the checkout page and the code is below.

    // Our hooked in function – $fields is passed via the filter!
    function custom_override_checkout_fields( $fields ) {

    unset($fields['billing']['billing_company']);
    unset($fields['shipping']['shipping_company']);

    return $fields;
    }

    add_filter( 'woocommerce_billing_fields', 'wc_npr_filter_last_name', 10, 1 );

    function wc_npr_filter_last_name( $address_fields ) {
    $address_fields['billing_last_name']['required'] = false;
    return $address_fields;

    }

    ?>

    Reply
  • Joshua May 9, 2014, 6:32 am

    Hi,

    I just figured out how to set the below options.

    1.Remove Returning customer option.
    2.Remove Have a Coupon option.
    3.Remove Create an Account option.
    4.Remove Direct transfer option.
    5.Remove cheque payment option.

    I need help in replacing X symbol in cart page to Remove Item label.

    Thanks,
    Joshua.

    Reply
    • Teddy Triton

      Teddy Triton May 11, 2014, 8:40 am

      Hi Joshua,

      For help with replacing the X symbol in the WooCommerce Cart page please checkout the Upload WP Forums… http://uploadwp.com/community/index.php

      If you don't find the solution, please join and start a new thread and one of our active members will point you in the right direction. See you in the forums.

      Reply
  • Md. Monirul Islam May 19, 2014, 10:03 pm

    Help! Help! Help!
    i already seen your YouTube video tutorial, you only show single tutorial for each video, but when i put two code at a time it's not working, i don't know what's the problem, i am not web developer. Please help me.

    Note: In "bulling" section i want only Country, first name, Last name, email and phone number and "order" section i want to put [ Placeorder ]= '>>> Put the required url or username ', [ lable ]= Facebook – Twitter – Instagram URL/Username'

    // Hook in
    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

    // Our hooked in function – $fields is passed via the filter!
    function custom_override_checkout_fields( $fields ) {
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_address_1']);
    unset($fields['billing']['billing_address_2']);
    unset($fields['billing']['billing_city']);
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_country']);
    unset($fields['billing']['billing_state']);

    return $fields;
    }
    // Hook in
    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

    // Our hooked in function – $fields is passed via the filter!
    function custom_override_checkout_fields( $fields ) {
    $fields['order']['order_comments']['placeholder'] = 'My new placeholder';
    $fields['order']['order_comments']['label'] = 'My new label';
    return $fields;
    } (Not working)

    Please give me the code or please create a video tutorial please

    Reply
  • echo May 29, 2014, 10:36 pm

    how to add “add to cart" and "buy now" buttons. click add to cart button product be added cart, click add to cart link to cart page

    Reply
  • Dragos June 5, 2014, 6:09 am

    Dear Adam,
    Thank you for all the great information.
    I have a qustion: what is the easiest way to validate the fields in the checkout page, besides setting them required? For example, I want to make sure the client inputs 6 numbers in the postal code field. How do I do that?

    Best regards

    Reply
    • Teddy Triton

      Teddy Triton June 5, 2014, 8:57 am

      Hi Dragos,

      For help on validating fields on the WooCommerce checkout page please refer to the Upload WP Community Forums. Specifically the following forum on Customizing the WooCommerce Checkout Page… http://uploadwp.com/community/index.php?forums/customize-woocommerce-checkout-page.13/

      Please feel free to join and start a new thread. We have over 400 active members that would love to help point you in the right direction. Thanks for the positive feedback and I hope to see you in the forums.

      Reply
  • Sunil Barwal June 7, 2014, 8:02 am

    Hi Teddy Triton,

    Thanks for tutorial, I tried to customize my website checkout page "billing details" but noting change there. Even if i delete that form-billing.php file from the checkout folder its still doesn't show any change, Can you please help.

    Regards,
    Sunil

    Reply
  • Takis June 26, 2014, 3:34 am

    Hey Adam.

    These are some GREAT tutorials.

    I have a simple question.How could I add a whole new section similar to "Billing Address" or "Shipping Address"?

    My problem is that custom fields are not shown on confirmation e-mails.

    For example i want to add a field "Choose a color". When someone type "black" i want to receive on my confirmation email "Color: Black"

    Is there a way to do that?

    Thanks again Sir!!

    Reply
  • Marie June 30, 2014, 5:31 am

    Help please. I was following your tutorial to customize the checkout page. It worked when I entered the first command to change the placeholder text but when I added the second command and saved the changes, everything just went blank and nothing is loading.

    Reply
  • Diana July 22, 2014, 7:31 pm

    Hi Adam,

    My product images are all uneven when you go for example under "Sarongs". How can I get them to be uniform and look good?

    Thanks so much!

    Reply
  • MatthewD August 4, 2014, 4:18 pm

    Thanks for a great tutorial. Very easy to understand and implement. I was able to add the code and customize it in about 15 mins.

    I do have a question though. What is the best practice to add a drop down/select for options on the fields? I am wanting to add a drop down for referral options on the check out ie: How did you hear about us with drop down options.

    Thanks
    MatthewD

    Reply
  • mosak August 7, 2014, 4:22 am

    how to override woocommerce file within /includes/ directory?
    ex: I have edited class-wc-gateway-bacs.php files from woocommerce/includes/gateways/bacs/

    Reply
  • Phillip August 11, 2014, 3:00 pm

    I've successfully added a custom field (select box actually) thanks to your video 3. However, I'm struggling to make this field required. Please see this screenshot of my code: https://www.dropbox.com/s/bgt80kx3q949g81/Screenshot%202014-08-11%2014.58.48.png

    I think it is related to the fact that I do not allow shipping and need to change out some items to billing but that's not working either.

    Thanks in advance!

    Reply
  • Rashid August 22, 2014, 9:29 am

    HI,

    Thank you for a great post. It has been very helpful.

    I would also like to add this field on the cart page before the check out page. When i use the same code and replace the add_action() aruguments it doesnt work.

    Any help in the right direction would be very helpful

    Many Thanks

    Reply
  • mhote September 22, 2014, 9:57 pm

    Hi Teddy – great tutorial. I can’t find any answers to this question. I’m trying to keep the ‘Payment Method’ and ‘Place Order’ button section above the fold, however they seemed trapped under the parent ‘Order Review’ div, creating one long column. Ideally, it be great to have the checkout page split over 3 columns (as like many digital product sellers, I only need name and email, then they complete details on paypal). Is there a way to achieve this: col 1) name,email (done) col 2 order review table, col 3) payment method select and place order button. All ideas appreciated! Thanks!

    Reply
  • Ross September 26, 2014, 4:01 am

    Hi Teddy,

    Thanks for posting – been a great help.

    I was wondering if its possible to add a custom field next to where the visitor will need to tick the terms and conditions – Im looking to add a ‘confirm you are over 18′ box.

    Is that possible?

    Thanks
    Ross

    Reply
  • Pere Nadal September 26, 2014, 4:20 am

    This tutorial rules!

    Thanks!

    Reply
  • liezl October 17, 2014, 6:12 am

    hi Teddy,

    How can we make the TextBox next to the Label Name to save space? Also can you show me/us how to make the Label name on the Payment option next to the radio button (coz the default is in the next line).

    Reply
  • Melle October 29, 2014, 9:42 am

    Great tut! Thank you very much.

    One question.
    Is it possible to remove the ‘Shipping and processing cost’ text?

    Thank you!

    Reply
  • Ronald November 6, 2014, 3:54 am

    Hi Teddy,

    great detailed explanation!
    At first i played around with hooks&filters and it worked great. But to make it easier and more visible (in the backend) for my client i just purchased the WooCommerce Checkout field editor…which does the same and my client can now add or delete fields themselves.

    But…what i can’t figure out (and no plugin or plugin-creator i found) is how to get the data from a custom checkout field stored in the user meta.
    I have fields for a registration number and a birthplace, and they are stored with the order fine, and during checkout all the billing fields are stored in the user meta.
    But when they purchase a product again and login as a returned customer, these custom fields are empty in the checkout.
    They also don’t show up in the ‘my account’ page.

    Since all the woocommerce billing and shipping fields are stored in the user meta, it should be possible to store the custom fields as well…but i can’t figure out how.
    Do you?!

    Thanks!
    Ronald

    Reply
  • Sahil Sharma November 7, 2014, 3:11 am

    Hi!

    If I will give you the admin details, will you please remove the “country”, “address”, “company name” “town/city” “state/country” “Postcode / Zip” and “Phone ”

    Please do this. I really need help!!

    Reply
  • Mandy Mowatt November 19, 2014, 12:20 pm

    Hi Teddy,

    Your tutorial above was immensely helpful!! It helped solve customising the checkout page but also helped me understand PHP a little better! You have a great way of explain gin things on your videos.

    I was wondering if you’d be able to assist me with understanding how to customise the registration form in woocommerce? Ive tried to apply the same principles as you’ve explained with the checkout form above… but i don’t seem to be getting anywhere.

    Im not trying to add in any new forms, I’m trying to customise some existing text underneath the “Register”, “Register Now” titles. Instead of it saying “Your text here””Your text here” id like to input some custom text.

    Any advise would be greatly appreciated.

    Thanks,
    Mandy

    Reply
    • Teddy Triton

      Teddy Triton November 20, 2014, 6:47 pm

      Thanks for the complements Mandy and I’m glad to hear that our tutorials have been helpful. Our tutorial on “Overriding WooCommerce Template Files” should help with the customizations you need to make to the checkout page… http://uploadwp.com/overriding-woocommerce-template-files/

      Also, I would encourage you to join our forums / the Upload WP Community Forums… http://uploadwp.com/community/index.php

      We have a ton of active WooCommerce WordPress pros that are more than willing to help you. In the Upload WP Forums, you’ll get help with anything WordPress and/or WooCommerce related.

      Reply
  • Jason November 24, 2014, 3:28 pm

    Great content! Do you have a tutorial or can provide some information on how I can add a page before the checkout? I want to capture just the email first before they go to the next page to enter address and payment information. I was thinking creating another page, similar to the checkout, but just have the email and once that is filled out, then go to the checkout page.

    Im not a developer, but managed to put pieces of code together to get where I have to go. Thanks.

    Reply
    • Teddy Triton

      Teddy Triton November 24, 2014, 4:18 pm

      Hi Jason,

      We don’t have a tutorial on adding a page before the checkout. I’m sure its possible though and would suggest joining the Upload WP Forums… http://uploadwp.com/community/index.php

      We have many active members that will help point you in the right direction.

      Reply
  • Gerry December 3, 2014, 9:06 pm

    This was really handy thank you. I’m now also wondering how to handle the extra added fields in the form processing, any tips?

    I don’t want to save the fields as post meta (which $fields does) but rather process the form somehow?

    Reply
  • Nick.A December 9, 2014, 9:21 pm

    Hi Teddy,

    How can I validate the age on a custom field “birthday w/ datepicker”. So that only 18 yrs old and above can proceed to payment.

    Thanks and Regards,

    Reply

Leave a Comment