TokoDaring.Com – Hook woocommerce_review_order_before_submit di WooCommerce untuk Kustomisasi Checkout.

Hook woocommerce_review_order_before_submit di WooCommerce untuk Kustomisasi Checkout

WooCommerce menyediakan sistem hook yang memungkinkan developer melakukan kustomisasi pada halaman checkout tanpa harus mengubah file inti plugin. Salah satu action hook yang menarik untuk digunakan adalah woocommerce_review_order_before_submit. Hook ini berada pada bagian akhir review order dan dijalankan sebelum tombol Place Order ditampilkan kepada pelanggan. Posisi tersebut sangat strategis karena informasi yang ditambahkan melalui hook ini dapat dibaca tepat sebelum pelanggan melakukan tindakan terakhir untuk mengirimkan pesanan.

Bagi pemula, woocommerce_review_order_before_submit dapat menjadi contoh yang baik untuk memahami bagaimana action hook bekerja dalam template WooCommerce. Bagi developer intermediate hingga programmer yang sudah mahir, hook ini dapat digunakan untuk membangun pemberitahuan dinamis berdasarkan kondisi keranjang, metode pembayaran, status pelanggan, nilai transaksi, atau aturan bisnis tertentu. Artikel ini membahas cara kerja hook, contoh implementasi, praktik keamanan, optimasi performa, serta penggunaan lanjutan yang dapat diterapkan pada proyek WooCommerce.

Mengenal Hook woocommerce_review_order_before_submit

Hook woocommerce_review_order_before_submit merupakan action hook WooCommerce yang dipanggil sebelum tombol submit order ditampilkan pada halaman checkout. Dengan kata lain, hook ini berada tepat sebelum pelanggan melakukan tindakan akhir untuk mengirimkan pesanan. Karena lokasinya sangat dekat dengan tombol Place Order, hook ini cocok digunakan untuk menyampaikan informasi penting yang perlu diketahui pelanggan sebelum transaksi dikonfirmasi.

Secara teknis, hook ini tidak digunakan untuk mengubah nilai order atau payment gateway secara langsung. Developer mendaftarkan callback menggunakan add_action dan kemudian menentukan konten atau proses yang harus dijalankan ketika WooCommerce mencapai posisi hook tersebut. Callback dapat menghasilkan HTML, memeriksa kondisi transaksi, atau memanggil fungsi lain yang diperlukan oleh aplikasi.

Salah satu penggunaan paling sederhana adalah menampilkan pengingat agar pelanggan memeriksa kembali data pesanan. Toko dapat menampilkan informasi mengenai kebijakan transaksi, waktu pemrosesan, atau pemberitahuan bahwa pesanan akan segera diproses setelah tombol Place Order ditekan. Karena output muncul sebelum tombol submit, informasi tersebut berada pada posisi yang mudah terlihat.

Contoh Dasar Menggunakan Hook

add_action(
    'woocommerce_review_order_before_submit',
    'custom_before_submit_notice'
);

function custom_before_submit_notice() {

    echo '<div class="before-submit-notice">';
    echo '<p>Pastikan seluruh informasi pesanan sudah benar sebelum menyelesaikan checkout.</p>';
    echo '</div>';

}

Kode tersebut mendaftarkan fungsi custom_before_submit_notice ke hook woocommerce_review_order_before_submit. Ketika WooCommerce merender bagian tersebut, pesan akan ditampilkan sebelum tombol Place Order.

Cara Kerja Hook dalam Alur Checkout WooCommerce

Untuk memahami hook ini dengan benar, developer perlu mengetahui bahwa halaman checkout WooCommerce dibangun dari sejumlah template dan action hook. Setiap bagian checkout memiliki lokasi tertentu yang dapat digunakan developer untuk menyisipkan fungsionalitas. Dengan sistem tersebut, kustomisasi dapat dilakukan tanpa menyalin keseluruhan template checkout.

woocommerce_review_order_before_submit berada menjelang akhir area review order. Pada tahap tersebut, pelanggan sudah melihat sebagian besar informasi transaksi dan siap melakukan submit order. Karena itu, hook ini berbeda dengan woocommerce_review_order_before_payment yang berada sebelum metode pembayaran. Hook before submit lebih cocok untuk informasi terakhir sebelum pesanan dikirim.

Checkout WooCommerce juga dapat diperbarui menggunakan AJAX ketika pelanggan mengubah informasi seperti alamat, kupon, metode pengiriman, atau metode pembayaran. Developer harus mengingat bahwa bagian checkout dapat dirender kembali beberapa kali. Callback yang menggunakan hook ini sebaiknya bersifat idempotent dan tidak melakukan proses yang menyebabkan data dibuat berulang kali pada setiap pembaruan checkout.

Contoh Menampilkan Informasi Berdasarkan Total Belanja

