Panduan Sederhana tentang Shortcode WooCommerce

Anda mungkin pernah mendengar tentang shortcode WooCommerce dan mungkin menggunakannya juga. Tetapi Anda mungkin tidak tahu bagaimana dan di mana ia bekerja.

Jika Anda ingin membuka potensi penuh WooCommerce, Anda pasti ingin membiasakan diri dengan kode pendek.

Mengapa? Karena kode pendek mendukung sebagian besar fungsi plugin, termasuk semua halaman seperti halaman keranjang, halaman checkout, halaman produk, halaman kategori produk, halaman Akun Saya.

Dan jika Anda lebih memahami cara kerja shortcode WooCommerce, Anda dapat dengan mudah membuat halaman penjualan yang sangat disesuaikan dan membangun situs toko online yang sangat kuat untuk situasi apa pun.

Apa itu shortcode WooCommerce, mengapa menggunakannya, bagaimana Anda bisa menggunakannya…kami akan membahas semuanya di artikel ini.

Apa itu shortcode WooCommerce?

Dalam istilah awam, shortcode di WooCommerce adalah potongan pendek kode/teks yang dibungkus dalam tanda kurung siku yang terlihat seperti [ini].

Kode pendek ini sebenarnya adalah sejumlah besar kode yang diringkas dalam frasa yang lebih pendek untuk digunakan oleh pemilik toko WooCommerce non-teknisi.

Kode pendek dapat mencapai apa pun untuk Anda seperti:

• Tampilkan checkout di halaman mana pun
• Pamerkan buku terlaris di beranda Anda
• Promosikan produk terkait saat pelanggan menunjukkan minat pada suatu produk
• Tampilkan video dan audio
• Tambahkan penggeser kreatif
• Sisipkan tombol Tambahkan ke Keranjang
• Sorot produk unggulan di blok Gutenberg, bilah sisi, area widget lainnya

… hal-hal lain

Sekarang dengan dasar-dasar kode pendek dipahami, mari kita lihat bagaimana Anda menambahkannya ke toko Anda.

Bagaimana cara menambahkan kode pendek ke toko WooCommerce Anda?

Menjalankan toko WooCommerce memakan waktu bagi siapa saja. Manajemen toko, membuat penawaran, kupon, peningkatan pembayaran… ada ratusan tugas yang harus diwaspadai. Untuk menghemat waktu, kode pendek berguna.

Kode pendek juga meningkatkan akurasi, mengurangi kesalahan yang terkait dengan penulisan kode panjang.

Ada tiga cara untuk menambahkan kode pendek:

Memasukkan kode pendek menggunakan editor blok Gutenberg

Dengan editor Gutenberg, menambahkan kode pendek menjadi mudah.

• Buka panel Admin WordPress Anda.
• Klik pada Pages > Add New . Anda juga dapat mengedit halaman yang ada.



• Klik tanda plus untuk menambahkan blok baru, ketik ' Shortcode ' di bilah pencarian dan pilih blok Shortcode.
• Sekarang, ketikkan kode pendek Anda di bidang. Misalnya – [products] .
• Klik tombol Publish atau Update berwarna biru di kanan atas halaman dan produk Anda sekarang akan ditampilkan di halaman baru Anda.

Memasukkan kode pendek menggunakan editor Klasik/editor WordPress

Menambahkan kode pendek dengan editor Klasik juga mudah. Cukup tambahkan kode pendek, pastikan untuk menyertakan tanda kurung ([ dan ]).

Memasukkan shortcode menggunakan widget

Untuk menambahkan kode pendek ke area widget, cukup tambahkan widget Teks dengan kode pendek. Kemudian, muat halaman untuk melihat konten kode pendek di bilah sisi Anda.

Bagaimana cara kerja shortcode WooCommerce?

Meskipun terlihat sederhana, kode pendek sebenarnya cukup kuat! Mari kita bahas bagian berbeda yang membentuk kode pendek.

Kode pendek itu sendiri :
Seperti disebutkan di atas, shortcode adalah satu kata atau kumpulan kata yang terhubung dengan garis bawah, seperti ini:

• [products]
• [woocommerce_order_tracking]

Sementara beberapa kode pendek akan berfungsi sendiri, yang lain memerlukan beberapa parameter.

