Shortcode WooCommerce: Panduan Utama untuk 2021

Diterbitkan: 2020-01-11

Jika Anda memiliki bisnis WooCommerce, Anda mungkin pernah mendengar tentang shortcode. Itu adalah cuplikan kecil yang memungkinkan Anda untuk menambahkan dan menyesuaikan berbagai aspek toko online Anda tanpa menulis baris kode yang panjang. Dalam panduan ini, kita akan melihat apa itu shortcode WooCommerce, mengapa Anda harus menggunakannya, dan bagaimana memanfaatkannya sebaik mungkin .

Shortcode WooCommerce: Semua yang perlu Anda ketahui

Jika Anda bekerja dengan WordPress, Anda mungkin akrab dengan WooCommerce. Saat ini, 93,7% dari semua situs web eCommerce WordPress menggunakan plugin WooCommerce yang terkenal. Platform open-source, sepenuhnya dapat disesuaikan yang dikembangkan oleh WooThemes ini dimulai sebagai addon lain tetapi segera lepas landas dengan jutaan unduhan, yang menarik perhatian dewan WordPress. Hingga saat ini, plugin tersebut telah diunduh 70 juta kali dan telah menjadi plugin eCommerce terkemuka, mendukung total 28% toko online.

Terlepas dari reputasi dan kesuksesannya yang luar biasa, tim WooCommerce terus bekerja untuk menjadikannya lebih baik. Sepanjang jalur pengembangannya, ia telah memberikan beberapa kode pendek dari berbagai jenis kepada pengguna untuk menyesuaikan situs mereka. Dengan kode pendek seperti itu, mereka dapat mengubah toko mereka dan menyesuaikan antarmuka, check-out, fungsionalitas, proses daftar produk, dan banyak lagi.

Jadi untuk membantu Anda memaksimalkan shortcode, dalam panduan ini kita akan melihat:

Penjelasan singkat tentang kode pendek
Mengapa mereka diperlukan untuk bisnis Anda
Daftar shortcode WooCommerce
Bagaimana Anda dapat memanfaatkannya sepenuhnya?

Apa itu Shortcode WooCommerce?

Mari kita mulai dengan dasar-dasarnya. Kode pendek WooCommerce adalah cuplikan kecil yang membantu Anda mencapai fungsionalitas atau menampilkan konten di situs eCommerce Anda tanpa menulis kode yang panjang. Dengan kata lain, ini adalah makro yang memungkinkan interaksi dinamis dengan konten situs Anda .

Anda dapat menggunakan kode pendek di mana saja di toko Anda untuk menyesuaikannya, memamerkan produk, atau sekadar tombol ajakan bertindak. Dan bagian terbaiknya adalah Anda tidak memerlukan pengetahuan coding untuk mulai menggunakannya. Anda hanya perlu semangat membara untuk bisnis online dan pemahaman mendalam tentang apa yang Anda inginkan untuk toko Anda. Kode pendek akan melakukan sisanya dengan bersih dan rapi.

Singkatnya, shortcode WooCommerce bermanfaat dalam tiga cara:

Mereka membantu menghemat waktu karena Anda tidak perlu menulis baris kode yang panjang, memberi Anda lebih banyak waktu untuk mengerjakan hal lain.
Karena mereka tidak menambahkan markup ke konten posting, pemilik toko akan dapat mengedit gaya halaman nanti.
Lebih banyak fleksibilitas. Meskipun ini akan tergantung pada parameter yang ditetapkan oleh pengguna, mereka dapat menerapkan kode pendek yang sama untuk situasi yang berbeda.

Mengapa Anda membutuhkan Shortcode WooCommerce?

Masih belum yakin? Pikirkan lagi, shortcode WooCommerce dapat melakukan lebih dari yang Anda bayangkan.

Pertama, dengan kode pendek, Anda akan diberikan kendali penuh atas situs Anda . Ini berarti Anda dapat dengan bebas menampilkan produk, menambahkan tombol ajakan bertindak atau tombol jenis apa pun di mana pun di toko Anda tanpa meminta bantuan dari pengembang mana pun. Ini juga berarti Anda tidak harus bekerja dengan kode yang panjang dan rumit.

Ini sangat cocok untuk mereka yang ingin mencoba berbagai strategi di toko online mereka. Misalnya, daripada memandu pelanggan Anda melalui proses penjualan standar seperti toko lain, Anda mungkin ingin menampilkan tombol tambahkan ke troli di salah satu pos populer Anda untuk mendorong konversi. Dan bagian terbaiknya adalah kode pendek memungkinkan Anda memilih di antara banyak tombol ajakan bertindak yang Anda tempatkan di situs Anda.

