[Resolved] Optimized WooCommerce Checkout

[Pedro]

Hi there! I would like to improve the checkout that comes by default with GeneratePress + WooCommerce.

I have seen one of another theme that I loved, is this:

https://themedemo.commercegurus.com/shoptimizer/checkout/

How could I do something the same on my site?

Thank you!!

[David]

Hi there,

try adding this CSS:

@media (max-width: 768px) {

    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item {
        display: flex;
    }

    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td::before,
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-subtotal {
        display: none;
    }

    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td {
        padding: 10px 5px;
    }
}

The problem you may have will be related to the size of the content – ie. longer titles or prices. Not much that can be done with that.

[Pedro]

Hello david! Thanks for answering.

However, I don’t think I could explain myself.

What I mean is that the checkout page, not the cart page, is the same as the one I mentioned.

See images:

https://mega.nz/#!3ht0iYZQ!VHDK8ZGAy2OTfFRb8j1cRkqZRD78Ku2TYkPgOf68oEY
https://mega.nz/#!ao9SAQYB!5RiqxYLxUxdImiLBHzov0En97XhcWZAxdbN6I76kQ0E
https://mega.nz/#!nsl2wYoQ!nn-yyZ46rCGEUpOYr-GboaiE-wrH7J-Nkq8knpyfnbM

For example, some of the elements that I would like to include would be:

– Disable main menu, just show the checkut logo on the left and the page title on the right.

– Show the status bar so that the customer knows what step of the purchase he is in.

– Disable the styles that WooCommerce places by default to log in and place the coupon. As also move the coupon field at the end of the form. (Blue style)

[David]

Sorry my mind must have been somewhere else.

It looks like you’re already using a Multi Part Check out plugin which shows the 3 steps and removes the menu. It’s not something that can be done in GP without using a plugin

Moving the coupon was covered in this topic:

https://generatepress.com/forums/topic/move-coupon-field-in-checkout-woocommerce/#post-821607

[Pedro]

Hello david! Thanks for replying again.

Do you have any idea what complement you can do to hide menu and show the step in which the client is?

In addition, the coupon if it was treated before, however I do not know what happens that can not be shown correctly.

[Tom]

Hi there,

1. Have you tried creating a Layout Element for the checkout?: https://docs.generatepress.com/article/layout-element-overview/

That way you can disable the menu/anything else with the Disable Elements module.

2. I’m not sure about showing what step they’re on. Are you using a plugin for that? If so, do they have any documentation?

I just went through the steps and it actually looks like you got everything figured out? Let me know 🙂

[Pedro]

Hello Tom! If I tried but I’m not very good at programming or designing.

Regarding the steps, I don’t have any plugin, and I don’t think one is needed.

From what I see, it’s just HTML and CSS.

Because in the checkout of the topic I tell you, they only show 3 steps:

1. Cart
2. Shipping and payment
3. Confirmation.

You can see the images I sent of the theme, as the link for you to see for yourself.

The idea is to improve the checkout, since the one that comes by default in WooCommerce and GPP is not the best.

This helps a lot to optimize the topic in conversions.

I hope you can help me.

[Pedro]

Hello again! For the coupon field, I have found an alternative.

You can see it here: https://mega.nz/#!GtNWzCiA!ZEg2rpp9FVTpJ9s4bvEhxcsuy_xQWTg-iwaKpkhhUaQ

Can you help me customize it on my site?

Thank you!

[Tom]

You’re not using a plugin for the checkout right now? Its overall layout/3 steps isn’t default in WooCommerce – how are you customizing it at the moment? Just to confirm we’re talking about the site you shared in the private URL field.

We can definitely try to point you in the right direction, but significant custom coding isn’t something we can do in the forum, unfortunately.

[Pedro]

Hello Tom! Thanks for answering.

Sorry! I think I put the URL of another store where I use GPP.

The URL of the store I’m talking about is this:

https://www.celuganga.co/

Thank you!

[Tom]

So can’t you use the same method you used on the site you initially shared? It looked like it has everything you needed.

I’m not sure how to do a 3 step checkout, but I’m sure there are quite a few plugins out there that do it.

For example: https://wordpress.org/plugins/wp-multi-step-checkout/

[Pedro]

Hello Tom! I think I have not made myself understand well.

What I want to do at the checkout of the site, is simply copy the checkout of the Shoptimizer theme.

I remind you that the theme is this: https://themedemo.commercegurus.com/shoptimizer/

In summary, the changes would be:

– Remove the main menu and add the logo on the left and the page title (checkout) on the right.

– Move the coupon field and change the style as I sent you in the previous image: https://mega.nz/#!GtNWzCiA!ZEg2rpp9FVTpJ9s4bvEhxcsuy_xQWTg-iwaKpkhhUaQ

– Show the payment steps at the top.

Here if I want to explain a little more, when I say show the steps, I am not referring to checkout in several steps.

If you realize, all they do is show those steps to give customer confidence.

But in reality, the checkout is still one page.

Only they show 3 steps:

1. Cart
2. Shipping and payment
3. Confirmation

I hope this time has made me understand.

[Tom]

Let’s tackle one thing at a time.

Remove the main menu and add the logo on the left and the page title (checkout) on the right.

Add this CSS:

.woocommerce-checkout #primary-menu {
    display: none;
}

.checkout-title {
    order: 10;
    line-height: 60px;
    color: #fff;
    font-size: 20px;
}

@media (max-width: 768px) {
    .woocommerce-checkout button.menu-toggle,
    .woocommerce-checkout .mobile-bar-items {
        display: none;
    }

    .woocommerce-checkout .checkout-title {
        order: 2;
        margin-right: 5px;
    }
}

Then:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to inside_navigation
3. Add this as the content:

<div class="checkout-title">Checkout</div>

4. Set the Display Rules to your Checkout page.

[Pedro]

Hello Tom! Thanks for responding and help.

I added the CSS and the hook, it works fine on the desktop but in the mobile version it still shows the main menu.

I stay tuned for the other changes too.

Thank you!

[Pedro]

.

[Author]

Posts