Cara Menambahkan Tombol Add-to-Cart Kustom di WooCommerce

Ingin mempelajari cara menambahkan tombol add-to-cart khusus di WooCommerce?

Menyesuaikan tombol di toko WooCommerce Anda dapat membantu Anda menarik perhatian, meningkatkan tingkat konversi dan penjualan.

Pada artikel ini, kami akan menunjukkan cara menambahkan tombol add-to-cart khusus di WooCommerce langkah demi langkah.

Mengapa Menyesuaikan Tombol Add-to-Cart WooCommerce Anda?

Mengedit tombol add-to-cart membantu Anda menyelaraskannya dengan produk WooCommerce yang Anda jual. Jika Anda tetap menggunakan tombol keranjang default, itu mungkin sama sekali tidak terkait dengan jenis produk.

Misalnya, Anda mungkin ingin mengubah teks tambahkan ke keranjang dan menggantinya dengan ikon atau kotak centang untuk beberapa produk. Atau, Anda mungkin ingin mengubah warna tombol agar lebih menonjol di situs Anda.

Anda mungkin juga ingin menampilkan tombol keranjang di tempat lain di situs WooCommerce Anda, seperti halaman checkout, kategori, dan halaman keranjang belanja.

Untuk melakukan salah satu hal di atas, Anda memerlukan cara untuk menyesuaikan tombol tambahkan ke troli dengan mudah, dengan sedikit keributan.

Cara Menambahkan Tombol Add-to-Cart Kustom di WooCommerce

Untungnya, kami membagikan 2 metode untuk membuat tombol add-to-cart kustom WooCommerce. Metode pertama menggunakan plugin WordPress yang mudah dan kuat, dan metode kedua menunjukkan cara menyesuaikan tombol keranjang secara manual tanpa plugin.

Metode 1: Tambahkan Tombol Add-to-Cart Kustom dengan SeedProd

Untuk metode pertama, kita akan menggunakan SeedProd, pembuat situs web terbaik untuk WordPress.

Plugin yang kuat ini mencakup pembuat halaman seret dan lepas yang memungkinkan Anda menyesuaikan bagian mana pun dari situs web Anda tanpa kode. Anda dapat membuat tema WordPress khusus, membuat halaman arahan dengan konversi tinggi, dan menyesuaikan tata letak apa pun dengan tunjuk dan klik.

Karena SeedProd menyertakan dukungan WooCommerce, Anda dapat menggunakannya untuk merancang dan meluncurkan seluruh situs WooCommerce tanpa pengembang. Ikuti langkah-langkah di bawah ini untuk menggunakan SeedProd untuk menambahkan tombol add-to-cart khusus ke situs WooCommerce Anda.

Langkah 1. Instal dan Aktifkan SeedProd

Pertama, buka halaman harga SeedProd dan pilih paket SeedProd Anda. Untuk mengakses fitur WooCommerce, Anda memerlukan paket SeedProd Elite .

Selanjutnya, masuk ke akun SeedProd Anda, klik tab Unduhan dan unduh file .zip plugin. Anda juga dapat menyalin kunci lisensi pada halaman yang sama.

Sekarang Anda dapat mengunggah plugin ke situs WordPress Anda. Jika Anda memerlukan bantuan dengan ini, ikuti panduan ini untuk menginstal dan mengaktifkan plugin WordPress.

Setelah menginstal SeedProd, buka halaman SeedProd »Pengaturan dan tempel kunci lisensi yang Anda simpan sebelumnya.

Pastikan Anda mengklik tombol Verify Key sebelum melanjutkan ke langkah berikutnya.

Catatan: SeedProd memungkinkan Anda menambahkan tombol add-to-cart khusus ke WooCommerce dengan 2 cara:

• Menggunakan halaman arahan
• Membuat tema WooCommerce khusus

Untuk tutorial ini, kami akan membuat tema WooCommerce kustom karena ini membuat semua halaman toko WooCommerce Anda secara otomatis.

Langkah 2. Pilih Kit Situs Web

Untuk langkah selanjutnya, navigasikan ke halaman SeedProd » Theme Builder . Di sinilah Anda dapat membangun berbagai bagian tema WooCommerce Anda dan menyesuaikan desain setiap template.

Anda dapat melakukannya dengan membuat setiap bagian dari awal atau menggunakan kit situs web yang sudah jadi. Kami akan memilih opsi kedua karena lebih mudah dan lebih cepat.

Untuk memilih Kit Situs Web, klik tombol Tema .

Di layar berikutnya, Anda akan melihat kit situs web yang tersedia. Kit yang kompatibel dengan WooCommerce akan memiliki "WooCommerce" di sebelah judulnya.

Anda kemudian dapat mengarahkan kursor ke desain yang Anda suka dan klik ikon tanda centang untuk mengimpornya ke Pembuat Tema Anda.

Untuk panduan ini, kami menggunakan Kit Situs Web WooCommerce Toko Tembikar .

Setelah mengimpor Kit Situs Web Anda, Anda akan melihat bagian individual dari tema Anda dalam daftar seperti ini:

