Customizing the WooCommerce Checkout Page

April 24, 2013 · 240 comments

in WooCommerce Tutorials, WP Plugins, WP Theme Tutorials

Custom WooCommerce Checkout Page

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

pin it button Customizing the WooCommerce Checkout Page
Teddy Triton

Article by

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.

Adam has written 106 awesome articles for us at Upload WordPress

Stay Updated - Subscribe

{ 240 comments… read them below or add one }

Amelie April 26, 2013 at 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 at 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 at 9:37 am

Expression of thanks that helped me a lot.

Reply

Teddy Triton Teddy Triton April 29, 2013 at 9:52 pm

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

Adam

Reply

redman June 2, 2013 at 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 at 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 at 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 at 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 at 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

Imran May 11, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 11:19 am

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

Reply

Luke May 31, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 1:42 pm

Great tutorial, Teddy.
Thanks,
Steve

Reply

Teddy Triton Teddy Triton June 5, 2013 at 6:02 pm

Thanks for the positive feedback Steve!

Reply

Wouter June 6, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 6:59 pm

Thanks for sharing with us Ania!

Tyler August 14, 2013 at 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.

Kristy June 11, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 8:45 am

Thanks for sharing this with everyone Daniel!

Reply

@joehobot July 6, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 5:44 am

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

Riley July 24, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 8:54 pm

Thanks Adam for the advice.

Reply

Cory August 7, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 2:40 pm

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

Reply

Will Butler August 23, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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

Filippos October 2, 2013 at 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

Teddy Triton Teddy Triton October 2, 2013 at 3:55 pm

Hi Filippos – thanks for the comment and for letting us know our tutorials have been helpful. What red menu button are you referring to and which theme are you using? Let us know and we'll do our best to help.

Reply

Filippos October 3, 2013 at 6:27 am

Mystile by WooThemes ( vesion 1.2.1 i think it's latest one…) . Check my screenshot here: http://app.getsmileapp.com/images/432c468820f5dbea1d7c3604756ded554f132b756924ee879eb5550c544c7e4b/jpg/2048×1536

For safety reason I just blurred the logo and the url of the site…

Reply

juanma October 4, 2013 at 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 at 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 at 8:20 am

Wooooooooow, Perfect, Number1♥

Reply

Smart Tuning October 6, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 4:06 am

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

Reply

Craig November 4, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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

TG November 12, 2013 at 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 at 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 at 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 at 5:50 pm

Thanks for the positive feedback and support Katie.

Reply

Shaobo November 14, 2013 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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 at 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

Teddy Triton Teddy Triton December 23, 2013 at 6:52 pm

Hi,

Sam, just make sure you're using a child theme and your changes will be safe when you upgrade to the latest version of WooCommerce. This tutorial shows you how to make the child theme before overriding woocomm template files… http://uploadwp.com/overriding-woocommerce-template-files/

Reply

Amj December 21, 2013 at 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 at 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 at 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 at 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 at 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

Teddy Triton Teddy Triton January 5, 2014 at 1:37 pm

Hi Hugo,

Most likely it is possible to move the location of the "ship to billing address" check-box. Have you tried the free extension called, "WooCommerce Checkout Manager" yet? If not, start with that plugin… http://wordpress.org/plugins/woocommerce-checkout-manager/

If that doesn't work, please use our new Upload WP Community Forums. The forums are a good place to get woocommerce support from us and our members…

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

Reply

TakeBarcelona January 4, 2014 at 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 at 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 at 12:12 pm

No need I figured it out. Thanks.

Reply

Teddy Triton Teddy Triton January 7, 2014 at 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 at 11:05 am

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

Reply

Alan January 7, 2014 at 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 at 11:01 am

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

Reply

Anthony O January 8, 2014 at 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

Teddy Triton Teddy Triton January 8, 2014 at 7:02 pm

Hi Anthony,

Have you tried the "WooCommerce Checkout Manger" plugin? IF not, start there and see if that works for you. You can learn more about it here… http://uploadwp.com/11-amazing-extensions-for-woocommerce/

If that doesn't work, please post your question in the Upload WP Community Forums here… http://uploadwp.com/community/index.php

Thanks

Reply

Samantha January 20, 2014 at 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

Teddy Triton Teddy Triton January 20, 2014 at 7:07 pm

Hi Samantha,

Thanks for the positive feedback! Please post your questions on customizing the woocommerce checkout in the Upload WP Community Forums here… http://uploadwp.com/community/index.php?forums/customize-woocommerce-checkout-page.13/

Posting your question in the forums allows us to better help you and other people that have the same or similar question. Thanks for understanding and I'll see ya in the forums.

Reply

Aaron January 23, 2014 at 11:00 am

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

Aaron

Reply

Teddy Triton Teddy Triton January 24, 2014 at 7:59 am

Hi Aaron,

Please post your question in our "Checkout Page Customizations" forum here… http://uploadwp.com/community/index.php?threads/checkout-page-customizations.13/

Also, please provide as much detail as possible as well as a screen capture of what you're trying to do and we'll do our best to help. Thanks

Reply

Pulsar February 2, 2014 at 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

Teddy Triton Teddy Triton February 5, 2014 at 7:24 pm

Hi Pulsar,

I believe you'd change "Ship to billing address" right above… </label>

If you have trouble with this, please use the Upload WP Community Forums here… http://uploadwp.com/community/index.php

Reply

Chirag February 11, 2014 at 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 at 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 at 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

Teddy Triton Teddy Triton February 27, 2014 at 8:14 am

Hi – A Catalan,

Have you had a chance to look at woothemes documentation on shortcodes here… http://docs.woothemes.com/document/shortcodes/

If that doesn't help, please join the Upload WP Community Forums and post your question there. Most likely, one of our members will point you in the right direction. Here's the link to the Upload WP Forums…

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

Adam

Reply

josh March 5, 2014 at 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

Teddy Triton Teddy Triton March 10, 2014 at 7:01 pm

Hi Josh,

That's a great question and I believe the answer is there is a way to change the WooCommerce checkout order so that payment method is chosen before billing address. Have you tried the WooCommerce Checkout Manager extension? http://wordpress.org/plugins/woocommerce-checkout-manager/

If that doesn't help, please post in the Upload WP Community Forums here… http://uploadwp.com/community/index.php

The Upload WP Forums is the best place to get feedback from me and other WordPress WooCommerce experts.

Reply

Roy Vincent Niepes March 10, 2014 at 9:08 pm

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

Reply

Teddy Triton Teddy Triton March 12, 2014 at 9:17 pm

Hi Roy, yes you can. Here's our tutorial on how to do that – scroll down to the bottom to see the tutorial video… http://uploadwp.com/community/index.php?threads/front-end-code-snippets-to-customize-woocommerce.48/#post-625

Reply

Jay March 17, 2014 at 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

Teddy Triton Teddy Triton March 18, 2014 at 1:08 pm

Hi Jay,

I found the following extension for WooCommerce that integrates the Moneris payment gateway… http://www.woothemes.com/products/moneris-gateway/

If you still need help, please join the Upload WP Community Forums here… http://uploadwp.com/community/index.php

It's free to join and we have many active members that will help guide you in the right direction. thanks

Reply

Greta March 21, 2014 at 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 at 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 at 12:05 pm

Fantastic stuff, thanks very much this is so helpful!

Reply

Rio March 29, 2014 at 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 at 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 at 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 at 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 at 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 at 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

Teddy Triton Teddy Triton October 14, 2013 at 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.

Reply

Bill Potter October 17, 2013 at 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….

Reply

Leave a Comment

Previous post:

Next post: