Shortcode WooCommerce Penting untuk Menyesuaikan Toko Online Anda di WordPress

Diterbitkan: 2021-08-15

Jika Anda ingin membuka potensi penuh toko WooCommerce Anda, penting untuk memiliki gagasan yang kuat tentang kode pendek WooCommerce.

Kode pendek adalah potongan kecil kode yang melakukan tindakan tertentu di situs Anda.

Kode pendek WooCommerce adalah potongan kecil kode yang dapat Anda tempatkan di halaman dan templat Woocommerce Anda untuk menampilkan nilai tertentu dari database. Ada ratusan kasus penggunaan menggunakan shortcode. Mereka adalah fitur WordPress-lebar dan memiliki format yang sama.

[kode pendek]”

Banyak pengguna berasumsi bahwa ini adalah konsep teknis dan hanya dapat digunakan oleh pengembang WordPress berpengalaman. Atau, terkadang mereka menggunakan shortcode tanpa menyadarinya. Hari ini kami akan membuat daftar shortcode yang diperlukan yang Anda perlukan untuk menyesuaikan pasar multivendor WooCommerce Anda. Dan tunjukkan cara menggunakan shortcode tersebut secara efisien.

Mari kita mulai dengan-

Jenis Kode Pendek WooCommerce untuk Toko Online Anda

Kode pendek woocommerce penting

Sebelum masuk ke daftar kode pendek WooCommerce, Anda perlu mengetahui jenis kode pendek yang disediakan WooCommerce. WooCommerce memiliki 5 jenis shortcode:

  • Akun saya
  • Keranjang
  • Periksa
  • Pelacakan Pesanan
  • Produk.

Kami akan membahasnya satu per satu dan membantu Anda memahami di mana, kapan, dan bagaimana shortcode ini bekerja:

1. Halaman Akun Saya

 "[woocommerce_my_account]"

Kode pendek ini menambahkan halaman akun untuk setiap pengguna. Pengguna dapat melihat informasi mereka, daftar pesanan, dan pratinjau pesanan dari toko lain.

Akun WooCommerce

2. Halaman Keranjang WooCommerce

 "[woocommerce_cart]"

Dengan menggunakan kode pendek WooCommerce di atas, fungsionalitas keranjang ditambahkan ke halaman WooCommerce. Ini akan menampilkan semua produk yang telah ditambahkan pengguna ke keranjang mereka.

Keranjang WooCommerce

3. Halaman Pembayaran WooCommerce

 "[woocommerce_checkout]"

Ini adalah aspek paling kritis dari bisnis apa pun. Sebab, tanpa halaman checkout, pelanggan tidak bisa menyelesaikan proses pembeliannya.

Pembayaran WooCommerce

4. Halaman Pelacakan Pesanan WooCommerce

 "[woocommerce_order_tracking]"

Kode pendek ini membantu membuat halaman pelacakan pesanan untuk pelanggan. Jadi, mereka dapat melihat status pesanan mereka saat ini.

Pelacakan-pengiriman WooCommerce

5. Halaman Produk

 "[products]"

Ini adalah salah satu shortcode yang paling banyak digunakan untuk toko WooCommerce. Ini menampilkan semua produk. Anda akan menemukan berbagai parameter untuk mengontrol dan menampilkan produk Anda di situs web eCommerce Anda. Cukup tulis namanya, diikuti dengan tanda sama dengan dan nilai yang diinginkan di dalam tanda kutip untuk menambahkan parameter.

produk WooCommerce

Daftar Kode Pendek WooCommerce untuk Toko Online Anda

Kami telah membuat daftar parameter yang dapat Anda gunakan dengan kode pendek produk. Berikut daftarnya:

Kode Pendek WooCommerce

Atribut Produk

Anda dapat menggunakan shortcode ini untuk menampilkan produk berdasarkan atributnya. Mereka adalah elemen yang digunakan bersama di beberapa produk. Misalnya ukuran atau warna .

atribut

Ini akan menampilkan produk dengan atribut tertentu.

ketentuan

Ini harus digunakan dengan atribut s. Ini akan menampilkan produk dengan istilah tertentu yang ditautkan ke atribut. Misalnya, atributnya mungkin ukuran dan Persyaratannya kecil, sedang, atau besar.