add_action(
    'woocommerce_review_order_before_submit',
    'high_value_order_notice'
);

function high_value_order_notice() {

    if ( WC()->cart->subtotal >= 2000000 ) {

        echo '<div class="high-value-notice">';
        echo '<p>Pesanan bernilai tinggi akan melalui proses verifikasi tambahan setelah checkout.</p>';
        echo '</div>';

    }

}

Kode tersebut memanfaatkan subtotal keranjang untuk menentukan apakah pemberitahuan tertentu perlu ditampilkan.

Contoh Menampilkan Informasi untuk Pelanggan Login

add_action(
    'woocommerce_review_order_before_submit',
    'customer_confirmation_notice'
);

function customer_confirmation_notice() {

    if ( is_user_logged_in() ) {

        $user = wp_get_current_user();

        echo '<div class="customer-confirmation">';
        echo '<p>Pesanan akan dibuat atas nama ' .
             esc_html( $user->display_name ) .
             '.</p>';
        echo '</div>';

    }

}

Penggunaan esc_html pada nama pelanggan merupakan praktik penting ketika data pengguna ditampilkan pada halaman checkout.

Implementasi Berdasarkan Kondisi Pesanan

Kekuatan woocommerce_review_order_before_submit semakin terlihat ketika callback dikombinasikan dengan data cart WooCommerce. Developer dapat memeriksa kategori produk, jumlah item, subtotal, jenis produk, atau metadata tertentu sebelum menentukan pesan yang perlu ditampilkan. Dengan cara ini, informasi sebelum tombol Place Order dapat dibuat relevan dengan kondisi transaksi.

Sebagai contoh, toko yang menjual produk pre order dapat memberikan peringatan bahwa sebagian barang memiliki jadwal pemrosesan berbeda. Toko yang menjual produk digital dapat menampilkan informasi bahwa produk akan tersedia setelah pembayaran dikonfirmasi. Pendekatan seperti ini memberikan ekspektasi yang lebih jelas kepada pelanggan sebelum mereka melakukan submit order.

Developer juga dapat menggabungkan kondisi tersebut dengan status pelanggan. Pelanggan baru mungkin membutuhkan informasi lebih lengkap mengenai proses pesanan, sementara pelanggan lama dapat menerima pemberitahuan yang lebih singkat. Namun, logika tersebut sebaiknya tetap sederhana agar tidak memperlambat checkout dan tidak membuat area sebelum tombol Place Order terlalu penuh.

Contoh Berdasarkan Kategori Produk

add_action(
    'woocommerce_review_order_before_submit',
    'preorder_confirmation_notice'
);

function preorder_confirmation_notice() {

    foreach ( WC()->cart->get_cart() as $cart_item ) {

        if (
            has_term(
                'pre-order',
                'product_cat',
                $cart_item['product_id']
            )
        ) {

            echo '<div class="preorder-confirmation">';
            echo '<p>Keranjang Anda berisi produk pre order yang diproses sesuai jadwal produksi.</p>';
            echo '</div>';

            break;

        }

    }

}

Kode tersebut menghentikan perulangan setelah menemukan produk yang sesuai sehingga pesan tidak ditampilkan berulang kali.

Contoh Berdasarkan Jumlah Produk

add_action(
    'woocommerce_review_order_before_submit',
    'large_order_confirmation_notice'
);

function large_order_confirmation_notice() {

    $quantity = WC()->cart->get_cart_contents_count();

    if ( $quantity >= 20 ) {

        echo '<div class="large-order-confirmation">';
        echo '<p>Pesanan dengan jumlah produk besar dapat membutuhkan waktu pemrosesan tambahan.</p>';
        echo '</div>';

    }

}

Pendekatan ini dapat digunakan untuk bisnis yang memiliki prosedur fulfillment berbeda berdasarkan jumlah produk dalam satu pesanan.

Keamanan dan Optimasi Performa

Keamanan menjadi aspek penting ketika mengembangkan fungsi checkout. Data yang berasal dari pengguna, database, atau metadata tidak sebaiknya langsung dicetak menggunakan echo tanpa proses escaping. Fungsi seperti esc_html, esc_attr, dan wp_kses_post dapat digunakan sesuai kebutuhan agar output yang ditampilkan tidak membuka risiko keamanan yang tidak diperlukan.

Performa juga harus diperhatikan karena halaman checkout merupakan salah satu halaman paling sensitif dalam toko online. Hindari melakukan query database yang berat, memproses data dalam jumlah besar, atau memanggil API eksternal setiap kali hook dijalankan. Gunakan data yang sudah tersedia pada WC Cart, session, atau objek WooCommerce jika memungkinkan.

