Pre-fill country and state at checkout based on the user’s location

Hi!

Thanks for your question.

Does the Country/Region field on the checkout get pre-filled based on the user’s location or is it the same for everyone?

This is something you configure in WP Admin → WooCommerce → Settings → General under the “Default Customer Location” section.

From here, you can turn on geolocation. There’s information on configuring this here.

Also, how to change the style of the dropdown fields at checkout? … I would like to be able to change the border colour and border radius of the search field when the dropdown field open.

Your question here would depend on what theme you’re using and whether it has any overrides in place over the checkout. For our default Storefront theme, I’ve had a look and this custom CSS may work for you:

.woocommerce .select2-container .select2-selection--single {
	border-radius: 20px;
	border:solid 2px #cfa748;
}

• This reply was modified 3 years, 10 months ago by Victoria - a11n.

Hi @fylgjur,

Thank you for your response.

I turned on geolocation.

As for the styling of the dropdown fields at checkout, I found the CSS classes of all the elements to target in the field. However, I was still not able to change the colour of the search field.

Here’s the CSS code I used:

/*Search field*/
.select2-search__field {
	border-radius: 5px;
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	border-width: 1px !important;
	border-color: #dddddd; /*< Doesn't work*/
	color: #000000;
}

/*Active selection*/
.select2-results__option--highlighted {
	background-color: #000000 !important;
}

/*Dropdown border*/
.select2-dropdown {
	border-color: #dddddd;
}

Here’s what the field looks like now: https://ibb.co/DkWgx1q

Why am I not able to change the color of the search field’s border even though everything else worked fine?

The URL of the checkout: https://www.mydreamtattoo.com/checkout/?add-to-cart=3980

Thanks

• This reply was modified 3 years, 10 months ago by jokubas2000k.

Hi @fylgjur,

Update: I managed to change the border color of the search field.

However, I can’t find how to change the color of the top part of the border when the select field is open.

Screenshot: https://ibb.co/jD3nwTf

I have tried every possible CSS class to target that upper part of the border but it seems impossible. I need some help…

Hi @jokubas2000k,

Sorry we missed your last response.

Perhaps the following will help:

.woocommerce-checkout .select2-container--default .select2-selection--single{
    border: 1px solid #f00;
}

.woocommerce-checkout .select2-dropdown{
    border-color:#f00;
}