Cara Menyesuaikan Halaman Akun Saya di WooCommerce (Plugin dan Secara Terprogram)

Diterbitkan: 2020-12-31

Mencari cara mudah untuk mengedit dan mempersonalisasi halaman Akun Saya? Dalam panduan ini, Anda akan belajar cara menyesuaikan halaman Akun Saya WooCommerce baik secara terprogram maupun dengan plugin untuk membawa toko Anda ke tingkat berikutnya.

Menyiapkan Halaman Akun Saya dapat menjadi sangat penting untuk setiap toko online. Halaman ini biasanya diabaikan oleh sebagian besar pemilik toko tetapi dapat membantu Anda menonjol dari pesaing Anda dan memberikan pengalaman pelanggan yang jauh lebih baik kepada pembeli Anda. Sebelum beralih ke cara mengeditnya, mari kita lihat lebih dekat mengapa sangat penting untuk menyesuaikan halaman Akun Saya WooCommerce Anda.

Apa Halaman Akun saya dan mengapa Anda harus menyesuaikannya?

Halaman Akun Saya di WooCommerce adalah tempat pemilik toko menyimpan informasi tentang informasi pribadi pelanggan, penagihan, dan alamat pengiriman. Selain itu, di situlah pengguna dapat memeriksa pesanan mereka. Halaman Akun Saya default adalah halaman WordPress sederhana yang berisi kode pendek WooCommerce.

 [ woocommerce_my_account ]

Halaman default ini memiliki semua informasi dasar yang dibutuhkan pengguna tetapi Anda dapat memanfaatkannya sebaik mungkin kecuali Anda menyesuaikan halaman Akun Saya. Anda dapat menggunakan halaman ini untuk berbagai tujuan. Selain memberikan informasi kepada pelanggan tentang pesanan mereka, Anda dapat mengatur kupon dan kode diskon dan menampilkannya di sana, atau bahkan memberi mereka peringatan eksklusif, penawaran diskon, dan peringatan penjualan.

Halaman Akun Saya membuka banyak peluang untuk interaksi tambahan dengan pelanggan Anda sekaligus membuat pengalaman berbelanja mereka jauh lebih baik. Misalnya, Anda dapat membiarkan pembeli menyimpan detail pembayaran, alamat pengiriman, dan detail akun tambahan dan mengintegrasikannya dengan proses pembayaran.

Demikian pula, Anda dapat memberi mereka daftar unduhan dan produk virtual yang mereka bawa langsung di halaman Akun Saya dan bahkan memungkinkan mereka untuk membuka tiket dukungan premium dan menghubungi mereka langsung dari halaman Akun Saya.

Jika Anda menjalankan halaman WooCommerce dan ingin membuatnya senyaman mungkin bagi pelanggan Anda, maka Anda harus menyesuaikan halaman Akun Saya di WooCommerce.

Cara Menyesuaikan Halaman Akun Saya di WooCommerce

Ada dua cara untuk mengedit Halaman Akun Saya:

  1. Dengan plugin
  2. Secara terprogram

Dalam panduan ini, kami akan menjelaskan kedua metode tersebut sehingga Anda dapat memilih salah satu yang paling cocok untuk Anda.

1) Edit halaman Akun Saya dengan Plugin

Ada beberapa plugin untuk mengedit Halaman Akun Saya. Untuk membuat hidup Anda lebih mudah, kita akan melihat pilihan alat terbaik kami. Plugin ini hadir dengan semua penyesuaian yang Anda butuhkan untuk membuat halaman Akun Saya WooCommerce Anda unik, nyaman, dan ramah pengguna. Jika Anda tidak memiliki keterampilan pengkodean, menggunakan plugin adalah cara yang tepat.

Anda dapat mengedit tab Halaman Akun Saya, membuat yang baru, dan bahkan menyesuaikan tampilan dan nuansanya menggunakan penyesuai khusus dan banyak opsi penyesuaian. Tanpa basa-basi lagi, ini adalah rekomendasi plugin pribadi kami yang dapat Anda gunakan untuk menyesuaikan halaman Akun Saya di WooCommerce.

1) Penyesuai Toko

sesuaikan halaman akun saya woocommerce - penyesuai toko StoreCustomizer adalah plugin WordPress gratis yang dapat membantu Anda menyesuaikan semua halaman WooCommerce Anda. Ini mencakup semuanya, mulai dari menambahkan item ke menu Anda serta mengelola toko, produk, halaman checkout, dan bahkan Akun Saya Anda. Anda dapat dengan bebas mengganti namanya, menghapus tab, dan opsi berbeda untuk mengubah gaya halaman Akun Saya dengan 2 cara berbeda.

