Cara menyesuaikan tombol Tambahkan ke Keranjang di WooCommerce

 add_action( 'woocommerce_single_product_summary', 'QL_add_text_above_add_to_cart', 20 );
fungsi 'QL_add_text_above_add_to_cart'() {
  echo 'garansi uang kembali 14 hari';
}

Di sisi lain, Anda juga dapat menambahkan teks di bawah tombol Tambahkan ke Keranjang . Ini dapat berguna untuk memberi tahu pembeli bahwa mungkin ada diskon untuk pembelian dalam jumlah besar misalnya. Untuk menambahkan teks di bawah tombol Tambahkan ke Keranjang, Anda dapat menggunakan cuplikan kode ini:

 add_action( 'woocommerce_after_add_to_cart_button', 'QL_add_text_under_add_to_cart' );
fungsi QL_add_text_under_add_to_cart() {
  echo 'Hubungi kami untuk pembelian grosir';
} 

Seperti yang Anda lihat, ini adalah perubahan yang sangat mudah yang dapat Anda lakukan untuk meningkatkan tingkat konversi Anda dalam waktu singkat.

3) Ubah warna tombol Tambahkan ke Keranjang

Sekarang, mari kita lihat cara mengedit tombol Add to Cart dengan mengubah warnanya. Meskipun sebagian besar tema WordPress dan WooCommerce hadir dengan warna default untuk tombol, Anda harus memastikan bahwa warnanya cocok dengan gaya toko Anda.

Untuk menyesuaikan warna tombol Tambahkan ke Keranjang di WooCommerce, Anda perlu menambahkan cuplikan kode CSS ke file style.css . Anda dapat mengaksesnya dengan klien FTP atau dari dasbor WordPress dengan membuka Appearance > Customize > Additional CSS . Di sini ada dua opsi:

1. Ubah warna tombol Tambahkan ke Keranjang pada Produk Tunggal
2. Ubah warna tombol Tambahkan ke Keranjang di Halaman Arsip

3.1) Ubah warna pada Produk Tunggal

Tempelkan kode ini di file style.css dan ubah warnanya menjadi yang Anda inginkan. Dalam hal ini, kita akan memiliki latar belakang merah dan teks perak.

 .produk tunggal .produk .single_add_to_cart_button.button {
warna latar: #FF0000;
warna: #C0C0C0;
}

3.2) Ubah warna tombol Tambahkan ke Keranjang di Halaman Arsip

Untuk menyesuaikan tombol Tambahkan ke Keranjang dan mengubah warnanya di Halaman Arsip WooCommerce, gunakan kode ini dan ubah Kode Hex menjadi kode yang sesuai untuk toko Anda.

 .woocommerce .produk .add_to_cart_button.button {
warna latar: #FF0000;
warna: #C0C0C0;
} 

4) Hapus tombol Tambahkan ke Keranjang dan tambahkan tombol Pembelian Langsung di Halaman Toko

Sekarang, mari kita lihat opsi yang lebih canggih. Memiliki proses pembelian dengan beberapa langkah meningkatkan kemungkinan pembeli berhenti di setiap tahap. Itulah mengapa memperpendek corong adalah cara yang bagus untuk mengoptimalkan proses pembayaran dan meningkatkan rasio konversi.

Di bagian ini, kami akan menunjukkan cara menghapus tombol Tambahkan ke Keranjang dan menggantinya dengan pembelian langsung menggunakan Direct Checkout for WooCommerce . Plugin ini memiliki versi gratis dan premium dan dilengkapi dengan banyak fitur untuk membantu Anda menyederhanakan checkout. Selain itu, ini memungkinkan Anda untuk melewati halaman keranjang dan mengarahkan pengguna langsung ke halaman checkout , membuat proses pembelian menjadi lebih singkat. Jadi, mari kita lihat cara menghilangkan tombol Add to Cart sepenuhnya dan menggantinya dengan tombol beli langsung.

Ubah fungsi tombol Tambahkan ke Keranjang

Pertama, Anda perlu menginstal dan mengaktifkan Direct Checkout. Anda dapat mengunduh versi gratis dari tautan ini atau melihat salah satu paket premium mulai dari 19 USD (pembayaran satu kali).

Setelah mengaktifkan plugin, di dashboard WordPress Anda, buka WooCommerce > Direct checkout > General dan isi opsi sebagai berikut:

Untuk informasi lebih lanjut tentang cara menyesuaikan halaman toko WooCommerce, lihat panduan lengkap ini.

Ubah teks tombol Tambahkan ke Keranjang

Setelah mengatur opsi di tab Umum, tombol Tambahkan ke Keranjang akan mengarahkan pengguna ke halaman checkout. Namun, Anda juga harus mengedit teks tombol karena Anda telah mengubah fungsinya. Tombol tidak lagi menambahkan produk ke troli, jadi lebih baik mengubahnya menjadi sesuatu seperti Beli sekarang, misalnya. Untuk melakukannya, buka tab Arsip dan isi opsi sebagai berikut: Di sini Anda dapat mengubah teks tombol untuk jenis produk tertentu. Kami akan menerapkan perubahan ke semua jenis produk dengan memilih semuanya di bidang yang sesuai. Setelah itu, saatnya untuk memeriksa ujung depan.

Seperti yang Anda lihat, kami telah menyesuaikan tombol Tambahkan ke Keranjang di toko WooCommerce kami dan mengganti tombol Tambahkan ke Keranjang dengan tombol Beli sekarang yang akan membawa pelanggan dari halaman toko langsung ke halaman checkout. Selain itu, kami telah sepenuhnya menghapus fungsi keranjang dari toko kami.

