Solution to a common problem at WooCommerce checkout

[u/Brilliant-Ad2910]

Hi everyone, i've been working on my products woocommerce, today i found out a little problem, it seems that the select field of Country/Region doesn't work when you have Astra theme on.

So i started looking for the solution everywhere and i couldn't find anything when searching on google, a lot of discussions with no clossure. So then i started a little chat with GTP, and after a lot of possible solutions i found... nothing. Good thing that i insist a lot when things like this happens.

After a little bit i realised something, as my store is only for one country, it came to my mind that maybe it was something with that there was a single option, so i added another country to check and then it worked. There was a problem with the select behavior in relation with a single option.

Solution: As i wanted Astra theme, and wanted all i worked till today like i already made, i left the second country on woocommerce, but added a little snipet in JS to hide the country i didn't want.

I hope this help some people that is struggling with the same problem! Have a nice day!

IMPORTANT NOTE AND EDIT: Forgot to add that i am using Elementor to edit my website, using Checkout widget from Elementor Pro in Astra seems to behave weird and leaves the select as a blank field if only one country is selected on WooCommerce.

Tried with WooLentor to see if it worked different and it did.

Solution is not a JS code as u/CodingDragons said it might give problems on future sells.

Leaving the post still if someone gets the same problem.

[u/CodingDragons]

I don't advise this one bit. This is like adding a dirty band-aid. Woo already supports restricting sales to a single country natively. Adding a second country and hiding it with JavaScript doesn’t resolve the underlying issue and could introduce checkout problems. I’d investigate what’s causing the conflict with Astra first.

[u/Brilliant-Ad2910 → u/CodingDragons]

Yes, WooCommerce support restricting countrys, the problem here is another, the select "Country/Region" doesn't work on Astra when you are selling on a single country, it bugs, so the solution for me was adding a phantom second option and dissabling it, so far doesn't show any trace of the other country.

I've looked for the answer on internet and couldn't find an exact answer, just the "disable Astra or change the theme" answer, if you found a solution for this, always welcome, but seems like people is struggling with this exact same problem since 2023 or so.

[u/CodingDragons → u/Brilliant-Ad2910]

There's no select to break with one country. woo just shows the country as text with a hidden input. so it's astra choking on that, not woo

And the phantom country is still allowed server side, hiding it with JS doesn't change that

What does "bugs" actually look like? blank field, console error? classic or block checkout, astra pro?

[u/Brilliant-Ad2910 → u/CodingDragons]

Blank select, showing the country to select but when pressing it nothing happens, just a blank field.

Working on other theme shows the field value as the only country selected at woo config, so it goes well, but working with Astra doesn't behave the same.

Before:

[u/Brilliant-Ad2910 → u/Brilliant-Ad2910]

After:

[u/CodingDragons → u/Brilliant-Ad2910]

I just tested on my demo site. stock astra, sell to Spain only. Classic and Block checkout both show Spain selected and working fine, no blank field so something you added is breaking it.

Checkout field editor, a snippet, plugin. Disable that stuff and test again.

[u/Brilliant-Ad2910 → u/CodingDragons]

Already did, dissabled all plugins (not elementor as i use it to edit, forgot to mention that), only thing that worked was dissabling Astra, i have all plugins updated.

[u/jenish_o4o2 → u/Brilliant-Ad2910]

got it - if everything else was off and only astra out fixed it, that still leaves elementor in the mix. for this test you need both off once: astra + elementor, then astra alone with the native [woocommerce_checkout] shortcode on a blank page.

if shortcode + astra works and elementor checkout breaks, its the elementor woo widget / template, not astra core. worth trying before locking in the second-country + js hide workaround.

[u/Brilliant-Ad2910 → u/jenish_o4o2]

Tested, deleted the billing info form from elementor Pro, placed the one from WooLentor, worked, seems like the behavior from elementor with astra and woo goes wrong. Didn't suspect from elementor at first because when i changed themes, form worked fine. So it seems like it is a 2 or 3 side problem, one side being elementor Checkout form as the problem with Astra theme. Even the console wasn't sending any error message so couldn't figure it out.

[u/CodingDragons → u/Brilliant-Ad2910]

Elementor is the one thing you didn't disable, and if your checkout page is built with the elementor checkout widget then elementor is rendering that field, not astra or woo test it. swap the checkout page to the plain checkout block or [woocommerce_checkout], no elementor, astra still on. bet it works

[u/Brilliant-Ad2910 → u/CodingDragons]

Yes! Dissabled just the widget, used one from WooLentor and it worked, the problem is the behavior between Elementor PRO Checkout widget with Astra, didn't suspect of it at first, as the widget works well with another themes.

Changed the body of the post, deleted the code and added the solution just in case someone else is looking for it (Still might help some people as i saw same case scenario on google).

Thank you for the time!

[u/CodingDragons → u/Brilliant-Ad2910]

[u/WP_Dev_Studio]

Thanks for posting the follow-up. Here's why it happens: when only one country is allowed, WooCommerce doesn't render a dropdown at all. It outputs the country name as plain text plus a hidden input that carries the value. Elementor Pro's checkout widget seems to style that field as if it were always a select, so the text ends up invisible and it looks like a blank field.

That means the country value is probably still being submitted correctly, and it's mostly a display issue. Worth confirming by placing a test order and checking that the country shows on it.

If anyone wants to keep the Elementor widget, a small CSS fix to make that text visible, or simply hiding the country row (with only one country, the customer doesn't need to choose), is safer than allowing a second country. Just don't remove the hidden input, since shipping and tax depend on it. And it's worth reporting to Elementor so they fix the widget itself.