Return to previous page

“messy billing page” and customer name is not transfered to shipping provider

This topic has 2 replies, 2 voices, and was last updated 1 weeks, 6 days ago ago by Jack Richardson

Malene

Participant

May 27, 2025 at 15:38

Hi Xtheme
I have tried to customize my cart and billing pages, but can´t get them to look acceptable.
I have tried all settings in the theme and used tried the Checkout Field Editor for WooCommerce as well.

My main issues are:

1) The customer fields for name and adress looks wrong. Why can´t I move the name field so it is right above the adress, and doesn´t stand alone?

2) the country should be placed below zip code and city, not between name and adress…..

3) the name field is validated but is not transferred to the shipping labels. How come?

thanks! 🙂

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#445674 Copied

1 Answer
Jack Richardson

Support staff

May 28, 2025 at 07:09
Dear @Malene,

Thank you for reaching out.

You have two options for customizing the layout of your checkout page:

1. You may use the default WooCommerce shortcode [woocommerce_checkout] within the page content. This will render the standard checkout layout from WooCommerce files. To adjust the order of the fields, you can use the “Checkout Field Editor for WooCommerce” plugin, that is installed on your web-site, it allows you to sort and manage the fields as needed.

2. Alternatively, if you prefer to use our XStore Checkout Page widget in Elementor, we kindly ask you to provide a screenshot indicating the desired positions of each field. Based on that, we will do our best to offer a suitable solution for your specific layout requirements.

In the meantime, we are pleased to share an example of a CSS snippet that moves the “Country” field to the top of the billing details section, as shown in the following screenshot: https://prnt.sc/KM5KdGoiEXeu

Please use the following CSS code:

.etheme-elementor-cart-checkout-page-wrapper .woocommerce-billing-fields__field-wrapper { display: flex; flex-wrap: wrap; flex-direction: column; } .etheme-elementor-cart-checkout-page-wrapper .woocommerce-billing-fields__field-wrapper #billing_country_field { order: -1; }

You can add this CSS by navigating to: Theme Options → Theme Custom CSS → Global CSS.

Should you have any further questions or require additional assistance, please do not hesitate to contact us.

Best regards,
The 8Theme Team
#445717 Copied
Viewing 2 results - 1 through 2 (of 2 total)