Cara Menyesuaikan Halaman Checkout Di Toko WooCommerce Anda

Diterbitkan: 2022-09-22

Jika Anda ingin menyesuaikan halaman checkout di toko WooCommerce Anda, maka Anda harus mengikuti langkah-langkah berikut: 1. Masuk ke situs WordPress Anda. 2. Buka Plugin > Tambah Baru. 3. Cari Bidang Checkout Kustom WooCommerce . 4. Instal dan aktifkan plugin. 5. Buka WooCommerce > Bidang Checkout. 6. Di sini Anda dapat menambah, mengedit, atau menghapus bidang. 7. Setelah selesai, klik tombol Simpan Perubahan. Itu dia. Anda telah berhasil menyesuaikan halaman checkout di toko WooCommerce Anda.

Halaman checkout adalah salah satu langkah terpenting dalam menyelesaikan pembelian di toko online. Baik plugin dan secara terprogram dapat digunakan untuk mengedit halaman checkout WooCommerce. Dalam panduan ini, kita akan membahas cara mengedit halaman checkout Anda dua arah. Menggunakan WooCommerce Checkout Manager , Anda dapat menambahkan atau menyembunyikan bidang seperti nama depan dan belakang, nama perusahaan, negara, kota, kode pos, alamat, nomor telepon, alamat email, dan lainnya. Anda juga dapat memodifikasi halaman checkout WooCommerce untuk memungkinkan pelanggan mengunggah semua jenis file selama proses checkout. Jika Anda ingin mengedit halaman checkout di WooCommerce Checkout Manager, ini adalah solusi sederhana. Ini memungkinkan Anda untuk membuat bidang khusus tanpa batas sambil juga menerapkan sebanyak mungkin kondisi yang Anda inginkan.

Di bagian ini, kita akan membahas cara mengedit halaman checkout WooCommerce menggunakan pengkodean. WooCommerce memungkinkan Anda untuk menambahkan konten ke halaman checkout situs web Anda. Untuk melakukan ini, Anda harus dapat mengambil nilai bidang kustom dari database. Anda juga dapat membuat bidang opsional untuk mengedit halaman. Menambahkan bidang bersyarat ke bidang lain akan memungkinkannya muncul atau menghilang berdasarkan nilainya. Anda dapat menambahkan biaya tambahan ke halaman checkout Anda dengan dua cara. Anda juga dapat menambahkan biaya tetap atau persentase ke akun Anda.

Mungkin menguntungkan jika gateway pembayaran tidak terisi penuh atau jika pajak tambahan dikenakan. Informasi lebih lanjut tentang menambahkan biaya ke toko Anda dapat ditemukan di panduan kami. Anda dapat dengan mudah mengedit halaman checkout toko Anda dengan bantuan WordPress, WooCommerce, atau kode pendek khusus apa pun. Sejumlah opsi lain juga dapat digunakan untuk mengubah gaya halaman checkout WooCommerce. Warna latar belakang halaman juga dapat diubah untuk menyertakan gaya CSS khusus. Untuk mengedit halaman ini, Anda dapat menggunakan berbagai kait checkout di WooCommerce. Bahkan perubahan kecil dapat meningkatkan tingkat konversi dan penjualan. Kami telah menunjukkan kepada Anda lima cara berbeda untuk mengedit berbagai aspek checkout dalam contoh kami sebelumnya, tetapi ada opsi tak terbatas. Jika Anda ingin mempersingkat proses checkout, sebaiknya gunakan plugin pembelian cepat untuk WooCommerce atau tautan checkout langsung.

Template dan bagian checkout ini terletak di folder plugin WooCommerce. Folder Woocommerce/template/checkout dapat ditemukan di folder tema, dan Anda dapat menyalin template yang ingin Anda gunakan.

Bisakah Kami Menyesuaikan Halaman Pembayaran Woocommerce?

Kredit: www.checkoutwc.com

Cara paling mudah untuk menyesuaikan bidang checkout adalah dengan menggunakan plugin Editor Bidang Checkout. Plugin ini memudahkan untuk memindahkan, mengedit, menambah, atau menghapus bidang checkout dengan menyediakan UI sederhana untuk melakukannya. Semua bidang, dari jenis hingga label hingga posisi, dapat diedit.

