Disable place order button when not in last step

  • Resolved tobiaswinter

    (@tobiaswinter)


    2 years, 8 months ago

    Hi,
    I’d like to use your great plugin on my Website and I’m looking forward to enable it!
    One little thing blocks me from doing so:

    I use Woocommerce Germanized since I have to follow german laws. These require that the Place Order button is right below the order summary with nothing inbetween.
    The Germanized plugin takes care of that, removing the Place Order button from your last step and adding it below the order summary. That leads to two problems:

    • The button is displayed to the user at all times, causing confusion and a bad user experience, especially for customers on a mobile device: Screenshot 1
    • It is possible to successfull order in Step 3, before the payment methods are displayed in Step 4: Screenshot 2

    So I’m looking for a way to disable or better hide that button until the user is in the 4th step. Do you have any advice for me?

    You already add the class “fc-place-order-button” to the button, I think an easy way would be to add a “fc-place-order-button-disabled” class and remove it in the last step, so I can use a custom CSS to disable or hide the button. Could you implement that?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @tobiaswinter,

    Yes, that makes sense.

    We’ll implement a solution for that and let you know once an update is available.

    Best,
    Diego

    Thread Starter tobiaswinter

    (@tobiaswinter)

    Hi, that are great news! Thanks, looking forward to it!

    I also consider this setting to be very useful.

    For usage in Germany we also need some links in the footer with legal notice and privacy policy.

    Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @tobiaswinter & @redorca,

    I’m working on a solution to this issue.

    @redorca, would a widget area at the bottom of the page solve this issue for adding legal notices and privacy policy linkts?

    Best,
    Diego

    Thread Starter tobiaswinter

    (@tobiaswinter)

    Hi @diegoversiani,
    thank you for letting us know a solution is in the works, that is higly appreciated!

    I use the setting “Use theme’s page header and footer” so this way I have all legally required links and information without having to manage another block. A good solution for @redorca would probably to be able to set “Use theme’s page footer only”.

    Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @tobiaswinter & @redorca,

    1. The class for the current step has been added and will be available with the next release 1.6.1.

    You can use the classes fc-checkout-step-current--<step_id>, where you replace <step_id> with the actual id of the step, for instance fc-checkout-step-current--payment.

    The place order button will not be automatically hidden, however, it will be disable until the customer reaches the last step.

    Could you check it on your website with the beta version 1.6.1-beta-1 from the link below?

    https://t2449427.p.clickup-attachments.com/t2449427/7ee4bf09-5fd4-4d14-a073-36a4e85b1bc6/fluid-checkout-1.6.1-beta-1.zip

    @tobiaswinter, using the theme’s footer with the plugin’s header can cause a lot of layout issues as they use different parameters. Most importantly, the normal site footer can have a lot of distractions that should be avoided at the checkout page.

    I’ll add the footer widget area that can be used to add any type of content, including the legal links. This seems to be the most flexible option the plugin can offer.

    Best,
    Diego

    Thread Starter tobiaswinter

    (@tobiaswinter)

    Thank you @diegoversiani for your quick reply!

    I’ve already tested and it works as indicated, deactivating the button until last step.
    I’m even able to completly hide it if I want using this CSS:

    /* FluidCheckout Hide Button */
.fc-wrapper .wc-gzd-order-submit {
	display: none;
}
.fc-checkout-step-current--payment .fc-wrapper .wc-gzd-order-submit {
	display: block;
}

    I consider my request as solved. Again thank you very much for this great plugin!

    Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @tobiaswinter & @redorca,

    Version 1.6.1 has been released with these fixes.

    Best,
    Diego

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Disable place order button when not in last step’ is closed to new replies.