TokoDaring.Com – Memahami Hook woocommerce_review_order_before_payment di WooCommerce untuk Kustomisasi Checkout.

Memahami Hook woocommerce_review_order_before_payment 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 sangat berguna untuk kebutuhan tersebut adalah woocommerce_review_order_before_payment. Hook ini dijalankan sebelum WooCommerce menampilkan bagian metode pembayaran pada ringkasan checkout. Posisi tersebut membuatnya cocok untuk menambahkan informasi yang perlu diketahui pelanggan sebelum mereka memilih metode pembayaran dan menyelesaikan pesanan.

Bagi pemula, woocommerce_review_order_before_payment dapat menjadi contoh yang baik untuk memahami hubungan antara action hook dan template WooCommerce. Bagi developer intermediate dan programmer yang sudah mahir, hook ini dapat digunakan untuk membangun logika checkout yang lebih dinamis berdasarkan keranjang belanja, pelanggan, metode pengiriman, total transaksi, atau kondisi bisnis tertentu. Dengan implementasi yang tepat, developer dapat menambahkan pemberitahuan pembayaran, informasi keamanan, instruksi transaksi, maupun elemen khusus tanpa melakukan modifikasi langsung terhadap template inti WooCommerce.

Mengenal Hook woocommerce_review_order_before_payment

Hook woocommerce_review_order_before_payment merupakan action hook yang dipanggil sebelum WooCommerce menampilkan bagian payment pada halaman checkout. Dalam alur ringkasan pesanan, hook ini berada setelah informasi order total dan sebelum daftar metode pembayaran ditampilkan. Karena itu, developer dapat menggunakannya sebagai titik untuk menyisipkan informasi yang menjadi pengantar sebelum pelanggan memilih payment gateway.

Secara teknis, hook ini tidak mengembalikan nilai. WooCommerce hanya menjalankan callback yang telah didaftarkan menggunakan add_action. Callback tersebut kemudian dapat menghasilkan output berupa HTML, memanggil template, atau menjalankan logika tertentu sebelum bagian pembayaran dirender. Pemahaman mengenai mekanisme ini penting karena action hook berbeda dengan filter hook yang biasanya digunakan untuk mengubah nilai yang sudah tersedia.

Penggunaan paling sederhana adalah menampilkan pemberitahuan sebelum payment gateway. Misalnya, toko dapat memberitahu pelanggan bahwa pembayaran akan diverifikasi secara otomatis, bahwa metode tertentu membutuhkan proses verifikasi manual, atau bahwa pelanggan harus memastikan data pesanan sudah benar sebelum memilih metode pembayaran. Informasi tersebut dapat ditempatkan tepat sebelum pilihan pembayaran sehingga konteksnya lebih mudah dipahami.

add_action(
    'woocommerce_review_order_before_payment',
    'custom_payment_notice'
);

function custom_payment_notice() {

    echo '<div class="custom-payment-notice">';
    echo '<p>Silakan pilih metode pembayaran yang paling sesuai dengan kebutuhan Anda.</p>';
    echo '</div>';

}

Kode tersebut membuat fungsi bernama custom_payment_notice dan menghubungkannya dengan woocommerce_review_order_before_payment. Ketika WooCommerce mencapai posisi hook tersebut, fungsi akan dijalankan dan pesan akan ditampilkan sebelum bagian payment.

Cara Kerja Hook dalam Siklus Checkout WooCommerce

Untuk memahami hook ini dengan benar, penting mengetahui bahwa halaman checkout WooCommerce tidak dirender sebagai satu blok HTML yang besar. Template checkout terdiri dari beberapa bagian yang memiliki action hook tertentu. WooCommerce menjalankan hook tersebut sesuai urutan template sehingga developer dapat menyisipkan fungsi tambahan pada lokasi yang telah disediakan.

woocommerce_review_order_before_payment berada pada bagian review order sebelum area payment ditampilkan. Ini berarti informasi yang dikeluarkan oleh callback akan berada di antara bagian total pesanan dan bagian metode pembayaran. Lokasi tersebut berbeda dengan woocommerce_review_order_after_payment, yang digunakan untuk menambahkan konten setelah payment gateway selesai ditampilkan.

Checkout WooCommerce juga memiliki perilaku dinamis karena beberapa bagiannya diperbarui melalui AJAX ketika pelanggan mengganti alamat, metode pengiriman, kupon, atau metode pembayaran. Oleh karena itu, callback pada hook ini harus dirancang agar dapat dieksekusi berulang kali tanpa menghasilkan duplikasi data atau proses yang tidak diperlukan. Logika yang ringan biasanya merupakan pilihan terbaik untuk area checkout.

Contoh Menampilkan Informasi Berdasarkan Total Pesanan

add_action(
    'woocommerce_review_order_before_payment',
    'payment_threshold_notice'
);

function payment_threshold_notice() {

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

        echo '<div class="payment-threshold-notice">';
        echo '<p>Pesanan Anda memenuhi syarat untuk mendapatkan prioritas dalam proses pembayaran.</p>';
        echo '</div>';

    }

}