Parameter :
Parameter atau Argumen (disebut Args dalam beberapa dokumentasi WooCommerce) adalah cara untuk membuat kode pendek lebih spesifik. Misalnya, dengan menambahkan id=”36″ ke shortcode [add_to_cart] , maka akan dibuat tombol 'Add to Cart' untuk produk dengan ID 36.

Daftar shortcode WooCommerce bawaan

Ada lima shortcode penting yang tersedia dengan WooCommerce.

1. [woocommerce_cart] – menampilkan halaman keranjang
2. [woocommerce_checkout] – menampilkan halaman checkout
3. [woocommerce_my_account] – menampilkan halaman akun pengguna
4. [woocommerce_order_tracking] – menunjukkan formulir pelacakan pesanan
5. [products] – menunjukkan produk

Dalam kebanyakan kasus, shortcode ini akan ditambahkan ke halaman secara otomatis melalui wizard onboarding WooCommerce dan tidak perlu digunakan secara manual.

Mari kita lihat setiap kode pendek dan cara menggunakannya.

[woocommerce_cart]

Kode pendek ini menambahkan fungsionalitas keranjang WooCommerce ke halaman. Ini akan menampilkan semua produk yang telah ditambahkan pengguna ke keranjang mereka. Tidak ada parameter untuk ditambahkan ke kode pendek ini.

[woocommerce_checkout]

Seperti namanya, kode pendek ini menampilkan halaman checkout. Pastikan halaman ini diatur dengan benar. Lagi pula, jika pelanggan tidak dapat menemukan halaman pembayaran dengan mudah atau menemukan pembayaran yang rumit, mereka tidak akan membeli apa pun.

Tidak ada parameter tambahan untuk ditambahkan ke kode pendek ini juga.

[woocommerce_my_account]

Kode pendek ini menunjukkan halaman Akun Saya yang berisi semua informasi pelanggan, serta pesanan mereka sebelumnya dari toko Anda.

Secara default, jumlah pesanan yang ditampilkan diatur ke 15. Anda dapat mengubahnya untuk menampilkan semua pesanan dengan membuat angka -1. Anda dapat menambahkan parameter atau argumen ke kode pendek ini seperti ini:

Himpunan(
     'pengguna_saat ini' => ''
 )

 woocommerce_my_account

Argumen pengguna saat ini secara otomatis diatur menggunakan get_user_by( 'id', get_current_user_id() ) .

[woocommerce_order_tracking]

Kode pendek ini membuat halaman “pelacakan pesanan”, yang memungkinkan pelanggan melihat status pesanan mereka saat ini. Tidak ada argumen lain.

[produk]

Kode pendek [products] adalah salah satu kode pendek yang paling kuat. Ini memungkinkan Anda untuk menampilkan produk berdasarkan ID pos, SKU, atribut, kategori dengan dukungan untuk pagination, penyortiran acak, dan tag produk .

Ini menggantikan kebutuhan akan beberapa kode pendek seperti [featured_products] , [sale_products] , [best_selling_products] best_selling_products] , [recent_products] , [product_attribute] , dan [top_rated_products] digunakan dalam versi WooCommerce di bawah 3.2.

Ada banyak sekali parameter yang memungkinkan Anda menyesuaikan jenis dan jumlah produk yang ditampilkan.

Untuk menambahkan parameter, cukup tulis namanya, diikuti dengan tanda sama dengan dan nilai yang diinginkan di dalam tanda kutip. Pastikan ini ada di dalam kode pendek [products] .

Misalnya, untuk menampilkan lima produk dari kategori pakaian, gunakan kode pendek ini: [products limit="5" category="clothing"] .

Atribut produk yang tersedia

Atribut berikut tersedia untuk digunakan bersama dengan kode pendek produk. Ada beberapa parameter yang membantu Anda mengontrol tata letak halaman produk Anda. Mari kita lihat dengan contoh, dimulai dengan atribut produk tampilan.

Tampilkan atribut produk

