I've created a custom checkout field, but I would like for it to react dynamically with the Shipping/Billing Country dropdown.
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
global $woocommerce;
$ship_country = $woocommerce->customer->get_country();
if ($ship_country !== 'US'){
$fields['billing']['international_catalogue'] = array(
'label' => __('I would like to receive a catalogue', 'woocommerce'),
'required' => false,
'type' => 'checkbox',
'class' => array('my-field-class form-row-wide'),
'default' => 0
);
}
$fields['billing']['email_opt_out'] = array(
'label' => __('Please send me the monthly newsletter <BR>(You can unsubscribe at any time)', 'woocommerce'),
'required' => false,
'type' => 'checkbox',
'class' => array('my-field-class form-row-wide'),
'default' => 1
);
return $fields;
}
This only works the way I want if you reload the checkout page after changing the Country. How do I get this checkbox to react dynamically?
Related
I've setup 4 fields in the woocommerce checkout form which are displaying correctly in the edit order page and customer panel, but I'm not able to display correctly the checkbox as a yes or no (results in a 1 or 0) and can't get those custom fields in the new order admin email.
I've tried different codes to add the fields in the new order email, but all resulted in PHP errors or just didn't show the fields.
The code I've used is:
// Campi extra checkout
add_filter( 'woocommerce_billing_fields' , 'add_billing_field_extra' );
function add_billing_field_extra( $fields ) {
$new_order_fields = array();
foreach($fields as $key => $value){
if($key == 'billing_country') {
$new_order_fields['billing_fattura'] = array(
'type' => 'checkbox',
'label' => __('Vuoi la fattura?', 'woocommerce'),
'class' => array('form-row-wide'),
'clear' => true
);
$new_order_fields['billing_piva'] = array(
'label' => __('Partita Iva', 'woocommerce'),
'placeholder' => _x('Partita iva', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'show' => true
);
$new_order_fields['billing_cf'] = array(
'label' => __('Codice Fiscale', 'woocommerce'),
'placeholder' => _x('Codice Fiscale', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'show' => true
);
$new_order_fields['billing_sdi'] = array(
'label' => __('SDI', 'woocommerce'),
'placeholder' => _x('SDI', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'show' => true
);
}
$new_order_fields[$key] = $value;
}
return $new_order_fields;
}
// Aggiungere il campo Piva AMMINISTRAZIONE BACKEND
add_filter( 'woocommerce_admin_billing_fields' , 'add_admin_field_cfpiva' );
function add_admin_field_cfpiva( $fields ) {
$fields['fattura'] = array(
'label' => __('Fattura', 'woocommerce'),
'show' => true
);
$fields['piva'] = array(
'label' => __('P.IVA', 'woocommerce'),
'show' => true
);
$fields['cf'] = array(
'label' => __('Codice Fiscale', 'woocommerce'),
'show' => true
);
$fields['sdi'] = array(
'label' => __('SDI', 'woocommerce'),
'show' => true
);
return $fields;
}
function blindo_mostra_nascondi_campi_woocommerce() {
wc_enqueue_js( "
jQuery('input#billing_fattura').change(function(){
if (! this.checked) {
// HIDE IF NOT CHECKED
jQuery('#billing_piva_field').fadeOut();
jQuery('#billing_piva_field input').val('');
jQuery('#billing_cf_field').fadeOut();
jQuery('#billing_cf_field input').val('');
jQuery('#billing_sdi_field').fadeOut();
jQuery('#billing_sdi_field input').val('');
} else {
// SHOW IF CHECKED
jQuery('#billing_piva_field').fadeIn();
jQuery('#billing_cf_field').fadeIn();
jQuery('#billing_sdi_field').fadeIn();
}
}).change();
");
}
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 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;
}
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.