Cara Menambahkan Halaman Checkout Ikon Pembayaran WooCommerce Kustom

Apakah Anda ingin menambahkan ikon Gerbang Pembayaran WooCommerce khusus untuk halaman checkout? Dalam posting ini, saya akan menunjukkan cara cepat menambahkan ikon pembayaran khusus ke halaman checkout WooCommerce. Artikel ini berisi deskripsi terperinci tentang langkah-langkah untuk menambahkan ikon Gateway Pembayaran WooCommerce dengan cepat ke halaman checkout.

Mengedit File Tema Anda Tidak Selalu Cara Aman untuk Menyesuaikan WooCommerce – Saya meringankan beban Anda untuk menambahkan ikon pembayaran di mana saja di situs Anda dengan membuat plugin Ikon Pembayaran WooCommerce yang dapat Anda temukan di sini.

Plugin ini hadir dengan cara mudah untuk menambahkan ikon SVG dengan lebih dari 65+ tombol metode pembayaran! Anda juga dapat mengunggah spanduk pembayaran jika Anda tidak menyukai SVG dan Anda juga dapat menggunakan kode pendek untuk menunjukkan pembayaran yang diterima di mana saja di toko WooCommerce Anda. Lihat di sini saat ini dengan harga diskon.

Jika Anda menjalankan toko WooCommerce, Anda mungkin akrab dengan kumpulan ikon kartu kredit default. Bagi sebagian orang, ikon tersebut mungkin terlihat baik-baik saja, tetapi jika Anda membukanya di layar resolusi tinggi, ikon tersebut mungkin tampak agak buram. Selain itu, mereka terlihat agak ketinggalan jaman.

Jika Anda mencari desain khusus dan jelas yang dapat Anda terapkan, maka artikel ini akan memandu Anda. Idealnya, desain ikon terbaik adalah menambahkan bentuk tombol lengkung khusus yang memiliki bayangan jatuh palsu.

Ikon Gerbang Pembayaran WooCommerce Kustom

Dalam kebanyakan kasus, Anda ingin menambahkan ikon resolusi tinggi yang berskala baik pada perangkat seluler dan tampak hebat. Ada berbagai sumber di mana Anda dapat memperoleh ikon pembayaran ini – misalnya pasar desain kreatif menawarkan berbagai ikon metode pembayaran gratis dan premium seperti ikon metode pembayaran yang ditetapkan di Pixeden yang dapat Anda unduh dan gunakan di toko WooCommerce Anda.

Untuk tutorial sederhana ini, kita akan menggunakan ikon yang memiliki tampilan modern. Solusi terbaik adalah menggunakan ikon SVG untuk resolusi sempurna di layar mana pun.- Kami mempermudah Anda menggunakan tutorial SVG di plugin WC PayIcons kami yang membantu Anda menambahkan ikon pembayaran di mana saja di toko WooCommerce Anda. Jika Anda melakukan pencarian cepat di internet, Anda akan menemukan sejumlah besar ikon kartu kredit yang dapat Anda terapkan di halaman checkout dan bahkan footer toko WooCommerce Anda. Namun, yang menonjol bagi saya tersedia di Dribble.

Selain itu, mereka memiliki desain yang menyenangkan yang akan disukai pengguna. Ikon-ikon ini menambah rasa percaya pada halaman checkout Anda, karena orang-orang menjadi lebih berhati-hati saat melakukan pembelian online. Ini adalah ikon yang akan kita gunakan:

Selain itu, yang tersedia di Dribble adalah gambar metode pembayaran yang sudah dikenal pengguna, misalnya VISA, MasterCard, PayPal, dan AMEX.

Ini akan membantu membuat presentasi yang lebih andal dan dapat dipercaya, menarik perhatian pengunjung pertama kali. Namun, Anda juga dapat memeriksa lebih lanjut jika gateway pembayaran Anda mencakup perusahaan yang berbeda.

Sejujurnya, hanya beberapa artikel di internet yang mencoba menunjukkan kepada Anda cara menambahkan ikon Gateway Pembayaran WooCommerce kustom menggunakan kait dan filter. Artikel ini mencoba membantu Anda menambahkan ikon masing-masing gateway pembayaran default WooCommerce ke apa pun yang Anda inginkan.