operator istilah

Ini memungkinkan Anda melakukan perhitungan sederhana untuk menentukan istilah mana yang akan dimasukkan. Demikian pula, mereka harus digunakan dengan atribut dan istilah .

  • DAN : Menampilkan produk dengan semua atribut yang tercantum
  • IN : Menampilkan istilah yang dipilih. Ini defaultnya.
  • NOT IN : Akan menampilkan item yang tidak ada dalam istilah yang dipilih (yakni semua item selain yang Anda pilih)

Contoh :

 [products columns="3" attribute="season" terms="warm" terms_operator="NOT IN"]

operator tag

Sama dengan istilah operator di atas, kecuali tag.

  • DAN: Tampilkan produk dengan semua tag yang tercantum
  • IN : Akan menampilkan item dengan tag yang dipilih. Ini defaultnya
  • NOT IN : Tampilkan item yang tidak ada dalam tag yang dipilih (yakni semua selain yang Anda pilih)

visibilitas

Ini menampilkan produk tergantung pada visibilitasnya di situs Anda.

  • Terlihat : Menampilkan produk yang terlihat di penelusuran dan di situs web Anda. Ini diatur secara default
  • Katalog: Menampilkan produk yang terlihat di toko, tetapi tidak terlihat di hasil pencarian
  • Cari : Menampilkan produk yang terlihat di hasil pencarian, tetapi tidak di toko
  • Tersembunyi : Ini menampilkan produk yang disembunyikan dari hasil pencarian dan di toko, tetapi hanya dapat diakses melalui URL langsung
  • Unggulan : Menampilkan produk yang ditandai sebagai unggulan

Contoh :

 [products limit="4" columns="2" visibility="featured" ]

cat_operator

Kucing adalah singkatan dari kategori . Ini memungkinkan Anda melakukan perhitungan sederhana untuk menentukan produk mana yang akan disertakan.

  • DAN : Menampilkan produk di semua kategori
  • IN : Menampilkan produk dalam kategori/kategori yang dipilih
  • NOT IN : Menampilkan produk yang tidak termasuk dalam kategori yang dipilih

