[Support request] Checkout functionalities requests

[Ivan]

Dear all,

Not sure if is the proper places but I will like to request a few of funcionalities for the checkout page, maybe you can also help me in advance just with CSS.

1.- Distraction free checkout, this is quite common now in mostly all the themes, basically removes the menu, put the logo in the center and remove all the stuff not involve in the checkout.

2.- Put the fields title inside the field in order to save space in the form.

3.- Possibility to hide by default the “other shipping address” mostly this is not use and use a lot of space in the windows, I know can be unchecked by default via code, but I think will be also and improvement.

Thanks!
Br
Ivan

[David]

Hi there,

always great to hear suggestions 🙂

1. The current Distraction-free mode in Customizer > Layout > Woocommerce is ‘Remove unnecessary distractions like sidebars, footer widgets and sticky menus.’
To remove the menu and center logo try this CSS:

.woocommerce-checkout .main-nav {
    display: none;
}
.woocommerce-checkout .menu-toggle {
    visibility: hidden;
}
.woocommerce-checkout .navigation-branding {
    margin: auto !important;
}

.woocommerce-checkout .navigation-branding img {
    margin-right: 0;
}

2. Field placeholders – this stack will help:

https://stackoverflow.com/a/46333643

3. Are you already applying this code?

We are looking how the the Cart and Checkout process works for possible future updates.

[Ivan]

Thank you David, its working.

1.- This is how looks now.

https://snipboard.io/1Fjy0H.jpg

2.- Yes, I will investigate it thanks. Maybe I will look for some plugin.

3.- Yes Im using this code

add_filter( ‘woocommerce_ship_to_different_address_checked’, ‘__return_false’ );

Basically just put unchecked by default the option to send to other adress, savind screen as mostly in 100% of the cases the address is the same.

Br
Ivan

[David]

Awesome – there are a couple of Checkout Field Editor plugins but they generally add a lot more features you may not need. Woocommerce has its own extension but it as a paid add-on.

Thanks for the suggestions.

[Ivan]

Thank you David,

This is how I would like to have it just adapting the theme 🙂

https://snipboard.io/8fD0Fa.jpg

Could you let me know how can I center the text “Finalizar Compra” and “Tu pedido” in order ot be aligned in the center and with the same size?

Thank you much for your help

[David]

Try this CSS:

.woocommerce-checkout .entry-title, .woocommerce-checkout #order_review_heading {
    text-align: center;
    font-size: 38px;
    font-weight: 400;
}

[Ivan]

wonderfull. thanks 🙂

[David]

You’re welcome

[Author]

Posts