In woocommerce registration form, there's no "terms and conditions" before sign up button.
Is there a way to make it appears in the form?
Here is the link of my theme layout.
Updated on july 2018 - Added compatibility for Woocommerce version 3.4+
If not done yet, first you need enable terms and conditions on checkout page:
To create a new page in Wordpress for your terms and conditions
To enable that page in Woocommerce > Settings > Checkout > Checkout pages (section):
Then save… you are done.
The code to get the term and conditions check box on registration form:
// Add term and conditions check box on registration form
add_action( 'woocommerce_register_form', 'add_terms_and_conditions_to_registration', 20 );
function add_terms_and_conditions_to_registration() {
if ( wc_get_page_id( 'terms' ) > 0 && is_account_page() ) {
?>
<p class="form-row terms wc-terms-and-conditions">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="terms" <?php checked( apply_filters( 'woocommerce_terms_is_checked_default', isset( $_POST['terms'] ) ), true ); ?> id="terms" /> <span><?php printf( __( 'I’ve read and accept the terms & conditions', 'woocommerce' ), esc_url( wc_get_page_permalink( 'terms' ) ) ); ?></span> <span class="required">*</span>
</label>
<input type="hidden" name="terms-field" value="1" />
</p>
<?php
}
}
// Validate required term and conditions check box
add_action( 'woocommerce_register_post', 'terms_and_conditions_validation', 20, 3 );
function terms_and_conditions_validation( $username, $email, $validation_errors ) {
if ( ! isset( $_POST['terms'] ) )
$validation_errors->add( 'terms_error', __( 'Terms and condition are not checked!', 'woocommerce' ) );
return $validation_errors;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
When checkbox is not ticked, an error message is displayed.
This checkbox is only a validation step (It is not saved in database, as we don't use that information anywhere).
Addition:
To allow terms and conditions only in Registration page use one of the following:
add_filter( 'woocommerce_checkout_show_terms', '__return_false' );
Or
add_filter( 'woocommerce_get_terms_and_conditions_checkbox_text', '__return_false' );
Code goes in function.php file of your active child theme (or active theme). Tested on WC 3.5+ and works.
Related
I need to create My Account page for registered users with changeable fields on backend and frontend.
Now the fields are updated if I change the values through the admin panel. However, if I change the field values through My Account, the fields are not saved or updated.
What do i need to change or add to the code?
I used the following LoicTheAztec's answers:
Add a custom field in Woocommerce Edit Account page
Adding some my account custom fields to admin user pages in Woocommerce
Adding an additional custom field in Woocommerce Edit Account page
My code:
Template:
$user = wp_get_current_user();
<form class="tabs-content__page_inner woocommerce-EditAccountForm edit-account" action="" method="post"
<div class="pers-acc__tab-fields_field tab-field woocommerce-form-row form-row">
<label for="account_phone" class="tab-field__title"><?php esc_html_e( 'Телефон', 'woocommerce' ); ?></label>
<div class="tab-field__input-inner">
<input type="text" class="tab-field__input woocommerce-Input woocommerce-Input--text input-text" name="account_phone" id="account_phone" value="<?php echo esc_attr( $user->account_phone ); ?>" />
</div>
</div>
</form>
functions.php
<?php
add_action('woocommerce_save_account_details', 'save_phone_number_account_details', 20, 1);
function save_phone_number_account_details($user_id) {
if( isset( $_POST['account_phone'] ) ) {
update_user_meta( $user_id, 'account_phone', sanitize_text_field( $_POST['account_phone'] ) );
}
}
//custom field in admin console
add_action( 'show_user_profile', 'add_extra_custom_user_data', 1, 1 );
add_action( 'edit_user_profile', 'add_extra_custom_user_data', 1, 1 );
function add_extra_custom_user_data( $user )
{
?>
<h3><?php _e("Other details",'woocommerce' ); ?></h3>
<table class="form-table">
<tr>
<th><label for="account_phone"><?php _e( 'Custom phone', 'woocommerce' ); ?></label></th>
<td><input type="text" name="account_phone" value="<?php echo esc_attr(get_the_author_meta( 'account_phone', $user->ID )); ?>" class="regular-text" /></td>
</tr>
</table>
<br />
<?php
}
//save custom field value in admin console
add_action( 'personal_options_update', 'save_extra_custom_user_data' );
add_action( 'edit_user_profile_update', 'save_extra_custom_user_data' );
function save_extra_custom_user_data( $user_id )
{
if( ! empty($_POST['account_phone']) )
update_user_meta( $user_id, 'account_phone', sanitize_text_field( $_POST['account_phone'] ) );
}
I customized the user registration process of WooCommerce for this I added some extra fields like date of birth & Mobile number.
I added the form elements like this:
function my_extra_register_fields() {?>
<p class="form-row form-row-wide">
<label for="reg_dob"><?php _e( 'Date of Birth', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="reg_customer_dob" id="reg_customer_dob" />
</p>
<p class="form-row form-row-wide">
<label for="reg_billing_phone"><?php _e( 'Mobile', 'woocommerce' ); ?><span class="required">*</span></label>
<input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" />
</p>
<div class="clear"></div>
<?php
}
add_action( 'woocommerce_register_form', 'my_extra_register_fields' );
and I am storing data like this -
function wooc_save_extra_register_fields( $customer_id ) {
if ( isset( $_POST['billing_phone'] ) ) {
// Phone input filed which is used in WooCommerce
update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );
}
if ( isset( $_POST['reg_customer_dob'] ) ) {
// Phone input filed which is used in WooCommerce
update_user_meta( $customer_id, 'customer_dob', sanitize_text_field( $_POST['reg_customer_dob'] ) );
}
}
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );
Now I am trying to add/show these two details (date of birth & Mobile number) in Edit user page of user menu so that admin can see the details.
image for location is attached
But i am unable to read data in this page.
I am try to using the following hook:
add_action( 'edit_user_profile', 'print_custom_fileds_in_edit_user', 30 );
Any adivce?
To display the field between the contact information you can use the user_contactmethods filter hook opposite edit_user_profile
You just need to make sure the user meta key matches
/**
* Filters the user contact methods.
*
* #since 2.9.0
*
* #param string[] $methods Array of contact method labels keyed by contact method.
* #param WP_User $user WP_User object.
*/
function filter_user_contactmethods( $methods, $user ) {
// Add user contact methods
$methods['customer_dob'] = __( 'Date of Birth', 'your-theme-slug' );
return $methods;
}
add_filter( 'user_contactmethods', 'filter_user_contactmethods', 10, 2 );
I have been able to add a custom text input field, in woocommerce's order details page, but I can't save the data submitted data.
This is the code:
add_action( 'woocommerce_order_details_before_order_table', 'add_custom_Field',10,2 );
function add_custom_Field( $order_id) {
$user = wp_get_current_user();
$order_id = method_exists( $order, 'get_id' ) ? $order->get_id() : $order->id;
?>
<form method="post">
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="custom_URL"><?php _e( 'URL', 'woocommerce' ); ?></label>
<input type="text" name="custom_URL" id="custom_URL" value="<?php echo esc_attr( $order_id->custom_URL ); ?>" />
</p>
<input type="submit" name="test" id="test" value="RUN" /><br/>
</form>
<?php
function submit()
{
update_user_meta( $user_id, 'custom_URL', sanitize_text_field( $_POST['custom_URL'] ) );
echo "Your function on button click is working";
}
if(array_key_exists('test',$_POST)){
submit();
}
}
Do you know what I'm doing wrong?
The following will allow you to add a user custom field to customer order detail and to save its value on submission:
// Display user custom field
add_action( 'woocommerce_order_details_before_order_table', 'add_user_custom_url_field_to_order' );
function add_user_custom_url_field_to_order( $order ) {
global $current_user;
$custom_url = get_user_meta( $current_user->ID, 'custom_URL', true );
?>
<form method="post">
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="custom_URL"><?php _e( 'URL', 'woocommerce' ); ?></label>
<input type="text" name="custom_URL" id="custom_URL" value="<?php echo $custom_url; ?>" />
</p>
<input type="submit" name="submit-custom_URL" value="<?php _e('RUN', 'woocommerce'); ?>" /><br/>
</form>
<?php
}
// Save the field as custom user data
add_action( 'template_redirect', 'save_user_custom_url_field_from_order' );
function save_user_custom_url_field_from_order() {
global $current_user;
if( isset($_POST['custom_URL']) ){
update_user_meta( $current_user->ID, 'custom_URL', sanitize_url( $_POST['custom_URL'] ) );
wc_add_notice( __("Submitted data has been saved", "woocommerce") );
}
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
Note based on your comment:
If the custom url has to be different for each order, you can't save it as user meta data, but instead as $order item meta data... But the code will be slightly different and you will need to define how will be your custom urls.
my question:
How to add mobile phone field in Woocommerce my-account/edit-account/ page
(Related template: form-edit-account.php file)
Like in the following answer thread:
Saving the value of a custom field phone number in WooCommerce My account > Account details
But this answer code is incomplete as there is some missing hooked functions. Any help is appreciated to get something complete, meaning the field display.
You have 3 options to display a custom mobile phone field on My account > Edit account page:
1) As the first field using woocommerce_edit_account_form_start action hook (see below).
2) After existing fields using woocommerce_edit_account_form action hook:
// Display the mobile phone field
// add_action( 'woocommerce_edit_account_form_start', 'add_billing_mobile_phone_to_edit_account_form' ); // At start
add_action( 'woocommerce_edit_account_form', 'add_billing_mobile_phone_to_edit_account_form' ); // After existing fields
function add_billing_mobile_phone_to_edit_account_form() {
$user = wp_get_current_user();
?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="billing_mobile_phone"><?php _e( 'Mobile phone', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--phone input-text" name="billing_mobile_phone" id="billing_mobile_phone" value="<?php echo esc_attr( $user->billing_mobile_phone ); ?>" />
</p>
<?php
}
// Check and validate the mobile phone
add_action( 'woocommerce_save_account_details_errors','billing_mobile_phone_field_validation', 20, 1 );
function billing_mobile_phone_field_validation( $args ){
if ( isset($_POST['billing_mobile_phone']) && empty($_POST['billing_mobile_phone']) )
$args->add( 'error', __( 'Please fill in your Mobile phone', 'woocommerce' ),'');
}
// Save the mobile phone value to user data
add_action( 'woocommerce_save_account_details', 'my_account_saving_billing_mobile_phone', 20, 1 );
function my_account_saving_billing_mobile_phone( $user_id ) {
if( isset($_POST['billing_mobile_phone']) && ! empty($_POST['billing_mobile_phone']) )
update_user_meta( $user_id, 'billing_mobile_phone', sanitize_text_field($_POST['billing_mobile_phone']) );
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
3) In a specific location, overriding myaccount/form-edit-account.php template file via the theme as explained on this documentation. and on this answer thread…
In this case you will need to add the following html code in the template (like in this answer thread):
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="billing_mobile_phone"><?php _e( 'Mobile phone', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--phone input-text" name="billing_mobile_phone" id="billing_mobile_phone" value="<?php echo esc_attr( $user->billing_mobile_phone ); ?>" />
</p>
In this last case, you will need to add in your theme's function.php file the 2 last hooked functions from section 2 (validation and saving).
Having some issues with the address area of /my-account/edit-addresses/
I would like to customize the form fields within the template form-edit-addresses.php. For example, I would like to change for all the fields, plus individually place some within separate classes:
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">First name <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Name"></p>
to
<div class="form-group form-group-default input-group">
<div class="form-input-group">
<label for="billing_first_name" class="">Company</label>
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Name">
</div>
Please note that these above are just the HTML tags taken from the inspect and are not the correct fields as to make the form work. That I can handle - it's just finding or replacing the fields.
The second thing I would like to accomplish is to add this form within the /my-account/edit-addresses/ URL/Slug rather than /my-account/edit-addresses/billing
The third is to make the form upon submitting redirect to /my-account/ instead of /my-account/edit-addresses/ and include any Woocommerce notices
The last point is to remove the First Name Last Name Email Phone fields. I assume will fix easily by completing step 1 and removing the form fields that are not required.
Greatly appreciate any time given to finding solutions to these.
Cheers
I have figured out part 2, 3 and 4 of my question - just in case someone else was looking...
Part 2 was to add the form-edit-address.php to edit-address
I added this to the my-address.php template
<?php
// get the user meta
$userMeta = get_user_meta(get_current_user_id());
// get the form fields
$countries = new WC_Countries();
$billing_fields = $countries->get_address_fields( '', 'billing_' );
$shipping_fields = $countries->get_address_fields( '', 'shipping_' );
?>
<!-- billing form -->
<?php
$load_address = 'billing';
$page_title = __( 'Billing Address', 'woocommerce' );
?>
<form action="/my-account/edit-address/billing/" class="edit-account" method="post">
<h2><?php echo apply_filters( 'woocommerce_my_account_edit_address_title', $page_title ); ?></h2>
<?php do_action( "woocommerce_before_edit_address_form_{$load_address}" ); ?>
<?php foreach ( $billing_fields as $key => $field ) : ?>
<?php woocommerce_form_field( $key, $field, $userMeta[$key][0] ); ?>
<?php endforeach; ?>
<?php do_action( "woocommerce_after_edit_address_form_{$load_address}" ); ?>
<p>
<input type="submit" class="button" name="save_address" value="<?php esc_attr_e( 'Save Address', 'woocommerce' ); ?>" />
<?php wp_nonce_field( 'woocommerce-edit_address' ); ?>
<input type="hidden" name="action" value="edit_address" />
</p>
</form>
To do part 3 and redirect submit from form-edit-address.php I added the following to my theme functions.php
function action_woocommerce_customer_save_address( $user_id, $load_address ) {
wp_safe_redirect(wc_get_page_permalink('myaccount'));
exit;
};
add_action( 'woocommerce_customer_save_address', 'action_woocommerce_customer_save_address', 99, 2 );
To do part 4 and remove fields from the form-edit-address.php I added the following to my theme functions.php
add_filter( 'woocommerce_billing_fields' , 'custom_override_billing_fields' );
function custom_override_billing_fields( $fields ) {
unset($fields['billing_first_name']);
unset($fields['billing_last_name']);
unset($fields['billing_phone']);
unset($fields['billing_email']);
return $fields;
}
Any help with the other part of this question would be greatly appreciated.
You can NOT change the <p> tag (removing all existing attributes + values) to a <div> as will certainly break some processes, because specific woocommerce javascript is enabled on this…
Now you can use woocommerce_form_field_args filter hook to change the class globally on all the <p> tags and you can remove the required behavior on all the fields too, so <abbr class="required" title="required">*</abbr> will be removed.
Here is that code:
add_filter( 'woocommerce_form_field_args', 'custom_wc_form_field_args', 10, 3 );
function custom_wc_form_field_args( $args, $key, $value ){
// Only on My account > Edit Adresses
if( is_wc_endpoint_url( 'edit-account' ) || is_checkout() ) return $args;
$args['class'] = array('form-input-group');
$args['required'] = false;
return $args;
}
So you will have to manage CSS to make design changes.
All available arguments $args in this array are:
'type' # # string
'label' # # string
'description' # # string
'placeholder' # # string
'maxlength' # # boolean
'required' # # boolean
'autocomplete' # # boolean
'id' # => $key (argument)
'class' # # array
'label_class' # # array
'input_class' # # array
'return' # # boolean
'options' # # array
'custom_attributes' # # array
'validate' # # array
'default' # # string
'autofocus' # # string
'priority' # # string
With woocommerce_form_field_{field_type} filter hook you can access to field settings individually based on the field type. This hook has 4 available arguments: $field, $key, $args and $value…