How to Remove Shipping and Payment Steps from Checkout and Directly Enable “place the order” Button?

Snake

Hi Bagisto team and community,

I’m customizing the checkout process in my Bagisto-based store.

Objective:
I want to remove the shipping and payment steps from the checkout process entirely. That means:

On the checkout (buy) page, once the billing address form is filled, I want to directly show and enable the "Passer la commande" (Place Order) button.
I want to remove the "Continue" button and the intermediate steps for shipping and payment.
Essentially, the customer fills in their details, and can immediately place the order without additional steps.

This is intended for a simple store setup where no shipping method or payment choice is required (I have one shipping and one payment steps).

Could anyone guide me on the cleanest way to achieve this in Bagisto 2.3.6?

Thanks in advance!

ashif.322

Hello @Snake

The important thing to understand first: in Bagisto the shipping and
payment steps aren't just UI — order creation still needs a shipping method and a
payment method saved on the cart. If you simply delete those steps, placing the order
will fail validation. So the cleanest approach is NOT to remove the steps, but to
AUTO-SELECT your single shipping and single payment method behind the scenes, then jump
straight to the "Place Order" button.

How the checkout flow works (so the fix makes sense)

The onepage checkout is a Vue flow with 4 steps: address -> shipping -> payment -> review.

Saving the billing address returns the available shipping methods.
Selecting a shipping method saves it and returns the payment methods.
Selecting a payment method saves it and moves to "review", which enables Place Order.

So instead of showing the shipping and payment screens, we let the address save trigger
those two saves automatically with your only method, then show Place Order.

Cleanest way (no core edits — override the view in your theme)

Override this file in your own theme (do not edit the package directly):

packages/Webkul/Shop/src/Resources/views/checkout/onepage/index.blade.php

In the Vue component, after the address step is processed, chain the two saves
automatically. The relevant handler is where the address emits its result
(stepProcessed / the 'processed' handler). Replace the normal step-forward logic with
an auto-advance like this:

// after address is saved, `shippingMethods` is available
autoCheckout(shippingMethods) {
    // 1) pick the only shipping method code (e.g. "flatrate_flatrate")
    const shippingCode = Object.values(shippingMethods)[0].rates[0].method;

    this.$axios.post("{{ route('shop.checkout.onepage.shipping_methods.store') }}", {
            shipping_method: shippingCode,
        })
        .then(response => {
            // 2) pick the only payment method and save it
            const payment = response.data.payment_methods[0];

            return this.$axios.post("{{ route('shop.checkout.onepage.payment_methods.store') }}", {
                payment: { method: payment.method },
            });
        })
        .then(response => {
            // 3) cart now has shipping + payment set -> enable Place Order
            this.selectedPaymentMethod = null;
            this.currentStep  = 'review';
            this.canPlaceOrder = true;
            this.getCart();
        });
}

Then call autoCheckout(shippingMethods) from the address 'processed' handler instead of
moving to the shipping step, and hide the shipping/payment includes (the
<template v-if="... 'shipping' ...">/'payment' blocks in the same file). The "Continue"
buttons live inside those shipping/payment sections, so once they're hidden the customer
only sees: fill address -> Place Order.

Note: if your store has no stockable items, the address save returns payment_methods
directly (no shipping step) — the code above handles the normal stockable case; adjust
if needed.

Why this is the right approach

No core files are modified, so upgrades stay clean.
The cart still ends up with a valid shipping method + payment, so Place Order and the
order confirmation work exactly as normal.
If you later add a second shipping or payment option, you only revert this override.

Thanks
Team Bagisto