[Resolved] Optimized WooCommerce Checkout

Home Forums Support Optimized WooCommerce Checkout

Viewing 15 posts - 1 through 15 (of 46 total)
  • Author
    Posts
  • #985812
    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!!

    #985852
    David
    Staff
    Customer Support

    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.

    #986196
    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)

    #986350
    David
    Staff
    Customer Support

    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

    #986606
    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.

    #986845
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #987435
    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.

    #987443
    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!

    #987519
    Tom
    Lead Developer
    Lead Developer

    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.

    #987551
    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!

    #987862
    Tom
    Lead Developer
    Lead Developer

    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/

    #988087
    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.

    #988372
    Tom
    Lead Developer
    Lead Developer

    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.

    #989075
    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!

    #989273
    Pedro

    .

Viewing 15 posts - 1 through 15 (of 46 total)
  • You must be logged in to reply to this topic.