Cara Mengubah Tidak Ada Produk di Pesan Keranjang

Diterbitkan: 2021-12-25

Bukan rahasia lagi bahwa menyesuaikan toko online Anda memungkinkan Anda untuk menonjol dari pesaing Anda. Ada beberapa hal yang jelas dapat Anda edit seperti halaman produk, halaman toko, halaman keranjang, atau halaman checkout. Namun, hal-hal lain sering diabaikan dan berdampak besar pada situs Anda. Dalam panduan ini, kami akan menunjukkan kepada Anda berbagai cara untuk mengubah pesan “Tidak ada produk di keranjang” .

Kami sebelumnya telah melihat bagaimana Anda dapat menyesuaikan beberapa elemen toko online Anda yang tidak begitu jelas. Misalnya, kami telah melihat bagaimana Anda dapat mengubah pesan kesalahan di kasir atau menampilkan kategori di halaman toko. Hal yang sama terjadi dengan pesan "Tidak ada produk di keranjang". Sebagian besar toko meninggalkan opsi default, jadi dengan mengoptimalkannya, Anda akan menonjol dan mendapatkan keuntungan dari pesaing Anda.

Sebelum kita melihat cara mengubah pesan itu, mari kita lihat apa pesan itu dan mengapa Anda harus mengubahnya.

Apa yang dimaksud dengan pesan “Tidak ada produk di keranjang”?

Saat Anda membuka toko eCommerce untuk pertama kalinya, keranjang Anda akan kosong karena Anda belum menambahkan barang apa pun ke keranjang. Demikian pula, itu juga akan kosong jika Anda menambahkan beberapa item ke troli, tetapi kemudian menghapusnya atau membelinya.

Dalam kasus ini, secara default, Anda akan disambut dengan pesan berikut ketika Anda membuka halaman keranjang: "Keranjang Anda saat ini kosong". Ini biasanya disebut pesan “Tidak ada produk di keranjang”.

Selain melihat peringatan itu di halaman Keranjang, Anda mungkin juga menemukannya di keranjang mini jika Anda telah menambahkan widget keranjang ke area widget mana pun di toko Anda sebagai keranjang mini.

pratinjau mini cart tidak ada produk di cart

Mengapa mengubah pesan "Tidak ada produk di keranjang"?

Mungkin ada beberapa alasan mengapa Anda ingin mengubah pesan ini. Pertama, Anda dapat menyesuaikan teks agar lebih ramah bagi pelanggan Anda. Sebuah teks yang mengatakan “ Keranjang Anda Kosong! Harap pertimbangkan untuk memeriksa produk unggulan kami! ” misalnya, memiliki nada yang lebih hangat daripada nada default. Dengan cara ini, Anda mengundang pengunjung untuk mengunjungi halaman lain di toko Anda. Hanya beberapa toko online yang melakukan ini, jadi Anda juga akan menonjol dari pesaing Anda.

Selain itu, Anda dapat menerjemahkan seluruh toko Anda ke dalam bahasa tertentu tetapi plugin terjemahan Anda mungkin tidak menerjemahkan pesan itu dengan benar. Dalam hal ini, menyesuaikan pesan "Tidak ada produk di keranjang" secara manual memberi Anda kontrol yang lebih baik.

Meskipun memiliki banyak opsi penyesuaian, WooCommerce tidak mengizinkan Anda menyesuaikan pesan ini secara default. Namun, dalam panduan ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat menyesuaikan pesan “Tidak ada produk di troli”.

Bagaimana cara mengubah pesan "Tidak ada produk di keranjang"?

Ada 3 cara utama untuk mengedit pesan ini:

  1. Secara terprogram
    1. Mengedit file function.php
    2. Mengedit file mini-cart.php
  2. Dengan plugin

Di bagian berikut, kita akan melihat semua langkah yang harus Anda ikuti untuk mengubah pesan “Tidak ada produk di troli”. Metode ini melibatkan konfigurasi file WordPress/WooCommerce Anda, jadi kami sarankan untuk membuat cadangan lengkap sebelum memulai.