Anda menampilkan halaman checkout kepada pelanggan Anda segera setelah mereka mendaftar ke situs WordPress. Proses checkout harus teratur jika Anda ingin tingkat konversi Anda meningkat secara dramatis. WordPress memiliki dua cara sederhana untuk menyesuaikan halaman checkout WooCommerce. Konten kedua solusi ditulis seluruhnya dalam pembuat situs web yang andal. Langkah pertama Anda untuk menjadi klien SeedProd adalah menggunakan salah satu dari 150 templat halaman arahan yang dirancang secara profesional. Setiap template kemudian dapat dikustomisasi di editor visual menggunakan blok halaman fleksibel seperti berikut: Selain itu, SeedProd memiliki blok halaman arahan WooCommerce, yang mencakup tombol tambahkan ke keranjang, tombol checkout, kisi keranjang belanja, dan deskripsi produk. Menggunakan SeedProd, kami akan menunjukkan cara membuat dan menyesuaikan halaman checkout WooCommerce Anda dari awal.

Dalam pelajaran ini, kami akan menunjukkan kepada Anda bagaimana melakukannya dengan Template Kosong, editor drag-and-drop. Langkah pertama adalah membuat struktur halaman checkout dasar. Setelah itu, klik blok Checkout dan seret ke salah satu kolom. Pada panel blok, klik Bagian untuk melihat bagian. Anda dapat dengan cepat dan mudah menambahkan beberapa tata letak siap pakai ke halaman Anda dengan mengklik satu gambar di sini. Setiap bagian baru di halaman Anda biasanya ditambahkan ke bagian bawah. Arahkan mouse ke bagian yang ingin Anda pindahkan, lalu klik ikon pindahkan bagian.

Saat SeedProd membuat halaman checkout WooCommerce, halaman tersebut dapat dikustomisasi secara global. Anda dapat mengubah font, warna, latar belakang, dan CSS khusus untuk membuat halaman checkout Anda tampak sedikit berbeda. Sangat mudah untuk menautkan halaman arahan Anda ke daftar email Anda jika Anda menggunakan pengaturan pemasaran email. Anda dapat menggunakan Recaptcha untuk memblokir spam agar tidak mengganggu kinerja situs Anda, serta Google Analytics untuk memantau kinerja situs Anda. Jika Anda menggunakan Paket Pro SeedProd, Anda dapat memberikan halaman arahan domain kustom yang tidak terikat ke situs web Anda yang ada. Mode Isolasi menonaktifkan skrip header dan footer tertentu dan dengan demikian membatasi kinerja halaman. Jika Anda memiliki halaman pembayaran yang responsif seluler, situs web Anda akan berkinerja lebih baik di layar sentuh yang lebih kecil seperti tablet dan ponsel cerdas.

Anda harus terlebih dahulu membuat halaman checkout default situs web WooCommerce Anda untuk menggunakannya. Situs web seedprod juga akan menyertakan pembuat tema WooCommerce dan kit situs web bawaannya, menjadikannya pilihan ideal untuk membuat situs WooCommerce lengkap. Menggunakan salah satu metode yang tercantum di atas dapat membantu Anda mengoptimalkan halaman checkout WooCommerce Anda untuk konversi konversi. Pelanggan dapat mengabaikan pembayaran online jika toko Anda hanya mengizinkan beberapa opsi pembayaran. Untuk mengatasi masalah ini, pastikan harga Anda jelas sebelum pengguna tiba di halaman checkout. Tingkat pengabaian checkout dapat meningkat jika pelanggan dipaksa untuk mendaftar akun sebelum check out.

Edit Halaman Pembayaran Woocommerce Php

Kredit: businessbloomer.com

Untuk mengedit halaman checkout WooCommerce, Anda harus mengakses halaman pengaturan WooCommerce dan mengklik tab Checkout. Dari sini, Anda akan dapat memilih opsi Halaman Checkout dan klik tombol Edit. Ini akan membuka halaman checkout di editor WordPress tempat Anda dapat membuat perubahan.

