Hi, thanks for using our checkout plugin. To change the checkout billing City field as dropdown please add the code below to your theme/child-theme functions.php. Please note that here we are changing field type and options only. The city field on the admin checkout editor will remain as text field, but on the frontend checkout page it will show as select field. Also, you need to rearrange the field to correct the position from the settings page. We have given some sample options only, you can change it on that code snippet.
function awcfe_city_dropdown_field( $fields ) {
$city_args = wp_parse_args( array(
'type' => 'select',
'options' => array(
'' => __( 'Select city' ),
'birmingham' => 'Birmingham',
'cambridge' => 'Cambridge',
'leicester' => 'Leicester',
'liverpool' => 'Liverpool',
'london' => 'London',
'manchester' => 'Manchester',
),
'input_class' => array(
'country_select',
)
), $fields['billing']['billing_city'] );
$fields['billing']['billing_city'] = $city_args;
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'awcfe_city_dropdown_field', 999999, 1 );
Thread Starter
Thomas
(@goldenshawarma)
Hi @saneshacodez
Thank you very much for your reply. I will implement the code and let you know of the result. Cheers!
Thread Starter
Thomas
(@goldenshawarma)
Hi @saneshacodez
I can see a drop-down from my checkout field already. Thank you for that.
Screenshot
Can I do the same for billing_state (in this my scenario I named it Region) as well? Because I can’t seem to change the drop-down label for states from the plugin settings.
Let me know if this is possible.
Thank you and Cheers!
Hi, thanks for your reply. We couldn’t understand your second request properly. By default Woocommerce changes state field type to text, select or hidden according to country. Do you want to change the placeholder value for the state file?
Thread Starter
Thomas
(@goldenshawarma)
Hi @saneshacodez,
I have created custom states instead via Snippets because I decided to forego the default states that WooCommerce has for my country-PH in my scenario.
There are only 2 selectable options (my custom state entries), if I am making sense.
Screenshot
Is there a way to change the placeholder text from saying “select an option” to “select a region?
Screenshot
Cheers!
Hi, you can achieve this by adding the following line to the code that was previously shared.
$fields['billing']['billing_state']['placeholder'] = 'select a region';
Please check the screenshot: https://tinyurl.com/ygeob43k
Thread Starter
Thomas
(@goldenshawarma)
Hi @saneshacodez
I inserted the following line to Snippet you previously shared, cleared the cache and I still see “select an option”
Screenshot
Cheers!
Hi, can you please confirm that you have added the correct field name in our previously shared code. In our example, the field name was “state” from billing section, so added “billing_state”. Or can you share your checkout page url.
Thread Starter
Thomas
(@goldenshawarma)
Hi @saneshacodez,
Appreciate your reply. Here is the screenshot of my snippet
Screenshot
Also, the link to my checkout.
Preorder > Checkout
Link
-
This reply was modified 2 years, 9 months ago by
Thomas.
Hi, please replace the entire code with the below given. Please make changes to the options for the city that you have previously set.
function awcfe_city_dropdown_field( $fields ) {
$city_args = wp_parse_args( array(
'type' => 'select',
'options' => array(
'' => __( 'Select city' ),
'birmingham' => 'Birmingham',
'cambridge' => 'Cambridge',
'leicester' => 'Leicester',
'liverpool' => 'Liverpool',
'london' => 'London',
'manchester' => 'Manchester',
),
'input_class' => array(
'country_select',
)
), $fields['billing']['billing_city'] );
$fields['billing']['billing_city'] = $city_args;
$state_args = wp_parse_args( array(
'placeholder' => 'select a region',
'input_class' => array(
'wc-enhanced-select',
)
), $fields['billing']['billing_state'] );
$fields['billing']['billing_state'] = $state_args;
wc_enqueue_js( "
jQuery( ':input.wc-enhanced-select' ).filter( ':not(.enhanced)' ).each( function() {
var select2_args = { minimumResultsForSearch: 5 };
jQuery( this ).select2( select2_args ).addClass( 'enhanced' );
});" );
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'awcfe_city_dropdown_field', 999999, 1 );
Thread Starter
Thomas
(@goldenshawarma)
@saneshacodez
Thank you very much for your assistance!
I can see the checkout field label properly.
See Result
btw, is this something you can put in the plugin settings/dashboard as a feature?
Cheers!
Thanks to know that the solution is working for you. For the case of field type changing we need to follow this method. But in the case of state field placeholder, we will try to integrate it on our future version release.