1.1) Sesuaikan pesan "Tidak ada produk di keranjang" mengedit file functions.php

Untuk metode pertama, kami akan menggunakan hook WooCommerce di file functions.php Anda. Proses ini hanya mengharuskan Anda untuk membuka editor file tema dan menambahkan beberapa baris kode ke file function.php Anda.

Sebelum melanjutkan, kami sarankan Anda membuat tema anak WordPress jika Anda belum memilikinya. Tema anak adalah cara yang bagus untuk menambahkan kait dan skrip khusus ke file tema Anda sambil memastikan Anda dapat membalikkan perubahan kapan saja. Perubahan ini tetap ada meskipun Anda memperbarui tema atau file tema asli. Jika Anda tidak ingin membuatnya secara manual, Anda juga dapat menggunakan salah satu plugin tema anak ini.

Mari kita mulai dengan membuka Dasbor Admin WordPress Anda dan pergi ke Appearance > Theme Editor. Kemudian, klik pada file functions.php di sidebar kanan file Tema seperti yang ditunjukkan di bawah ini.

ubah tidak ada produk di keranjang - file fungsi

Menggunakan editor di tengah, Anda dapat menambahkan skrip berikut ke file functions.php Anda:

 remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'custom_empty_cart_message', 10 );

fungsi custom_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Masukkan Pesan Keranjang Kosong Di Sini', 'woocommerce' ) ) );
gema $html . '</p></div>';
}

[Cuplikan Kode diambil dari sini.]

Cuplikan ini akan menghapus teks WooCommerce Empty Cart default Anda dan menggunakan fungsi lain untuk menambahkan teks khusus. Cukup ganti " Masukkan Pesan Keranjang Kosong Di Sini " dengan teks yang Anda inginkan untuk pesan "Tidak Ada Produk di Keranjang".

Misalnya, jika Anda ingin pesan yang mengatakan " Keranjang Anda saat ini kosong, kami sarankan untuk memeriksa produk unggulan kami!", Anda dapat menggunakan kode ini:

 remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'quadlayers_empty_cart_message', 10 );

fungsi quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Keranjang Anda saat ini kosong, sebaiknya periksa produk unggulan kami!', 'woocommerce' ) ) );
gema $html . '</p></div>';
}

Ingatlah untuk memperbarui file dan Anda akan melihat hasil ini di ujung depan:

ubah tidak ada produk di troli - demo fungsi teks troli kosong

Kami melihat bahwa pesan “Tidak ada produk di troli” juga dapat muncul di troli mini. Mari kita lihat bagaimana mengubahnya.

1.2) Ubah teks "Tidak Ada Produk di Keranjang" yang mengedit file mini-cart.php

Anda juga dapat memilih untuk menyesuaikan pesan “Tidak ada produk di troli” yang muncul di troli mini . Alih-alih menggunakan fungsi untuk ini, Anda cukup mengganti teks keranjang mini kosong di file template WooCommerce Anda.

Untuk melakukan ini, Anda perlu mengonfigurasi file template WooCommerce Anda dengan masuk ke Plugins > Plugin Editor di WP Admin Dashboard Anda.

Kemudian, gunakan opsi Select plugin to edit untuk memilih WooCommerce dan tekan Select . Setelah itu, klik Template > Cart > mini-cart.php di bawah Plugin Files.

tidak mengubah produk di keranjang - plugin keranjang mini woocommerce

Secara default, di bagian bawah keranjang Anda akan melihat baris kode berikut:

 <?php lain : ?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( 'Tidak ada produk di keranjang.', 'woocommerce' ); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_after_mini_cart' ); ?>

Anda cukup mengedit kode ini dengan mengganti teks “ Tidak ada produk di keranjang ” dengan teks khusus. Misalnya, untuk mengubah teks menjadi ' Harap Pertimbangkan Menambahkan Produk Baru ', Anda harus menggunakan kode ini:

 <?php lain : ?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( 'Mohon Pertimbangkan Menambahkan Produk Baru', 'woocommerce' ); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_after_mini_cart' ); ?>

ubah tidak ada produk di troli - teks troli mini khusus