Menyesuaikan halaman checkout Anda di WooCommerce akan meningkatkan tingkat konversi Anda. Dalam 31% kasus, pengabaian keranjang belanja dapat dikurangi dengan mengoptimalkan halaman checkout. Karena halaman checkout adalah rintangan terakhir dalam pembelian, sangat penting untuk dirampingkan sebanyak mungkin. Pelanggan akan dapat menyelesaikan pesanan mereka dengan lebih efisien jika proses checkout Anda disederhanakan. Menurut studi Institut Baymard, hanya ada enam sampai delapan bidang yang diperlukan pada halaman checkout. Pada halaman checkout WooCommerce standar , ada 18 hingga 20 bidang yang harus diisi. Kesalahan dengan label bidang sebaris dapat mempersulit pengisian bidang pada halaman checkout Anda.

Yang terbaik adalah menghapus semua label sebaris dan menempatkannya di atas bidang input. Pengguna akan menemukan pengalaman checkout yang efisien dan bebas kekacauan yang menyenangkan di perangkat seluler mereka. Sekitar 70% pelanggan meninggalkan troli mereka karena biaya pengiriman yang tinggi, proses checkout yang rumit, dan faktor lainnya. Memiliki fitur pemulihan keranjang yang ditinggalkan adalah aspek penting dari setiap toko WooCommerce. Anda akan belajar cara menggunakan plugin CartFlows untuk menambahkan tonjolan pesanan ke halaman checkout WooCommerce. Anda harus masuk sebagai administrator situs untuk mengakses CartFlows. Ada sejumlah template alur yang terlihat di layar ini.

Buat template sendiri atau pilih template yang sudah jadi. Anda dapat menyalin kode pendek dari tab Pengaturan ke halaman checkout. Halaman checkout WooCommerce memiliki 18 – 20 bidang, dengan beberapa di antaranya tidak diperlukan untuk menyelesaikan pesanan. CartFlows memungkinkan Anda untuk menambah atau menghapus bidang dari halaman checkout Anda. Kolom dapat diubah di bagian pengaturan halaman checkout dengan mengklik tab Pengaturan Checkout. Anda dapat mendorong pelanggan untuk membeli versi yang lebih mahal dari produk yang mereka miliki di keranjang mereka dengan menjualnya. Untuk menambahkan penawaran upsell ke alur pembayaran Anda, buka Tambahkan Langkah Baru dan pilih Tambahkan Penawaran Baru.

Pemberitahuan akan memberi tahu Anda bahwa tidak ada produk yang ditetapkan. Disarankan agar Anda menyertakan kolom jika pesanan mendesak. Jika Anda menggunakan alur pembayaran, buka halaman Tambahkan Langkah Baru. Proses checkout akan menjadi lebih mudah sebagai hasil dari langkah ini. Langkah selanjutnya adalah memilih produk dari tautan Edit di daftar produk. Anda harus menurunkan harga produk sebelum dapat melakukan upsell, yang sama dengan melakukan upsell. Ketika Anda menyelesaikan pesanan, halaman checkout akan ditampilkan, di mana Anda akan diminta untuk memasukkan informasi pengiriman dan penagihan Anda.

Di halaman checkout, kait tindakan juga dapat digunakan untuk menghapus elemen. Kode kustom dapat ditambahkan ke WordPress dan WooCommerce dengan menggunakan tindakan yang telah ditentukan. Anda dapat menyesuaikan bidang pada halaman checkout dengan Checkout Manager for WooCommerce, sebuah plugin freemium. Selain itu, plugin menyertakan fitur khusus yang memungkinkan peran pengguna tertentu terlihat atau disembunyikan. Jika Anda mencari plugin yang memungkinkan Anda membagi proses checkout, Anda dapat mencoba WooCommerce Multi-Step Checkout. Anda dapat menyesuaikan halaman checkout toko WooCommerce Anda untuk memenuhi kebutuhan spesifik Anda dengan plugin WooCommerce Multi-Step Checkout. Halaman checkout dipecah menjadi beberapa langkah kecil dan berisi bilah kemajuan di bagian atas.