• limit – mengontrol jumlah produk yang ditampilkan. Default ke dan -1 (tampilkan semua) saat mencantumkan produk, dan -1 (tampilkan semua) untuk kategori. Contoh – [products limit="3"]
• kolom – mengontrol jumlah kolom yang akan ditampilkan. Default ke 4. meskipun ini biasanya akan diciutkan ke dalam jumlah yang lebih kecil di ponsel (tergantung pada tema Anda.) Contoh – [products columns="3"]
• paginate – menentukan apakah halaman hasil produk Anda akan diberi halaman. Digunakan bersama dengan limit. Default ke false, setel ke true ke paginate. Contoh – [products paginate="true"]
• orderby – menyesuaikan bagaimana produk Anda dipesan. Default adalah judul produk. Satu atau lebih opsi dapat dilewati dengan menambahkan kedua siput dengan spasi di antara keduanya. Pilihan yang tersedia adalah:
  • date – tanggal produk diterbitkan.
  • id – ID kiriman produk.
  • menu_order – Urutan Menu, jika diatur (angka yang lebih rendah ditampilkan terlebih dahulu).
  • popularitas – jumlah pembelian.
  • rand – memesan produk secara acak pada pemuatan halaman (mungkin tidak berfungsi dengan situs yang menggunakan caching, karena dapat menyimpan pesanan tertentu).
  • rating – rating produk rata-rata.
  • judul – judul produk. Contoh – [products orderby="date"]
• skus – tambahkan SKU tertentu yang dipisahkan dengan koma. Contoh – [products skus="shirt-black-small, shirt-black-large"]
• kategori – menampilkan produk yang memiliki slug kategori tertentu. Anda dapat menambahkan lebih dari satu kategori dengan menempatkan koma di antara mereka. Contoh – [products category="watches, purses"]
• tag – menampilkan produk yang memiliki tag slug tertentu. Anda dapat menambahkan lebih dari satu tag dengan menempatkan koma di antara mereka. Contoh – [products tag="rainy, kids"]
• order – menyatakan apakah pesanan produk naik (ASC) atau turun (DESC), menggunakan metode yang diatur secara berurutan. Standarnya adalah ASC. Contoh – [products order="DESC"]
• class – menambahkan kelas pembungkus HTML sehingga Anda dapat memodifikasi output tertentu dengan CSS khusus. Contoh – [products class="custom-element"]
• on_sale – menampilkan produk penjualan. Jangan menggunakannya bersamaan dengan best_selling atau top_rated. Contoh – [products on_sale="true"]
• best_selling – menampilkan produk yang paling banyak terjual. Jangan menggunakannya bersama dengan on_sale atau top_rated. Contoh – [products best_selling="true"]
• top_rated – menampilkan produk dengan nilai tertinggi. Jangan menggunakannya bersamaan dengan on_sale atau best_selling. Contoh – [products top_rated="true"]

Selanjutnya, atribut produk konten.

Atribut produk konten

Kode pendek ini dapat digunakan untuk menampilkan produk berdasarkan atributnya – ukuran, warna, dll.

• atribut – menampilkan produk dengan atribut tertentu.
• istilah – menampilkan produk dengan istilah tertentu yang terkait dengan atribut. Ini harus digunakan dengan atribut di atas. Misalnya, atributnya mungkin warna dan istilahnya merah, biru atau kuning.
• terms_operator – memungkinkan Anda melakukan perhitungan untuk menentukan istilah mana yang akan disertakan. Demikian juga, mereka harus digunakan dengan atribut dan istilah. Pilihan yang tersedia adalah:
  • DAN – menampilkan produk dari semua atribut yang dipilih.
  • IN – menampilkan produk dengan atribut yang dipilih. Ini adalah nilai terms_operator default.
  • NOT IN – menampilkan produk yang tidak termasuk dalam atribut yang dipilih.
• tag_operator – sama dengan istilah operator di atas, kecuali untuk tag. Pilihan yang tersedia adalah:
  • DAN – menampilkan produk dari semua tag yang dipilih.
  • IN – menampilkan produk dengan tag yang dipilih. Ini adalah nilai default tag_operator.
  • NOT IN – menampilkan produk yang tidak ada dalam tag yang dipilih.