Ingatlah untuk menyimpan perubahan dan kemudian Anda akan melihat perubahan di ujung depan.

tidak mengubah produk di keranjang - teks keranjang mini woocommerce

2. Cara Mengubah pesan “Tidak ada produk di keranjang” dengan plugin

Kami sebelumnya telah menyebutkan bahwa terkadang Anda menerjemahkan toko Anda ke dalam bahasa tertentu tetapi pesan “Tidak ada produk di keranjang” tidak diterjemahkan. Mari kita lihat bagaimana Anda dapat mengubah teks itu dengan plugin terjemahan.

Ada banyak plugin untuk mengaktifkan terjemahan untuk string khusus. Untuk demonstrasi ini, kami akan menggunakan plugin Loco Translate . Ini adalah salah satu plugin terjemahan terbaik untuk WordPress dan memiliki editor terjemahan bawaan di dasbor. Ini bisa sangat nyaman saat menyesuaikan pesan "Tidak ada produk di troli" di toko Anda.

1. Instal dan Aktifkan Plugin

Pertama, instal plugin, dengan masuk ke Plugins > Add New. Masukkan kata kunci untuk plugin, instal, dan aktifkan.

Atau, Anda dapat menginstalnya secara manual. Jika Anda tidak terbiasa dengan proses itu, lihat panduan kami tentang cara menginstal plugin WordPress secara manual.

Setelah Anda mengaktifkan plugin, lanjutkan ke langkah berikutnya.

2. Terjemahkan pesan “Keranjang Anda saat ini kosong”

Sekarang saatnya untuk menerjemahkan beberapa string. Pertama, buka Loco Translate > Plugins di WP Admin Dashboard Anda. Klik WooCommerce pada daftar plugin untuk menampilkan semua string yang tersedia untuk diterjemahkan dan pilih bahasa yang akan Anda terjemahkan.

Anda juga dapat menambahkan bahasa yang diperlukan untuk pesan keranjang Anda dari sini. Cukup klik Bahasa Baru dan tambahkan bahasa yang diinginkan.

ubah tidak ada produk di troli - pilih terjemahan loco bahasa woocommerce

Kemudian, gunakan opsi Filter translations untuk mencari string yang tepat yang ingin Anda terjemahkan. Untuk mengubah teks “Tidak ada produk di keranjang”, cukup ketik “ Keranjang Anda saat ini kosong” . Kemudian, klik teks Sumber pada hasil pencarian dan tambahkan string khusus Anda ke bagian terjemahan.

Misalnya, mari atur terjemahan khusus untuk bahasa Spanyol untuk situs web pengujian kami:

Setelah Anda menyelesaikan terjemahan, tekan Simpan. Sekarang pergi ke ujung depan, ganti bahasa situs Anda dan Anda akan melihat pesan terjemahan baru.

ubah tidak ada produk di keranjang - demo teks terjemahan bahasa Spanyol khusus

3. Terjemahkan pesan “Tidak ada produk di keranjang”

Menggunakan metode yang sama, Anda dapat menerjemahkan string apa pun hanya dengan mencari teks yang ingin Anda ubah. Di bagian ini, kami akan fokus pada string 'Tidak Ada Produk di Keranjang' , tetapi Anda dapat mengatur terjemahan khusus untuk teks Mini-cart atau pesan apa pun yang Anda inginkan.

Seperti yang kita lihat sebelumnya, buka Loco Translate > Plugins > WooCommerce dan pilih bahasa yang ingin Anda terjemahkan stringnya. Kemudian, cari “Tidak ada produk di keranjang”, pilih string, dan tambahkan terjemahan yang diinginkan.

Ingatlah untuk menyimpan perubahan Anda, dan Anda akan melihat hasilnya di bagian depan:

Jika Anda ingin informasi lebih lanjut tentang mengubah bahasa situs Anda, lihat panduan lengkap kami tentang cara mengubah bahasa WordPress.

Bonus: Cara Mengubah teks Lanjutkan ke Checkout