Satu hal hebat tentang StoreCustomizer adalah tidak memerlukan perubahan apa pun pada template tema Anda atau bahkan menyiapkan kait WooCommerce. Plugin ini sangat ringan dan ramah pengguna. Selain itu, dengan versi premium, Anda memiliki akses ke lebih banyak opsi untuk menyesuaikan halaman Akun Saya seperti menambahkan tab khusus dan mengedit konten tab menggunakan editor Gutenberg sebagai plugin pembuat halaman.

Fitur utama

  • Plugin ramah pengguna yang menyesuaikan halaman WooCommerce tanpa mengubah file tema Anda.
  • Terintegrasi penuh dengan WordPress Live Customizer.
  • Memungkinkan mengganti nama dan menghapus tab Akun Saya serta mengubah gaya tab.
  • Versi premium memungkinkan penyesuaian penuh dari tab Akun Saya serta menambahkan tab khusus.

Harga

Ini adalah plugin freemium. Ini memiliki versi gratis dengan fitur dasar dan empat paket premium yang dimulai dari 29 USD per tahun.

2) Penguat

sesuaikan halaman akun saya woocommerce - booster untuk woocommerce Booster adalah jawaban lengkap untuk menyesuaikan halaman WooCommerce tanpa perlu pengkodean. Plugin ini hadir dengan berbagai modul untuk membantu Anda mengedit berbagai fitur dan halaman WooCommerce. Ini juga termasuk halaman Akun Saya. Anda dapat dengan mudah mengubah titik akhir tab sehingga mengklik tab akan membawa Anda ke halaman mana pun yang Anda tentukan.

Selain itu, Anda dapat menambahkan halaman khusus dan bahkan menyesuaikan halaman dan tab tertentu. Misalnya, Anda dapat menyesuaikan pesan dasbor dan bahkan mengizinkan pelanggan Anda untuk mengubah status pesanan secara manual dari tab pesanan mereka. Jika Anda mencari solusi lengkap untuk menyesuaikan Halaman Akun Saya, Booster jelas merupakan jawaban yang bagus.

Fitur utama

  • Semua dalam satu plugin untuk menyesuaikan halaman, fungsi, dan template WooCommerce.
  • Penyesuaian titik akhir tab untuk halaman Akun Saya.
  • Menyediakan opsi untuk kustomisasi tab dasbor.
  • Tambahkan tab Kustom serta ganti nama, gaya, dan susun ulang tab Akun Saya.

Harga

Booster memiliki versi gratis dengan fitur terbatas dan empat paket premium yang dimulai dari 99,99 USD per tahun.

3) Sesuaikan Akun Saya untuk WooCommerce

sesuaikan halaman akun saya woocommerce - sesuaikan akun saya Kustomisasi Akun Saya untuk WooCommerce adalah opsi premium untuk menyesuaikan dan mempersonalisasi halaman Akun Saya seperti yang Anda inginkan. Dengan alat ini, Anda dapat mengedit dan menambahkan titik akhir sebanyak yang Anda inginkan. Anda dapat mengganti nama, menyusun ulang, dan menyesuaikan semua tab Anda menggunakan penyesuai langsung. Selain itu, Anda dapat dengan bebas mengubah label tab, menambahkan ikon, dan bahkan memasukkan konten khusus ke tab Anda tanpa perlu pengkodean apa pun.

Selain itu, plugin ini menyertakan opsi pengeditan yang kuat bersama dengan penyesuai langsung untuk mempersonalisasi halaman Akun Saya Anda. Anda dapat mengubah ukuran dan warna font, gambar latar belakang, warna, dan padding, dan margin. Anda juga dapat menambahkan kode CSS khusus Anda sendiri untuk melakukan penyesuaian ke tingkat yang sama sekali baru.

Fitur utama

  • Mudah digunakan dan terintegrasi penuh dengan penyesuai Langsung.
  • Kustomisasi penuh semua tab dan titik akhir di bawah halaman Akun Saya.
  • Opsi untuk mengubah label tab, menambahkan konten khusus, gambar, dan ikon tab.
  • Mendukung kode CSS khusus untuk penyesuaian tambahan.

Harga