SeedProd secara otomatis membuat halaman konten, seperti halaman tentang, keranjang, checkout, dan kontak Anda. Anda dapat melihat halaman-halaman ini dengan membuka Halaman »Semua Halaman dari dasbor WordPress Anda dan menyesuaikannya dengan pembuat halaman drag-and-drop SeedProd.

Mari mulai proses penyesuaian dengan menyesuaikan tombol add-to-cart WooCommerce Anda.

Langkah 3. Sesuaikan Tombol Add-to-Cart Anda

Di bawah ini kami akan menunjukkan kepada Anda cara menambahkan tombol add-to-cart khusus di WooCommerce di halaman Toko, Produk, Arsip Produk, dan Blog Anda.

Menambahkan Tombol Add-to-Cart Halaman Toko Kustom

Pertama, kita akan mulai dengan mengedit halaman toko WooCommerce Anda. Untuk melakukannya, temukan bagian templat Halaman Toko dan klik tautan Edit Desain .

Halaman Toko WooCommerce Anda akan terbuka di pembuat halaman drag-and-drop SeedProd, di mana Anda dapat menyesuaikan desain Anda tanpa kode.

Anda dapat mengklik pratinjau langsung untuk mengedit elemen halaman apa pun dan menyesuaikan pengaturannya. Demikian pula, Anda dapat menyeret blok dari panel sebelah kiri dan menjatuhkannya ke halaman Anda untuk menambahkan lebih banyak konten.

Secara default, templat Halaman Toko menggunakan blok Kisi Produk . Mengkliknya akan menampilkan pengaturan untuk mengontrol tampilan daftar produk Anda.

Misalnya, Anda dapat mengubah jumlah kolom, memfilter produk menurut ID produk, Kueri, atau Jenis, dan mengubah urutan yang ditampilkan.

Anda juga dapat mengeklik tab Lanjutan untuk melihat opsi penyesuaian lainnya, termasuk gaya font, warna, batas, dan lainnya.

Di bawah bagian Buttons, Anda dapat menyesuaikan tombol add-to-cart WooCommerce Anda dengan beberapa klik. Misalnya, di bawah dropdown Gaya Tombol, Anda dapat memilih:

• Datar
• 2D
• Antik
• Hantu
• Tautan

Selain itu, Anda dapat mengubah warna tombol, tipografi, ukuran, dan radius batas.

Bereksperimenlah dengan opsi penyesuaian untuk menemukan tampilan yang sesuai dengan kebutuhan bisnis Anda. Kemudian, tekan tombol Simpan di sudut kanan atas untuk menyimpan perubahan Anda, dan klik ikon X untuk kembali ke Pembuat Tema.

Mengubah Tombol Add-to-Cart Halaman Produk

Sekarang mari kita lihat menyesuaikan tombol tambahkan ke troli pada halaman produk tunggal. Anda harus menemukan templat Halaman Produk dan mengklik tautan Edit Desain untuk membukanya.

Kali ini, Anda akan melihat detail produk tunggal di dalam editor visual SeedProd.

Secara default, ini akan menampilkan:

• gambar produk
• Judul Produk
• Harga Produk
• Deskripsi Singkat
• Tombol Tambahkan ke Keranjang
• Tab Data Produk

Anda dapat menyesuaikan setiap elemen dengan mengkliknya untuk menampilkan pengaturannya. Misalnya, mengklik tombol tambahkan ke keranjang memungkinkan Anda mengubah teks tombol menjadi sesuatu yang lebih menarik.

Anda juga dapat mengubah perataan tombol dan menambahkan ikon dari pustaka ikon Font Awesome.

Tab Advanced memungkinkan Anda mengubah warna tombol, tipografi, bayangan, dan spasi seperti sebelumnya.

Mengedit Tombol Keranjang Arsip Produk Anda

Mengubah tombol tambahkan ke keranjang di Arsip Produk mengikuti proses yang serupa dengan halaman toko Anda. Cukup temukan bagian templat Arsip Produk dan klik tautan Edit Desain untuk membukanya di editor visual.

Blok yang digunakan SeedProd pada halaman ini adalah blok Archive Products . Pengguna akan melihat halaman ini jika mereka mengklik judul kategori produk atau menggunakan bilah pencarian toko Anda.

Blok ini tidak akan menampilkan pratinjau di editor visual langsung; namun, Anda masih dapat menyesuaikan apa yang ditampilkan blok di ujung depan dengan membuka pengaturannya.

Misalnya, Anda dapat mengubah jumlah kolom, menampilkan item menurut jumlah, dan mengurutkan menurut filter. Selain itu, Anda dapat mengaktifkan pemfilteran berdasarkan Kueri, seperti:

• Kueri Berdasarkan Atribut
• Pilih Dengan Tag
• Pilih Berdasarkan Kategori
• Pilih Berdasarkan SKU Produk
• Pilih Berdasarkan Grup
• Pilih Berdasarkan Visibilitas

