WooCommerce Checkout Page

[YourForte]

Hey Theme.Co,

I’d really like my WooCommerce checkout page with X Pro to look… better. Ideally, I would love for my checkout page to look like the Shopify checkout page.

I’ve attached an image of my current checkout page and an image of what I would like to have.

If there is a plugin / extension I need to buy or any way X Pro can offer this type of checkout experience, please let me know. I am willing to purchase any plugin necessary to make my checkout process more user-friendly.

Thanks,

Adam

[Prasant]

Hello @YourForte,

Thanks for asking.

You can install Woocheckout editor plugin from X > Validation > Extensions to modify, edit, and remove fields from checkout page. We can also change the CSS of box elements to be more user friendly. However, mimicking the layout you are looking for as shown in screenshot will require custom development and that falls outside the scope of support we can offer.

If you can share the website URL, we can give you the CSS that may closely resemble with the screenshot in terms of the CSS and styling of the elements.

Thanks.

[YourForte]

Hi Prasant,

Thanks so much for your help, I would love that!

Here is the website URL: https://toughgrid.com/

The checkout URL itself is here: https://toughgrid.com/checkout/

Thanks Again,

Adam

[Prasant]

Hello Adam,

Thanks for updating thread.

Please add following CSS under Pro > Theme Options > CSS:

.woocommerce-account form select, .woocommerce-account form textarea, .woocommerce-account form input[type="tel"], .woocommerce-account form input[type="text"], .woocommerce-account form input[type="email"], .woocommerce-account form input[type="password"], .woocommerce-checkout form select, .woocommerce-checkout form textarea, .woocommerce-checkout form input[type="tel"], .woocommerce-checkout form input[type="text"], .woocommerce-checkout form input[type="email"], .woocommerce-checkout form input[type="password"] {
    padding: 26px 0;
    margin-bottom: 15px;
    border-radius: 10px;
}

.woocommerce-account form h3, .woocommerce-checkout form h3 {
    font-size: 120%;
    font-weight: normal;
}

.woocommerce-billing-fields label {
    font-size: 80%;
}


div#payment button#place_order {
    background-color: #f9c546;
    border-color: transparent;
}

.woocommerce-account form h3, .woocommerce-checkout form h3 {
    font-size: 90%;
}

div#order_review {
    font-size: 90%;
}

div#order_review table th {
    font-size: 90%;
    font-weight: normal;
}

div#order_review table td {
    font-size: 78%;
}

Thanks.