Selain itu, kode pendek WooCommerce memungkinkan Anda menambahkan produk ke beranda, membuat kisi item yang sedang dijual untuk menunjukkannya kepada pelanggan, dan menampilkan produk populer Anda di mana pun Anda mau. Bahkan membuat halaman pelacakan pesanan dimungkinkan! Dan itulah keajaiban kode pendek, mereka memberi Anda opsi tanpa akhir untuk menyesuaikan toko Anda .

Apa jenis Shortcode WooCommerce yang ada?

Karena sulit untuk mengatakan berapa banyak shortcode yang ditawarkan WooCommerce, kami akan mencantumkannya berdasarkan kategorinya. Berikut adalah ikhtisar singkat tentang kode pendek WooCommerce yang akan kami bahas dalam panduan ini:

Kode Pendek Halaman
Kode Pendek Produk (ini adalah kategori yang paling kuat)
Kode Pendek Halaman Produk
Produk Terkait Shortcode
Tombol Tambahkan ke Keranjang atau Kode Pendek URL

Bagaimana cara memanfaatkan Shortcode WooCommerce ?

Sekarang, mari kita lihat apa yang dapat dilakukan setiap jenis kode pendek dan bagaimana memanfaatkannya:

1. Kode Pendek Halaman

Biasanya, WordPress hadir dengan 4 halaman default dengan shortcode yang disertakan sehingga Anda tidak perlu menambahkannya secara manual. Namun, jika karena alasan tertentu bukan itu masalahnya, Anda dapat membuat ulang halaman dengan kode pendek dan memperjelasnya di pengaturan.

Di dalam kode pendek halaman, Anda akan menemukan:

Keranjang

 [ woocommerce_cart ]

Ini digunakan untuk halaman troli dan membantu menampilkan konten troli setelah pelanggan Anda menambahkan produk ke troli mereka. Selain itu, ini juga menampilkan antarmuka untuk kode kupon, potongan dan potongan keranjang, dan elemen lain untuk halaman keranjang standar. Ini adalah kode pendek sederhana, jadi Anda tidak perlu menambahkan kondisi atau parameter apa pun ke dalamnya.

Periksa

 [ woocommerce_checkout ]

Setelah pelanggan Anda mengumpulkan semua produk/layanan yang mereka inginkan, mereka akan mengklik check-out, dan inilah saat kode pendek checkout beraksi. Ini akan menampilkan semua informasi penting yang perlu dilihat pembeli sebelum checkout seperti metode pembayaran, info penagihan, info pengiriman, dll. Ini juga merupakan kode pendek sederhana yang tidak menerima argumen tambahan apa pun.

Akun saya

 [ woocommerce_my_account ]

Pelanggan harus dapat melihat dan mengubah detail profil mereka, seperti nama, alamat email, kata sandi, serta detail pesanan mereka seperti alamat pengiriman dan penagihan. Dengan kode pendek ini, pengguna akan dapat melihat, mengedit, dan memperbarui detail tersebut. Selain itu, berisi argumen yang akan menampilkan informasi tentang pembelanja saat ini.

Formulir Pelacakan Pesanan

 [ woocommerce_order_tracking ]

Tidak seperti shortcode tiga halaman sebelumnya, shortcode ini tidak dibuat secara otomatis secara default tetapi Anda dapat menambahkannya sehingga pelanggan Anda dapat melihat dan melacak status pesanan mereka yang sedang berlangsung. Jika ingin mengecek status pesanan, pembeli harus memasukkan detail pesanannya di Formulir Pelacakan Pesanan.

Anda dapat menggunakan kode pendek WooCommerce ini untuk halaman individual atau menggabungkannya dengan kode pendek lain untuk menampilkan formulir pelacakan. Misalnya, Anda dapat menggunakan kode pendek ini di halaman Akun Saya untuk memungkinkan pelanggan Anda mengakses formulir pelacakan.

2. Kode Pendek Produk

Harap diingat bahwa untuk menggunakan Kode Pendek Produk, Anda memerlukan WooCommerce 3.2 dan versi yang lebih baru. Versi ini memungkinkan Anda menggunakan kode pendek produk untuk semua jenis tampilan produk. Jika Anda memiliki versi sebelumnya, periksa dokumen ini karena Anda harus menggunakan kode pendek yang berbeda untuk setiap jenis pengelompokan produk.

 [ products ]