Kemudian di tab Lanjutan , Anda dapat menyesuaikan tombol tambahkan ke troli dengan mengubah warna, font, spasi, ukuran, dan lainnya.

Menambahkan Tombol Add-to-Cart Kustom di Halaman Blog

Halaman blog Anda adalah tempat lain di mana Anda dapat menampilkan tombol add-to-cart. Dengan begitu, Anda dapat merekomendasikan produk setelah posting blog untuk meningkatkan penjualan.

Untuk melakukannya dengan SeedProd, temukan template Halaman Blog dan klik tautan Edit Desain .

Secara default, halaman blog Anda akan menampilkan daftar posting blog terbaru Anda, tetapi Anda dapat menyesuaikannya untuk memasukkan konten lain yang Anda suka.

Mari tambahkan bagian ke halaman ini yang menampilkan produk baru. Pertama, seret blok kolom ke halaman, dan pilih tata letak kolom.

Selanjutnya, pilih blok Gambar dan tambahkan gambar produk.

Di kolom kedua, Anda dapat menggunakan blok Heading dan Paragraph untuk judul dan deskripsi produk Anda. Kemudian, seret Tombol Tambahkan ke Keranjang sehingga pengguna dapat menambahkan produk ke keranjang belanja mereka.

Sekarang, klik blok untuk membuka pengaturannya dan tambahkan teks tombol add-to-cart kustom Anda.

Anda juga memerlukan ID produk untuk produk tertentu tersebut. Anda dapat menemukannya dengan membuka Produk »Semua Produk dari dasbor WordPress Anda dan menyalin nilai ID.

Setelah itu, Anda dapat menempelkan ID ke bidang ID Produk pada tombol tambahkan ke troli Anda. Ini akan memastikan bahwa produk tertentu ditambahkan ke keranjang Anda setelah mengklik URL Tambahkan ke Keranjang.

Ingatlah untuk mengklik tombol Simpan untuk menyimpan perubahan Anda.

Langkah 4. Simpan dan Publikasikan Perubahan Anda

Saat Anda senang dengan tampilan halaman WooCommerce Anda, Anda siap untuk membuat toko Anda hidup. Untuk melakukannya, kembali ke Pembuat Tema, dan di sudut kanan atas, putar sakelar Aktifkan Tema SeedProd ke posisi 'Aktif'.

Mari kita lihat beberapa halaman yang telah kami sesuaikan:

Halaman Toko

Halaman Produk

Halaman Arsip

Halaman Blog

Metode 2: Tambahkan Tombol Add-to-Cart Kustom dengan Kode

Metode selanjutnya yang akan kami tunjukkan melibatkan mengubah kode di situs WordPress Anda. Kami biasanya tidak menyarankan melakukan ini jika Anda seorang pemula karena dapat merusak situs web Anda.

Karena itu, kami memahami bahwa beberapa orang tidak ingin menimpa desain situs web mereka yang sudah ada sepenuhnya.

Sebelum Anda mulai, sebaiknya buat tema anak untuk memastikan Anda tidak kehilangan perubahan saat memperbarui tema WordPress. Anda juga harus mencadangkan situs WordPress Anda untuk memulihkannya dengan aman jika terjadi kesalahan.

Karena kami akan menangani cuplikan kode untuk metode ini, sebaiknya pasang plugin cuplikan kode, seperti WPCode. Ini berarti Anda tidak perlu mengedit file tema secara langsung.

Setelah semuanya siap, Anda dapat mulai menambahkan tombol add-to-cart khusus secara manual di WooCommerce.

Ubah Teks Tombol Tambah ke Keranjang di Halaman Produk

Pertama, kita akan melihat mengubah teks tombol add-to-cart di WooCommerce. Misalnya, Anda mungkin ingin mengubah teks tombol menjadi "Beli Item Ini."

Untuk melakukannya, buat cuplikan kode khusus di WPCode dan rekatkan kode PHP berikut:

add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}

Simpan perubahan Anda, lalu saat Anda melihat satu produk, Anda akan melihat teks tombol tambahkan ke troli yang baru.

Ubah Warna Tombol Tambah ke Keranjang

Jika Anda ingin mengubah warna tombol add-to-cart, Anda perlu menambahkan beberapa CSS khusus. Anda dapat melakukan ini dengan masuk ke Appearance » Customize » Additional CSS dari dashboard WordPress Anda.

Sekarang rekatkan kode CSS berikut:

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

Anda dapat melakukan hal yang sama untuk halaman arsip produk Anda dengan menempelkan cuplikan kode CSS berikut:

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

Di sana Anda memilikinya!

Kami harap artikel ini membantu Anda mempelajari cara menambahkan tombol add-to-cart khusus di WooCommerce.

Anda mungkin juga menyukai posting ini: Cara Mengedit Menu di WordPress untuk Navigasi Kustom.

Siap untuk menyesuaikan tombol add-to-cart WooCommerce Anda?

Terima kasih sudah membaca. Ikuti kami di YouTube, Twitter, dan Facebook untuk konten bermanfaat lainnya guna mengembangkan bisnis Anda.