• visibilitas – menampilkan produk tergantung pada visibilitasnya di situs Anda. Pilihan yang tersedia adalah:
  • terlihat – produk terlihat di toko dan hasil pencarian. Ini adalah opsi visibilitas default.
  • katalog – produk hanya terlihat di toko tetapi tidak di hasil pencarian.
  • pencarian – produk hanya terlihat di hasil pencarian tetapi tidak di toko.
  • tersembunyi – produk tersembunyi dari toko dan pencarian dan hanya dapat diakses melalui URL langsung.
  • unggulan – produk yang ditandai sebagai Produk Unggulan.
• kategori – menampilkan produk yang memiliki slug kategori tertentu.
• tag – menampilkan produk yang memiliki tag slug tertentu.
• cat_operator – memungkinkan Anda melakukan perhitungan untuk menentukan produk mana yang akan disertakan. Pilihan yang tersedia adalah:
  • DAN – menampilkan produk yang termasuk dalam semua kategori yang dipilih.
  • IN – menampilkan produk dalam kategori yang dipilih. Ini adalah nilai default cat_operator.
  • NOT IN – menampilkan produk yang tidak termasuk dalam kategori yang dipilih.
• id – menampilkan produk berdasarkan daftar ID Postingan yang dipisahkan koma.
• skus – menampilkan produk berdasarkan daftar SKU yang dipisahkan koma.

Jika produk tidak ditampilkan, pastikan tidak diatur ke "Tersembunyi" di "Visibilitas Katalog".

Contoh skenario produk berdasarkan atribut

Skenario 1 – Item penjualan acak

Anda ingin menampilkan empat produk yang dijual.

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true"]

Kode pendek ini secara eksplisit menyatakan empat produk dengan empat kolom (yang akan menjadi satu baris), menunjukkan item obral paling populer. Itu juga menambahkan penjualan cepat kelas CSS, yang dapat Anda modifikasi di tema Anda.

Skenario 2 – Produk unggulan

Anda ingin menampilkan produk unggulan Anda, 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 mereka harus ditampilkan. Meskipun tidak dinyatakan secara eksplisit, ia menggunakan default seperti pengurutan berdasarkan judul (A hingga Z).

Skenario 3 – Produk terlaris

Anda ingin menampilkan tiga produk terlaris teratas Anda dalam satu baris.

[products limit="3" columns="3" best_selling="true"]

Untuk contoh lainnya, lihat dokumentasi kode pendek WooCommerce.

Kategori Produk

Kedua shortcode ini akan menampilkan kategori produk Anda di halaman manapun.

1. [product_category] – menampilkan produk dalam kategori produk tertentu.
2. [product_categories] – menampilkan semua kategori produk Anda. Ini adalah kode pendek umum untuk menampilkan kategori tertentu. Anda harus menambahkan parameter tertentu, yang tercantum di bawah, untuk benar-benar menampilkan satu (atau lebih.)

Atribut kategori produk yang tersedia

