Adding placeholder to Postcode billing field in Woocommerce.
In core class-wc-countries.php
'postcode' => array(
'label' => __( 'Postcode / ZIP', 'woocommerce' ),
'required' => true,
'class' => array( 'form-row-last', 'address-field' ),
'clear' => true,
'validate' => array( 'postcode' ),
'autocomplete' => 'postal-code',
),
So there is no way to override it woocommerce_billing_fields filter. Why some fields have placeholder key but other not? Some fields have only labels, some only placeholders and some have both. I don't get logic behind this.
So my question is: how to add placeholder text to Postcode field. I can do it with Javascript, but that seams not natural. Also I can modify core, which is even worse then Javascript solution. What else can I do?
As suggested by #Ash Patel we can do it like this:
add_filter( 'woocommerce_checkout_fields', function($fields){
$fields['billing']['billing_postcode']['placeholder'] = __('My Post Code', 'woocommerce');
return $fields;
} );
And for shipping
add_filter( 'woocommerce_shipping_fields', function($fields){
$fields['shipping_postcode']['placeholder'] = __('My Post Code', 'woocommerce');
return $fields;
} );
add below code into your function.php for adding/updating postal code for checkout and edit screen.
//on edit address screen
function filter_woocommerce_billing_fields( $wooccm_billing_fields, $int ) {
$wooccm_billing_fields['billing_postcode']['placeholder'] = __('My Post Code', 'woocommerce');;
return $wooccm_billing_fields;
};
add_filter( 'woocommerce_billing_fields', 'filter_woocommerce_billing_fields', 10, 2 );
add_action('woocommerce_checkout_fields', 'update_placeholder_checkout_form_billing');
function update_placeholder_checkout_form_billing($wcCheckout_fields) {
$wcCheckout_fields['billing']['billing_postcode'] = array(
'label' => 'Postcode / ZIP',
'placeholder' => _x('My Post Code', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('checkout-billing-postal-code')
);
return $wcCheckout_fields;
}
Related
Is there a way to give the customer a choice? So the customers can decide how we can contact them.
Email or phone. Both are required but it is enough to fill any of them. They do not need to fill these 2 fields.
#Martin Mirchev suggests a select menu.
add_filter( 'woocommerce_checkout_fields' ,
'wc_custom_email_phone_field_checkout' );
function wc_custom_email_phone_field_checkout( $fields ) {
$fields['billing']['billing_contact'] = array(
'label' => __('How we contact you?', 'woocommerce'),
'placeholder' => _x('', 'placeholder', 'woocommerce'),
'required' => false,
'clear' => false,
'type' => 'select',
'options' => array(
'email' => __('Email', 'woocommerce' ),
'phone' => __('Phone', 'woocommerce' )
)
);
return $fields;
}
This code adds a select menu. Then how can I do an if-else?
I found a solution for this.
I keep the email field and created a select
add_filter( 'woocommerce_checkout_fields', 'wc_custom_email_phone_field_checkout' );
function wc_custom_email_phone_field_checkout( $fields ) {
$fields['billing']['billing_contact'] = array(
'label' => __('How should we contact you?', 'woocommerce'),
'placeholder' => __('', 'placeholder', 'woocommerce'),
'required' => false,
'clear' => false,
'type' => 'select',
'options' => array(
'email' => __('Email', 'woocommerce' ),
'phone' => __('WhatsApp', 'woocommerce' )
)
);
return $fields;
}
I also created an input
add_filter('woocommerce_checkout_fields', 'custom_woocommerce_whatsapp_fields');
function custom_woocommerce_whatsapp_fields( $fields ){
$fields['billing']['billing_whatsapp'] = array(
'label' => __('Enter your WhatsApp number', 'woocommerce'),
'placeholder' => __('Enter your WhatsApp number', 'woocommerce'),
'required' => false, // if field is required or not
'clear' => false, // add clear or not
'type' => 'text', // add field type
'class' => array('whatsapp'), // add class name
'priority' => 25, // Priority sorting option
);
return $fields;
}
The input field is invisible with css.
.form-row.whatsapp {
display: none;
}
If the option phone is selected, it becomes visible.
let selectEl = document.getElementById('billing_contact');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'phone') {
document.getElementById('billing_whatsapp_field').style.display = 'block';
document.getElementById('billing_whatsapp_field').classList.add('validate-required');
} else {
document.getElementById('billing_whatsapp_field').style.display = 'none';
document.getElementById('billing_whatsapp_field').classList.remove('validate-required');
}
});
And finally, if the phone option is selected and form sent with the phone field empty:
add_filter( 'woocommerce_checkout_fields' , 'whatsapp_checkout_fields', 9999 );
function whatsapp_checkout_fields( $fields ) {
if (($_POST['billing_contact'] == 'phone')) {
$fields['billing']['billing_whatsapp']['required'] = true;
} else {
$fields['billing']['billing_whatsapp']['required'] = false;
}
return $fields;
}
If the mail option is selected, the WhatsApp field is not required.
In both cases, I wanted to keep the email as a required field for several reasons. But you can make it false when the phone is selected.
I would like to know how can i show the following custom radio checkout field horizontally instead of one below the other.
I want them to appear next to each other, similar to the image below
They currently appear in my checkout form as the image below
I have used the following code to add the fields but i couldn't figure out how to align them horizontally & properly.
/**
* Simple checkout field addition example.
*
* #param array $fields List of existing billing fields.
* #return array List of modified billing fields.
*/
function hayder_add_checkout_fields( $fields ) {
$fields['billing_address_type'] = array(
'label' => __( 'Address Type' ),
'type' => 'radio',
'class' => array( 'form-row-wide' ),
'priority' => 85,
'class' => array('address_type'),
'required' => true,
'options' => array(
'Home' => 'Home (9AM-9PM, All Days)',
'Work' => 'Work (9AM-6PM, Weekdays Only)',
),
);
return $fields;
}
add_filter( 'woocommerce_billing_fields', 'hayder_add_checkout_fields' );
function hd_woocommerce_admin_billing_fields( $fields ) {
$fields['billing_address_type'] = array(
'label' => __( 'Address Type' ),
'show' => true,
);
return $fields;
}
add_filter( 'woocommerce_admin_billing_fields', 'hd_woocommerce_admin_billing_fields' );
Any help will be appreciated..
With this function I am getting the option to use a custom selectbox in my products. But it doesn't appear in the product page meta. I would like to display it just for one special product. How can I do that?
I don't have any PHP experience.
<?php
function prefix_add_selectbox() {
$args = array(
'id' => 'my_new_select', // required. The meta_key ID for the stored value
'wrapper_class' => '', // a custom wrapper class if needed
'desc_tip' => true, // makes your description show up with a "?" symbol and as a tooltip
'description' => __('My awesome select box', 'your_text_domain'),
'label' => __( 'My New Select', 'your_text_domain' ),
'options' => array(
'value1' => __( 'Text 1', 'your_text_domain' ),
'value2' => __( 'Text 2', 'your_text_domain' )
)
);
woocommerce_wp_select( $args );
}
add_action( 'woocommerce_product_options_tax', 'prefix_add_selectbox' );```
In my account page,
I want to use a similar code as below to sell in a specific "cities" or "postcodes", the below code is used to sell in a specific "states":
/**
* Sell only in Alger & Zeralda
*/
function wc_sell_only_states( $states ) {
$states['DZ'] = array(
'ALG' => __( 'Alger', 'woocommerce' ),
'ZLD' => __( 'Zeralda', 'woocommerce' ),
);
return $states;
}
add_filter( 'woocommerce_states', 'wc_sell_only_states' );
What shall I use or modify?
I tried this, but it displays "Error code 500":
// define the woocommerce_countries_base_city callback
function filter_woocommerce_countries_base_city( $var ) {
// make filter magic happen here...
$var['DZ'] = array(
'ALG' => __( 'Alger', 'woocommerce' ),
'ZLD' => __( 'Zeralda', 'woocommerce' ),
);
return $var;
};
// add the filter
add_filter( 'woocommerce_countries_base_city', 'filter_woocommerce_countries_base_city', 10, 1 );
Thank you in advanced!
Try This it worked for me!!
add_filter( 'woocommerce_form_field_args', 'custom_form_field_args', 10, 3 );
function custom_form_field_args( $args, $key, $value ) {
if ( $args['id'] == 'billing_city' ) {
$args = array(
'label' => __( 'Town / City', 'woocommerce' ),
'required' => TRUE,
'clear' => TRUE,
'type' => 'select',
'options' => array(
'' => ('Select City' ),
'Bangalore' => ('Bangalore' ),
'Mysore' => ('Mysore' )
),
'class' => array( 'update_totals_on_change' )
);
} // elseif … and go on
return $args;
};
There is a simpler solution to this. The approach also depends on the some assumption which are listed below:
Assumption : If there is only one City which you want the City field to be set to then you can use jQuery. Using jQuery you will be setting the value of the field and make the fields disabled to avoid change in City field value.
A rough example will be :
jQuery('#billing_city').val('USA').attr('disabled','disabled');
You just need to add this line such that it is execute on Checkout page.
Im trying to echo a $var in a function array in WP. I need to have a field on the Woocommerce checkout (accomplished) with a VALUE from a $_SESSION. The checkout field looks like this:
// Our hooked in function - $fields is passed via the filter!
public function VAT_override_checkout_fields( $fields ) {
$fields['billing']['VAT_cui'] = array(
'label' => __('Domæne', 'woocommerce'),
'placeholder' => _x('Intet Valgt', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true,
'type' => 'select',
'options' => array(
'kobdomain' => __('echo $MYVAR', 'woocommerce' ),
)
);
return $fields;
}
I understand i doesnt work, but im stuck :(
Problem is i need the return $fields input value to be filled with a string from my Session. I think its possible with the SELECT OPTION field, but as you can see, i dunno how to echo value in it.