Contoh tersebut menggunakan objek cart WooCommerce untuk memeriksa subtotal. Jika subtotal mencapai batas tertentu, WooCommerce menampilkan informasi tambahan sebelum payment gateway.

Contoh Menampilkan Informasi untuk Pelanggan Login

add_action(
    'woocommerce_review_order_before_payment',
    'logged_in_payment_notice'
);

function logged_in_payment_notice() {

    if ( is_user_logged_in() ) {

        $user = wp_get_current_user();

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

    }

}

Penggunaan esc_html pada nama pelanggan penting karena data tersebut berasal dari objek pengguna WordPress. Dengan escaping, output menjadi lebih aman ketika ditampilkan pada halaman checkout.

Pada Bagian 2, pembahasan akan berlanjut ke implementasi woocommerce_review_order_before_payment berdasarkan metode pembayaran dan kondisi keranjang, kemudian dilanjutkan dengan praktik terbaik untuk menjaga keamanan dan performa kode.

Implementasi woocommerce_review_order_before_payment untuk Berbagai Skenario

Salah satu penggunaan yang paling berguna dari woocommerce_review_order_before_payment adalah menampilkan informasi berdasarkan metode pembayaran yang tersedia atau kondisi transaksi. Developer dapat memeriksa isi keranjang, subtotal, status pelanggan, hingga metode pembayaran yang sedang dipilih melalui session WooCommerce. Dengan pendekatan tersebut, pesan yang ditampilkan tidak harus sama untuk semua pelanggan sehingga checkout dapat memberikan informasi yang lebih relevan.

Misalnya, toko yang menerima transfer bank dan pembayaran otomatis dapat memberikan instruksi yang berbeda. Pelanggan yang menggunakan transfer bank mungkin perlu mengetahui bahwa pembayaran akan diverifikasi secara manual, sedangkan pelanggan yang menggunakan payment gateway otomatis cukup menerima informasi mengenai proses konfirmasi. Logika seperti ini dapat ditempatkan sebelum payment gateway sehingga pelanggan memperoleh konteks sebelum menentukan metode pembayaran.

Hal yang perlu diperhatikan adalah bahwa nilai metode pembayaran dapat berubah ketika pelanggan berinteraksi dengan checkout. Karena itu, jangan mengasumsikan bahwa satu payment method akan selalu aktif. Gunakan data session WooCommerce dan pastikan kode mampu menangani kondisi ketika belum ada metode pembayaran yang dipilih atau ketika gateway tertentu tidak tersedia.

Contoh Menampilkan Informasi untuk Transfer Bank

add_action(
    'woocommerce_review_order_before_payment',
    'bank_transfer_payment_notice'
);

function bank_transfer_payment_notice() {

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

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

        echo '<div class="bank-payment-notice">';
        echo '<p>Pembayaran melalui transfer bank akan diverifikasi setelah dana diterima.</p>';
        echo '</div>';

    }

}

Kode tersebut mengambil payment method yang sedang dipilih dari session WooCommerce. Jika pelanggan memilih gateway dengan ID bacs, pesan khusus akan ditampilkan.

Contoh Berdasarkan Jumlah Produk

add_action(
    'woocommerce_review_order_before_payment',
    'large_order_payment_notice'
);

function large_order_payment_notice() {

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

        echo '<div class="large-order-notice">';
        echo '<p>Pesanan dengan jumlah produk yang besar mungkin membutuhkan proses verifikasi tambahan.</p>';
        echo '</div>';

    }

}

Pendekatan seperti ini berguna untuk toko yang memiliki aturan berbeda berdasarkan ukuran transaksi. Namun, informasi tersebut sebaiknya tidak terlalu panjang karena tujuan utama area ini tetap membantu pelanggan menyelesaikan pembayaran.

Praktik Terbaik dan Keamanan dalam Penggunaan Hook

Dalam pengembangan WooCommerce, keamanan harus diperhatikan meskipun kode yang dibuat hanya bertujuan menampilkan informasi. Data pelanggan, metadata, maupun konfigurasi toko sebaiknya tidak langsung dicetak ke halaman tanpa proses escaping. Fungsi seperti esc_html, esc_attr, dan wp_kses_post dapat digunakan sesuai jenis data yang ingin ditampilkan.

Selain keamanan, developer juga harus memperhatikan performa. Halaman checkout merupakan bagian yang sangat sensitif terhadap waktu respons karena pelanggan sedang berada pada tahap akhir transaksi. Jangan menjalankan query database yang berat, melakukan pemrosesan berulang terhadap seluruh produk tanpa kebutuhan, atau memanggil API eksternal secara langsung setiap kali hook dieksekusi.

Tempat penyimpanan kode juga menentukan kemudahan pemeliharaan. Untuk proyek sederhana, fungsi dapat ditempatkan pada child theme, sedangkan kustomisasi yang merupakan bagian dari fungsionalitas bisnis sebaiknya berada dalam plugin khusus. Jangan mengubah file inti WooCommerce karena perubahan tersebut dapat hilang ketika plugin diperbarui.

Contoh Menggunakan Data Pengaturan WordPress