2.1 Atribut Kode Pendek Produk

Saat menggunakan kode pendek produk, Anda harus menentukan produk mana yang ingin Anda tampilkan berdasarkan kondisi berbeda yang memungkinkan Anda memfilter produk menurut ID pos, SKU, kategori, atribut, dan sebagainya. Mereka juga mendukung pagination, penyortiran acak, dan tag produk.

Mari kita lihat beberapa kode pendek produk:

Batasi jumlah produk

Dengan atribut limit, Anda dapat menetapkan batas jumlah produk yang ditampilkan. Misalnya, Anda dapat membatasi jumlah produk yang akan ditampilkan menjadi 8 item dengan yang berikut:

 [ products limit="12" ]

. Harap dicatat bahwa secara default, batasnya adalah "-1" yang berarti bahwa semua produk akan ditampilkan.

Ubah tata letak produk

Dengan shortcode WooCommerce Anda juga dapat mengubah tata letak untuk mendiversifikasi tampilan produk. Cukup pilih di antara atribut berikut tergantung pada preferensi pelanggan Anda: kolom, paginate, atau orderby.

sebuah. kolom

Jika Anda ingin menetapkan jumlah kolom tertentu, Anda harus menambahkan atribut 'kolom' dan memperjelas nomor yang Anda inginkan. Jadi jika Anda ingin 6 kolom dengan produk yang berbeda di masing-masing kolom, Anda dapat menggunakan kode pendek:

 [ products limit="12" columns="4" ]

B. paginasi

Contoh lain adalah atribut paginate, yang membagi produk Anda ke dalam halaman yang berbeda. Dengan kode pendek ini, Anda dapat menentukan jumlah item yang ditampilkan di setiap halaman.

Untuk menggunakannya, atur paginate = “true”, lalu masukkan shortcode berikut:

 [ products limit="12" columns="4" paginate="true" ]

C. Urutkan produk dengan “orderby”

Atribut orderby membuka berbagai pilihan karena memungkinkan Anda mengurutkan produk menurut beberapa kriteria untuk menampilkannya sesuai keinginan dengan menambahkan ketentuan. Ini termasuk:

- id: menampilkan produk berdasarkan id produk.
- popularitas : dengan atribut ini, produk yang paling banyak dibeli akan ditampilkan terlebih dahulu.
- title : mengurutkan produk berdasarkan judulnya. Ini adalah urutan default orderby.
- rating : cara lain yang menarik untuk mengurutkan produk berdasarkan nilai rating rata-ratanya.
- date : untuk mengurutkan item berdasarkan tanggal diterbitkan. Secara default, produk terlama ditampilkan terlebih dahulu. Namun, Anda dapat mengubahnya menggunakan atribut tanggal.
- rand : dengan atribut ini, Anda dapat mengubah urutan produk saat halaman dimuat ulang. Meskipun demikian, dengan situs di mana caching diaktifkan dan produk disimpan dalam urutan tetap, atribut ini mungkin tidak berfungsi.
- menu_order : ini hanya akan berfungsi jika Anda telah mengatur pesanan menu dan itu akan menampilkan produk sesuai dengan pesanan itu. Angka terendah akan ditampilkan terlebih dahulu.

Jika Anda menginginkan lebih banyak penyesuaian, Anda dapat melangkah lebih jauh dan menggabungkan opsi ini hanya dengan menambahkan spasi di antaranya. Misalnya, Anda dapat mencoba mencampur kode pendek agar enam kolom produk ditampilkan dalam urutan berdasarkan popularitasnya seperti ini:

 [ products limit="12" columns="4" orderby="popularity" ]

Lebih banyak atribut produk

Ada beberapa atribut produk lainnya di WooCommerce yang dapat Anda gunakan untuk menggabungkannya dengan kode pendek “produk” . Beberapa yang utama adalah:

- SKU: Anda dapat menampilkan produk Anda berdasarkan SKU (stock-keeping unit) mereka. Jika Anda ingin menambahkan beberapa SKU, cukup pisahkan dengan koma.
- on_sale : Seperti namanya, atribut ini akan menampilkan semua produk on-sale dari toko Anda.
- kategori : Ini juga merupakan ide yang baik untuk menampilkan produk berdasarkan kategorinya. Anda dapat memiliki beberapa kategori yang memisahkan siput dengan koma.
- best_selling : Ini adalah pilihan yang baik jika Anda ingin menampilkan produk Anda yang paling populer dan terlaris terlebih dahulu.
- top_rated : Mengikuti logika yang sama, Anda juga dapat menampilkan item dengan peringkat teratas.
- class : Atribut ini membantu Anda mengubah urutan menggunakan CSS khusus dengan menambahkan kelas pembungkus HTML.