Karena itu, beberapa toko WooCommerce hanya menerima pembayaran Visa dan MasterCard dan mereka tidak ingin menampilkan ikon untuk Gateway Pembayaran WooCommerce lainnya seperti American Express, agar tidak membingungkan pelanggan.

Menambahkan Ikon Metode Pembayaran Halaman Checkout WooCommerce

Anda dapat menggunakan kode yang sama yang telah kami bagikan di bawah ini untuk semua ikon Gerbang Pembayaran WooCommerce, tetapi Anda hanya perlu menemukan ikon khusus untuk kartu kredit yang Anda gunakan untuk menerima pembayaran di toko online Anda.

Untuk menambahkan Ikon Gateway Pembayaran WooCommerce kustom, kita perlu memfilter fungsi woocommerce_gateway_icon , yang kemungkinan besar tersedia di setiap ekstensi gateway. Anda perlu menambahkan kode berikut di file functions.php:

 // Tambahkan Ikon Kartu Kredit Kustom ke Halaman Checkout WooCommerce 

add_filter('woocommerce_gateway_icon', 'njengah_custom_woocommerce_icons');

function njengah_custom_woocommerce_icons() {

    $ikon = '<img src="icons-url" alt="stripe" />';

     kembali $ikon;

}

Namun, Anda perlu mengganti URL gambar tergantung pada lokasi gambar ikon pembayaran di situs Anda.

Anda dapat mengunggah ikon ke folder media WordPress kemudian mengganti icons-url dalam kode dengan jalur gambar masing-masing seperti yang ditunjukkan pada gambar di bawah ini:

Kesimpulan

Anda dapat dengan cepat menambahkan ikon pembayaran di halaman checkout toko WooCommerce Anda menggunakan filter dalam cuplikan kode di atas dan mengunggah ikon ke galeri media Anda. Jika Anda tidak ingin mengacaukan kode atau Anda adalah pengembang tema WooCommerce yang ingin memperluas filter ini dan memberi pengguna lebih banyak opsi, saya telah Anda bahas dalam solusi terbaik saya.

Saya membuat plugin ikon pembayaran terbaik yang hadir dengan fungsi kode pendek dan memungkinkan pengguna untuk menambahkan ikon di halaman checkout gateway pembayaran, di widget footer, dan di mana pun menggunakan kode pendek sederhana. - periksa di sini . Plugin ini mendukung penggunaan SVG yang merupakan solusi hebat untuk menyesuaikan ikon pembayaran agar sesuai dengan tema atau skema warna situs Anda. Dengan plugin WC PayIcons Anda dapat mengunggah ikon langsung dari halaman gateway pembayaran masing-masing seperti yang ditunjukkan di bawah ini:

Artikel Serupa

1. Cara Mengubah Ikon PayPal Di Halaman Checkout WooCommerce
2. Cara Redirect ke Keranjang setelah Login di WooCommerce
3. Cara Menyembunyikan Produk di WooCommerce atau Menyembunyikan Produk berdasarkan Kategori atau Peran
4. Ubah Lanjutkan Ke Teks Checkout Di WooCommerce
5. Cara Menyembunyikan Bilah Admin untuk Pelanggan WooCommerce atau Berdasarkan Peran Pengguna
6. Cara Mengatur Produk Unggulan Di WooCommerce
7. Cara Menyembunyikan Subtotal Keranjang Di WooCommerce atau Menghapus Baris Subtotal
8. Cara Mendapatkan Nama Kategori Produk Saat Ini di WooCommerce
9. Cara Mengganti Stok Teks yang Habis di WooCommerce
10. Cara Mengubah Teks Tombol Checkout di WooCommerce [Tempatkan Pesanan]
11. 30+ Plugin WooCommerce Terbaik untuk Toko Anda (Sebagian besar GRATIS)
12. Cara Menambahkan Ikon Hapus ke Halaman Checkout WooCommerce
13. Cara Melewati Keranjang dan Mengarahkan Kembali ke Halaman Checkout WooCommerce
14. Cara Menghapus Telah Ditambahkan ke Keranjang Anda Pesan WooCommerce
15. Cara Mengubah Pemberitahuan 'Ditambahkan ke Keranjang' WooCommerce
16. Cara Menampilkan Teks Ketersediaan Stok di WooCommerce »In Stock & Out
17. Cara Memindahkan Deskripsi Di Bawah Gambar di WooCommerce