Cara Membuat Halaman Akun Saya Kustom WooCommerce
Diterbitkan: 2021-05-11
Apakah Anda mencari cara untuk menyesuaikan halaman "Akun Saya" WooCommerce? Mengedit halaman akun adalah salah satu halaman terpenting di toko WooCommerce mana pun. Halaman ini harus memiliki desain yang menakjubkan karena sangat penting untuk kelancaran seluruh toko online Anda.
Ini harus dirancang dengan cara yang memungkinkan pengguna untuk sepenuhnya memanfaatkan sebagian besar pengelolaan akun, mengonversi lebih banyak penjualan, dan atau menarik pelanggan untuk melakukan pembelian berulang.
Halaman 'akun saya' dan subhalamannya dapat ditampilkan di mana saja di situs Anda menggunakan kode pendek. Shortcode adalah cara mudah untuk menambahkan konten dinamis ke posting, halaman, dan sidebar WordPress Anda.
Halaman Akun Saya Kustom WooCommerce
Dalam tutorial singkat ini, kami menunjukkan kepada Anda bagaimana Anda menyesuaikan tampilan, nuansa, tata letak, konten, dan desain halaman 'akun saya' menggunakan skrip PHP khusus. Ini berarti Anda harus memiliki pengetahuan pengkodean sebelum melanjutkan.
Anda dapat mencapai hampir semua hal di WooCommerce jika Anda terbiasa dengan kustomisasi PHP. Ini berarti Anda dapat menambahkan tab khusus, mengganti nama tab, menghapus tab, atau menggabungkan konten tab.
Mari kita lihat bagaimana Anda dapat mencapai ini.
Langkah-langkah untuk Mengedit Halaman Akun Saya Menggunakan PHP Snippet
Di bagian ini, kita akan menggunakan hook WooCommerce. Ini karena ini adalah salah satu praktik terbaik yang direkomendasikan WordPress saat menyesuaikan situs Anda.
Kami akan menambahkan tab khusus, mengganti nama tab, menghapus tab, dan menggabungkan konten tab.
Berikut adalah langkah-langkah yang perlu Anda ikuti untuk mengedit halaman Akun Saya secara terprogram:
- 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 potongan kode PHP.
- Jika Anda ingin mengganti nama tab Alamat menjadi Alamat Pengiriman, tambahkan kode berikut ke file php . Anda dapat menggunakan kode yang sama untuk mengganti nama tab apa pun.
add_filter( 'woocommerce_account_menu_items', 'njengah_rename_address_my_account', 9999 );
function njengah_rename_address_my_account( $items ) {
$items['edit-address'] = 'Delivery Address';
return $items;
}
- Ini adalah hasilnya:
- Jika Anda ingin menghapus tab Address, tambahkan kode berikut ke file php :
add_filter( 'woocommerce_account_menu_items', 'njengah_remove_address_my_account', 9999 );
function njengah_remove_address_my_account( $items ) {
unset( $items['edit-address'] );
return $items;
}
- Berikut adalah daftar lengkap dari tab slug dalam array $items, sehingga Anda dapat memilih salah satu yang ingin Anda hapus:
$items = array( 'dashboard' => __( 'Dashboard', 'woocommerce' ), 'orders' => __( 'Orders', 'woocommerce' ), 'downloads' => __( 'Downloads', 'woocommerce' ), 'edit-address'; => _n( 'Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce' ), 'payment-methods' => __( 'Payment methods', 'woocommerce' ), 'edit-account' => __( 'Account details', 'woocommerce' ), 'customer-logout' => __( 'Logout', 'woocommerce' ), );
- Dimungkinkan juga untuk menggabungkan tab dan konten. Misalnya, Anda dapat menghapus tab Alamat dan memindahkan kontennya ke tab Akun. Anda dapat mencapai ini dengan menambahkan kode berikut ke file php :
// -----------------------------
// 1. Remove the Addresses tab
add_filter( 'woocommerce_account_menu_items', 'njengah_remove_acc_tab', 999 );
function njengah_remove_acc_tab( $items ) {
unset($items['edit-address']);
return $items;
}
// -------------------------------
// 2. Insert the content of the Addresses tab into an existing tab (edit-account in this case)
add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );
- Ini adalah hasilnya:
- Anda juga dapat membuat tab khusus di halaman ini. Misalnya, Anda dapat menambahkan tab baru bernama Dukungan di mana pengguna dapat dengan mudah melihat tiket dukungan mereka. Untuk mencapai ini, tambahkan kode berikut ke file php :
/**
* Add New Tab on the My Account page
*/
// ------------------
// 1. Register new endpoint (URL) for My Account page
// Note: Re-save Permalinks or it will give 404 error
function njengah_add_premium_support_endpoint() {
add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'njengah_add_premium_support_endpoint' );
// ------------------
// 2. Add new query var
function njengah_premium_support_query_vars( $vars ) {
$vars[] = 'premium-support';
return $vars;
}
add_filter( 'query_vars', 'njengah_premium_support_query_vars', 0 );
// ------------------
// 3. Insert the new endpoint into the My Account menu
function njengah_add_premium_support_link_my_account( $items ) {
$items['premium-support'] = 'Premium Support';
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'njengah_add_premium_support_link_my_account' );
// ------------------
// 4. Add content to the new tab
function njengah_premium_support_content() {
echo 'Premium WooCommerce Support. Welcome to the WooCommerce support area. As a premium customer, you can submit a ticket should you have any WooCommerce issues with your website, snippets or customization. <i>Please contact your theme/plugin developer for theme/plugin-related support.</i></p>';
echo do_shortcode( ' /* your shortcode here */ ' );
}
add_action( 'woocommerce_account_premium-support_endpoint', 'njengah_premium_support_content' );
// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format
- Anda dapat menggunakan plugin pihak ketiga seperti WPForms untuk membuat halaman dukungan. Setelah itu, Anda dapat menempelkan kode pendek di baris terakhir. Ini adalah hasilnya:
Kesimpulan
Sekarang, Anda seharusnya dapat menyesuaikan halaman akun. Sebaiknya buat tema anak sebelum mengedit halaman ini. Ini akan memastikan bahwa perubahan Anda tidak hilang selama pembaruan. Kami berharap tutorial ini memberi Anda solusi terbaik.
Artikel Serupa
- 100+ Tips, Trik & Cuplikan Panduan Sembunyikan WooCommerce Ultimate
- Pengalihan WooCommerce Setelah Checkout : Pengalihan ke Halaman Terima Kasih Kustom
- Cara Mengubah Halaman Terima Kasih WooCommerce
- Cara Menyembunyikan Tag Di Tema Storefront WooCommerce
- Cara Menonaktifkan Metode Pembayaran untuk Kategori Tertentu
- Sembunyikan atau Hapus Bidang Kuantitas dari Halaman Produk WooCommerce
- Cara Menambahkan Pengalihan Halaman Akun Saya WooCommerce
- Cara Menyembunyikan Dasbor di Halaman Akun Saya WooCommerce
- Cara Mendapatkan Metode Pembayaran di WooCommerce »Contoh Kode
- Cara Mengatur WooCommerce Beli Satu Dapat Satu
- Cara Mengekspor Produk Di WooCommerce
- Cara Menduplikasi Produk di WooCommerce
- Cara Memilih Semua Kecuali Anak Terakhir Di CSS »Contoh CSS Bukan Anak Terakhir
- Cara Menghapus Menu Unduhan Halaman Akun Saya WooCommerce
- Cara Mengatur Kuantitas Pesanan Maksimum atau Minimum WooCommerce
- Cara Mengatur File Unggahan WooCommerce di Checkout
- Cara Menyembunyikan Kategori Dari Halaman Toko WooCommerce
- Cara Mengubah Teks Placeholder Bidang Checkout WooCommerce
- Cara Menyembunyikan Unduhan Dari Akun Saya WooCommerce
- Cara Mengubah Placeholder Kode Kupon WooCommerce