Misalnya, jika Anda ingin menampilkan produk terlaris Anda, empat per baris, dengan maksimum dua belas item, Anda dapat menggunakan kode pendek ini:

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

Visibilitas

Atribut ini memungkinkan Anda untuk menampilkan produk berdasarkan pengaturan visibilitas. Beberapa opsinya adalah:

- - katalog : Ini mengambil produk yang hanya terlihat di halaman toko
  - pencarian: Ini menunjukkan produk yang hanya terlihat di halaman pencarian
  - terlihat: Ini adalah kombinasi dari dua sebelumnya karena mengambil produk yang terlihat di halaman toko dan hasil pencarian.
  - tersembunyi: Ini menunjukkan produk yang hanya dapat diakses oleh URL langsung.
  - unggulan : Ini hanya akan mengambil produk yang ditandai sebagai unggulan

Misalnya, jika Anda ingin menampilkan produk unggulan Anda, empat per baris, dengan maksimum dua belas item, Anda dapat menggunakan kode pendek ini:

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

Atribut produk konten

Di dalam kode pendek produk, ada atribut produk konten yang dapat Anda gunakan untuk mengambil produk pada halaman atau posting tertentu. Lebih khusus lagi, dimungkinkan untuk mengambil barang berdasarkan atribut yang tersedia atau istilah atribut (ini adalah variasi dari atribut itu). Anda dapat melakukan ini dengan memasukkan slug, menentukan istilah, dan menggabungkannya dengan atribut. Ini bisa sedikit membingungkan jadi mari kita lihat lebih dekat masing-masing:

- atribut: Ini membantu menampilkan produk dengan melampirkan siput
- istilah: Ini menyebutkan istilah atribut yang dipisahkan dengan koma
- terms_operator: Ini memberi Anda lebih banyak kontrol atas cara menampilkan atribut. Ada tiga operator:
  - AND : Ini akan menampilkan produk dari semua atribut yang Anda pilih.
  - IN : Menampilkan produk yang memiliki atribut yang dipilih.
  - NOT IN : Ini akan menampilkan produk yang tidak memiliki atribut yang dipilih.

Kategori

Mengikuti logika yang sama dengan atribut produk konten, Anda juga dapat menampilkan item berdasarkan kategorinya:

- - kategori: Untuk memilih kategori yang ingin Anda tampilkan
  - cat_operator: Anda dapat menerapkan ketentuan untuk menampilkan item yang Anda inginkan:
    - DAN: Produk yang ditampilkan harus termasuk dalam semua kategori yang dipilih
    - IN: Produk yang ditampilkan setidaknya harus dalam salah satu kategori yang dipilih
    - NOT IN: Produk yang ditampilkan tidak harus dalam kategori yang dipilih
  - Anda juga dapat menampilkan produk menurut daftar ID Postingan yang dipisahkan koma atau daftar SKU.
  - Ada beberapa lagi shortcode/atribut yang termasuk ke dalam Product shortcode: Atribut Khusus, Kategori Produk, dan Kategori Produk. Logikanya sangat mirip dengan apa yang Anda baca di atas tetapi jika Anda ingin melihatnya, Anda dapat memeriksanya.
  - Jika Anda ingin tahu lebih banyak tentang kode pendek, Anda dapat mengunjungi halaman ini dan melihat 8 skenario.

Misalnya, jika Anda ingin menampilkan produk untuk kategori tertentu, empat per baris, dengan maksimum dua belas item, Anda dapat menggunakan kode pendek ini:

 [ products limit="12" columns="4" category="hoodies, tshirts" ]

3. Kode Pendek Halaman Produk

Dengan jenis kode pendek WooCommerce ini, Anda dapat menampilkan halaman produk yang berbeda menggunakan dua atribut: ID produk dan SKU. Kode untuk ini adalah .

Penting untuk dicatat bahwa Anda bahkan dapat menggunakan kedua kode pendek berikut:

 [ product_page ]

atau

 [ product_page sku="hoodie" ]