Selain menyesuaikan pesan “Tidak ada produk di keranjang”, ada banyak teks lain yang dapat Anda ubah untuk memaksimalkan setiap titik kontak yang dimiliki pelanggan di toko Anda. Misalnya, Anda dapat mengedit teks tambahan seperti Lanjutkan ke Checkout, pesan Tambahkan ke Keranjang , dan banyak lagi lainnya. Di bagian ini, kami akan fokus pada cara mengubah teks Lanjutkan ke Checkout menggunakan fungsi WooCommerce sederhana.

CATATAN : Karena kami akan mengedit beberapa file inti, sebaiknya buat cadangan lengkap situs Anda dan gunakan tema anak.

Untuk menyesuaikan teks Lanjutkan ke Checkout, kami akan menambahkan beberapa baris kode ke file functions.php . Untuk melakukannya, buka Appearance > Theme Editor dan klik function.php pada sidebar file Theme.

ubah tidak ada produk di keranjang - file fungsi

Sekarang rekatkan kode berikut sambil hanya mengubah bagian " Sisipkan-checkout-teks-sini " dengan pesan khusus Anda.

 fungsi quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="tombol tombol-checkout alt wc-forward">
<?php esc_html_e( 'Sisipkan-Checkout-Teks-Disini', 'woocommerce' ); ?>
</a>
<?php
}

Misalnya, jika Anda ingin pesan mengatakan " Silakan Pindahkan ke Checkout di sini ", gunakan cuplikan berikut:

 fungsi quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="tombol tombol-checkout alt wc-forward">
<?php esc_html_e( 'Silakan Pindahkan ke Checkout Disini', 'woocommerce' ); ?>
</a>
<?php
}

ubah tidak ada produk di troli - ubah fungsi teks checkout

Ini akan memberi Anda hasil ini di ujung depan:

Ini adalah sebuah contoh tetapi masih banyak lagi yang dapat Anda lakukan untuk menyesuaikan teks ini. Untuk informasi lebih lanjut, lihat tutorial kami tentang cara mengubah teks Lanjutkan ke Checkout . Panduan ini menjelaskan mengapa Anda harus mempertimbangkan untuk mengubah teks tersebut serta berbagai cara untuk melakukannya.

Ada lebih banyak penyesuaian yang dapat Anda lakukan di toko Anda. Jika itu sesuatu yang Anda minati, lihat beberapa panduan kami untuk mengoptimalkan checkout WooCommerce, membuat checkout satu halaman, dan bahkan menyesuaikan halaman checkout WooCommerce. Demikian pula, Anda dapat menggunakan plugin seperti WooCommerce Direct Checkout dan WooCommerce Checkout Manager untuk membantu Anda meningkatkan proses checkout.

Kesimpulan

Secara keseluruhan, menyesuaikan pesan “Tidak ada produk di keranjang” memungkinkan Anda untuk mempersonalisasi perjalanan pelanggan Anda dan memberikan pengalaman berbelanja yang lebih baik. Hal ini sering diabaikan oleh sebagian besar pemilik toko, sehingga dapat membantu Anda menonjol dari pesaing dan meningkatkan penjualan Anda.

Dalam panduan ini, kami telah menunjukkan kepada Anda berbagai cara untuk mengubah pesan “Tidak ada produk di keranjang” di WooCommerce:

  • Menyesuaikan file function.php
  • Mengedit file mini-cart.php
  • Dengan plugin

Sekarang Anda seharusnya dapat mengedit pesan dan juga menyesuaikan terjemahan yang hilang.

Sudahkah Anda mengedit teks "Tidak ada produk di keranjang"? Apakah Anda memiliki masalah dalam mengikuti panduan ini? Beri tahu kami di komentar di bawah.

Terakhir, jika Anda ingin mempelajari lebih lanjut tentang cara menyesuaikan lebih banyak elemen toko WooCommerce Anda, lihat beberapa artikel ini:

  • Cara menghapus tab Informasi Tambahan di WooCommerce
  • 3 Metode untuk Menyesuaikan Halaman Keranjang WooCommerce
  • Mengubah Mata Uang di WooCommerce: Panduan Lengkap
  • Cara menyesuaikan Halaman Toko WooCommerce