Cara Mengedit Halaman Pembayaran WooCommerce
Diterbitkan: 2021-07-21
Apakah Anda ingin mengedit halaman checkout di toko WooCommerce Anda? Baca terus, karena kami akan memberikan solusi untuk Anda.
Penting untuk dicatat bahwa halaman checkout adalah tempat pelanggan membayar produk atau layanan yang Anda tawarkan di toko Anda. Karena itu, Anda harus mendapatkannya dengan benar.
Namun, WooCommerce memberi Anda konfigurasi default, tetapi Anda mungkin perlu menyesuaikannya karena kebutuhan karena tidak memiliki tampilan profesional. Ini akan membantu Anda meningkatkan tingkat konversi Anda.
Cara Mengedit Halaman Pembayaran WooCommerce
Ada dua cara untuk menyesuaikan halaman:
- Template Checkout Kustom – Dokumentasi WooCommerce dengan jelas menyatakan bahwa Anda dapat menyalin template checkout ke tema Anda dalam struktur folder seperti ini: woocommerce/checkout/form-checkout.php. Ini berarti Anda dapat menyesuaikan form-checkout.php tergantung pada kebutuhan Anda.
- Plugin – Ada berbagai ekstensi yang tersedia untuk menyesuaikan halaman checkout. Beberapa dari mereka tersedia secara gratis, sementara beberapa ekstensi berbayar.
- Kode khusus – Metode ini agak rumit dan memerlukan pengetahuan teknis agar Anda dapat menerapkan solusi. Namun, ini adalah solusi sempurna jika Anda hanya ingin melakukan pengeditan kecil dan tidak ingin membeli plugin. Kami akan menggunakan metode ini dalam tutorial ini.
Langkah-langkah untuk Mengedit Halaman Checkout WooCommerce
Sebelum kita mulai, perlu disebutkan bahwa WooCommerce memiliki kait tindakan di setiap halaman. Kait tindakan dapat digunakan untuk menambah atau menghapus elemen dari halaman checkout. Ada 9 kait tindakan di halaman checkout:
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing
- woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- woocommerce_checkout_after_order_review
- woocommerce_after_checkout_form
Selain itu, ada 7 kait tambahan yang mungkin tersedia, tergantung pada tata letak tema Anda. Anda dapat memeriksanya di sini.
Kami telah memutuskan untuk membagikan beberapa contoh untuk membantu Anda. Berikut adalah langkah-langkah yang perlu Anda ikuti:
- Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
- Dari menu Dashboard, klik pada Appearance Menu > Theme Editor Menu . Saat halaman Theme Editor terbuka, cari file theme functions dimana kita akan menambahkan function yang akan menambahkan pesan ke customer tentang detail pengiriman .
- Tambahkan kode berikut ke file php :
add_action( 'woocommerce_before_checkout_shipping_form', function() {
echo 'Don\'t forget to include your unit number in the address!';
});
- Ini adalah hasilnya:
- Jika Anda ingin memanipulasi bidang apa pun, Anda dapat menggunakan filter woocommerce_checkout_fields. Misalnya, untuk menghapus bidang nomor telepon penagihan, tambahkan kode berikut ke file yang sama:
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_phone']); return $fields; }
- Untuk menambahkan bidang nomor telepon pengiriman, tambahkan kode berikut:
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
$fields['shipping']['shipping_phone'] = array(
'label' => __('Phone', 'woocommerce'),
'placeholder'=> _x('Phone', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}
/**
* Display field value on the order edit page
*/
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'njengah_custom_checkout_field_display_admin_order_meta', 10, 1 );
function njengah_custom_checkout_field_display_admin_order_meta($order){
global $post_id;
$order = new WC_Order( $post_id );
echo '<p><strong>'.__('Field Value').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}
- Untuk mengubah placeholder bidang Zip atau Kode Pos, tambahkan kode berikut:
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function njengah_override_checkout_fields( $fields ) {
$fields['billing']['billing_postcode']['placeholder'] = 'Postal Code';
return $fields;
}
Kesimpulan
Singkatnya, kami telah membagikan bagaimana Anda dapat menggunakan kait tindakan WooCommerce untuk mengedit halaman checkout. Penting untuk dicatat bahwa Anda dapat melihat dokumentasi WooCommerce di sini.
Jika Anda tidak terbiasa dengan pengkodean, kami sarankan menggunakan plugin. Anda juga dapat berkonsultasi dengan pengembang WordPress yang memenuhi syarat.
Kami harap tutorial ini membantu Anda menemukan solusi untuk masalah Anda.
Artikel Serupa
- Cara Mengatur File Unggahan WooCommerce di Checkout
- Cara Menambahkan Konten Di Bawah Etalase Judul Produk Unggulan
- Cara Menambahkan Verifikasi Email Pendaftaran WooCommerce
- Cara Membuat Nomor Pagination di WordPress Tanpa Menggunakan Plugin
- Panduan Lengkap untuk Menggunakan WordPress Custom Hooks do_action & apply_filters Dengan Contoh
- Cara Mengatur Keranjang WooCommerce dan Checkout di Halaman yang Sama
- Cara Menyesuaikan Halaman Kategori Produk Di WooCommerce
- WooCommerce Buat Halaman Produk Tunggal Khusus
- Cara Menambahkan Kalkulator Pengiriman WooCommerce di Halaman Keranjang
- WooCommerce Terima Syarat dan Ketentuan Kotak Centang Pada Formulir Pendaftaran
- Cara Menambahkan Tombol Lihat Keranjang Di WooCommerce
- Cara Mendapatkan Produk Saat Ini WooCommerce
- Cara Menambahkan Bidang Produk Khusus WooCommerce
- Cara Mengubah Template Email di WooCommerce
- Cara Mengatur WooCommerce Beli Satu Dapat Satu
- Cara Menambahkan Pembayaran Ekspres PayPal ke WooCommerce
- Cara Mengubah Teks Placeholder Bidang Checkout WooCommerce