TokoDaring.Com – Memahami Hook woocommerce_review_order_after_submit di WooCommerce untuk Menambahkan Konten Setelah Tombol Checkout.

Memahami Hook woocommerce_review_order_after_submit di WooCommerce untuk Menambahkan Konten Setelah Tombol Checkout

WooCommerce menyediakan banyak action hook yang memungkinkan developer melakukan kustomisasi tanpa perlu mengubah file inti plugin. Salah satu hook yang dapat dimanfaatkan pada halaman checkout adalah woocommerce_review_order_after_submit. Hook ini dieksekusi setelah WooCommerce menampilkan tombol untuk membuat pesanan atau tombol Place Order pada halaman checkout. Meskipun termasuk hook yang sederhana, posisinya sangat strategis karena berada tepat setelah pelanggan melihat dan akan mengirimkan pesanan. Oleh karena itu, hook ini sering digunakan untuk menampilkan informasi tambahan yang berkaitan dengan proses checkout maupun transaksi.

Bagi developer yang baru mulai mempelajari WooCommerce, memahami woocommerce_review_order_after_submit merupakan langkah yang baik untuk mengenal bagaimana sistem hook bekerja dalam membangun halaman checkout secara modular. Sementara itu, bagi developer tingkat menengah maupun mahir, hook ini dapat dimanfaatkan untuk menampilkan pemberitahuan penting, informasi layanan, kebijakan toko, pesan keamanan transaksi, maupun elemen HTML tambahan yang mendukung pengalaman pengguna. Artikel ini membahas fungsi hook, cara kerjanya, contoh implementasi, serta praktik terbaik agar kustomisasi tetap kompatibel dengan pembaruan WooCommerce.

Mengenal Hook woocommerce_review_order_after_submit

Hook woocommerce_review_order_after_submit adalah action hook yang dijalankan segera setelah WooCommerce selesai merender tombol Place Order pada halaman checkout. Karena berada di bagian paling akhir formulir checkout, hook ini menjadi lokasi yang ideal untuk menambahkan informasi yang ingin dibaca pelanggan tepat sebelum mereka menyelesaikan transaksi.

Sebagai action hook, woocommerce_review_order_after_submit tidak mengembalikan nilai apa pun. Fungsi yang dihubungkan ke hook ini hanya bertugas mencetak konten ke halaman menggunakan echo, memanggil template tambahan, atau menghasilkan elemen HTML sesuai kebutuhan. Dengan pendekatan tersebut, developer dapat memperluas fungsi halaman checkout tanpa harus melakukan override terhadap template bawaan WooCommerce.

Dalam implementasi nyata, hook ini sering digunakan untuk menampilkan informasi mengenai kebijakan pengembalian barang, pemberitahuan keamanan pembayaran, estimasi waktu pemrosesan pesanan, informasi layanan pelanggan, atau pengingat terakhir sebelum pelanggan menekan tombol pemesanan. Karena posisinya sangat dekat dengan tombol checkout, informasi yang ditampilkan memiliki kemungkinan besar untuk diperhatikan oleh pelanggan.

Contoh Dasar Penggunaan Hook

add_action( 'woocommerce_review_order_after_submit', 'custom_checkout_information' );

function custom_checkout_information() {

    echo '<div class="checkout-information">';
    echo '<p>Pesanan akan segera diproses setelah pembayaran berhasil dikonfirmasi.</p>';
    echo '</div>';

}

Kode di atas akan menampilkan sebuah informasi sederhana tepat setelah tombol Place Order pada halaman checkout.

Cara Kerja Hook woocommerce_review_order_after_submit

Halaman checkout WooCommerce dibangun menggunakan berbagai template yang berisi action hook pada setiap bagian penting. Ketika pelanggan membuka halaman checkout, WooCommerce menjalankan hook tersebut secara berurutan. Mekanisme ini memungkinkan developer menambahkan fungsi baru tanpa mengubah file inti plugin sehingga proses pembaruan WooCommerce tetap aman.

Hook woocommerce_review_order_after_submit dijalankan setelah seluruh elemen checkout selesai ditampilkan, termasuk ringkasan pesanan, metode pengiriman, metode pembayaran, serta tombol Place Order. Karena posisinya berada di bagian akhir formulir checkout, hook ini cocok digunakan untuk menampilkan informasi terakhir sebelum pelanggan mengirimkan pesanan.

Perlu diperhatikan bahwa halaman checkout WooCommerce menggunakan AJAX untuk memperbarui berbagai bagian ketika pelanggan mengubah metode pengiriman maupun metode pembayaran. Oleh karena itu, kode yang ditempatkan pada hook ini sebaiknya ringan, tidak menjalankan query database yang kompleks, serta menghindari pemanggilan layanan eksternal secara langsung agar performa halaman checkout tetap optimal.

