Shortcode WooCommerce: Panduan Lengkap + Daftar Semua Shortcode
Jika Anda mengelola jasa website online store berbasis WordPress, memahami shortcode WooCommerce adalah keahlian wajib. Shortcode adalah potongan kode kecil yang bisa Anda tempatkan di halaman atau postingan WordPress untuk menambahkan fitur toko tanpa perlu menulis kode sendiri — dari halaman keranjang, checkout, hingga tampilan produk terbaik.
Cara Kerja Shortcode WooCommerce
Shortcode WooCommerce memungkinkan Anda mengkustomisasi fungsionalitas dan konten toko online tanpa harus menulis kode sendiri. Setiap shortcode terdiri dari dua bagian utama: body dan parameter.
Body adalah bagian inti shortcode, yang ditulis di dalam tanda kurung siku [...]. Bagian ini memberi tahu WooCommerce fitur atau konten apa yang harus ditampilkan. Parameter adalah pengaturan opsional yang bisa Anda tambahkan untuk mengkustomisasi output — ditulis setelah body dalam kurung siku yang sama, menggunakan format atribut="nilai".
Contoh: jika Anda ingin menampilkan 3 produk terlaris dalam 3 kolom, shortcode-nya adalah:
[products limit="3" columns="3" orderby="popularity"]
Kata products adalah body-nya, sementara tiga parameter setelahnya mengatur jumlah produk, tata letak kolom, dan metode pengurutan.
Cara Menambahkan Shortcode ke Halaman WordPress
-
1
Buka editor WordPress (Gutenberg)Buka halaman atau postingan yang ingin Anda edit. Klik ikon + untuk menambahkan blok baru.
-
2
Cari blok “Shortcode”Ketik “shortcode” di kotak pencarian blok, lalu pilih blok Shortcode dari hasil yang muncul.
-
3
Tempel shortcode AndaMasukkan shortcode yang diinginkan ke dalam blok, lalu klik Pratinjau untuk melihat hasilnya.
-
4
Klik Simpan / PerbaruiSimpan halaman dan shortcode Anda akan langsung aktif di frontend toko.
Daftar Lengkap Shortcode WooCommerce
Berikut adalah seluruh shortcode WooCommerce bawaan beserta penjelasan, atribut, dan contoh penggunaannya. Daftar ini sangat berguna bagi Anda yang menyediakan jasa website online store maupun yang mengelola toko sendiri.
[woocommerce_cart]
Gratis
Menampilkan halaman keranjang belanja di lokasi yang Anda pilih. Pelanggan dapat melihat isi keranjang, memperbarui item, memasukkan kode kupon, dan lanjut ke checkout.
[woocommerce_cart]
Shortcode ini tidak memiliki atribut kustomisasi — cukup tempel kode-nya. Sebagian besar tema WooCommerce sudah menyertakannya secara otomatis di halaman keranjang, tapi Anda bisa membuatnya di halaman kustom sendiri.
[woocommerce_checkout]
Gratis
Menyematkan formulir checkout di halaman yang Anda pilih. Pelanggan dapat mengisi informasi pengiriman & pembayaran, memilih metode pembayaran, dan meninjau pesanan sebelum dikonfirmasi.
[woocommerce_checkout]
[woocommerce_my_account]
Gratis
Menampilkan area akun pengguna. Pelanggan yang sudah login bisa mengelola informasi pribadi, melacak pesanan, mengatur alamat pengiriman, dan mengubah kata sandi. Untuk pengunjung yang belum login, shortcode ini otomatis menampilkan formulir login.
[woocommerce_my_account]
[woocommerce_order_tracking]
Gratis
Menampilkan formulir lacak pesanan. Pelanggan cukup memasukkan ID pesanan dan alamat email untuk mengecek status pengiriman — tanpa perlu login akun terlebih dahulu.
[woocommerce_order_tracking]
[product_page]
Gratis
Menampilkan halaman produk lengkap — termasuk judul, harga, deskripsi, ulasan, dan tombol tambah ke keranjang — di halaman atau postingan mana pun, cukup dengan menyebutkan ID atau SKU produknya.
| Atribut | Deskripsi | Contoh |
|---|---|---|
id | ID produk yang ingin ditampilkan | [product_page id="123"] |
sku | SKU produk (alternatif dari ID) | [product_page sku="SKU123"] |
Anda bisa menggunakan shortcode ini beberapa kali dalam satu halaman untuk menampilkan produk yang berbeda-beda.
[products]
Gratis
Ini adalah shortcode WooCommerce paling fleksibel. Berbeda dengan [product_page] yang menampilkan satu halaman produk penuh, [products] memungkinkan Anda menampilkan kumpulan produk dalam format kompak — ideal untuk blog post, landing page, atau halaman kategori. Sangat berguna untuk berbagai kebutuhan setup toko WooCommerce.
Atribut Lengkap Shortcode [products]
| Atribut | Fungsi | Nilai / Contoh |
|---|---|---|
id | Tampilkan produk berdasarkan ID tertentu | id="123" |
skus | Tampilkan produk berdasarkan SKU | skus="SKU123" |
limit | Jumlah produk yang ditampilkan | limit="8" |
columns | Jumlah kolom tampilan (default: 4) | columns="3" |
orderby | Urutan tampilan produk | orderby="popularity" |
order | Arah urutan: naik atau turun (default: ASC) | order="DESC" |
category | Filter berdasarkan slug kategori | category="baju,musim-panas" |
tag | Filter berdasarkan tag produk | tag="baru" |
class | Tambahkan CSS class kustom | class="produk-utama" |
on_sale | Tampilkan hanya produk diskon | on_sale="true" |
best_selling | Tampilkan hanya produk terlaris | best_selling="true" |
top_rated | Tampilkan hanya produk rating tertinggi | top_rated="true" |
paginate | Aktifkan paginasi | paginate="true" |
visibility | Filter berdasarkan visibilitas produk | visibility="featured" |
Nilai yang tersedia untuk atribut orderby:
title— urutkan berdasarkan nama produk (default)date— urutkan berdasarkan tanggal publikasipopularity— urutkan berdasarkan jumlah pembelianrating— urutkan berdasarkan rating rata-ratarand— tampilkan secara acakid— urutkan berdasarkan ID produk
Nilai yang tersedia untuk atribut visibility:
visible— produk yang tampil di toko dan hasil pencarian (default)catalog— hanya tampil di halaman tokosearch— hanya tampil di hasil pencarianhidden— disembunyikan dari toko dan pencarianfeatured— produk yang ditandai sebagai unggulan
Contoh gabungan:
[products limit="6" columns="3" orderby="popularity" category="elektronik" paginate="true"]
on_sale, best_selling, dan top_rated secara bersamaan. Kombinasi ketiganya dapat menyebabkan output yang tidak terduga karena prioritas filter saling bertentangan.[product_categories]
Gratis
Menampilkan semua kategori produk yang tersedia di toko Anda — lengkap dengan gambar kategori dan jumlah produk di dalamnya.
| Atribut | Fungsi | Contoh |
|---|---|---|
number | Jumlah kategori yang ditampilkan | number="6" |
columns | Jumlah kolom tampilan | columns="3" |
include | Tampilkan kategori tertentu (berdasarkan ID) | include="12,15,18" |
orderby | Urutkan berdasarkan: name, id, slug, menu_order, count | orderby="count" |
order | Arah urutan (ASC/DESC) | order="ASC" |
hide_empty | Sembunyikan kategori kosong (tanpa produk) | hide_empty="1" |
parent | Tampilkan sub-kategori dari kategori induk tertentu | parent="5" |
[product_categories include="12,15,18" orderby="slug" order="ASC"]
[product_category]
Gratis
Menampilkan produk dari satu kategori tertentu. Ideal untuk halaman landing kategori atau seksi promosi yang menampilkan item dari satu segmen produk tertentu. Atribut category (slug kategori) wajib diisi.
| Atribut | Fungsi |
|---|---|
category (wajib) | Slug kategori yang ingin ditampilkan |
columns | Jumlah kolom (default: 4) |
orderby | Metode pengurutan produk |
order | Arah urutan |
per_page | Jumlah produk per halaman |
paginate | Aktifkan paginasi (true/false) |
[product_category category="kaos" orderby="price" per_page="8" paginate="true"]
[recent_products]
Gratis
Menampilkan produk yang baru ditambahkan ke toko. Cocok ditempatkan di beranda atau halaman kategori untuk memperkenalkan produk baru kepada pengunjung.
[recent_products limit="4" columns="4" orderby="date" order="DESC"]
[featured_products]
Gratis
Menampilkan produk yang ditandai sebagai unggulan (featured) di WooCommerce. Ideal untuk menyorot produk pilihan editor atau promosi khusus di beranda toko.
[featured_products limit="6" columns="3" orderby="date"]
[best_selling_products]
Gratis
Menampilkan produk terlaris berdasarkan jumlah pembelian. Menunjukkan bukti sosial (social proof) kepada calon pembeli bahwa produk tersebut populer — efektif untuk mendorong konversi dan membangun kepercayaan.
[best_selling_products limit="4" columns="4"]
[top_rated_products]
Gratis
Menampilkan produk dengan rating tertinggi berdasarkan ulasan pelanggan. Strategi yang baik untuk membangun kepercayaan dan mempengaruhi keputusan pembelian pengunjung baru.
[top_rated_products limit="4" columns="4" orderby="rating"]
[sale_products]
Gratis
Menampilkan produk yang sedang diskon. Gunakan shortcode ini untuk membuat halaman “Promo” atau “Clearance” yang khusus menampilkan semua produk dengan harga coret.
[sale_products limit="8" columns="4" orderby="date" order="DESC"]
[add_to_cart] & [add_to_cart_url]
Gratis
Shortcode [add_to_cart] menambahkan tombol Tambah ke Keranjang untuk produk tertentu di halaman atau postingan mana pun — tanpa pelanggan harus mengunjungi halaman produk tersebut. Sangat berguna di landing page promosi.
| Atribut | Fungsi |
|---|---|
id | ID produk yang tombolnya ingin ditampilkan |
sku | SKU produk (alternatif dari ID) |
style | CSS inline untuk mengkustomisasi tampilan tombol |
show_price | Tampilkan harga di samping tombol (true/false) |
class | CSS class kustom untuk tombol |
quantity | Jumlah produk yang ditambahkan ke keranjang |
[add_to_cart id="49" show_price="true" style="display:block; text-align:center;"]
Untuk membuat tautan (bukan tombol) yang langsung menambahkan produk ke keranjang, gunakan [add_to_cart_url]. Shortcode ini berguna untuk email marketing atau area toko di mana penempatan tombol terbatas.
[add_to_cart_url id="123"]
[shop_messages]
Gratis
Menampilkan notifikasi atau pesan toko WooCommerce di lokasi mana pun di website Anda. Pesan ini mencakup notifikasi seperti “Produk berhasil ditambahkan ke keranjang”, “Kupon berhasil diterapkan”, atau pesan error saat proses checkout bermasalah.
[shop_messages]
Shortcode ini tidak memiliki atribut. Tempatkan di halaman kustom yang membutuhkan visibilitas notifikasi WooCommerce — misalnya halaman konfirmasi pesanan atau halaman promo.
[woocommerce_product_search]
Premium
Shortcode ini berasal dari ekstensi premium WooCommerce Product Search. Menampilkan pencarian produk secara real-time — hasil muncul saat pelanggan mengetik kata kunci, lengkap dengan filter harga, kategori, tag, dan rating.
[woocommerce_product_search]
Shortcode filter pendukung yang bisa dikombinasikan dengan [woocommerce_product_filter_products]:
| Shortcode Filter | Fungsi |
|---|---|
[woocommerce_product_filter] | Filter pencarian berdasarkan kata kunci |
[woocommerce_product_filter_attribute] | Filter berdasarkan atribut produk (warna, ukuran, dll.) |
[woocommerce_product_filter_category] | Filter berdasarkan kategori produk |
[woocommerce_product_filter_price] | Filter rentang harga dengan slider |
[woocommerce_product_filter_tag] | Filter berdasarkan tag produk |
[woocommerce_product_filter_rating] | Filter berdasarkan rating produk |
[woocommerce_product_filter_sale] | Filter produk diskon |
[woocommerce_product_filter_stock] | Filter produk tersedia/backorder |
[woocommerce_product_filter_reset] | Tombol reset semua filter |
⚡ Referensi Cepat: Semua Shortcode WooCommerce
Bookmark tabel ini sebagai panduan harian saat membangun atau mengelola toko online
| # | Shortcode | Fungsi Utama | Atribut Utama |
|---|---|---|---|
| 1 | [woocommerce_cart] | Halaman keranjang belanja | — |
| 2 | [woocommerce_checkout] | Formulir checkout | — |
| 3 | [woocommerce_my_account] | Area akun pengguna | — |
| 4 | [woocommerce_order_tracking] | Formulir lacak pesanan | — |
| 5 | [product_page] | Satu halaman produk lengkap | id, sku |
| 6 | [products] | Kumpulan produk (paling fleksibel) | limit, columns, orderby, order, category, tag, on_sale, best_selling, top_rated, paginate, visibility |
| 7 | [product_categories] | Semua kategori produk | number, columns, include, orderby, order, hide_empty, parent |
| 8 | [product_category] | Produk dari satu kategori | category (wajib), columns, orderby, order, per_page, paginate |
| 9 | [related_products] | Produk terkait otomatis | posts_per_page, columns |
| 10 | [recent_products] | Produk terbaru | limit, columns, orderby |
| 11 | [featured_products] | Produk unggulan | limit, columns, orderby |
| 12 | [best_selling_products] | Produk terlaris | limit, columns, orderby |
| 13 | [top_rated_products] | Produk rating tertinggi | limit, columns, orderby |
| 14 | [sale_products] | Produk diskon / promo | limit, columns, orderby |
| 15 | [add_to_cart] | Tombol tambah ke keranjang | id, sku, style, show_price, class, quantity |
| 15b | [add_to_cart_url] | URL tambah ke keranjang | id, sku |
| 16 | [shop_messages] | Notifikasi toko WooCommerce | — |
| 17 | [woocommerce_product_search] | Pencarian produk real-time (Premium) | Lihat dokumentasi ekstensi |
Masalah Umum Shortcode WooCommerce & Cara Mengatasinya
1. Shortcode Tampil Sebagai Teks Biasa
Jika shortcode muncul sebagai teks mentah (misalnya [woocommerce_cart] tercetak di halaman), lakukan langkah-langkah berikut:
- ✓Periksa format shortcodeGunakan blok Shortcode di editor Gutenberg. Jika memakai text editor, pastikan tidak ada tag HTML yang mengganggu.
- ✓Gunakan tanda kutip lurus (“)Tanda kutip curly/tipografi (” “) bukan kode standar dan bisa membuat shortcode gagal diproses.
- ✓Update WooCommerce dan WordPressVersi usang mungkin tidak mendukung shortcode tertentu. Selalu gunakan versi terbaru.
- ✓Uji dengan tema defaultGanti sementara ke tema default WordPress (Twentytwenty-four). Jika shortcode berfungsi, tema aktif Anda yang bermasalah.
- ✓Uji kompatibilitas pluginNonaktifkan semua plugin kecuali WooCommerce. Aktifkan kembali satu per satu untuk mengidentifikasi plugin penyebab konflik.
2. Shortcode Tidak Render dengan Benar
Masalah ini sering terjadi pada halaman WooCommerce kustom. Coba solusi berikut:
- Verifikasi penempatan shortcode. Pastikan halaman tempat shortcode tidak konflik dengan halaman WooCommerce bawaan (Toko, Checkout, Keranjang).
- Refresh permalink. Buka Pengaturan → Permalink di dashboard WordPress, lalu klik Simpan Perubahan tanpa mengubah apapun. Ini mereset struktur URL dan sering memperbaiki masalah render.
3. Produk Tidak Muncul dalam Shortcode
- Periksa status produk. Pastikan produk berstatus Diterbitkan dan visibilitas diatur ke Publik.
- Verifikasi kategori dan tag. Jika shortcode menggunakan filter kategori/tag, pastikan produk sudah ditetapkan ke kategori/tag yang sesuai.
- Cek atribut yang digunakan. Periksa kembali nilai atribut — slug kategori, ID produk, atau SKU harus tepat.
Alternatif Shortcode untuk WooCommerce
Shortcode sangat berguna, tapi ada beberapa alternatif yang lebih visual dan mudah digunakan, terutama bagi pemula atau pemilik toko yang tidak ingin berurusan dengan kode sama sekali.
1. WordPress Blocks (Gutenberg)
Sejak editor Gutenberg diintegrasikan ke WordPress, WooCommerce kini menyediakan fitur-fiturnya dalam format blok. Blok lebih mudah ditambahkan, mendukung pratinjau langsung, dan minim risiko error dibandingkan shortcode. Klik ikon + di editor, cari blok WooCommerce yang Anda butuhkan, lalu seret ke area konten.
2. Plugin Page Builder
Plugin page builder populer terintegrasi dengan WooCommerce dan memungkinkan kustomisasi halaman toko melalui antarmuka drag-and-drop yang intuitif. Berikut beberapa pilihan terbaik:
| Plugin | Harga Mulai | Keunggulan |
|---|---|---|
| Beaver Builder | $99/tahun | Stabil, performa cepat, ideal untuk toko skala menengah |
| Divi | $70/tahun | Visual builder terpadu, banyak template siap pakai |
| Visual Composer | $49/tahun | Ringan, mudah dipelajari pemula |
| SeedProd | $39.50/tahun | Spesialis landing page, konversi tinggi |
3. WordPress Site Editor (FSE)
Editor situs bawaan WordPress (Tampilan → Editor) adalah alternatif gratis tanpa plugin tambahan. Menggunakan pendekatan berbasis blok yang memungkinkan Anda membuat halaman dari template atau koleksi blok dan pola — ideal untuk menjaga performa toko tetap optimal karena tidak memerlukan plugin tambahan.
Kesimpulan
Shortcode WooCommerce adalah alat yang powerful untuk mengkustomisasi toko online Anda — terutama jika Anda ingin menambahkan fitur canggih tanpa menulis kode dari nol. Dengan 17 shortcode yang tersedia (ditambah berbagai atribut kustomisasi), Anda memiliki fleksibilitas penuh untuk membangun pengalaman belanja yang profesional.
- Gunakan
[products]dengan atribut yang tepat untuk menampilkan produk secara fleksibel di mana saja. - Manfaatkan
[woocommerce_cart],[woocommerce_checkout], dan[woocommerce_my_account]untuk halaman inti toko. - Gunakan
[best_selling_products]dan[top_rated_products]untuk membangun kepercayaan dan mendorong konversi. - Selalu gunakan tanda kutip lurus (“) dan blok Shortcode di Gutenberg untuk hasil terbaik.
- Pertimbangkan beralih ke Blok Gutenberg atau page builder jika Anda tidak nyaman dengan kode.
Untuk informasi lebih lanjut, kunjungi dokumentasi resmi WooCommerce atau baca panduan kami tentang Cara Mempercepat Website WooCommerce: 15 Langkah Praktis.
FAQ — Pertanyaan yang Sering Diajukan
Bagaimana cara membuat shortcode kustom di WooCommerce?
Anda bisa membuat shortcode kustom dengan mendeklarasikan fungsi yang diinginkan di file functions.php tema WordPress Anda, lalu mendaftarkannya menggunakan fungsi add_shortcode(). Namun untuk fitur WooCommerce bawaan, cukup gunakan shortcode yang sudah tersedia tanpa perlu coding. Anda juga bisa membaca panduan cara membuat shortcode WordPress kustom untuk referensi lebih lanjut.
Bisakah shortcode WooCommerce diedit atau dikustomisasi?
Anda tidak bisa mengedit shortcode WooCommerce bawaan secara langsung, tapi Anda bisa mengkustomisasi outputnya dengan menambahkan parameter. Misalnya, [products orderby="popularity"] menampilkan produk berdasarkan jumlah pembelian. Untuk kustomisasi lebih dalam, pertimbangkan menggunakan kode kustom atau plugin shortcode khusus.
Apakah shortcode WooCommerce berpengaruh pada SEO?
Shortcode sendiri tidak secara langsung mempengaruhi SEO. Namun, konten yang dihasilkan shortcode tetap diindeks oleh mesin pencari seperti konten HTML biasa. Misalnya, jika shortcode menampilkan produk terlaris, Google akan mengindeks nama produk, harga, dan deskripsinya. Pastikan konten yang ditampilkan shortcode sudah dioptimasi dengan baik untuk kata kunci yang relevan.
Shortcode WooCommerce apa yang harus ada di setiap toko online?
Setidaknya empat shortcode ini wajib ada di setiap toko WooCommerce: [woocommerce_cart] untuk halaman keranjang, [woocommerce_checkout] untuk halaman checkout, [woocommerce_my_account] untuk halaman akun pelanggan, dan [woocommerce_order_tracking] untuk pelacakan pesanan. WooCommerce biasanya membuat halaman-halaman ini secara otomatis saat pertama kali diinstal.
Apakah shortcode WooCommerce berfungsi di semua tema WordPress?
Sebagian besar shortcode WooCommerce berfungsi di tema apa pun selama WooCommerce aktif. Namun, tampilan visualnya sangat bergantung pada kompatibilitas tema dengan WooCommerce. Jika shortcode tidak render dengan benar, coba ganti sementara ke tema default WordPress untuk memastikan apakah tema aktif Anda yang menjadi penyebab masalah.

Contact Us
Leave a Reply