Panduan Lengkap Shortcode WooCommerce Indonesia

Panduan Lengkap Shortcode WooCommerce Indonesia
WooCommerce Online Store · · 11 menit baca

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.

Panduan shortcode WooCommerce untuk jasa website online store berbasis WordPress
WooCommerce shortcode memungkinkan kustomisasi toko online tanpa coding

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.
Cara menambahkan blok shortcode di editor WordPress Gutenberg untuk WooCommerce online store
Tambahkan blok Shortcode di editor Gutenberg WordPress, lalu tempel kode shortcode WooCommerce Anda
ℹ️
PentingSemua shortcode di bawah ini hanya berfungsi pada website WordPress yang sudah memasang plugin WooCommerce. Pastikan WooCommerce sudah terinstal dan aktif sebelum menggunakannya.

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.

1 [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.

2 [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]
3 [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]
4 [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]
💡
TipsShortcode ini sangat berguna untuk toko yang menjual produk fisik. Buat halaman “Lacak Pesanan” yang mudah ditemukan untuk meningkatkan pengalaman pelanggan.
5 [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.

AtributDeskripsiContoh
idID produk yang ingin ditampilkan[product_page id="123"]
skuSKU produk (alternatif dari ID)[product_page sku="SKU123"]

Anda bisa menggunakan shortcode ini beberapa kali dalam satu halaman untuk menampilkan produk yang berbeda-beda.

6 [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]

AtributFungsiNilai / Contoh
idTampilkan produk berdasarkan ID tertentuid="123"
skusTampilkan produk berdasarkan SKUskus="SKU123"
limitJumlah produk yang ditampilkanlimit="8"
columnsJumlah kolom tampilan (default: 4)columns="3"
orderbyUrutan tampilan produkorderby="popularity"
orderArah urutan: naik atau turun (default: ASC)order="DESC"
categoryFilter berdasarkan slug kategoricategory="baju,musim-panas"
tagFilter berdasarkan tag produktag="baru"
classTambahkan CSS class kustomclass="produk-utama"
on_saleTampilkan hanya produk diskonon_sale="true"
best_sellingTampilkan hanya produk terlarisbest_selling="true"
top_ratedTampilkan hanya produk rating tertinggitop_rated="true"
paginateAktifkan paginasipaginate="true"
visibilityFilter berdasarkan visibilitas produkvisibility="featured"

Nilai yang tersedia untuk atribut orderby:

  • title — urutkan berdasarkan nama produk (default)
  • date — urutkan berdasarkan tanggal publikasi
  • popularity — urutkan berdasarkan jumlah pembelian
  • rating — urutkan berdasarkan rating rata-rata
  • rand — tampilkan secara acak
  • id — 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 toko
  • search — hanya tampil di hasil pencarian
  • hidden — disembunyikan dari toko dan pencarian
  • featured — produk yang ditandai sebagai unggulan

Contoh gabungan:

[products limit="6" columns="3" orderby="popularity" category="elektronik" paginate="true"]
⚠️
Hindari Konflik AtributJangan menggunakan on_sale, best_selling, dan top_rated secara bersamaan. Kombinasi ketiganya dapat menyebabkan output yang tidak terduga karena prioritas filter saling bertentangan.
7 [product_categories] Gratis

Menampilkan semua kategori produk yang tersedia di toko Anda — lengkap dengan gambar kategori dan jumlah produk di dalamnya.

AtributFungsiContoh
numberJumlah kategori yang ditampilkannumber="6"
columnsJumlah kolom tampilancolumns="3"
includeTampilkan kategori tertentu (berdasarkan ID)include="12,15,18"
orderbyUrutkan berdasarkan: name, id, slug, menu_order, countorderby="count"
orderArah urutan (ASC/DESC)order="ASC"
hide_emptySembunyikan kategori kosong (tanpa produk)hide_empty="1"
parentTampilkan sub-kategori dari kategori induk tertentuparent="5"
[product_categories include="12,15,18" orderby="slug" order="ASC"]
8 [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.

AtributFungsi
category (wajib)Slug kategori yang ingin ditampilkan
columnsJumlah kolom (default: 4)
orderbyMetode pengurutan produk
orderArah urutan
per_pageJumlah produk per halaman
paginateAktifkan paginasi (true/false)
[product_category category="kaos" orderby="price" per_page="8" paginate="true"]
10 [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"]
12 [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"]
13 [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"]
14 [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"]
15 [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.

AtributFungsi
idID produk yang tombolnya ingin ditampilkan
skuSKU produk (alternatif dari ID)
styleCSS inline untuk mengkustomisasi tampilan tombol
show_priceTampilkan harga di samping tombol (true/false)
classCSS class kustom untuk tombol
quantityJumlah 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"]
16 [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.

⚡ Referensi Cepat: Semua Shortcode WooCommerce

Bookmark tabel ini sebagai panduan harian saat membangun atau mengelola toko online

#ShortcodeFungsi UtamaAtribut 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 lengkapid, 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 produknumber, columns, include, orderby, order, hide_empty, parent
8[product_category]Produk dari satu kategoricategory (wajib), columns, orderby, order, per_page, paginate
9[related_products]Produk terkait otomatisposts_per_page, columns
10[recent_products]Produk terbarulimit, columns, orderby
11[featured_products]Produk unggulanlimit, columns, orderby
12[best_selling_products]Produk terlarislimit, columns, orderby
13[top_rated_products]Produk rating tertinggilimit, columns, orderby
14[sale_products]Produk diskon / promolimit, columns, orderby
15[add_to_cart]Tombol tambah ke keranjangid, sku, style, show_price, class, quantity
15b[add_to_cart_url]URL tambah ke keranjangid, 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

Developer mengatasi masalah shortcode WooCommerce yang tidak tampil di website online store
Shortcode yang tidak tampil bisa disebabkan oleh berbagai faktor — berikut 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.
💡
Referensi ResmiUntuk panduan troubleshooting lebih mendalam, kunjungi dokumentasi resmi shortcode WooCommerce di situs WooCommerce.com.

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.

Blok WooCommerce di editor Gutenberg WordPress sebagai alternatif shortcode untuk jasa website online store
Blok WooCommerce di Gutenberg — alternatif visual yang lebih ramah pengguna dibanding shortcode

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:

PluginHarga MulaiKeunggulan
Beaver Builder$99/tahunStabil, performa cepat, ideal untuk toko skala menengah
Divi$70/tahunVisual builder terpadu, banyak template siap pakai
Visual Composer$49/tahunRingan, mudah dipelajari pemula
SeedProd$39.50/tahunSpesialis 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.

  1. Gunakan [products] dengan atribut yang tepat untuk menampilkan produk secara fleksibel di mana saja.
  2. Manfaatkan [woocommerce_cart], [woocommerce_checkout], dan [woocommerce_my_account] untuk halaman inti toko.
  3. Gunakan [best_selling_products] dan [top_rated_products] untuk membangun kepercayaan dan mendorong konversi.
  4. Selalu gunakan tanda kutip lurus (“) dan blok Shortcode di Gutenberg untuk hasil terbaik.
  5. 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.

Foto penulis artikel shortcode WooCommerce

Tim Editorial Samdee.me

Tim kami adalah praktisi WordPress & WooCommerce berpengalaman yang mengkhususkan diri dalam pengembangan jasa website online store profesional, optimasi performa toko, dan edukasi konten digital untuk bisnis Indonesia.

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *