Checkout Form Width

In desktop mode the first name and last name are in same row , each element occupying half width { as given in the screenshot attatched }

How to achieve the same in mobile devices ?

In mobile i want
– first name , last name in same row
– pin code and state in same row

Attachments:

You must be logged in to view attached files.

Hello,

Can you share the page URL so I can further check on your site and give you a possible CSS code.

Best Regards

[Aizaz Imtiaz Awan]

Site URL

• This reply was modified 1 month, 3 weeks ago by Aizaz Imtiaz Awan.

Hello,

Please use the below custom CSS code and paste it to Theme Settings > Custom CSS > Mobile CSS section:

/* reset default behavior */
    .woocommerce-checkout .woocommerce-billing-fields .form-row {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* First name + Last name */
    .woocommerce-checkout #billing_first_name_field,
    .woocommerce-checkout #billing_last_name_field {
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }

    /* Postcode + State */
    .woocommerce-checkout #billing_postcode_field,
    .woocommerce-checkout #billing_state_field {
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }

    /* wrapper must stay flex */
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px;
    }

Best Regards.

How to hide country fields as i sell in one country only mand its necessary for users to select country

Also in street adress there are 2 fields , make it one , also i want to customize the placeholder for that one field

Little correction –

*How to hide country field as i sell in one country only and its not necessary for users to select country*

Hello,

The checkout page is the default WooCommerce functionality, and WoodMart does not control it. We currently support enabling/disabling and making fields required only. You can read more here and disable the fields which you want: https://xtemos.com/docs-topic/fields-manager/

Best Regards

[Author]

Posts