Kustomisasi Akun Saya untuk WooCommerce adalah plugin premium yang akan membuat Anda membayar 49 USD per tahun.

Menyesuaikan Halaman Akun Saya menggunakan WooCommerce StoreCustomizer

Sekarang, mari kita lihat cara menggunakan StoreCustomizer untuk menyesuaikan halaman Akun Saya WooCommerce Anda. Versi gratisnya memungkinkan Anda untuk mengedit nama tab atau mengubah gaya tab, sementara untuk menambahkan tab baru Anda memerlukan paket pro. Bahkan jika Anda memilih plugin yang berbeda, bagian ini akan membantu Anda memiliki gagasan yang lebih baik tentang cara menggunakan plugin untuk menyesuaikan halaman Akun Saya.

Pertama, mari kita instal plugin StoreCustomizer . Buka Dasbor Admin WordPress Anda dan buka Plugin > Add New. Kemudian, gunakan bilah pencarian di kanan atas untuk mencari StoreCustomize r. Klik Instal dan kemudian Aktifkan . Sekarang, plugin harus diaktifkan dan diinstal.

Untuk mulai menyesuaikan halaman Akun Saya, buka WooCommerce > StoreCustomizer .

sesuaikan halaman akun saya woocommerce - buka penyesuai toko Ini akan membuka antarmuka plugin dan memberi Anda semua opsi penyesuaian yang ditawarkan plugin. Saat kita akan menyesuaikan halaman Akun Saya, tekan tombol Sesuaikan Pengaturan Anda di bagian bawah halaman.

sesuaikan halaman akun saya woocommerce - sesuaikan pengaturan Anda

Menggunakan StoreCustomizer

Ini akan membuka jendela Penyesuai Langsung dan Anda seharusnya dapat melihat tab Penyesuai Toko pada menu. Klik di atasnya dan kemudian pergi ke tab Halaman Akun di bawahnya.

sesuaikan halaman akun saya woocommerce - plugin toko penyesuai langsung Sekarang, mari kita mulai mengedit Halaman Akun Saya. Pertama, mari kita ubah opsi gaya tab. Klik pada opsi Desain Tab Akun dan ubah menjadi Penataan Horizontal atau Penataan Tab Samping.

sesuaikan halaman akun saya woocommerce - opsi tab penyesuai toko Kami juga dapat memilih untuk menghapus tab atau mengganti namanya , jadi mari ganti nama tab Alamat menjadi Alamat Pengiriman dan hapus tab Unduhan.

Mengganti nama tab halaman Akun Saya menggunakan Penyesuai Toko

Untuk mengganti nama, buka tab yang ingin Anda ganti namanya dan klik Edit teks Tab . Kemudian, cukup masukkan teks Tab baru yang Anda inginkan di bidang judul Tab, dan itu akan muncul di jendela kustomisasi langsung yang tepat. Anda juga dapat memilih untuk mengubah judul Halaman yang muncul saat Anda mengklik Tab. Cukup ubah Teks di bawah Judul Halaman, dan itu harus dilakukan.

sesuaikan halaman akun saya woocommerce - ubah teks tab

Menghapus tab halaman Akun Saya menggunakan Penyesuai Toko

Untuk menghapus tab, cukup klik tombol Hapus Tab di bawah Tab yang ingin Anda sembunyikan. Misalnya, jika Anda ingin menghapus tab Unduhan, cukup pilih opsi Hapus Tab di bawahnya.

sesuaikan halaman akun saya woocommerce - hapus tab

Ingatlah bahwa Anda dapat mengatur ulang perubahan tab Anda kapan saja. Dengan mengklik ikon reset di bawah tab, Anda dapat mengatur tab Akun Saya kembali ke default.

sesuaikan halaman akun saya woocommerce - setel ulang tab Sekarang, kami sarankan Anda melanjutkan dan menyesuaikan tab halaman Akun Saya WooCommerce Anda sebanyak yang Anda inginkan dan mengedit tab Anda. Namun, jika Anda ingin menambahkan tab dan titik akhir baru, Anda harus membeli versi premium StoreCustomizer . Proses untuk menambahkan tab baru identik, dan Anda cukup membuka layar penyesuaian untuk melakukannya.

Anda juga dapat merujuk ke dokumentasi plugin untuk memanfaatkan plugin dan seluruh jajaran kustomisasi WooCommerce. Setelah Anda selesai menyesuaikan halaman Akun Saya, jangan lupa untuk mengklik Publikasikan di bagian atas layar penyesuai untuk menyimpan perubahan Anda.