Kode juga sebaiknya ditempatkan pada plugin kustom atau child theme, bukan file inti WooCommerce. Gunakan nama fungsi yang unik untuk mengurangi kemungkinan konflik dengan plugin lain. Untuk proyek besar, pisahkan logika pemeriksaan kondisi dari fungsi yang menghasilkan output agar kode lebih mudah diuji, dipelihara, dan dikembangkan.

Contoh Memisahkan Logika dari Output

function has_virtual_product_in_cart() {

    foreach ( WC()->cart->get_cart() as $cart_item ) {

        $product = $cart_item['data'];

        if ( $product && $product->is_virtual() ) {
            return true;
        }

    }

    return false;
}

add_action(
    'woocommerce_review_order_before_submit',
    'virtual_product_confirmation_notice'
);

function virtual_product_confirmation_notice() {

    if ( has_virtual_product_in_cart() ) {

        echo '<div class="virtual-confirmation">';
        echo '<p>Produk digital akan tersedia setelah pembayaran berhasil dikonfirmasi.</p>';
        echo '</div>';

    }

}

Pemisahan fungsi seperti ini membuat logika pemeriksaan dapat digunakan kembali pada bagian lain aplikasi tanpa mencampurkannya langsung dengan proses rendering.

Implementasi Lanjutan dan Integrasi dengan Checkout

Pada proyek WooCommerce yang lebih kompleks, woocommerce_review_order_before_submit dapat digunakan sebagai bagian dari sistem validasi dan komunikasi checkout. Developer dapat menampilkan informasi berdasarkan kombinasi metode pembayaran, shipping method, kategori produk, status pelanggan, atau nilai transaksi. Hal ini memungkinkan toko memberikan pesan yang benar benar relevan sebelum pelanggan melakukan submit order.

Namun perlu dibedakan antara menampilkan informasi dan melakukan validasi transaksi. Action hook ini terutama digunakan untuk menampilkan konten sebelum tombol submit. Jika kebutuhan bisnis adalah mencegah order dibuat ketika kondisi tertentu tidak terpenuhi, developer sebaiknya menggunakan mekanisme validasi checkout WooCommerce yang memang dirancang untuk menambahkan error dan menghentikan proses order.

Hook ini juga dapat dikombinasikan dengan hook checkout lainnya untuk membangun pengalaman pengguna yang lebih terstruktur. Informasi umum dapat ditempatkan pada bagian review order, instruksi payment dapat ditempatkan sebelum payment gateway, sedangkan pengingat terakhir dapat ditempatkan sebelum tombol Place Order. Pembagian seperti ini membantu menghindari satu area checkout dipenuhi terlalu banyak informasi.

Contoh Berdasarkan Metode Pembayaran

add_action(
    'woocommerce_review_order_before_submit',
    'payment_confirmation_notice'
);

function payment_confirmation_notice() {

    $payment_method = WC()->session->get(
        'chosen_payment_method'
    );

    if ( 'bacs' === $payment_method ) {

        echo '<div class="bank-confirmation">';
        echo '<p>Pembayaran transfer bank akan diverifikasi sebelum pesanan diproses.</p>';
        echo '</div>';

    }

}

Contoh tersebut menggunakan payment method yang sedang dipilih untuk menentukan informasi yang ditampilkan kepada pelanggan.

Contoh Berdasarkan Metode Pengiriman

add_action(
    'woocommerce_review_order_before_submit',
    'pickup_confirmation_notice'
);

function pickup_confirmation_notice() {

    $methods = WC()->session->get(
        'chosen_shipping_methods'
    );

    if ( empty( $methods ) ) {
        return;
    }

    if (
        strpos(
            $methods[0],
            'local_pickup'
        ) !== false
    ) {

        echo '<div class="pickup-confirmation">';
        echo '<p>Pastikan Anda dapat mengambil pesanan di lokasi toko setelah pesanan selesai diproses.</p>';
        echo '</div>';

    }

}

Dengan pendekatan tersebut, pelanggan yang memilih local pickup dapat memperoleh informasi khusus sebelum menyelesaikan pesanan.

Ringkasan

Hook woocommerce_review_order_before_submit merupakan action hook WooCommerce yang digunakan untuk menambahkan informasi sebelum tombol Place Order pada halaman checkout. Posisi ini sangat strategis untuk menampilkan pengingat terakhir, pemberitahuan pembayaran, informasi berdasarkan isi keranjang, kebijakan pemrosesan pesanan, maupun pesan yang disesuaikan dengan kondisi pelanggan. Untuk pemula, hook ini membantu memahami sistem action WooCommerce, sedangkan developer intermediate dan mahir dapat menggunakannya sebagai bagian dari sistem checkout yang lebih dinamis. Implementasi production sebaiknya memperhatikan escaping output, efisiensi proses, perilaku AJAX, pemisahan logika bisnis, serta penggunaan plugin kustom atau child theme agar kode aman dan mudah dipelihara.

Pertanyaan Umum Tentang