add_action(
    'woocommerce_review_order_before_payment',
    'payment_support_notice'
);

function payment_support_notice() {

    $email = get_option( 'admin_email' );

    echo '<div class="payment-support">';
    echo '<p>Jika mengalami masalah pembayaran, silakan hubungi ' .
         esc_html( $email ) .
         '.</p>';
    echo '</div>';

}

Contoh Memeriksa Produk dalam Keranjang

add_action(
    'woocommerce_review_order_before_payment',
    'special_product_payment_notice'
);

function special_product_payment_notice() {

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

        $product = $cart_item['data'];

        if ( $product && $product->is_virtual() ) {

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

            break;

        }

    }

}

Kode tersebut menggunakan data cart yang sudah tersedia sehingga tidak membutuhkan query database tambahan. Penggunaan break juga mencegah pesan yang sama ditampilkan berkali kali ketika terdapat beberapa produk virtual dalam keranjang.

Pada Bagian 3, kita akan membahas penggunaan lanjutan woocommerce_review_order_before_payment, optimasi untuk proyek WooCommerce yang lebih kompleks, ringkasan, dan lima pertanyaan umum beserta jawabannya.

Implementasi Lanjutan dan Optimasi woocommerce_review_order_before_payment

Pada proyek WooCommerce yang lebih kompleks, woocommerce_review_order_before_payment dapat menjadi titik integrasi untuk aturan bisnis yang lebih spesifik. Developer dapat menggunakannya untuk memberikan informasi berdasarkan kombinasi kondisi seperti kategori produk, nilai keranjang, status pelanggan, metode pengiriman, atau payment gateway. Pendekatan ini memungkinkan halaman checkout memberikan konteks yang berbeda tanpa harus membuat template checkout baru secara keseluruhan.

Contohnya, toko yang menjual produk fisik dan digital dapat memberikan informasi berbeda sebelum payment gateway berdasarkan isi keranjang. Produk digital mungkin langsung tersedia setelah pembayaran, sedangkan produk fisik memerlukan proses pengemasan dan pengiriman. Hook ini juga dapat digunakan untuk memberi tahu pelanggan bahwa transaksi tertentu mungkin membutuhkan verifikasi manual, selama informasi tersebut memang sesuai dengan proses bisnis toko.

Untuk implementasi tingkat lanjut, hindari menjadikan callback sebagai tempat untuk menjalankan seluruh logika bisnis aplikasi. Lebih baik pisahkan proses perhitungan atau pengambilan data ke fungsi terpisah, kemudian gunakan hook hanya sebagai titik output. Struktur seperti ini membuat kode lebih mudah diuji, digunakan kembali, dan dipelihara ketika kebutuhan toko berkembang.

Contoh Informasi Berdasarkan Kategori Produk

add_action(
    'woocommerce_review_order_before_payment',
    'category_payment_notice'
);

function category_payment_notice() {

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

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

            echo '<div class="preorder-payment-notice">';
            echo '<p>Pesanan mengandung produk pre order dan akan diproses sesuai jadwal yang ditentukan.</p>';
            echo '</div>';

            break;

        }

    }

}

Kode tersebut memeriksa kategori produk yang berada di dalam cart. Jika ditemukan produk dengan kategori pre-order, WooCommerce akan menampilkan pemberitahuan sebelum bagian pembayaran.

Contoh Menampilkan Informasi Berdasarkan Metode Pengiriman

add_action(
    'woocommerce_review_order_before_payment',
    'shipping_payment_notice'
);

function shipping_payment_notice() {

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

    if ( ! empty( $methods ) ) {

        $shipping_method = $methods[0];

        if ( strpos( $shipping_method, 'local_pickup' ) !== false ) {

            echo '<div class="pickup-payment-notice">';
            echo '<p>Pesanan akan diambil langsung di lokasi toko setelah pembayaran dikonfirmasi.</p>';
            echo '</div>';

        }

    }

}

Pendekatan tersebut menunjukkan bahwa woocommerce_review_order_before_payment tidak terbatas pada data payment gateway. Data shipping method juga dapat digunakan untuk menentukan informasi yang perlu ditampilkan sebelum pelanggan melakukan pembayaran.

Ringkasan

Hook woocommerce_review_order_before_payment merupakan action hook WooCommerce yang memungkinkan developer menambahkan informasi sebelum bagian metode pembayaran pada halaman checkout. Hook ini berguna untuk menampilkan instruksi pembayaran, pemberitahuan keamanan, informasi berdasarkan payment gateway, kondisi keranjang, status pelanggan, maupun aturan bisnis tertentu. Dengan memahami posisi hook dalam siklus checkout dan memanfaatkan data WooCommerce secara tepat, developer pemula hingga mahir dapat membuat halaman checkout yang lebih informatif tanpa mengubah file inti WooCommerce. Untuk implementasi production, prioritaskan escaping output, efisiensi proses, pemisahan logika bisnis, dan penyimpanan kode pada plugin khusus atau child theme agar solusi tetap aman dan mudah dipelihara.

Pertanyaan Umum Tentang hook woocommerce_review_order_before_payment