[Tip Pantas] Cara “Add To Cart” Produk Variasi WooCommerce Menggunakan URL

Jan 19, 2021 | WordPress | 1 comment

Hari ini den nak kongsikan satu lagi Tip Pantas berkaitan WooCommerce. Dalam artikel Tips Pantas ini den nak tunjukkan cara nak bina URL untuk “Add to Cart” produk WooCommerce dari jenis Produk Variasi. Tip ini sesuai digunakan sekiranya anda membina Halaman Jualan khusus untuk satu produk yang mempunyai variasi. Dengan tip ini, anda boleh membina link jualan untuk setiap satu variasi produk secara berasingan.

Produk Variasi Dalam WooCommerce

Biasanya, jika anda mempunyai produk variasi di dalam WooCommerce, ia akan dipaparkan seperti ini:

Paparan Produk Variasi WooCommerce

Ini paparan standard Produk dalam WooCommerce lah kan. Kalau guna Theme Builder yang biasa biasa pun lebih kurang lagu ni juga paparannya. Variasi akan diletakkan dalam kotak pelbagai pilihan. Nak bagi nampak canggih sikit mungkin ada yang akan guna plugin “Variation Swatch”.

Asingkan Setiap Variasi Produk

Sekiranya anda ingin membina halaman jualan khusus untuk produk variasi anda, mungin anda ingin mengasingkan butang belian untuk setiap variasi. Anda mungkin inginkan paparan seperti berikut:

WooCommerce Produk Variasi Berasingan

Dalam paparan ini setiap produk variasi itu diberikan butang “Buy Now” sendiri. Untuk membuat paparan seperti ini, anda perlu menggunakan URL khusus untuk setiap variasi dalam produk tersebut.

Mungkin ada yang mencadangkan supaya produk variasi itu dibina semula sebagai produk “Simple” tanpa variasi. Ya, mungkin berbaloi sekiranya ada satu atau dua produk variasi untuk dibina semula. Tapi pada den, itu buang masa jer. Lebih lebih lagi jika ada berpuluh produk variasi yang nak dibina semula.

Satu lagi, nanti akan ada masalah “Duplicate content” (kalau produk ada content la). Setiap produk yang dibina semula dari variasi itu akan mempunyai kandungan yang sama, mungkinlah ada beza sikit sikit.

Untuk membina paparan variasi berasingan seperti ini anda perlu menggunakan URL Variasi seperit berikut:

https://DOMAIN-DOTCOM/checkout/?add-to-cart=PRODUCT_ID&variation_id=VARIATION_ID&attribute_pa_ATTRIBUTE_SLUG=TERM_SLUG

Setiap bahagian yang den BOLD dan guna HURUF BESAR perlu anda gantikan dengan maklumat sebenar.

Cara Membina URL Variasi Produk WooCommerce

DOMAIN-DOTCOM paling senang lah kan. Itu nama domain anda sendiri. Sebagai contoh untuk artikel ini den akan gunakan salah satu website development den iaitu ws1.maaxii.com. Maka sekarang URL contoh kita dah jadi:

https://ws1.maaxii.com/checkout/?add-to-cart=PRODUCT_ID&variation_id=VARIATION_ID&attribute_pa_ATTRIBUTE_SLUG=TERM_SLUG

Dapatkan Product ID

PRODUCT_ID boleh anda dapatkan dari paparan “All Products” dalam WP-Admin seperti dalam paparan berikut:

Paparan Produk ID Produk WooCommerce

PRODUCT_ID yang tertera di situ adalah 10447. Dengan itu, URL variasi kita dah jadi:

https://ws1.maaxii.com/checkout/?add-to-cart=10447&variation_id=VARIATION_ID&attribute_pa_ATTRIBUTE_SLUG=TERM_SLUG

Dapatkan Variation ID

VARIATION_ID ada dipaparkan dalam ruangan “Variations” produk anda seperti yang den kongsikan:

WooCommerce Product Variations ID

Produk di dalam gambar di atas mempunyai 3 variasi – Combo, Large dan Small. Maka URL untuk produk variasi ini adalah seperti berikut:

