so I've implemented a billing form with some custom fields , my drop down is :
$fields['billing_complex_name'] = array(
'label' => __('Complex Name', 'woocommerce'), // Add custom field label
'placeholder' => _x('E.g Raslouw Gardens', 'placeholder', 'woocommerce'), // Add custom field placeholder
'required' => false, // if field is required or not
'clear' => false, // add clear or not
'type' => 'select',// add field type
'options' => array(
'' => 'Please select',
'ansaarestate'=> 'Ansaar Estate',
'bangladeshheights'=> 'Bangladesh Heights',
'celticmanor'=> 'Celtic Manor',
'chantelplace'=> 'Chantel Place',
...
'class' => array('my-css'),
'priority' => 51,//
);
And then using jQuery I implement the following for changes:
jQuery(document).ready(function(){
// Your code in here
jQuery(document).on('input','#billing_complex_name', function() {
myFunc();
})
function myFunc() {
// your function code
//var phone_num = jQuery('#billing_phone').val(<?php $phone_number ?>);
var complex_name = jQuery('#billing_complex_name').val();
var suburb = jQuery('#billing_suburb').val();
if (complex_name == 'eldogleneast') {
jQuery("#billing_suburb").val('ELD');
jQuery('#billing_postcode').val('0157');
jQuery("#billing_complex_address").val('');
jQuery("#billing_postcode").prop("readonly", false);
And of course depending on the selection of the complex conditions change such as the postcode or suburb etc.
My question now is:
I need to make the drop down list searchable and have an Other selection , if Other is selected I need a text input for the user to enter in and that will be the selected value (All jQuery then will just not make any changes to the postcode or anything)
Used select2.js library to implement it
Related
WooCommerce on CheckOut-Page , the default of ['billing_state']shows in drop-down list which I want to change it to input[text]. The customer have to key-in the information by themselves.
please help, thanks a lot
this code doesn't work for me. (after the customer key-in the state, it shows the state-code. It should show the state name that the customer-key-in)
add_filter( 'woocommerce_checkout_fields' ,
'y_change_address_input_type', 10, 1 );
function y_change_address_input_type( $fields ) {
$fields['billing']['billing_state']['type'] = 'text';
return $fields;
}
thank you for your comment, currently, I found the solution. I can switch from selection[option] to input[text] on hook woocommerce_default_address_fields, and the code work as I expected. (I don't know why the code will not work on woocommerce_checkout_fields. The code should have work on both woocommerce_default_address_fields and woocommerce_checkout_fields)
This is the work:
add_filter( 'woocommerce_default_address_fields', 'y_edit_state', 40, 1 );
function y_edit_state( $state_fields ) {
$state_fields ['state'] = array(
'label' => 'stae', // Add custom field label
'placeholder' => 'stae', // Add custom field placeholder
'required' => true, // if field is required or not
'class' => array( 'form-row-wide', 'address-field' ), // add class name
'clear' => false, // add clear or not
'type' => 'text', // add field type
'priority' => 80, // Priority sorting option
);
return $state_fields;
}
In WooCommerce I am adding a custom billing field at the end of the checkout billing fields section, with the code below:
add_filter('woocommerce_checkout_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields($fields)
{
$fields['billing']['billing_options'] = array(
'label' => __('תאריך לידה', 'woocommerce'), // Add custom field label
'placeholder' => _x('תאריך לידה'), // Add custom field placeholder
'required' => true, // if field is required or not
'clear' => false, // add clear or not
'type' => 'date', // add field type
'class' => array('my-css') // add class name
);
return $fields;
}
How can I add this field after the first name last name field or after company field?
You need to use the "priority" argument, which will allow you to set your field in the correct location (after the first and last name fields).
Normally "billing first name" has a 10 as priority and "billing last name 20 as priority. Then comes the "billing company" that has 30 as priority… So for your custom billing field use a priority of 25 (in between).
There is a little mistake in your code for the placeholder where you should replace _x() function by __().
Your code is going to be:
add_filter('woocommerce_checkout_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields( $fields )
{
$fields['billing']['billing_options'] = array(
'label' => __('תאריך לידה', 'woocommerce'), // Add custom field label
'placeholder' => __('תאריך לידה', 'woocommerce'), // Add custom field placeholder
'required' => true, // if field is required or not
'clear' => false, // add clear or not
'type' => 'date', // add field type
'class' => array('my-css'), // add class name
'priority' => 25, // Priority sorting option
);
return $fields;
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
If you want this field after the billing company, you will use a priority of 35 instead.
Related: Reordering checkout fields in WooCommerce 3
I'm using select2 to let user choose stuff from list from ajax.
In adding to db it's working great, but I want to edit stuff. So I can still select stuff from my select2, but user should see what is the current value of select2.
I've tried to do something with InitSelect, but it didn't work, even after I've just passed data from php.
This is my Select2:
$(".personid").select2({
ajax: {
type: "post",
url: '/' + APP_PATH + '/Projects/find_person.json',
datatype: 'json',
quietMillis: '100',
data: function (term, page) {
return {
q: term.toUpperCase(), // wprowadzony ciag znakow - zawsze na uppercase
page_limit: 10,
};
},
results: function (data, page) {
var dane = {results: []};
$.each(data['data'], function (i, item) {
dane.results.push({
id: item['Person']['id'],
text: item['Person']['displayName']
});
});
return dane;
}
}
});
And this is my cake form input:
echo $this->Form->input('person_id', array(
'type' => 'text',
'value' => $projectcontact['Person']['id'],
'Placeholder' => 'Wybierz osobę',
'empty' => 'Wybierz osobę ',
'class' => 'form-control personid',
'label' => array(
'class' => 'col-md-4 control-label',
'text' => 'Osoba'
)
));
Can anyone help to make Select.js display current Persona name data from database in this?
With Select2 4.x
With Select2 4.x you're not supposed to use a text input element anymore, but a select element. Quote from the docs:
When using Select2 with remote data, the HTML required for the select is the same as any other Select2. If you need to provide default selections, you just need to include an option for each selection that contains the value and text that should be displayed.
<select class="js-data-example-ajax">
<option value="3620194" selected="selected">select2/select2</option>
</select>
https://select2.github.io/examples.html#data-ajax
So, as described, create a proper select input with a single selected option element, something along the lines of:
echo $this->Form->input('person_id', array(
'type' => 'select',
'options' => array(
$projectcontact['Person']['id'] => $projectcontact['Person']['displayName']
),
'selected' => $projectcontact['Person']['id'],
'class' => 'form-control personid',
'label' => array(
'class' => 'col-md-4 control-label',
'text' => 'Osoba'
)
));
Additionally you'll have to ensure that $projectcontact is being filled with the person according to the possible submitted person_id value, otherwise the selected value will not remain when rendering the form after submit.
Normally when creating a select element, you'd use a complete list of options, so that the form helper could pick the appropriate option automatically, based on the submitted value. Without such a list, you'll have to read and supply the specific person instead.
Here's some dummy code that demonstrates the priniciple:
$personId = $defaultPersonId;
if($this->request->is(array('post', 'put'))) {
$personId = $this->request->data('ModelName.person_id');
// ...
}
$projectcontact = $this->Person->findById($personId);
$this->set('projectcontact', $projectcontact);
See also
Cookbook > Core Libraries > Helpers > Form > Options for select, checkbox and radio inputs
Cookbook > Core Libraries > Helpers > Form > Creating form elements
Cookbook > Models > Retrieving Your Data > find(‘list’)
I am building a WooCommerce based store. I have a list of postcodes, each one has a different shipping cost attached through Shipping Zones (some provide free shipping, some have a flat rate).
When the customer goes to the checkout page, he needs to type his postcode number in the input field. Depending on postcode, an order preview will show different shipping total (free or flat rate).
Here's how the input field looks like in class-wc-countries.php:
public function get_default_address_fields() {
$fields = array(
'postcode' => array(
'label' => __( 'Postcode/ZIP', 'woocommerce' ),
'required' => true,
'class' => array( 'form-row-first', 'address-field' ),
'clear' => true,
'validate' => array( 'postcode' ),
'autocomplete' => 'postal-code',
),
);
However, what I want to do is to turn this field into a drop-down menu, so the customer could just select his postcode option rather than type it.
I managed to make it drop-down, but whenever I choose any option it doesn't seem to change shipping total as it would with input field.
Here's what I did:
public function get_default_address_fields() {
$fields = array(
'postcode' => array(
'label' => __( 'Postcode/ZIP', 'woocommerce' ),
'required' => true,
'class' => array( 'form-row-first', 'address-field' ),
'clear' => true,
'validate' => array( 'postcode' ),
'autocomplete' => 'postal-code',
'type' => 'select',
'options' => array(
'opt1' => "001122", "112200", "334400")
),
);
But this don't work.
Am I missing something?
How do I make these drop-down options change shipping total?
Thanks
This will answer very partially to your question, and just show you the way to customize checkout fields.
Overriding core files is not really something to do, as you will loose everithing each time Woocommerce is going to be updated and is not recommended.
To override checkout fields in a clean way, first you need to use a custom function hooked in one of that 2 filter hooks:
woocommerce_default_address_fields (when customizing billing and shipping address default fields)
woocommerce_checkout_fields (when customizing billing or shipping address fields and also others fields).
Related official documentation: Customizing checkout fields using actions and filters
So here I have chose the first hook, and I have corrected your post codes array. You will get that:
Here is that functional and tested code:
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_postcode_field' );
function custom_override_default_postcode_field( $address_fields ) {
// Your postcodes array
$postcode_array = array(
'opt1' => "001122",
'opt2' => "112200",
'opt3' => "334400"
);
$address_fields['postcode']['type'] = 'select';
$address_fields['postcode']['options'] = $postcode_array;
return $address_fields;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
As selecting a post-code is a live front-end event, you will need to use a complex javascript/ajax script with some remote php function to achieve what you want to do, and this is a real development... It also depends on your settings and is complex to handle as there is already some woocommerce ajax scripts operating in that checkout page.
add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields( $fields )
{
$fields['billing_first_name']['required'] = false;
return $fields;
}
I want to make First and Last name should be alphabetic only. Right now it's accepting numbers also.
Help will be much appreciated. I also want to limit text of review in cart.
Regards
$('#billing_first_name').on('input',function(){
var node = $(this);
node.val(node.val().replace(/[^a-z]/g,'') ); }
);
Adding this jQuery will work.! You can add for others fields too.
You have to add fields by custom method then use follow script for alphabetic textbox:
add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
function custom_override_checkout_fields($fields)
{
$fields['billing']['billing_first_name'] = array(
'label' => __('First name', 'woocommerce'),
'placeholder' => _x('First name', 'placeholder', 'woocommerce'),
'required' => false,
'clear' => false,
'type' => 'text',
'class' => array(
'alpha'
)
);
and same for billing_last_name,
use all of scripts in active theme functions.php
Actually woo-commerce does not give us this functionality. You have to use your custom jquery or javascript. This might help you
You should call this script under wp_head hook
add_action('wp_head', ' alphabet_only ');
function alphabet_only() {
?>
<script type="text/javascript">
$('.alpha').bind('keyup blur',function(){
var node = $(this);
node.val(node.val().replace(/[^a-z]/g,'') ); }
);
</script>
<?php
}
That's it.