Cara Membuat Tombol Tambahkan ke Keranjang WooCommerce dengan ID Produk
Diterbitkan: 2021-02-24
WiDimungkinkan untuk membuat tombol add to cart WooCommerce dengan id produk dan menggunakan tombol pada formulir, widget, posting atau halaman dan bahkan pada template. Idealnya tombol add to cart WooCommerce dapat disesuaikan agar sesuai dengan berbagai pilihan kustom.
Tombol Tambahkan ke Keranjang WooCommerce berdasarkan ID Produk
Dalam posting sebelumnya, saya menjelaskan cara mengubah tombol add to cart WooCommerce menjadi tautan dan juga cara mengubah tombol add to cart WooCommerce untuk membaca lebih lanjut.
Ini adalah tutorial sebelumnya lainnya yang dapat membantu Anda mempelajari lebih lanjut tentang cara menyesuaikan tombol add to cart WooCommerce:
- Cara Mengganti Tombol Tambahkan ke Keranjang Dengan Tautan WooCommerce
- Cara Menyembunyikan Tombol Baca Lebih Lanjut dan Tambahkan ke Keranjang WooCommerce
- Cara Mengubah Teks Tombol Tambahkan ke Keranjang di Halaman Toko WooCommerce
- Cara Mengubah Tambahkan ke Keranjang Teks Panduan WooCommerce dengan Contoh
- Cara Menambahkan Produk ke Keranjang Secara Terprogram di WooCommerce
- Cara Mengubah Pemberitahuan 'Ditambahkan ke Keranjang' WooCommerce
- Cara Menyembunyikan Harga dan Menambahkan ke Keranjang untuk Pengguna yang Keluar WooCommerce
Seperti yang dapat Anda lihat dari daftar tutorial di atas, ada beberapa cara Anda dapat menyesuaikan tombol add to cart WooCommerce untuk membantu Anda mencapai tata letak atau desain konten yang berbeda.
Misalnya, ketika Anda ingin membuat tabel harga WooCommerce, Anda mungkin diminta untuk membuat tombol tambahkan ke troli yang dapat Anda tambahkan ke tombol ajakan bertindak di tabel harga.
Buat Produk Sederhana WooCommerce Tambahkan ke Keranjang Tombol dengan ID Produk
Untuk membuat tombol tambahkan ke troli WooCommerce dengan ID Produk, Anda perlu mengetahui ID produk dari produk tertentu yang ingin Anda buat tombol tambahkan ke troli. ID produk dapat ditemukan dengan mudah di halaman ikhtisar semua produk seperti yang dijelaskan pada tutorial ini di – Cara Mendapatkan ID Produk WooCommerce .
Tambahkan ke Tautan Keranjang
Anda sekarang dapat membuat URL add cart yang tidak akan Anda tambahkan ke kode tombol di tempat Anda ingin menampilkan tombol. Dalam hal ini Anda dapat membuat tautan Tambahkan ke keranjang produk sederhana seperti pada kode di bawah ini:
https://example.com/?add-to-cart=840
URL situs Anda harus menggantikan bagian example.com dari URL dan ID produk tertentu harus menggantikan ID produk 840 yang digunakan pada contoh di atas.
Anda dapat menambahkan ini dalam kode tombol HTML seperti pada kode di bawah ini:
Buat Produk Sederhana dengan Tombol Tambahkan ke Keranjang WooCommerce Kuantitas dengan ID Produk
Anda juga dapat menambahkan kuantitas ke URL tambahkan ke keranjang dan Anda dapat melakukannya menggunakan berbagai parameter URL yang digunakan untuk menambahkan logika ke URL.
Dalam hal ini Anda dapat memperluas kode yang kami buat pada langkah di atas dan membuat tombol tambahkan ke keranjang produk WooCommerce sederhana dengan ID produk dengan jumlah 2 sebagai berikut:
https://example.com/?add-to-cart=840&quantity=2
Seperti yang Anda lihat, kami telah menambahkan tanda ampersand dan kata kuantitas dan menyamakannya dengan 2 jumlah item yang ingin kami tambahkan ke troli saat tombol produk yang sama diklik.
Untuk menambahkan URL ini ke kode HTML dan membuat tombol add to cart WooCommerce dengan ID produk dengan jumlah, Anda harus menggunakan kode di bawah ini:
Buat Tombol Tambahkan ke Keranjang WooCommerce dengan ID Produk dengan Pengalihan ke Keranjang
Untuk memudahkan pelanggan toko WooCommerce Anda menavigasi situs Anda, membuat pengalihan sangat penting. Di masa lalu saya telah menyoroti banyak cara untuk membuat pengalihan WooCommerce.
Khususnya, saya membagikan posting blog ini - WooCommerce membuat pengalihan setelah checkout dan pengalihan WooCommerce setelah keluar dan bahkan membuat pengalihan WooCommerce setelah plugin checkout untuk membantu Anda menerapkan pengalihan setelah checkout.
WooCommerce Redirect ke Keranjang Setelah Tambahkan ke Keranjang
Anda juga dapat membuat pengalihan ke troli dengan tombol tambahkan ke troli WooCommerce dengan ID produk. Anda dapat melakukannya dengan mengubah kode yang saya bagikan pada langkah di atas menjadi sebagai berikut:
https://example.com/cart/?add-to-cart=840
Seperti yang Anda lihat, kami telah menambahkan troli ke URL untuk memastikan pengguna dialihkan ke troli setelah mereka menambahkan produk ke troli. Kode lengkap dengan kode tombol HTML adalah sebagai berikut:
Pengalihan WooCommerce ke Checkout Setelah Tambahkan ke Keranjang
Anda juga dapat membuat redirect ke checkout dengan tombol add to cart WooCommerce dengan ID produk. Anda dapat melakukannya dengan mengubah kode yang saya bagikan pada langkah dengan menambahkan checkout pada URL di atas menjadi sebagai berikut:
https://example.com/checkout/?add-to-cart=840
Seperti yang Anda lihat, kami telah menambahkan pembayaran ke URL untuk memastikan pengguna dialihkan ke pembayaran setelah mereka menambahkan produk ke keranjang. Kode lengkap dengan kode tombol HTML adalah sebagai berikut:
Kesimpulan
Dalam tutorial ini, kami telah menyoroti berbagai cara Anda dapat membuat tombol add to cart WooCommerce dengan ID produk. Kami juga telah melihat cara menambahkan redirect ke tombol add to cart serta cara menambahkan jumlah produk ke add ke tombol troli.
Saya harap Anda sekarang dapat membuat tombol tambahkan ke keranjang WooCommerce dengan ID produk dan menggunakannya di tabel harga, formulir, dan di dalam templat. Anda juga dapat menyesuaikan lebih lanjut tombol tambahkan ke troli menggunakan kelas tombol yang saya tambahkan ke kode di atas. Jika Anda masih menyesuaikan situs Anda, Anda bisa mendapatkan keuntungan dari ide-ide yang saya bagikan di Ultimate WooCommerce Hide Guide.
Untuk pengguna WooCommerce yang telah menginstal tema Storefront dan ingin menyesuaikannya lebih lanjut, saya membagikan koleksi brilian 80+ Tips Kustomisasi Tema WooCommerce Storefront yang akan memandu Anda tentang cara membuat tampilan kustom situs Anda menggunakan tema WooCommerce default – Etalase .
Artikel Serupa
- Cara Membuat Bidang Checkout Bersyarat WooCommerce
- Cara Membuat Shortcode Logout Masuk WooCommerce
- Cara Mengubah Tema Warna Tombol Storefront
- Cara Mendapatkan Judul Produk WooCommerce
- Cara Menyembunyikan Harga dan Menambahkan ke Keranjang untuk Pengguna yang Keluar WooCommerce
- Cara Menyembunyikan Tombol Keranjang Pembaruan Halaman Keranjang WooCommerce
- Cara Mengganti Tombol Tambahkan ke Keranjang Dengan Tautan WooCommerce
- Cara Menyembunyikan Harga Jika Nol Di WooCommerce
- Cara Membuat Tema Anak Toko WooCommerce [Panduan Lengkap]
- Cara Menyembunyikan Opsi Admin Pusat Pemasaran WooCommerce
- Bagaimana Mendapatkan ID Produk di Halaman Checkout Atau Halaman Pemesanan Di WooCommerce
- Cara Mendapatkan Detail Pesanan Setelah Checkout Di WooCommerce
- Cara Redirect ke Keranjang setelah Login di WooCommerce
- Cara Menambahkan Pengalihan Halaman Akun Saya WooCommerce
- Kait Pengalihan Login WooCommerce Dijelaskan dengan Contoh
- Cara Menonaktifkan Sementara Checkout Di WooCommerce
- Cara Mengatur Blog Etalase WooCommerce