Hey I would like to make my Create and account at check out auto check. So it automatically props the user to make an account. I want them to be able to unselect the check box if they do not wish to make an account but I would like it to be auto selected first.
Hi there,
Our theme does not have such a functionality. To have such a functionality you either need to use 3rd party plugins or custom code the functionality yourself.
We do not have any official recommendation regarding this, but this google search might be a good starting point.
Thank you.
So I got the create an account auto checked by adding this to the functions.php file of my child theme:
add_filter(‘woocommerce_create_account_default_checked’ , function ($checked){
return true;
});
Can you help me move this and the email box up to the top of the checkout page. I would also like to add text about the field that says " You must have an email address to create an account."
Hi,
You can try this third party plugin.
Hope that helps.
Is there no way to do this in the function.php file of my child theme. We have heard the more plugins you have can slow down your site and after hearing that the owner is nervous about adding plugins.
Hello @odsadmin,
Yes, it’s true plugins do cause website to slow down. But it’s also a fact that a well coded plugin won’t have much of an impact on server resources. On the other hand please understand that providing custom development solutions is outside the scope of the support and we have tried to point you in right direction.
Thanks for understanding.
Ok so as far as moving the Create an Account. I am using the plugin that comes with x theme Woo Checkout Editor. Could you please tell me how to move the Create an Account to the top of the check out page please.
Hi there,
It may be not possible since those are grouped together, But perhaps, possible with jQuery. Would you mind providing a sample URL where we can test this issue?
Thanks!
Hi there,
A quick solution would be to use this code in the custom JS:
(function($){
var html = $('.woocommerce-checkout form .col-1 div:nth-child(2) .create-account').html();
$('.woocommerce-checkout form .col-1 div:nth-child(2) .create-account').remove();
$(html).insertAfter('.woocommerce-checkout form .col-1 h3:first-child');
})(jQuery);
But please note that this might cause some conflict in the future as this is only a quick fix. It would be better if you override the woocommerce template.
Hope this helps.
Ok that worked to move the create an account but when you check the box the password box dose not appear.
When I inspected the element and I copy and move this HTML
<p class="form-row form-row-wide create-account woocommerce-validated">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
<input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="createaccount" checked="checked" type="checkbox" name="createaccount" value="1"> <span>Create an account?</span>
</label>
</p>
<div class="create-account" style="display: block;">
<p class="form-row validate-required woocommerce-invalid woocommerce-invalid-required-field" id="account_password_field" data-priority=""><label for="account_password" class="">Create account password <abbr class="required" title="required">*</abbr></label><input type="password" class="input-text " name="account_password" id="account_password" placeholder="Password" value="" style="outline: none;"></p> <div class="clear"></div>
</div>
</div>
To above this:
form name=“checkout” method=“post” class=“checkout wocommerce-checkout” action=“http://www.outdoordogsupply.com/checkout/” enctype=“multipart/form-date” novalidate"
It works. How can I put this in to what you gave me?
Hello There,
If you continue to use Javascript, things will get more complicated. The best thing I could recommend is for you to modify the form itself. To do that, please do the following:
1.) Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file
<?php
/**
* Checkout billing information form
*
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-billing.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 3.0.9
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
/** @global WC_Checkout $checkout */
?>
<div class="woocommerce-billing-fields">
<?php if ( wc_ship_to_billing_address_only() && WC()->cart->needs_shipping() ) : ?>
<h3><?php _e( 'Billing & Shipping', 'woocommerce' ); ?></h3>
<?php else : ?>
<h3><?php _e( 'Billing details', 'woocommerce' ); ?></h3>
<?php endif; ?>
<?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?>
<div class="woocommerce-billing-fields__field-wrapper">
<?php
$fields = $checkout->get_checkout_fields( 'billing' );
foreach ( $fields as $key => $field ) {
if ( isset( $field['country_field'], $fields[ $field['country_field'] ] ) ) {
$field['country'] = $checkout->get_value( $field['country_field'] );
}
woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
}
?>
</div>
<?php do_action( 'woocommerce_after_checkout_billing_form', $checkout ); ?>
</div>
<?php if ( ! is_user_logged_in() && $checkout->is_registration_enabled() ) : ?>
<div class="woocommerce-account-fields">
<?php if ( ! $checkout->is_registration_required() ) : ?>
<p class="form-row form-row-wide create-account">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
<input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="createaccount" <?php checked( ( true === $checkout->get_value( 'createaccount' ) || ( true === apply_filters( 'woocommerce_create_account_default_checked', false ) ) ), true ) ?> type="checkbox" name="createaccount" value="1" /> <span><?php _e( 'Create an account?', 'woocommerce' ); ?></span>
</label>
</p>
<?php endif; ?>
<?php do_action( 'woocommerce_before_checkout_registration_form', $checkout ); ?>
<?php if ( $checkout->get_checkout_fields( 'account' ) ) : ?>
<div class="create-account">
<?php foreach ( $checkout->get_checkout_fields( 'account' ) as $key => $field ) : ?>
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>
<div class="clear"></div>
</div>
<?php endif; ?>
<?php do_action( 'woocommerce_after_checkout_registration_form', $checkout ); ?>
</div>
<?php endif; ?>
Please check the code above because this is the form that displays in your check out page. You will have to move the create account fields on top of the billing fields.
3.) Save the file named as form-billing.php
4.) Upload this file to your server in the child theme’s folder wp-content/themes/x-child/woocommerce/checkout/. You will have to create the folder path because it does not exist in the child theme yet.
To know more how you can override the WooCommerce templates, please check out these links:
If you have successfully override the form billing template, you will have to remove the JS code given by @Jade to avoid any issues or conflicts it might bring in the future.
I really don’t understand the links you sent me to make the new file path. Could you help me anymore please?
Hello There,
Thanks for updating in! The form that you are seeing in your checkout page is currently located within the WooCommerce folder wp-ontent/plugins/woocommerce/templates/checkout/form-billing.php. Since you want the “Create an account” to be the first to display on top of the form, you will have to override the template. In order to do that, you will have to copy the form-billing.php and upload it to your child theme’s folder wp-content/themes/x-child/woocommerce/checkout/. This is the best way to override the form. And you will to create the folder woocommerce and checkout in the child theme since it does not exist by default.
Hope this make sense.
So all I need to do is make the woocommerce folder and inside that a checkout folder and inside that put the form-billing.php folder that I was provided them? Thats all I need to do?
Hey There,
Yes that is the steps. In your form-billing.php, the contents might look something like this:
<?php
/**
* Checkout billing information form
*
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-billing.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 3.0.9
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
/** @global WC_Checkout $checkout */
?>
<?php if ( ! is_user_logged_in() && $checkout->is_registration_enabled() ) : ?>
<div class="woocommerce-account-fields">
<?php if ( ! $checkout->is_registration_required() ) : ?>
<p class="form-row form-row-wide create-account">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
<input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="createaccount" <?php checked( ( true === $checkout->get_value( 'createaccount' ) || ( true === apply_filters( 'woocommerce_create_account_default_checked', false ) ) ), true ) ?> type="checkbox" name="createaccount" value="1" /> <span><?php _e( 'Create an account?', 'woocommerce' ); ?></span>
</label>
</p>
<?php endif; ?>
<?php do_action( 'woocommerce_before_checkout_registration_form', $checkout ); ?>
<?php if ( $checkout->get_checkout_fields( 'account' ) ) : ?>
<div class="create-account">
<?php foreach ( $checkout->get_checkout_fields( 'account' ) as $key => $field ) : ?>
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>
<div class="clear"></div>
</div>
<?php endif; ?>
<?php do_action( 'woocommerce_after_checkout_registration_form', $checkout ); ?>
</div>
<?php endif; ?>
<div class="woocommerce-billing-fields">
<?php if ( wc_ship_to_billing_address_only() && WC()->cart->needs_shipping() ) : ?>
<h3><?php _e( 'Billing & Shipping', 'woocommerce' ); ?></h3>
<?php else : ?>
<h3><?php _e( 'Billing details', 'woocommerce' ); ?></h3>
<?php endif; ?>
<?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?>
<div class="woocommerce-billing-fields__field-wrapper">
<?php
$fields = $checkout->get_checkout_fields( 'billing' );
foreach ( $fields as $key => $field ) {
if ( isset( $field['country_field'], $fields[ $field['country_field'] ] ) ) {
$field['country'] = $checkout->get_value( $field['country_field'] );
}
woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
}
?>
</div>
<?php do_action( 'woocommerce_after_checkout_billing_form', $checkout ); ?>
</div>
So that the “Create account” will display first right before the billing info.
I’m pretty sure I did it right and it did not work.
Hi there,
That’s because those fields are part of the loop, and you can’t just move them. Instead, let’s try the javascript one again. Please add this code to your global custom javascript.
jQuery('.woocommerce-account-fields').insertBefore('.woocommerce-billing-fields'); jQuery('.woocommerce-checkout .validate-email').prependTo('.woocommerce-account-fields');
That should do it, you may consult a developer if you have further enhancement and customization regarding the checkout page.
Thanks!
That worked. You are amazing!!
You’re welcome 