• id – menampilkan kategori tertentu berdasarkan idnya. Untuk digunakan di product_categories. Contoh – [products _categories ids="1,2"]
• kategori – Dapat berupa id kategori, nama atau slug. Untuk digunakan di [product_category]
• limit – menentukan jumlah kategori yang akan ditampilkan. Contoh – [products _categories limit="3"]
• kolom – menentukan jumlah kolom yang akan ditampilkan. Standarnya adalah 4.
• hide_empty – ini akan menyembunyikan kategori kosong. Standarnya adalah "1" yang akan menyembunyikan kategori kosong. Setel ke "0" untuk menampilkan kategori kosong. .Contoh – [products _categories hide_empty="1"]
• induk – ini akan menampilkan kategori anak dari kategori induk tertentu, yang ditargetkan oleh id. Misalnya, [parent="3″] akan menampilkan kategori anak dari kategori yang idnya 3. Jika Anda menyetel induk ke "0", hanya kategori tingkat atas yang akan ditampilkan. Contoh – [products _categories parent="0"]
• orderby – ini mengontrol urutan kategori yang ditampilkan. Standarnya adalah memesan berdasarkan "nama". Itu dapat diatur ke "id", "slug", atau "menu_order". Jika Anda ingin memesan dengan id yang Anda tentukan maka Anda dapat menggunakan orderby="include". Contoh – [products _categories orderby="id"]
• order – menyatakan apakah pengurutan kategori adalah Ascending (ASC) atau Descending (DESC), menggunakan metode yang diatur dalam orderby. Default untuk ASC. Contoh – [products _categories order="ASC"]

Contoh skenario kategori produk

Tampilkan kategori tingkat atas saja
Bayangkan Anda hanya ingin menampilkan kategori tingkat atas pada halaman dan mengecualikan sub kategori, mungkin dengan kode pendek berikut: [product_categories number="0" parent="0"] .

Kode pendek berguna lainnya

[Masukkan ke keranjang]

Kode pendek ini memungkinkan Anda dengan mudah membuat tombol Tambahkan ke Keranjang untuk produk tertentu, yang ditargetkan oleh id. Ada beberapa parameter. Seperti shortcode lainnya, masing-masing harus ditempatkan dalam dua tanda kutip, "seperti ini".

• id : Pilih produk berdasarkan ID
• style : Sesuaikan CSS tombol secara langsung
• sku : Pilih produk berdasarkan SKU
• show_price : Pilih apakah harga ditampilkan dengan tombol. Ada dua pilihan, "TRUE" dan "FALSE"
• class : Tetapkan kelas HTML ke tombol, sehingga Anda dapat menargetkannya dengan kode CSS
• kuantitas : Pilih jumlah produk yang akan ditambahkan ke troli. Dalam kebanyakan kasus, ini hanya akan menjadi "1"

Contoh: [add_to_cart show_price="TRUE" quantity="1" class="example-cart-button"]

Tambahkan ke Keranjang URL

Kode pendek ini akan menampilkan URL sebenarnya dari produk tertentu. Hanya ada dua parameter:

• id: Targetkan produk menurut ID
• sku: Targetkan produk menurut SKU

Contoh: [add_to_cart_url]

Ini akan menampilkan URL pada tombol tambahkan ke keranjang dari satu produk berdasarkan ID.

[pesan_toko]

Ingin menampilkan pesan WooCommerce di halaman non-WooCommerce? Kode pendek ini akan memungkinkan Anda untuk menampilkan pemberitahuan seperti "Produk ini telah ditambahkan ke keranjang Anda" di halaman mana pun dengannya.

Kode pendek kupon

WooCommerce juga menawarkan cara untuk menampilkan kupon yang tersedia di halaman mana pun dan menghasilkan kupon secara otomatis. Namun, Anda harus membeli ekstensi Smart Coupons. Lihat posting di bawah ini untuk mendapatkan kode pendek:

• Cara menampilkan kupon yang tersedia di halaman mana pun
• Cara membuat kupon secara otomatis

Pemecahan masalah kode pendek

Mungkin saja kode pendek yang Anda masukkan mungkin tidak berfungsi. Inilah yang perlu Anda periksa:

Kode pendek ada di antara tag :
Saat menambahkan kode pendek ke halaman, pastikan kode tersebut tidak berada di antara tag, yang dirancang untuk menampilkan (dan tidak mengeksekusi) kode.

Tanda kutip keriting, tidak lurus
Kesalahan umum lainnya adalah jika tanda kutip (digunakan dengan parameter) miring, atau "keriting" (seperti ini: ") dan tidak lurus (seperti ini: "). Parameter tidak akan berfungsi dengan tanda kutip keriting.

Lihat dokumen ini untuk lebih jelasnya.

Daftar plugin kode pendek WooCommerce

Selain shortcode WooCommerce bawaan dan gratis, berikut adalah beberapa plugin yang akan membantu Anda menyesuaikan toko Anda.

• Kit Kode Pendek Woo
• Kode Pendek Ulasan SIP untuk WooCommerce
• Bundler Ujung Depan SIP untuk WooCommerce

Kesimpulan

Kode pendek WooCommerce sangat berguna dan kuat. Meskipun mungkin tampak sedikit teknis, ini cukup mudah digunakan dan diterapkan.

Saya harap panduan ini membantu Anda menyelesaikan semua pertanyaan Anda terkait dengan kode pendek WooCommerce.

Sementara itu, Anda juga dapat melihat plugin WooCommerce populer kami yang membantu membuat toko WooCommerce Anda lebih cepat dan cerdas.

Jika Anda memiliki pertanyaan atau saran, tinggalkan komentar di bawah dan kami akan menyelesaikannya!