I want to change the type of some fields in my account page, where i want to change City from "textfield" to <select> (list) where I specify only some cities, I don't want users to type anything, do you have any idea on which code shall I edit?
I tried with this but I don't know what to modifie!
I want only three cities to be selected (Paris, London, Algiers)
add_filter( 'woocommerce_billing_fields', 'custom_woocommerce_billing_fields' );
function custom_woocommerce_billing_fields( $fields ) {
$fields['billing_city'] = array(
'label' => __('City', 'woothemes'),
'placeholder' => __('City', 'woothemes'),
'required' => true,
'class' => array('billing-city')
);
return $fields;
}
Thank you in advanced!
Can you please try below code.
add_filter( 'woocommerce_billing_fields', 'custom_woocommerce_billing_fields' );
function custom_woocommerce_billing_fields( $fields ) {
$fields['billing_city'] = array(
'type' => 'select',
'label' => __('City', 'woothemes'),
'placeholder' => __('City', 'woothemes'),
'required' => true,
'class' => array('billing-city'),
'options' => array(
'paris' => __('Paris', 'woothemes' ),
'london' => __('London', 'woothemes' ),
'algiers' => __('Algiers', 'woothemes' )
)
);
return $fields;
}
Related
I'm looking to add three custom date fields using select. So the first one would be the day, second would be month and the third would be the year. However, I'm not sure how to add a code without manually entering all years pluss to have three fields count as one.
I have a code I used to add a custom field 'gender' any way to something similar for a dob select fields described above.
add_action('woocommerce_before_checkout_billing_form', 'wps_add_select_checkout_field');
function wps_add_select_checkout_field( $checkout ) {
woocommerce_form_field( 'apgen', array(
'type' => 'select',
'class' => array( 'ap-drop' ),
'label' => __( 'Gender' ),
'options' => array(
'blank' => __( 'Select Gender', 'ap' ),
'male' => __( 'Male', 'ap' ),
'Female' => __( 'Female', 'ap' ),
'non-binary' => __( 'Non-binary', 'ap' )
)
),
$checkout->get_value( 'apgen' ));
}
Woocommerce has now a "date" field type with a very specific behavior, that has inside its field, 3 selectable number field type (days, month and year) that you can select individually, with a showable date picker (see screenshots below):
add_filter('woocommerce_checkout_fields', 'wps_add_checkout_field');
function wps_add_checkout_field( $fields ) {
// Select field (Gender)
$fields['billing']['billing_gender'] = array(
'type' => 'select',
'class' => array( 'form-row-wide' ),
'label' => __( 'Gender' ),
'required' => true,
'priority' => 3,
'options' => array(
'' => __( 'Select Gender', 'ap' ),
'male' => __( 'Male', 'ap' ),
'Female' => __( 'Female', 'ap' ),
'non-binary' => __( 'Non-binary', 'ap' )
),
);
// Date field (with 3 number fields with a datepicker)
$fields['billing']['billing_date'] = array(
'type' => 'date',
'class' => array( 'form-row-wide' ),
'label' => __( 'Date' ),
'required' => true,
'priority' => 3,
);
return $fields;
}
Code goes in function.php file of your active child theme (or active theme). Tested and work.
You will get something like:
Rolling in the date field:
Selecting days and using to increase or decrease days:
Selecting months and increasing value (or typing a value):
Selecting years and increasing value (or typing a value):
Making appear the date picker and select a date:
Other similar hooks that can be used:
add_filter('woocommerce_billing_fields', 'wps_add_date_type_checkout_field');
function wps_add_date_type_checkout_field( $fields ) {
// Date field (with 3 number fields with a datepicker)
$fields['billing_date'] = array(
'type' => 'date',
'class' => array( 'form-row-wide' ),
'label' => __( 'Date' ),
'priority' => 5,
);
return $fields;
}
Or
add_action('woocommerce_before_checkout_billing_form', 'wps_add_date_type_checkout_field');
function wps_add_date_type_checkout_field( $checkout ) {
woocommerce_form_field( 'billing_date', array(
'type' => 'date',
'class' => array( 'form-row-wide' ),
'label' => __( 'Gender' ),
), $checkout->get_value( 'billing_date' ));
}
Or before (or after) order notes:
add_action('woocommerce_before_order_notes', 'wps_add_date_type_checkout_field');
// add_action('woocommerce_after_order_notes', 'wps_add_date_type_checkout_field');
function wps_add_date_type_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field">';
woocommerce_form_field( 'billing_date', array(
'type' => 'date',
'class' => array('my-field-class form-row-wide'),
'label' => __('Date'),
), $checkout->get_value( 'billing_date' ));
echo '</div>';
}
Related docs: Customizing Woocommerce checkout fields using actions and filters
I can't find the way to ovveride billing state and post code.
How can I edit the other parts of existing billing fields like billing state and post code?
This is what I have in the functions.php file in my child theme (I have included the code affecting the billing part):
<?php
function my_custom_checkout_field( $checkout ) {
global $wpdb;
$check_zone = $wpdb->get_results("select area_name from brick_area where id='".$_SESSION['area']."'",ARRAY_A);
if(!empty($check_zone)){
$check_zoneid = $check_zone['0'];
}
woocommerce_form_field( 'my_field_name', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Delivery Area'),
'placeholder' => __('Area'),
'readonly' =>'readonly',
'default' => $check_zoneid['area_name']
), $checkout->get_value( 'my_field_name' ));
woocommerce_form_field( 'my_expected_date', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'required' => true,
'label' => __('Expected Delivery Date'),
'placeholder' => __('Enter expected delivery date.'),
), $checkout->get_value( 'my_expected_date' ));
/*woocommerce_form_field( 'my_expected_time', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'required' => true,
'label' => __('Expected Delivery Time'),
'placeholder' => __('Enter expected delivery time.'),
), $checkout->get_value( 'my_expected_time' ));*/
woocommerce_form_field( 'site_contact_name', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'required' => true,
'label' => __('Site Contact Person Name'),
'placeholder' => __('Enter site contact person name.'),
), $checkout->get_value( 'site_contact_name' ));
woocommerce_form_field( 'site_contact_phone', array(
'type' => 'tel',
'class' => array('my-field-class form-row-wide'),
'required' => true,
'label' => __('Site Contact Phone Number'),
'placeholder' => __('Enter site contact phone number.'),
), $checkout->get_value( 'site_contact_phone' ));
}
$fields['billing']['billing_city']['default'] = $_SESSION['cn'];
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );
function custom_override_default_address_fields( $address_fields ) {
// we are changing here billing_state field to required
$fields['billing']['billing_state']['required'] = true;
return $address_fields;
}
/*$fields['billing']['my_field_name']['default'] = $check_zoneid['area_name'];
$fields['billing']['my_field_name']['label'] = 'Area';*/
return $fields;
}
?>
Thanks
This is the complete way for billing state and billing post code override, keeping the billing selector with options.
Here is the code the fully functional and tested code:
Unsetting billing state and post code checkout fields
add_filter( 'woocommerce_checkout_fields' , 'partial_unsetting_checkout_fields' );
function partial_unsetting_checkout_fields( $fields ) {
unset($fields['billing']['billing_state']);
unset($fields['billing']['billing_postcode']);
return $fields;
}
Reinserting custom billing state and post code checkout fields
add_filter( 'woocommerce_default_address_fields' , 'art_override_default_address_fields' );
function art_override_default_address_fields( $address_fields ) {
// # for state
$address_fields['billing_state']['type'] = 'select';
$address_fields['billing_state']['class'] = array('form-row-wide');
$address_fields['billing_state']['required'] = true;
$address_fields['billing_state']['label'] = __('State', 'my_theme_slug');
$address_fields['billing_state']['placeholder'] = __('Enter state', 'my_theme_slug');
$address_fields['billing_state']['default'] ='Choice 1';
$address_fields['billing_state']['options'] = array(
'option_1' => 'Choice 1',
'option_2' => 'Choice 2',
'option_3' => 'Choice 3'
);
// # for postcode
$address_fields['billing_postcode']['type'] = 'text';
$address_fields['billing_postcode']['class'] = array('form-row-wide');
$address_fields['billing_postcode']['required'] = true;
$address_fields['billing_postcode']['label'] = __('Postcode', 'my_theme_slug');
$address_fields['billing_postcode']['placeholder'] = __('Enter your postcode', 'my_theme_slug');
return $address_fields;
}
Naturally this goes on function.php file of your active child theme or theme
Official reference: WooThemes - Customizing checkout fields using actions and filters
Note concerning the 'class' property
There is 2 ways to handle it:
The field is alone in one line (width 100%), you use: 'form-row-wide'
There is 2 fields side by side on the same line, you use:
'form-row-first' for the first field
'form-row-last' for the second field
//-------------------------- OVERRIDING BILLING STATE FIELD -------------------------------//
//Removing previous one by using unset
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_state']);
return $fields;
}
add_filter( 'woocommerce_default_address_fields' , 'art_override_default_address_fields' );
function art_override_default_address_fields( $address_fields ) {
// # for state
$address_fields['Billing_State']['type'] = 'text';
$address_fields['Billing_State']['class'] = array('form-row-wide');
$address_fields['Billing_State']['required'] = true;
$address_fields['Billing_State']['label'] = __('State', 'my_theme_slug');
$address_fields['Billing_State']['placeholder'] = __('Enter state', 'my_theme_slug');
return $address_fields;
}
I am customizing the WooCommerce checkout page fields. I want to add a heading (text) in between the fields. I have reordered the fields like this
add_filter('woocommerce_checkout_fields', 'ac_checkout_reorder_fields');
function ac_checkout_reorder_fields($fields) {
$order = array(
"billing_first_name",
"billing_last_name",
"billing_company",
"billing_email",
"billing_phone",
"billing_address_1",
"billing_address_2",
"billing_postcode",
"billing_country"
);
foreach($order as $field)
{
$ordered_fields[$field] = $fields["billing"][$field];
}
$fields["billing"] = $ordered_fields;
return $fields;
}
Then I added a new heading like this
add_action( 'woocommerce_after_checkout_billing_form', 'add_custom_heading' );
function add_custom_heading( $checkout ) {
echo '<div id="add_custom_heading"><h2>' . __('Custom Heading Here') . '</h2></div>' ;
}
Now the fields are re-arranged and the custom heading is showing. But I want the heading showing just below the name & company fields. With my code, the field is being added below. How I an reposition this in my desired place.
PS: I also tried to add customize the sections of the entire field with this hook woocommerce_checkout_fields adding placeholder and removing the labels. Here are the codes but this also does not help me solve the issue.
function add_wc_custom_fields($fields) {
global $woocommerce;
$countries_obj = new WC_Countries();
$countries = $countries_obj->__get('countries');
$fields['billing']['billing_first_name'] = array(
'label' => '',
'placeholder' => _x('First Name*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array( 'form-row-first' ),
);
$fields['billing']['billing_last_name'] = array(
'label' => '',
'placeholder' => _x('last Name*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array( 'form-row-last' ),
);
$fields['billing']['billing_company'] = array(
'label' => '',
'placeholder' => _x('Company Name', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('checkout-billing-company')
);
$fields['billing']['billing_address_1'] = array(
'label' => '',
'placeholder' => _x('Address(Line 1)*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('checkout-billing-addressL1')
);
$fields['billing']['billing_address_2'] = array(
'label' => '',
'placeholder' => _x('Address(Line 2)*', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('checkout-billing-addressL2')
);
$fields['billing']['billing_email'] = array(
'label' => '',
'placeholder' => _x('Email Address*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('form-row-first')
);
$fields['billing']['billing_phone'] = array(
'label' => '',
'placeholder' => _x('Phone Number', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-last')
);
$fields['billing']['billing_city'] = array(
'label' => '',
'placeholder' => _x('Town/City', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-first')
);
$fields['billing']['billing_state'] = array(
'label' => '',
'placeholder' => _x('State/County', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-first')
);
$fields['billing']['billing_postcode'] = array(
'label' => '',
'placeholder' => _x('Zip/Postcode', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-first')
);
$fields['billing']['billing_country'] = array(
'label' => '',
'type' => 'select',
'placeholder' => _x('Country', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-last'),
'options' => $countries
);
return $fields;
}
add_filter('woocommerce_checkout_fields', 'add_wc_custom_fields');
we can use the filter 'woocommerce_form_field_' . $type... where $type is the type of the input... in our case billing_company is of type text... this filter returns the html of the field, in our case billing field, billing_company.. the filter has 4 arguments being passed, these are $field, $key, $args, $value... we just need two of these...
add_action( 'woocommerce_form_field_text','reigel_custom_heading', 10, 2 );
function reigel_custom_heading( $field, $key ){
// will only execute if the field is billing_company and we are on the checkout page...
if ( is_checkout() && ( $key == 'billing_company') ) {
$field .= '<p class="form-row form-row-wide">Custom Heading</p>';
}
return $field;
}
Important: If we don’t format it as a paragraph with the class form-row it will be put to the top of all billing fields by Woocommerce (reasons unknown to me). This shows us that this as “Hack” and maybe your goals are achieved better differently.
Instead of hooking into an existing woocommerce_form_field_<field_type> filter such as woocommerce_form_field_text, I prefer to use the woocommerce_form_field_<field_type> filter to create a new field type. This allows us to add HTML output for an additional field type (and therefore we can use HTML output for a heading instead) and we can use this new heading "field type" when modifying checkout fields with the woocommerce_checkout_fields filter.
// Add field type to WooCommerce form field
add_filter( 'woocommerce_form_field_heading','sc_woocommerce_form_field_heading', 10, 4 );
function sc_woocommerce_form_field_heading($field, $key, $args, $value) {
$output = '<h3 class="form-row form-row-wide">'.__( $args['label'], 'woocommerce' ).'</h3>';
echo $output;
}
// Modify checkout fields
add_filter( 'woocommerce_checkout_fields','custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
$fields['billing']['billing_heading_name'] = array(
'type' => 'heading',
'label' => 'Heading here',
);
Using the above method the solution to the original question would be:
add_filter('woocommerce_checkout_fields', 'ac_checkout_reorder_fields');
function ac_checkout_reorder_fields($fields) {
$fields['billing']['billing_heading_name'] = array(
'type' => 'heading',
'label' => 'Heading here',
);
$order = array(
"billing_first_name",
"billing_last_name",
"billing_heading_name",
"billing_company",
"billing_email",
"billing_phone",
"billing_address_1",
"billing_address_2",
"billing_postcode",
"billing_country"
);
foreach($order as $field) {
$ordered_fields[$field] = $fields["billing"][$field];
}
$fields["billing"] = $ordered_fields;
return $fields;
}
add_filter('woocommerce_form_field', 'addHeadingsInBetweenFormFields', 10, 4);
function addHeadingsInBetweenFormFields($field, $key, $args, $value = null) {
if (is_checkout() & $key === 'billing_first_name') {
$a = '<p class="form-row form-row-wide">Shipping</p>';
return $a . $field;
}
return $field;
}
I adda ed the below code to function.php page and it shows the select box at checkout page fine. But how can i get the value of selected item at the thank you page.
add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
function custom_override_checkout_fields($fields) {
$fields['billing']['point_side'] = array(
'label' => __(
'<strong>Select Where Your Points Should Go</strong>',
'woocommerce'
),
'placeholder' => _x(
'custom_field', 'placeholder',
'woocommerce'
),
'required' => true,
'clear' => false,
'type' => 'select',
'class' => array('form-row-wide'),
'options' => array(
'default1' => __('Defult1', 'woocommerce'),
'ls' => __('Left Side', 'woocommerce'),
'rs' => __('Right Side', 'woocommerce')
)
);
return $fields;
}
Any helps appreciated.
I have managed to add custom checkout city dropdown field by following method
$fields['shipping']['shipping_city'] = array(
'label' => __('City', 'woocommerce'),
'placeholder' => _x('', 'placeholder', 'woocommerce'),
'required' => true,
'clear' => true,
'type' => 'select',
'class' => array('own-css-name'),
'options' => array(
'New_York_City' => __('New York City', 'woocommerce' ),
'Chicago' => __('Chicago', 'woocommerce' ),
'Dallas' => __('Dallas', 'woocommerce' )
)
);
I want to get the option values from city taxonomy so I have tried the following method but it doesn't seems to work (http://i.stack.imgur.com/dasIm.jpg)
$args = array(
'child_of' => 0,
'type' => 'product',
'taxonomy' => 'city',
'hide_empty' => 0
);
$categories = get_categories( $args );
foreach ($categories as $category) {
$cityArray[] = "'".$category->slug."' => __('".$category->name."', 'woocommerce' )";
}
$fields['shipping']['shipping_city2'] = array(
'label' => __('City', 'woocommerce'),
'placeholder' => _x('', 'placeholder', 'woocommerce'),
'required' => true,
'clear' => true,
'type' => 'select',
'class' => array('own-css-name'),
'options' => array(implode( ', ', $cityArray ) )
);
Try this .
Just replace the
For Loop with
foreach ($categories as $category) {
$cityArray[$category->slug] = $category->name;
}
Set option like this
'options' => array_values($cityArray)
Have tested the same and the results where as follows
Let me know if this worked for you.