Checkout, Sorted: Getting UK VAT and Shipping Fields Right in Elementor Pro

A UK checkout is a small obstacle course. You have VAT-inclusive pricing, postcodes that do not behave like the rest of the country, shipping zones that need to know the difference between UK mainland and the Scottish Highlands, and customers who will abandon the basket if the totals look wrong. Elementor Pro can style the checkout beautifully, but it cannot fix a muddled WooCommerce tax setting. Start with the shop, then make it look good.

Fix the settings before you style anything

Open WooCommerce > Settings and work through the basics first. Set the store address to a UK address, set the currency to GBP and check the selling locations. If the client only sells to the UK, say so. If they sell to the EU, that is a different conversation about VAT and customs, not a styling problem.

Under the Tax tab, enable taxes and choose how prices are entered. For most UK B2C shops, the client quotes prices to customers as VAT-inclusive. If that is how they think about their prices, enter them inclusive of tax and display them inclusive of tax. Do not enter ex-VAT prices and then wonder why the basket looks 20% higher than the product page.

Check the checkout page assignment under WooCommerce > Settings > Advanced. The checkout page should contain the WooCommerce Checkout block or shortcode, or the Elementor Pro Checkout widget if you are using it. If you are migrating from a shortcode to the widget, do it on staging first. The widget renders the WooCommerce checkout, so tax logic and notices still come from WooCommerce, not from Elementor.

VAT-inclusive pricing: pick one version of the truth

VAT display is where many UK builds get messy. The product page says £60. The cart says £60 including VAT. The checkout says £50 plus £10 VAT. All three are technically correct and all three feel like a different shop.

Decide with the client how prices should be shown at every stage: product, cart, checkout, order confirmation and invoice. Then make WooCommerce say the same thing everywhere. If the client is VAT-registered, the invoice needs the VAT breakdown. If they are not VAT-registered, do not add VAT language to the checkout just because a plugin offered it.

For B2B clients, a VAT number field can be useful, but it is not a native UK checkout requirement for every shop. Use a well-maintained plugin or a small, documented snippet rather than hacking the checkout template. And test what happens when a customer enters an invalid VAT number: the message should be clear, not a red box with no explanation.

UK shipping zones without the postcode guessing game

Go to WooCommerce > Shipping and set up zones deliberately. A simple starting point is a UK zone with Royal Mail or courier methods, plus separate zones for Northern Ireland and the Scottish Highlands and Islands if the client uses different rates. Postcode wildcards are your friend here, but they need testing. For example, BT postcodes cover Northern Ireland, while IV, KW, HS and ZE postcodes include areas that couriers often treat as Highlands and Islands.

Do not rely on zone order by accident. WooCommerce matches the most specific zone first, so put the smaller regional zones above the general UK zone. Add shipping classes for bulky or fragile items if the client needs different rates. Then test a real basket with a mainland postcode, a Northern Ireland postcode and a Highland postcode. If the wrong rate appears, fix the zone before you touch the Elementor styling.

Styling the Elementor Pro Checkout widget without breaking it

Once the settings are sound, drop the Elementor Pro Checkout widget onto the checkout page or edit the existing template. Use the Style tab to adjust field labels, input backgrounds, button colours and spacing. Keep the order review table readable: UK customers expect to see the item, quantity, subtotal, shipping and VAT before they pay.

Do not hide WooCommerce notices with CSS. Those notices include payment errors, coupon messages and validation warnings. If a notice is ugly, style it. If it is in the wrong place, move it with a hook or a template override, not with display: none. The same goes for the 'No shipping available' message: if it appears, that is a signal that a zone or method is missing, not a design flaw to be hidden.

Use a child theme or a code snippets plugin for field changes. The woocommerce_checkout_fields filter is the standard way to reorder or rename fields, and woocommerce_default_address_fields handles the default address fields. Keep a note of every snippet you add, because the next developer will need to know why the phone field is optional.

Address fields and validation messages

UK addresses are not complicated, but they are not American either. Do not force a state field if the shop only sells domestically. Keep the postcode field prominent. Make the phone field optional unless the courier genuinely requires it. If the client needs a company name for B2B orders, add it deliberately rather than leaving it in because a demo template had it.

Validation messages come from WooCommerce and from the payment gateway. Test them with real mistakes: an invalid postcode, a missing house number, an expired card and a failed coupon. If a message is unclear, translate it with a gettext filter or a translation file. Do not rewrite WooCommerce core templates in the plugin folder. Those changes disappear at the next update.

A testing routine for real client shops

Before launch, clone the site to staging and run through the checkout like a customer. Disable caching for the cart, checkout and account pages. Use an incognito window so you are not logged in as an admin.

• Add a product to the basket and check the VAT display on the product, cart and checkout.
• Test a UK mainland address, a Northern Ireland address and a Highland postcode.
• Apply a valid coupon and an invalid coupon, and read the notices.
• Submit the checkout with a missing field and check that the validation message is visible.
• Complete a test order with a sandbox payment gateway and check the order email.
• Check the order in WooCommerce and confirm the tax and shipping totals match the checkout.
• Test on mobile, with the keyboard and with a screen reader if accessibility is in scope.
• Clear the cache and repeat the most important test once more.

If the client uses a live courier or payment gateway, do one small live test order and refund it. It is cheaper than discovering a broken webhook on a busy Monday.

Go-live checks

On launch day, confirm the checkout page is not cached, SSL is active on every step and the confirmation email arrives. Check the tax reports after the first few orders. A UK checkout is not 'done' because it looks good in Elementor. It is done when the totals, the zones and the messages behave correctly for a real customer in a real postcode.