Di repositori WordPress, ada lebih dari 10.000 instalasi plugin yang terus diperbarui. Plugin WooCommerce Menu Cart memungkinkan Anda untuk menambahkan tombol keranjang ke bilah navigasi situs web berbasis WooCommerce Anda. Filter Produk YITH WooCommerce Ajax memungkinkan pengguna untuk menentukan istilah pencarian produk apa yang ingin mereka gunakan. Pengguna akan dapat mempersempit pencarian mereka dan menemukan apa yang mereka cari lebih cepat, menghasilkan lebih banyak penjualan.

Sesuaikan Plugin Halaman Checkout Woocommerce

Plugin halaman checkout Woocommerce yang baik akan memungkinkan Anda menyesuaikan proses checkout agar lebih sesuai dengan kebutuhan toko Anda. Anda akan dapat mengubah hal-hal seperti tata letak, warna, font, dan bahkan menambahkan bidang khusus Anda sendiri. Ini dapat membuat proses checkout jauh lebih efisien dan efisien, dan juga dapat membantu mengurangi pengabaian keranjang belanja.

Dengan Elementor dan ShopEngine, bisnis eCommerce sekarang dapat menyesuaikan halaman checkout WooCommerce untuk memenuhi kebutuhan spesifik mereka. Bergantung pada jenis perusahaan Anda, Anda harus mengubah halaman checkout WooCommerce untuk memudahkan pelanggan Anda membeli barang. Halaman checkout adalah tempat terbaik untuk mengumpulkan data pengguna yang akan Anda perlukan di masa mendatang untuk strategi pemasaran Anda. Untuk memulai, Anda harus terlebih dahulu menginstal Elementor dan ShopEngine ke situs wooCommerce WordPress Anda. Pengeditan drag-and-drop sederhana dengan ShopEngine, memungkinkan Anda untuk mengubah halaman checkout WooCommerce. Setiap tata letak elemen dapat dikonfigurasi dengan cara apa pun yang Anda inginkan, termasuk penambahan widget. Tidak ada kode khusus atau CSS yang diperlukan untuk membuat template halaman checkout.

Halaman checkout sekarang seharusnya memiliki sekitar 5 langkah, dengan kemajuan atau penyelesaian langkah sebagai cara terbaik untuk menunjukkan langkah-langkah tersebut. Jika Anda belum mengetahuinya, pelanggan Anda seharusnya dapat memberi tahu Anda berapa banyak langkah yang harus dia ambil. Keluarnya pelanggan dari situs biasanya karena dorongan ke halaman lain untuk menyelesaikan pembayaran. Situs e-commerce yang menawarkan upsell dan cross-sell adalah beberapa pilihan terbaik. Jika halaman checkout Anda tidak mobile-friendly, Anda akan kehilangan banyak pelanggan. ShopEngine adalah plugin terbaik untuk menyesuaikan halaman checkout WooCommerce Anda.

Bagaimana Saya Menyesuaikan Plugin Woocommerce?

Anda harus membuat direktori baru di tema anak Anda jika Anda ingin membuat file kustom. Anda harus memasukkannya ke dalam file WP-content/themes/yourthemename/. Perubahan Anda pada WooCommerce atau tema induk Anda tidak akan dihapus setelah pembaruan WooCommerce Anda.

Templat Halaman Pembayaran Woocommerce

Template halaman checkout woocommerce adalah tata letak yang telah dirancang sebelumnya yang dapat digunakan untuk membuat halaman checkout yang disesuaikan untuk toko online Anda. Template ini dapat digunakan untuk mengubah tampilan dan nuansa halaman checkout Anda, serta untuk menambah atau menghapus fitur.

Satu produk di WooCommerce One Page Checkout dapat ditampilkan dengan pilihan produk dan formulir checkout. Setelah pelanggan melakukan pemesanan, mereka dapat menambah atau menghapus produk dan menyelesaikan pembayaran tanpa meninggalkan halaman. Selain itu, Anda dapat menambahkan kode pendek [woocommerce_one_page_checkout] ke halaman, pos, atau jenis pos khusus apa pun. Jika Anda ingin menampilkan produk dalam kategori tertentu, gunakan atribut category_ids [id_kategori]. Produk lain akan tetap muncul, jika satu atau beberapa ID produk yang ditentukan dalam atribut tidak valid. Anda mungkin tidak ingin menampilkan produk apa pun jika Anda menggunakan tombol tambahkan ke troli di luar One Page Checkout. Templat Daftar Produk menampilkan daftar produk dengan tombol radio yang memungkinkan pengguna memilih opsi dari daftar produk.