Contoh :

 [products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"]

Kategori Produk

Di bawah opsi kategori, Anda akan menemukan dua kode pendek,

 "[products _categories]"

Ini akan menampilkan semua kategori pada satu halaman. Kode pendek ini berguna untuk menambahkan lebih dari satu kategori.

 "[products _category]"

Kode pendek ini akan menampilkan kategori tertentu. Anda perlu menambahkan parameter untuk melihat produk dari kategori tersebut.

Kode pendek product_category memiliki beberapa parameter untuk menampilkan satu atau beberapa kategori. Kami telah mendaftarkannya untuk Anda.

Parameter Product_Category

Tabel shortcode parameter produk

Tambahkan ke Tombol Troli untuk Produk Tertentu

 "[add_to_cart]"

Anda dapat dengan mudah membuat tombol Tambahkan ke Keranjang untuk produk tertentu menggunakan kode pendek ini. Ini akan menggunakan ID produk sebagai parameter.

Contoh:

 [add_to_cart id=”34” style=”border: 1px solid #111111;” show_price=”TRUE” quantity=”1” class=”example-cart-button”]

Tambahkan Ke Troli URL

 "[add_to_cart_url]"

Kode pendek ini akan menampilkan URL sebenarnya dari produk tertentu. Hanya ada dua parameter. ID dan SKU.

Contoh:

 [add_to_cart_url id=”99″]

Pesan WooCommerce di Halaman Non-WooCommerce

 "[shop_messages]"

Kode pendek ini memungkinkan Anda untuk menampilkan pemberitahuan seperti "Produk ini telah ditambahkan ke keranjang Anda" di halaman mana pun yang memilikinya.

Beberapa Shortcode WooCommerce yang Lebih Berguna

Berikut adalah beberapa kode pendek WooCommerce yang dapat membantu Anda menyesuaikan toko eCommerce Anda.

  • [woocommerce_product_search] — menampilkan Product Search Field langsung yang menampilkan hasil saat pelanggan mengetik.
  • [woocommerce_product_filter] — menampilkan Filter Pencarian Produk langsung.
  • [woocommerce_product_filter_attribute] — menampilkan Filter Atribut Produk langsung.
  • [woocommerce_product_filter_category] — menampilkan Filter Kategori Produk langsung.
  • [woocommerce_product_filter_price] — menampilkan Filter Harga Produk langsung.
  • [woocommerce_product_filter_tag] — menampilkan Filter Tag Produk langsung.
  • [woocommerce_product_filter_rating] – menampilkan Filter Peringkat Produk langsung.
  • [woocommerce_product_filter_sale] – menampilkan filter langsung untuk Products On Sale .
  • [woocommerce_product_filter_stock] – menampilkan filter langsung untuk Produk yang Tersedia .
  • [woocommerce_product_filter_reset] – menampilkan tombol untuk menghapus semua filter langsung .

Ini adalah shortcode yang tersedia yang dapat Anda gunakan untuk mendesain ulang toko WooCommerce Anda. Sekarang, mari kita lihat cara Anda memasukkan kode pendek ke situs eCommerce WordPress Anda.

Cara Memasukkan Kode Pendek WooCommerce (+ Kasus Penggunaan)

Sekarang Anda tahu tentang berbagai jenis shortcode WooCommerce. Mari tunjukkan cara menggunakan shortcode tersebut. Anda dapat menggunakan shortcode ini di halaman, postingan, atau widget.

Editor Blok Gutenberg

Editor Gutenberg yang baru telah mempermudah penambahan kode pendek. Yang perlu Anda lakukan adalah mengklik tanda tambah dan memilih jenis blok kode pendek. Kemudian cukup tempel kode pendek di sana.

Kode pendek Gutenberg

Editor Klasik

Namun, jika Anda masih menggunakan editor klasik, Anda tidak perlu repot menggunakan blok. Cukup salin dan tempel kode pendek di editor dan pekerjaan Anda selesai.

shortcode-in-classic-editor

Widget

Selanjutnya, jika Anda ingin menggunakan shortcode di area widget, tambahkan saja widget Teks dengan shortcode tersebut.

shortcode-in-Widget

Muat ulang halaman untuk melihat konten yang didesain ulang di sidebar.

Hasil depan kode pendek

Sekarang, kami akan menunjukkan kepada Anda beberapa kasus penggunaan, sehingga Anda mendapatkan gambaran tentang bagaimana shortcode ini dapat membantu Anda mendesain ulang toko eCommerce Anda.

Skenario 1: Saya ingin menampilkan 4 produk terlaris saya dalam satu baris

 [products limit="4" columns="1" best_selling="true" ]

Kode pendek ini akan menampilkan 4 (parameter batas) produk terlaris Anda dalam satu baris. Anda dapat mengubah atribut “kolom” menjadi 2 jika ingin menampilkan produk Anda dalam 2 baris.

shortcode-sale

Skenario 2: Saya ingin menampilkan produk yang dikategorikan sebagai hoodies dan t-shirt, tetapi saya ingin menampilkannya dalam dua baris

 [products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"]

Ini akan menunjukkan produk yang berada di bawah kategori "hoodies dan t-shirt". Tetapi jika Anda ingin menampilkan produk yang tidak termasuk dalam kategori tersebut. Yang perlu saya ubah hanyalah cat_operator menjadi NOT IN.

kategori kode pendek1

Skenario 3: Saya ingin menampilkan produk unggulan saya, dua per baris, dengan maksimal empat item

 [products limit="4" columns="2" visibility="featured" ]

Kode pendek ini mengatakan hingga empat produk akan dimuat dalam dua kolom, dan harus ditampilkan. Ini menggunakan penyortiran berdasarkan judul (A hingga Z).

fitur kode pendek

Bonus: Kode Pendek Dokan untuk Menyesuaikan Pasar Multivendor Anda Didukung oleh WooCommerce

Namun, jika Anda ingin mengubah toko WooCommerce Anda menjadi pasar multivendor, Dokan adalah pilihan terbaik. Tidak hanya memiliki fitur terbaik yang akan membantu Anda menciptakan pasar multi-vendor yang sempurna, tetapi juga memiliki semua modul yang diperlukan dan unik yang akan membuat pengelolaan pasar lancar.

Tidak heran jika 60000+ pasar di seluruh dunia menaruh kepercayaan mereka pada Dokan.

Dokan menawarkan beberapa shortcode yang akan membantu Anda mendesain ulang dan mengontrol pasar Anda dengan mudah. Kami telah membuat daftar shortcode yang tersedia untuk Anda di bawah ini:

Kode Pendek Dokan

Nama Kode pendek Keterangan
Dasbor [dokan-dashboard] Tampilkan dasbor vendor dan semua elemen untuk vendor
Produk Terlaris [dokan-best-selling-product no_of_product="5" seller_] Menampilkan 5 produk vendor terlaris
Produk Nilai Tertinggi [dokan-top-rated-product] Mencantumkan semua produk berperingkat teratas
Formulir Migrasi Khusus [hanya versi Pro] [dokan-customer-migration] Membuat Formulir Pendaftaran Vendor
Formulir Filter Lokasi Geo [dokan-geolokasi-filter-form] Memberi Anda navigasi yang mudah untuk menemukan produk melalui pemfilteran produk
Daftar Toko [toko-dokan] Daftar semua toko yang tersedia di situs pada satu halaman
Simpan Kategori bijaksana [kategori toko-dokan =”pakaian”] Anda dapat dengan mudah membuat daftar toko berdasarkan kategori toko
Simpan Pesan bijaksana [pesanan toko-dokan=”ASC”] Atur ulang pesanan Anda dalam formasi Ascending atau Descending
Toko Orderby bijaksana [dokan-toko orderby=”terdaftar”] Mengkategorikan pesanan berdasarkan tanggal pendaftaran vendor
Store_id bijaksana [dokan-toko store_id=”1, 2, 3″] Cantumkan toko sesuai id tokonya
Toko Unggulan bijaksana [toko-dokan ditampilkan =”ya”] Untuk menampilkan vendor unggulan
Tampilkan Toko dengan Produk [dokan-toko dengan_products_only='yes'] Kode pendek ini akan menampilkan toko yang memiliki produk
pesananku [dokan-pesanan-saya] Daftar semua pesanan untuk pelanggan

Contoh :

 [dokan-stores category="clothes" order="ASC" orderby="registered" store_ featured="yes" with_products_only="yes"]

Di sini kami hanya akan menampilkan toko pakaian yang terdaftar dan id 1, 2,3 dalam urutan Ascending. Juga, toko-toko itu akan ditampilkan dan memiliki produk.

lakukan kode pendek

Halaman Toko Anda akan terlihat seperti ini:

kode pendek dokan ditampilkan

Anda dapat bereksperimen dengan shortcode lain dan mendesain ulang pasar multivendor Anda dengan mudah menggunakan Dokan.

Periksa semua kode pendek Dokan di sini.

FAQ Umum Tentang Kode Pendek WooCommerce

Bagaimana cara mengedit Kode Pendek WooCommerce?

Anda perlu bermain dengan parameter yang tersedia untuk kode pendek untuk mengedit atau memperbarui kode pendek.

Bagaimana cara mendapatkan Kode Pendek WooCommerce?

Anda dapat mengunjungi halaman dokumentasi resmi WooCommerce atau Anda dapat melihat daftar yang telah kami sediakan di atas.

multivendor

Mendesain Ulang Toko eCommerce Anda Menggunakan Kode Pendek WooCommerce!

Seperti yang Anda lihat, daftarnya sangat besar untuk kode pendek WooCommerce. Anda harus pintar dan tegas untuk menggunakan shortcode ini untuk keuntungan Anda.

Sepintas, shortcode ini mungkin tampak teknis dan rumit. Namun, jika Anda mengikuti panduan kami dengan cermat, kami jamin Anda bisa menjadi ahli dalam menggunakan kode pendek WooCommerce ini.

Dan jika Anda ragu atau mengalami kesulitan dalam menggunakan salah satu kode pendek tersebut, beri tahu kami.

Dapatkan Dokan & Mulai Marketplace Anda Sekarang!