sesuaikan halaman akun saya woocommerce - terbitkan

Meskipun opsi untuk menyesuaikan halaman Akun Saya menggunakan plugin lebih mudah dan lebih ramping, sebagian besar plugin membutuhkan biaya yang cukup besar untuk menyediakan berbagai fitur kepada Anda. Jadi, jika Anda ingin memaksimalkan halaman Akun Saya tetapi Anda memiliki anggaran terbatas, coding solusi Anda sendiri adalah alternatif yang bagus.

Mari kita lihat bagaimana Anda dapat menyesuaikan halaman Akun Saya WooCommerce Anda secara terprogram .

2) Sesuaikan Halaman Akun Saya di WooCommerce Secara Terprogram

Jika Anda memiliki keterampilan pengkodean, Anda juga dapat menyesuaikan halaman Akun Saya secara terprogram dengan mengedit file template WooCommerce atau menggunakan kait WooCommerce . Sebelum Anda mulai, kami sangat menyarankan Anda membuat tema anak atau menggunakan salah satu plugin ini dan membuat cadangan lengkap untuk instalasi WordPress Anda.

Untuk demonstrasi kami, kami akan menunjukkan cara menyesuaikan halaman Akun Saya Anda secara terprogram menggunakan kait WooCommerce. Ini tidak memerlukan pengeditan file template Anda sehingga ada lebih sedikit kemungkinan untuk merusak sesuatu.

Namun, jika Anda menginginkan lebih banyak opsi untuk menyesuaikan halaman Akun Saya dengan sedikit pengkodean, lihat panduan lengkap kami tentang cara mengedit halaman Akun Saya secara terprogram. Untuk informasi lebih lanjut tentang cara menyesuaikan template, lihat tutorial ini.

Menyesuaikan Halaman Akun Saya di WooCommerce menggunakan kait WooCommerce

Jika Anda tidak terbiasa dengan kait WooCommerce, kami sarankan Anda melihat panduan kami tentang kait WooCommerce untuk lebih memahami cara kerjanya. Setelah itu, cukup ikuti langkah-langkah berikut untuk menyesuaikan dan melakukan perubahan pada halaman Akun Saya.

Untuk memulai prosesnya, di Dasbor Admin WordPress Anda, buka Appearance > Theme Editor untuk buka editor tema Anda.

Kemudian, buka file functions.php pada daftar File Tema di sidebar kanan. Sekarang, dengan menggunakan editor, Anda dapat menambahkan fungsi khusus ke file fungsi tema anak Anda.

sesuaikan halaman akun saya woocommerce - fungsi editor tema

Mengganti nama tab menggunakan WooCommerce Hooks

Untuk mengganti nama tab menggunakan kait WooCommerce, tambahkan skrip berikut ke file functions.php Anda. Skrip ini akan mengganti nama tab Alamat Anda menjadi Alamat Anda tetapi Anda dapat mengedit skrip dan menggunakan nama yang Anda inginkan.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_acc_adress_tab', 9999 );
function QuadLayers_rename_acc_adress_tab( $items ) {
$items['edit-address'] = 'Alamat Anda';
kembalikan $item;
} 

sesuaikan halaman akun saya woocommerce - tambahkan kait

Kemudian simpan perubahan dan periksa frontend untuk melihat perubahan.

sesuaikan halaman akun saya woocommerce - alamat Anda Anda juga dapat mengedit skrip ini dan mengubah salah satu nama tab Anda. Untuk melakukan ini, cukup ubah nama array $items . Anda dapat melihat daftar lengkap slug yang tersedia untuk array $items di sini.

 $item = array(
'dasbor' => __( 'Dasbor', 'woocommerce' ),
'pesanan' => __( 'Pesanan', 'woocommerce' ),
'downloads' => __( 'Downloads', 'woocommerce' ),
'edit-address' => _n( 'Alamat', 'Alamat', (int) wc_shipping_enabled(), 'woocommerce' ),
'metode pembayaran' => __( 'Metode pembayaran', 'woocommerce' ),
'edit-akun' => __( 'Detail akun', 'woocommerce' ),
'customer-logout' => __( 'Logout', 'woocommerce' ),
);