Untuk informasi lebih lanjut tentang cara menghapus tombol Tambahkan ke Keranjang, lihat panduan langkah demi langkah ini.

5) Sesuaikan tombol Tambahkan ke Keranjang dan tambahkan tombol Pembelian Langsung di Halaman Produk

Terakhir, kita dapat melakukan hal serupa dan menyesuaikan tombol Tambahkan ke Keranjang untuk mengarahkan pengguna dari halaman produk ke kasir .

Dengan cara ini, Anda dapat dengan mudah membuat tombol Tambahkan ke Keranjang khusus di WooCommerce di halaman Toko dan Produk. Dan bagian terbaiknya adalah Anda dapat memiliki tombol yang berbeda di setiap halaman.

Cara menyesuaikan pesan yang Ditambahkan ke troli

Selain menyesuaikan tombol, Anda juga dapat mengedit pesan Ditambahkan ke Keranjang. Cara termudah untuk melakukannya adalah dengan mengubah pesan dengan menempelkan skrip berikut ke file functions.php .

 add_filter( 'wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message' );
fungsi quadlayers_custom_add_to_cart_message() {
   $message = 'Produk Anda telah ditambahkan ke keranjang. Terima kasih telah berbelanja dengan kami!' ;
   kembalikan $pesan;
}

Dalam hal ini, kami mengubah pesan menjadi Produk Anda telah ditambahkan ke keranjang Anda. Terima kasih telah berbelanja dengan kami!

Agar lebih personal, Anda bisa menampilkan nama produk yang baru saja ditambahkan pelanggan ke troli sebagai berikut:

 add_filter( 'wc_add_to_cart_message', 'quadlayers_custom_wc_add_to_cart_message', 10, 2 ); 
 
function quadlayers_custom_wc_add_to_cart_message( $message, $product_id ) { 
    $message = sprintf(esc_html__('%s telah ditambahkan ke troli Anda. Terima kasih telah berbelanja!','tm-organik'), get_the_title( $product_id ) ); 
    kembalikan $pesan; 
} 

Ini hanya beberapa contoh tetapi masih banyak lagi yang dapat Anda lakukan dan tambahkan tautan dan tombol ke pesan. Untuk informasi lebih lanjut tentang itu, lihat panduan kami tentang cara mengubah pesan Add-to-Cart WooCommerce.

Bonus: Ubah teks tombol Tambahkan ke Keranjang untuk berbagai kategori

Sekarang katakanlah Anda memiliki kategori produk yang berbeda dan Anda ingin memiliki tombol Tambahkan ke Keranjang khusus untuk setiap kategori. Misalnya, Anda mungkin ingin memiliki tombol yang bertuliskan “Beli Sekarang” untuk kategori produk 1 tetapi menampilkan teks “Unduh” untuk kategori 2.

Untuk melakukan ini, Anda harus menggunakan fungsi yang sama yang kita gunakan pada poin 1. add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

Anda perlu mendapatkan kategori setiap produk dan kemudian menggunakan kondisi untuk mengubah teks tergantung pada taksonomi sebagai berikut:

if($category=='category 1'){
return __('Buy Now', 'woocommerce');
}elseif($category=='category 2'){
return __('Download', 'woocommerce');
}else{
return __('Default text', 'woocommerce');
}

Tombol Tambahkan ke Keranjang saya tidak berfungsi. Apa yang dapat saya?

Mungkin ada beberapa alasan mengapa tombol Tambahkan ke Keranjang mungkin tidak berfungsi. Yang paling umum adalah:

• Ketidakcocokan plugin/tema
• Produk dengan informasi yang tidak lengkap
• Masalah dengan cache
• Titik akhir pembayaran
• Tautan permanen
• Masalah Keamanan Mod
• Dan banyak lagi

Untuk mempelajari cara mengatasi setiap masalah ini, lihat panduan kami tentang cara memperbaiki tombol Tambahkan ke Keranjang.

CATATAN

• Pengaturan yang Anda simpan di bagian Arsip pada panel opsi plugin akan diterapkan ke halaman kategori Toko dan Produk dasar, sedangkan pengaturan di bagian Produk hanya akan berlaku untuk halaman Produk.
• Untuk demo ini, kami telah menggunakan tema Storefront tetapi Anda dapat menggunakan tema apa pun yang kompatibel dengan WooCommerce.
• Meskipun sebagian besar tema akan terintegrasi tanpa masalah, beberapa tema dapat mengubah fitur default WooCommerce dan dapat menyebabkan masalah saat menggunakan Direct Checkout.
• Kami telah membahas beberapa fitur dasar Direct Checkout. Untuk fitur yang lebih canggih, lihat paket Premium yang akan membantu Anda membawa toko Anda ke tingkat berikutnya.

Kesimpulan

Secara keseluruhan, menyesuaikan tombol Tambahkan ke Keranjang dapat berdampak besar pada bisnis Anda. Itu sebabnya kami menyarankan Anda menyesuaikannya dengan kebutuhan toko Anda. Dalam panduan ini, Anda telah mempelajari berbagai cara untuk menyesuaikan tombol Tambahkan ke Keranjang baik secara terprogram maupun dengan plugin:

• Ubah teks tombol Tambahkan ke Keranjang
• Tambahkan teks di atas atau di bawah tombol Tambahkan ke Keranjang
• Ubah warna tombol Tambahkan ke Keranjang
• Hapus tombol Tambahkan ke Keranjang dan tambahkan tombol Pembelian Langsung di Halaman Toko
• Sesuaikan tombol Tambahkan ke Keranjang dan tambahkan tombol Pembelian Langsung di Halaman Produk