4. Kode Pendek Produk Terkait

Jika Anda pernah menggunakan toko eCommerce seperti Amazon atau Alibaba, Anda mungkin memperhatikan bahwa ketika Anda melihat suatu produk, mereka menunjukkan kepada Anda item lain yang terkait. Misalnya, jika Anda mencari tenda, mereka akan menunjukkan tenda dan kantong tidur serupa lainnya. Itu karena jika Anda membutuhkan tenda, kemungkinan besar Anda juga akan tertarik dengan kantong tidur.

Akibatnya, menunjukkan produk terkait pembeli Anda adalah ide bagus untuk meningkatkan penjualan Anda. Di WooCommerce ini dimungkinkan dengan kode pendek Produk Terkait. Anda dapat menunjukkan dengan tepat berapa banyak produk yang Anda ingin dilihat pengguna. Misalnya, jika Anda ingin menampilkan 4 produk, kode pendeknya harus:

 [ related_products limit="4" ]

5. Tombol Tambahkan ke Keranjang

Tombol tambahkan ke troli adalah cara terbaik lainnya untuk meningkatkan pengalaman pelanggan di toko Anda dan meningkatkan rasio konversi. Dan bagian terbaiknya adalah sangat sederhana.

Katakanlah Anda ingin menampilkan harga suatu produk dan tombol Add to Cart pada sebuah postingan atau halaman, shortcode yang perlu Anda gunakan adalah

 [ add_to_cart sku="hoodie" ]

Kode pendek WooCommerce juga memungkinkan Anda mengarahkan pembeli ke URL lain alih-alih menambahkan item ke troli. Untuk melakukan ini, Anda perlu menulis

 [ add_to_cart_url ]

untuk produk dengan id 219.

Daftar Shortcode yang berguna untuk WooCommerce

Terakhir, inilah daftar shortcode WooCommerce paling berguna yang dapat Anda gunakan di situs Anda.

Kode pendek halaman keranjang.

 [ woocommerce_cart ]

Lihat halaman

 [ woocommerce_checkout ]

Akun pengguna.

 [ woocommerce_my_account ]

Formulir Pelacakan Pesanan.

 [ woocommerce_order_tracking ]

Kode pendek produk.

 [ products ]

Produk Unggulan.

 [ featured_products ]

produk penjualan.

 [ sale_products ]

Produk terlaris.

 [ best_selling_products ]

Produk terbaru.

 [ recent_products ]

Atribut produk.

 [ product_attribute ]

Produk dengan peringkat teratas.

 [ top_rated_products ]

Kategori produk: untuk menampilkan produk dalam kategori tertentu.

 [ product_category ]

Kategori produk: menampilkan semua kategori produk Anda.

 [ product_categories ]

Pesan toko: untuk menampilkan pesan.

 [ shop_messages ]

Filter Produk: menampilkan filter pencarian produk.

 [ woocommerce_product_filter ]

Atribut Filter.

 [ woocommerce_product_filter_attribute ]

Kategori Filter Produk.

 [ woocommerce_product_filter_category ]

Filter Harga.

 [ woocommerce_product_filter_price ]

Label Filter Produk.

 [ woocommerce_product_filter_tag ]

Peringkat Filter.

 [ woocommerce_product_filter_rating ]

Penjualan Filter Produk: menampilkan filter langsung untuk produk yang dijual.

 [ woocommerce_product_filter_sale ]

Reset Filter Produk: Menampilkan tombol untuk menghapus semua filter langsung.

 [ woocommerce_product_filter_reset ]

Shortcode WooCommerce: Kesimpulan

Secara keseluruhan, kode pendek WooCommerce akan membantu Anda menyesuaikan toko Anda tanpa menulis kode yang panjang. Dengan cara ini Anda dapat menguji berbagai tata letak dan alternatif untuk menemukan yang tepat untuk toko Anda. Meskipun pada awalnya mungkin tampak rumit, kenyataannya dengan sedikit latihan mereka akan membuat hidup Anda lebih mudah dan akan membantu Anda membawa bisnis Anda ke tingkat berikutnya.

Untuk lebih banyak alternatif untuk menyesuaikan toko online Anda, Anda dapat melihat panduan kami di:

Tambahkan ke fungsi keranjang secara terprogram di WooCommerce
WooCommerce Ajax tambahkan ke troli

Apa pendapat Anda tentang kode pendek WooCommerce? Beri tahu kami pendapat Anda di komentar di bawah.