Contoh Menampilkan Informasi Keamanan Transaksi

add_action( 'woocommerce_review_order_after_submit', 'secure_payment_notice' );

function secure_payment_notice() {

    echo '<div class="payment-security">';
    echo '<p>Seluruh transaksi diproses melalui koneksi yang aman untuk melindungi data pelanggan.</p>';
    echo '</div>';

}

Contoh Menampilkan Informasi Berdasarkan Total Belanja

add_action( 'woocommerce_review_order_after_submit', 'priority_checkout_notice' );

function priority_checkout_notice() {

    if ( WC()->cart->total >= 1500000 ) {

        echo '<div class="priority-order">';
        echo '<p>Pesanan Anda memenuhi syarat untuk mendapatkan prioritas dalam proses penyiapan.</p>';
        echo '</div>';

    }

}

Pada Bagian 2, pembahasan akan berlanjut mengenai implementasi woocommerce_review_order_after_submit untuk berbagai kebutuhan bisnis, praktik terbaik dalam pengembangan WooCommerce, serta contoh kode lanjutan yang dapat langsung diterapkan pada proyek nyata.

Implementasi Hook woocommerce_review_order_after_submit untuk Berbagai Kebutuhan Bisnis

Salah satu keunggulan hook woocommerce_review_order_after_submit adalah kemampuannya untuk menampilkan informasi yang relevan tepat setelah tombol Place Order. Posisi ini memberikan kesempatan terakhir kepada pemilik toko untuk menyampaikan informasi penting kepada pelanggan tanpa mengubah alur checkout. Informasi tersebut dapat berupa kebijakan transaksi, petunjuk setelah pembayaran, pemberitahuan layanan pelanggan, maupun informasi operasional toko yang perlu diketahui sebelum pesanan dikirim.

Dalam implementasi yang lebih kompleks, hook ini dapat memanfaatkan berbagai data yang tersedia di WooCommerce. Developer dapat mengambil informasi dari sesi pelanggan, isi keranjang belanja, metode pembayaran yang dipilih, metode pengiriman, maupun metadata pengguna. Dengan pendekatan tersebut, informasi yang ditampilkan dapat berubah secara dinamis sesuai kondisi transaksi sehingga pengalaman checkout menjadi lebih personal dan relevan.

Selain meningkatkan pengalaman pengguna, penggunaan hook ini juga membantu mengurangi jumlah pertanyaan yang masuk ke tim dukungan pelanggan. Banyak informasi yang sebelumnya hanya tersedia pada halaman bantuan kini dapat ditampilkan secara langsung pada tahap akhir checkout. Dengan demikian, pelanggan memperoleh kejelasan mengenai proses transaksi sebelum mereka menyelesaikan pesanan.

Contoh Menampilkan Informasi Berdasarkan Metode Pembayaran

add_action( 'woocommerce_review_order_after_submit', 'bank_payment_notice' );

function bank_payment_notice() {

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

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

        echo '<div class="bank-transfer-notice">';
        echo '<p>Pastikan nominal transfer sesuai dengan total pesanan agar proses verifikasi berjalan lebih cepat.</p>';
        echo '</div>';

    }

}

Contoh Menampilkan Informasi untuk Pelanggan yang Login

add_action( 'woocommerce_review_order_after_submit', 'member_checkout_notice' );

function member_checkout_notice() {

    if ( is_user_logged_in() ) {

        $user = wp_get_current_user();

        echo '<div class="member-notice">';
        echo '<p>Terima kasih telah berbelanja kembali, ' . esc_html( $user->display_name ) . '.</p>';
        echo '</div>';

    }

}

Praktik Terbaik Menggunakan woocommerce_review_order_after_submit

Walaupun hook ini mudah digunakan, terdapat beberapa praktik terbaik yang sebaiknya diterapkan agar hasil kustomisasi tetap profesional dan mudah dipelihara. Pertama, tampilkan hanya informasi yang benar benar berkaitan dengan proses checkout. Hindari memasukkan promosi yang terlalu panjang atau elemen yang mengalihkan perhatian pelanggan dari tombol Place Order karena dapat menurunkan tingkat konversi.

Aspek keamanan juga tidak boleh diabaikan. Seluruh data yang berasal dari pengguna, database, maupun pengaturan WordPress harus diproses menggunakan fungsi escaping seperti esc_html(), esc_attr(), atau wp_kses_post() sebelum ditampilkan. Langkah ini membantu mencegah potensi kerentanan keamanan sekaligus menjaga kualitas kode sesuai standar pengembangan WordPress.

Selain itu, seluruh fungsi kustom sebaiknya ditempatkan pada plugin khusus atau child theme. Hindari mengubah file inti WooCommerce karena pembaruan plugin akan menghapus seluruh modifikasi tersebut. Dengan mengikuti praktik ini, proses pemeliharaan menjadi lebih sederhana dan kompatibilitas dengan versi WooCommerce terbaru dapat tetap dipertahankan.