Misalnya, jika Anda ingin mengganti nama tab Pesanan menjadi Pesanan Anda , Anda dapat mengubah baris ketiga skrip menjadi $items['orders'] = 'Pesanan Anda'. Anda juga perlu mengubah nama filter menjadi QuadLayers_rename_orders_tab agar fungsi baru Anda tidak sama dengan nama di atas. Jadi, dengan perubahan ini, skrip baru Anda akan menjadi:

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_rename_orders_tab', 9999 );
function QuadLayers_rename_orders_tab( $items ) {
$items['orders'] = 'Pesanan Anda';
kembalikan $item;
}

Dengan cara ini, Anda dapat mengedit file functions.php dan mengganti nama semua tab Anda. Setelah Anda puas dengan perubahannya, klik Perbarui File dan Anda siap melakukannya.

Menghapus Tab menggunakan kait WooCommerce

Selain mengganti nama tab, Anda juga dapat menghapus tab di halaman Akun Saya menggunakan fungsi unset() dengan array $items. Misalnya, untuk menghapus tab Detail Akun , Anda perlu menggunakan skrip berikut.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_acc_tab', 999 );
function QuadLayers_remove_acc_tab( $items ) {
unset($items['edit-akun']);
kembalikan $item;
} 

sesuaikan halaman akun saya woocommerce - tambahkan kait untuk dihapus

Simpan perubahan dan kemudian periksa frontend. Anda akan melihat bahwa tab Detail akun tidak ada di sana.

Dengan menggunakan skrip yang sama, Anda dapat menyesuaikannya dan menghapus tab apa pun yang Anda inginkan. Misalnya, jika Anda ingin menyembunyikan tab unduhan, Anda harus mengubah nama fungsi dan larik item dari $items['edit-account'] menjadi $items['downloads']. Jadi sekarang skrip baru Anda akan menjadi seperti ini.

 add_filter( 'woocommerce_account_menu_items', 'QuadLayers_remove_download', 9999 );
function QuadLayers_remove_downloads( $items ) {
unset( $items['downloads'] );
kembalikan $item;
}

Kemudian, klik Perbarui File untuk menerapkan perubahan. Ini hanya beberapa hal yang dapat Anda lakukan untuk menyesuaikan halaman Akun Saya di WooCommerce tetapi Anda tidak hanya terbatas pada menghapus dan mengganti nama. Anda juga dapat menggabungkan tab, membuat tab yang disesuaikan, dan banyak lagi. Untuk mempelajari cara memaksimalkan halaman Akun Saya secara terprogram, kami sangat menyarankan Anda mengikuti panduan langkah demi langkah kami.

Kesimpulan

Dan itu menyimpulkan panduan kami tentang cara menyesuaikan halaman Akun Saya WooCommerce . Ini akan membantu Anda meningkatkan pengalaman pelanggan dan menonjol dari pesaing Anda.

Adapun rekomendasi kami tentang metode mana yang digunakan untuk mengedit halaman Akun Saya, itu tergantung pada kebutuhan dan keterampilan Anda. Jika Anda tidak memiliki keterampilan coding atau tidak ingin mengedit file template tema Anda, plugin adalah pilihan terbaik Anda. Alternatif ini lebih nyaman dan ramah bagi pemula. Selain itu, Anda memastikan bahwa Anda tidak akan merusak apa pun di instalasi WordPress Anda menggunakan fungsi dan templat khusus.

Dalam posting ini, kami telah menunjukkan kepada Anda beberapa dari 3 plugin terbaik untuk mengedit halaman Akun Saya. Jika Anda ingin melihat beberapa opsi lain, lihat posting ini. Di sisi lain, jika Anda tahu cara membuat kode dan menginginkan fleksibilitas penuh, Anda dapat menyesuaikan halaman Akun Saya secara terprogram. Untuk ini, Anda dapat mengganti file template WooCommerce default atau menggunakan kait WooCommerce.

Dalam panduan ini, kami telah menunjukkan kepada Anda cara menggunakan kait tetapi jika Anda menginginkan informasi lebih lanjut tentang cara menyesuaikan halaman Akun Saya dengan skrip khusus, kami sangat menyarankan Anda untuk melihat tutorial ini.

  • Cara menyesuaikan Halaman Toko di WooCommerce
  • Sesuaikan tombol Tambahkan ke Keranjang di WooCommerce
  • Cara mengedit WooCommerce Checkout (Coding & Plugin)
  • Cara Menyesuaikan Halaman Produk WooCommerce di Divi

Terakhir, terlepas dari metode yang Anda pilih, beri tahu kami di komentar jika Anda memiliki masalah dalam menyiapkan halaman Akun Saya.