Gambar produk dapat digunakan sebagai titik referensi yang baik ketika memilih topeng, misalnya, dan template ini sangat ideal untuk menampilkan item yang akan membantu Anda dalam membuat keputusan. Templat Produk Tunggal mampu menampilkan dua atau lebih produk terlepas dari namanya. Tabel harga bawaan menampilkan produk dalam dua hingga lima kolom, dengan judul produk, harga, dan jumlah pesanan ditampilkan di bagian atas. Jika produk dikirim dalam berat atau dimensi yang sama, produk tersebut akan ditampilkan di bagian atas tabel. Atribut taksonomi dan atribut produk khusus akan ditampilkan di tabel harga selain atribut taksonomi. Anda perlu membuat tabel harga WooCommerce dengan mengikuti instruksi Patrick Rauland. Setiap URL tombol harus menyertakan informasi berikut: *product-id *add-to-cart=*product-id Template pemilihan produk Easy Pricing Table menetapkan bahwa parameter shortcode template “easy_pricing_table” harus disetel.

Variabel $products berisi semua elemen yang mewakili objek produk, serta variabel $product. Satu Halaman Checkout mencakup tombol, tombol radio, tombol kotak centang, dan tombol angka selain tombol, tombol radio, tombol kotak centang, dan tombol angka. Agar Anda dapat membuat bidang pilihan produk khusus, Anda harus menyertakan atribut data-add_to_cart di template Anda. Bidang pemilihan produk ditampilkan di bagian WooCommerce One Page Checkout dengan templat khusus. Jika Anda memiliki banyak permintaan, Anda akan memprioritaskan penambahan dukungan. Tidak mungkin untuk menonaktifkan pengguliran otomatis (pemfokusan ulang) yang terjadi saat produk ditambahkan ke troli, tetapi dimungkinkan untuk melakukannya dari menu pengaturan. Kode pendek Satu Halaman Checkout memungkinkan Anda untuk menambahkan bidang checkout ke halaman atau postingan mana pun di halaman atau postingan mana pun.

Anda dapat menambahkan atau menghapus bidang menggunakan ekstensi WooCommerce, seperti Editor Bidang Checkout, atau templat checkout khusus. Setiap produk anak individu dalam wadah produk akan dipisahkan oleh labelnya sendiri. Produk variabel dengan variasi hanya ditampilkan bila digunakan dalam kode pendek selain template Produk Tunggal. Template ini hanya mengizinkan tampilan variasi yang memiliki nilai yang ditetapkan untuk semua atribut. Pelanggan harus melakukan pemilihan karena variasi dengan nilai atribut yang memiliki nilai tidak ditetapkan tidak memiliki ID variasi yang sesuai. Kode pendek Satu Halaman Checkout menampilkan tanda terima serta konfirmasi pembelian. Menggunakan tautan ke halaman checkout khusus Anda, Anda dapat mengganti tautan apa pun di menu Anda atau di tempat lain di situs Anda.

Tambahkan kode pendek ke halaman tempat Anda ingin menautkan produk ke keranjang untuk melakukannya. Pelanggan dapat checkout dari halaman lain menggunakan One Page Checkout, tetapi WooCommerce masih menampilkan informasi tanda terima dan konfirmasi pesanan di halaman checkoutnya. Semua Halaman WooCommerce masih diperlukan untuk menjalankan toko Anda, yang mencakup halaman Keranjang dan Checkout. Pastikan visibilitas produk Anda di katalog tidak disembunyikan. Konten pada halaman harus diantrekan dalam berbagai skrip dan gaya sebelum dimasukkan ke dalam One Page Checkout. Elemen input radio dapat digunakan untuk memilih salah satu dari dua Tabel Harga Mudah yang berisi opsi. Ini menunjukkan bahwa keranjang sedang diisi sebelum menambahkan item baru dari Tabel Harga Mudah atau input radio. Untuk melakukan perubahan ini, gunakan plugin gratis bernama WooCommerce One Page Checkout – Jangan Kosongkan Keranjang.