Contoh Menampilkan Informasi Kontak Toko

add_action( 'woocommerce_review_order_after_submit', 'store_contact_notice' );

function store_contact_notice() {

    $email = get_option( 'admin_email' );

    echo '<div class="support-information">';
    echo '<p>Apabila mengalami kendala selama proses transaksi, silakan hubungi ' . esc_html( $email ) . '.</p>';
    echo '</div>';

}

Contoh Menampilkan Informasi Berdasarkan Jumlah Produk

add_action( 'woocommerce_review_order_after_submit', 'bulk_order_notice' );

function bulk_order_notice() {

    if ( WC()->cart->get_cart_contents_count() >= 20 ) {

        echo '<div class="bulk-order-information">';
        echo '<p>Pesanan dengan jumlah produk yang besar mungkin memerlukan waktu pemrosesan tambahan sebelum dikirim.</p>';
        echo '</div>';

    }

}

Pada Bagian 3, pembahasan akan dilanjutkan dengan implementasi lanjutan woocommerce_review_order_after_submit, optimasi performa, ringkasan artikel, serta lima pertanyaan yang paling sering diajukan mengenai hook ini.

Implementasi Lanjutan dan Optimasi Hook woocommerce_review_order_after_submit

Pada pengembangan WooCommerce yang lebih kompleks, hook woocommerce_review_order_after_submit sering dimanfaatkan sebagai titik integrasi dengan berbagai fitur tambahan. Developer dapat menggunakannya untuk menampilkan informasi mengenai program loyalitas pelanggan, pemberitahuan mengenai proses verifikasi pembayaran, jadwal operasional gudang, hingga informasi mengenai waktu respons layanan pelanggan. Karena ditempatkan setelah tombol Place Order, hook ini menjadi lokasi yang tepat untuk menyampaikan informasi penting tanpa mengganggu elemen utama pada halaman checkout.

Hook ini juga dapat dikombinasikan dengan metadata produk, metadata pelanggan, maupun data yang berasal dari plugin lain. Sebagai contoh, apabila keranjang belanja berisi produk digital, pelanggan dapat memperoleh pemberitahuan bahwa tautan unduhan akan dikirim melalui email setelah pembayaran berhasil diverifikasi. Sebaliknya, apabila pelanggan membeli produk yang dibuat berdasarkan pesanan, sistem dapat menampilkan estimasi waktu produksi sebelum barang dikirim. Pendekatan seperti ini membuat proses checkout menjadi lebih informatif dan mampu mengurangi kebingungan pelanggan setelah transaksi selesai.

Walaupun hook ini sangat fleksibel, performa halaman checkout tetap harus menjadi prioritas. Hindari menjalankan query database yang kompleks atau melakukan permintaan ke layanan eksternal setiap kali hook dipanggil. Jika membutuhkan data tambahan, gunakan fungsi bawaan WooCommerce atau manfaatkan mekanisme cache sehingga informasi dapat ditampilkan dengan cepat tanpa memengaruhi kecepatan halaman checkout.

Contoh Menampilkan Informasi Produk Digital

add_action( 'woocommerce_review_order_after_submit', 'digital_download_notice' );

function digital_download_notice() {

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

        $product = $cart_item['data'];

        if ( $product->is_virtual() ) {

            echo '<div class="digital-download">';
            echo '<p>Tautan unduhan akan dikirim melalui email setelah pembayaran berhasil dikonfirmasi.</p>';
            echo '</div>';

            break;

        }

    }

}

Contoh Menampilkan Informasi Berdasarkan Kategori Produk

add_action( 'woocommerce_review_order_after_submit', 'preorder_information' );

function preorder_information() {

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

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

            echo '<div class="preorder-notice">';
            echo '<p>Produk pre order akan diproses sesuai jadwal produksi yang telah ditentukan.</p>';
            echo '</div>';

            break;

        }

    }

}

Ringkasan

Hook woocommerce_review_order_after_submit merupakan action hook WooCommerce yang memberikan fleksibilitas kepada developer untuk menambahkan berbagai informasi setelah tombol Place Order pada halaman checkout. Hook ini sangat bermanfaat untuk menampilkan pemberitahuan penting, informasi layanan pelanggan, kebijakan transaksi, estimasi pemrosesan pesanan, maupun informasi dinamis berdasarkan kondisi keranjang belanja atau pelanggan. Dengan menerapkan praktik terbaik seperti menggunakan fungsi escaping, menyimpan kode pada plugin kustom atau child theme, serta menjaga performa halaman checkout, developer dapat membangun pengalaman checkout yang lebih profesional, informatif, aman, dan tetap kompatibel dengan pembaruan WooCommerce.

Pertanyaan Umum Tentang hook woocommerce_review_order_after_submit