URL Combo – https://ws1.maaxii.com/checkout/?add-to-cart=10447&variation_id=10448&attribute_pa_ATTRIBUTE_SLUG=TERM_SLUG
URL Large – https://ws1.maaxii.com/checkout/?add-to-cart=10447&variation_id=10449&attribute_pa_ATTRIBUTE_SLUG=TERM_SLUG
URL Small – https://ws1.maaxii.com/checkout/?add-to-cart=10447&variation_id=10450&attribute_pa_ATTRIBUTE_SLUG=TERM_SLUG

Dapatkan Attribute Slug

ATTRIBUTE_SLUG anda dapatkan dari ruangan Attributes di bawah menu Products di WP-Admin:

WooCommerce Variation Slug

Gunakan “attribute slug” sebagai pengganti nilai ATTRIBUTE_SLUG di dalam URL Variasi. Di dalam contoh ini, slug yang akan digunakan adalah “packs”.

BACA JUGA  [Tip Pantas] Anda Perlukan Dua Theme Dalam Website WordPress Anda

URL Combo – https://ws1.maaxii.com/checkout/?add-to-cart=10447&variation_id=10448&attribute_pa_packs=TERM_SLUG
URL Large – https://ws1.maaxii.com/checkout/?add-to-cart=10447&variation_id=10449&attribute_pa_packs=TERM_SLUG
URL Small – https://ws1.maaxii.com/checkout/?add-to-cart=10447&variation_id=10450&attribute_pa_packs=TERM_SLUG

Dapatkan TERM_SLUG

Akhir sekali, anda perlu dapatkan TERM_SLUG dari ruangan Attribute Terms:

WooCommerce Variation Attribute Term Slugs

Klik pada pautan “Configure terms” dan anda akan di bawa ke skrin berikutnya yang memaparkan TERM_SLUG yang perlu anda gunakan. Dengan mengambil TERM SLUG untuk Combo, Large dan Small, kita akhirnya dapat membina URL Variasi yang diperlukan untuk halaman jualan.

URL Combo – https://ws1.maaxii.com/checkout/?add-to-cart=10447&variation_id=10448&attribute_pa_packs=packs-combo
URL Large – https://ws1.maaxii.com/checkout/?add-to-cart=10447&variation_id=10449&attribute_pa_packs=packs-large
URL Small – https://ws1.maaxii.com/checkout/?add-to-cart=10447&variation_id=10450&attribute_pa_packs=packs-small

Penggunaan URL Variasi Produk WooCommerce

URL Variasi yang telah dibina ini boleh anda gunakan di mana mana sahaja. Letakkan dalam ruangan Link untuk Button seperti yang den lakukan dalam halaman contoh ini.

Letakkan sebagai pautan dalam bentuk teks seperti Beli Spirulina Combo.

Satu lagi info den nak kongsi. URL Variasi yang den bina ini menggunakan halaman “Checkout”. Ini akan membawa pelawat terus ke “Checkout”. Jika anda ingin membawa pelawat ke halaman “Cart”, anda boleh gantikan “checkout” dengan “cart”. URLnya akan jadi seperti berikut:

URL Combo – https://ws1.maaxii.com/cart/?add-to-cart=10447&variation_id=10448&attribute_pa_packs=packs-combo
URL Large – https://ws1.maaxii.com/cart/?add-to-cart=10447&variation_id=10449&attribute_pa_packs=packs-large
URL Small – https://ws1.maaxii.com/cart/?add-to-cart=10447&variation_id=10450&attribute_pa_packs=packs-small

Terpulang kepada aliran pembelian yang anda tetapkan di website anda, anda boleh guna “Cart” atau “Checkout”.

Apakah Tip Pantas ini berguna untuk anda? Sudi sudilah tinggalkan sepatah dua dalam ruangan komen ..

:D :D :D

[Tip Pantas] Cara “Add To Cart” Produk Variasi WooCommerce Menggunakan URL was last modified: 2021-01-19T11:14:10+08:00 by Al-Hadee Mohd Roslan