Halaman WooCommerce VS Halaman Non WooCommerce

TokoDaring.Com – Halaman WooCommerce VS Halaman Non WooCommerce. Ketika anda membuat website toko daring menggunakan WordPress dan WooCommerce, maka ada banyak atau beberapa halaman yang harus di buat. Beberapa kami sebut sebagai halaman WooCommerce, dan sebagian lainnya merupakan halaman Non WooCommerce.

Artikel Lainnya:

HSTS Website eCommerce

Halaman WooCommerce VS halaman non WooCommerce

Pada artikel kami sebelumnya, WooCoommerce demo store notice. Kami sempat menyebut tentang perbedaan halaman WooCommerce dan halaman Non-WooCommerce yang ada website toko online WordPress.

WordPress kita tau yang awalnya adalah CMS yang andal untuk urusan penerbitan dan blog. Tapi sejak akuisisi WooCommerce dan integrasinya dengan WordPress, menjadikannya sebagai platform toko online yang powerful.

Maka akan ada dua section besar di dalam website (eCommerce) WordPress anda. Masing-masing memiliki halaman dan custom post type yang sesuai dengan fungsinya

1. Blog dan publishing, yang di handle oleh WordPress sendiri.
2. eCommerce store, yang di handle oleh WooCommerce.

Artikel ini memberikan penjelasan apa yang kami maksud halaman WooCommerce dan halaman Non-WooCommerce, apa perbedaannya dan bagaimana kita bisa mengkustomnya.

Mengetahui halaman WooCommerce dan halaman Non WooCommerce, juga tentang fungsi-fungsinya akan dapat membantu kita ketika mendesain, memaksimalkan SEO, bahkan dapat meningkatkan performa.

Halaman WooCommerce

Halaman WooCommerce adalah halaman yang di butuhkan oleh WooCommerce untuk menjalankan fungsinya sebagai toko online. Tanpa halaman tersebut, mustahil transaksi atau seluruh proses yang berkaitan dengan (transaksi jual beli) toko online akan dapat berjalan.

Setelah instalasi, WooCommerce akan mengecek apakah halaman-halaman yang di butuhkan sudah ada atau belum. Jika belum maka itu akan membentuk beberapa halaman yang bagi WooCommerce merupakan halaman krusial dan wajib ada.

Page (halaman statis)

Berikut beberapa halaman statis (page) yang harus ada ketika WooCommerce terinstal.

• Shop – Halaman untuk mendisplay produk yang di jual.
• Cart – Halaman untuk menampung produk belanja kustomer sebelum di bayar.
• Checkout – Halaman yang terkait dengan detail pembayaran dan pengiriman (alamat kustomer).
• My Account – Halaman untuk registrasi, login, history pesanan dan ganti password kustomer.
• Terms and conditions – Halaman yang menjelaskan tentang peraturan-peraturan operasional toko.

Anda mungkin melewatkan proses generate halaman WooCommerce saat proses Setup Wizard sedang berjalan. Sehingga halaman-halaman yang di maksud tidak terbentuk.

Namun anda bisa membuat halaman WooCommerce tersebut secara manual melalui setting di halaman dashboard : WooCommerce > Status > Tools lalu gunakan page installer tool.

Atau buat sendiri halaman statis dari dashboard WordPress seperti membuat halaman biasanya. Gunakan nama dan slug yang anda kehendaki, misalnya anda mungkin ingin menggunakan kata ‘keranjang’ dan bukannya ‘cart’ atau ‘belanja’ dan bukannya ‘shop’.

Halaman shop (halaman toko).

Ini adalah halaman utama di mana semua produk jualan anda akan di tampilkan secara katalog. Untuk membuatnya, buat saja seperti membuat sebuah halaman biasa (page), berikan nama (slug) yang anda inginkan, misalnya ‘belanja’ dan biarkan halaman tersebut kosong tanpa konten apapun.

Berikutnya, anda perlu memberi tahu WooCommerce bahwa halaman shop tersebut yang akan digunakan sebagai halaman produk katalog utama toko anda. Buka WooCommerce setting melalui dashboard admin, WooCommerce > Settings > Tab Produk. Pilih halaman yang akan digunakan sebagai shop page.

Halaman cart (keranjang).

Ini adalah halaman untuk menampung setiap produk yang di beli oleh kustomer sebelum mereka melanjutkan ke ‘meja’ pembayaran (checkout). Buat page baru dan masukan shortcode berikut :

[woocommerce_cart]

Halaman checkout WooCommerce (untuk handling pembayaran).

Halaman ini akan berisi shortcode dan menampilkan informasi seperti data kustomer, alamat pengiriman dan pilihan pembayaran. Buat page baru dan masukan shortcode berikut :

[woocommerce_checkout]

Halaman my account.

Halaman ini yang akan menjadi dashboard user atau kustomer di website anda. Halaman ini menampilkan setiap informasi pelanggan yang terkait dengan akun, pesanan, item download dan lain-lain.

Artikel berikut menjelaskan tentang apa dan bagaimana cara mengkustom halaman checkout WooCommerce.

Buat page baru dan sematkan shortcode berikut :

[woocommerce_my_account]

Jika anda merasa bahwa halaman my account terlihat tidak menarik, kami memiliki beberapa trik untuk mengkustom halaman my account WooCommerce.

Halaman post type dan taksonomi

Selain halaman statis diatas (page), berikutnya adalah halaman WooCommerce yang bertipe post type. WooCommerce membuat beberapa post type yang berbeda dan beberapa taksonomi untuk mengelompokkan jenis post ini.

• Produk (Post type).
  • (Halaman produk / product adalah post type dan berikut adalah taksonomi untuk jenis post type di atasnya).
  • Kategori produk.
  • Tag produk.
  • Variasi produk.
  • Visibilitas produk.
• Shop order (Post type).
  • (Halaman shop order / shop_order adalah post type dan berikut adalah taksonomi untuk jenis post type di atasnya).
  • Status pesanan.
  • Pengembalian dana pesanan.
• Kupon toko (Post type).
• Toko webhook (Post type).

Halaman produk

Kunjungi artikel ini, Jika anda tertarik untuk mengkustom, baik menambahkan ekstra konten dan merubah layout halaman produk WooCommerce.

Halaman produk (katalog) – page statis

Halaman katalog utama, lihat lagi penjelasan diatas tentang halaman shop (halaman toko).

Halaman produk (single) – post type

Halaman produk single WooCommerce adalah halaman yang menampilkan satu produk secara utuh. Halaman tersebut berisi setiap informasi tentang produk yang di jual, harga, post meta, dan lain-lainnya. Anda harus menambahkannya satu persatu sebanyak produk yang ingin di jual.

Pada halaman tersebut juga terdapat tombol add to cart, atau tombol untuk kustomer membeli produk itu secara online. Ups… kami memiliki trik jika anda ingin mengganti teks tombol add to cart woocommerce menjadi teks apapun yang di inginkan.

Halaman produk (arsip) – taksonomy

Halaman arsip produk adalah halaman produk yang sudah terkategorisasi sebelumnya, baik di kelompokan secara kategori maupun tag (taksonomy).

Misalnya produk kategori pakaian pria, yang di tag sebagai kemeja, kaos oblong. Atau produk kategori sepatu yang di tag sebagai sepatu formal, sneakers, sport dan lain-lain.

Taksonomy

Kategori produk

Kategori produk adalah cara utama untuk mengelompokkan produk dengan fitur yang serupa. Selain kita bisa membuat kategori utama (parent), anda juga dapat menambahkan sub kategori jika diinginkan.

Sejak WooCommerce versi 3.3, terdapat satu kategori yang di tetapkan sebagai kategori default. Jika anda lupa untuk menentukan kategori atas sebuah produk, maka produk tersebut secara otomatis akan di masukan ke dalam kategori default tersebut.

Tag produk

Tag produk adalah cara lain untuk menghubungkan produk satu sama lain, di samping kategori produk. Berbeda dengan kategori, tag produk tidak memiliki hierarki, anda tidak bisa membuat parent tag atau sub tag seperti pada kategori.

Misalnya, anda mungkin ingin mengelompokan produk yang berbeda jenis, namun di tag secara merk yang sama.

WooCommerce endpoints

WooCommerce juga memiliki apa yang disebut endpoint, yaitu bagian tambahan di URL situs website yang terdeteksi menampilkan konten yang berbeda.

Contohnya adalah halaman download yang merupakan ekstensi dari halaman my account (https://tokodaring.com/my-account/). Ketika endpoint (downloads) ditambahkan ke URL ini dan menjadi https://tokodaring.com/my-account/downloads/ maka kustomer akan di bawa ke halaman item download mereka.

Endpoints memungkinkan WooCommerce untuk menampilkan konten yang berbeda tanpa harus membuat halaman baru atau menambahkan shortcode. Hal ini dapat mengurangi jumlah konten yang ada di website WooCommerce.

Setting endpoint terletak di : WooCommerce > Setting > Advance.

Checkout endpoints

• Pay : order-pay.
• Order received : order-received.
• Add payment method : add-payment-method.
• Delete payment method : delete-payment-method.
• Set default payment method : set-default-payment-method.

Account endpoints

• Orders : orders.
• View order : view-order.
• Downloads : downloads.
• Edit account : edit-account.
• Addresses : edit-address.
• Payment methods : payment-methods.
• Lost password : lost-password.
• Logout : customer-logout.

Halaman Non WooCommerce

Sebaliknya apa yang kami maksud dengan halaman Non-WooCommerce. Halaman non WooCommerce yang kami maksud adalah semua halaman pada website WordPress yang tidak terasosiasi dengan plugin WooCommerce.

Seringkali pemilik atau pengelola website WordPress mengkombinasikan blog dengan toko online WooCommerce. Misalnya halaman tentang kami (about), kontak, sitemap, atau halaman blog post adalah halaman Non WooCommerce.

Kustomisasi berdasarkan halaman WooCommerce atau Non WooCommerce

Pada beberapa paragraf diatas kami singgung bahwa anda dapat melakukan kustom terhadap website berdasarkan halaman WooCommerce atau non WooCommerce. Dan itu dapat membantu anda meningkatkan performa (pagespeed) maupun SEO.

Seringkali satu fitur dari tema atau plugin berlaku sitewide. Misalnya adalah fitur WooCommerce ‘WC cart fragments’, yaitu fitur yang mengupdate isi kerajang tanpa user melakukan refresh halaman. Sebagai fitur toko online ini tentu sebuah fitur yang penting.

Tapi bagaimana jika di website toko online anda, ada banyak artikel blog dan fitur WC cart fragments ini seharusnya tidak perlu berjalan ketika pengunjug hanya sedang membaca artikel blog anda.

Maka fitur WC cart fragments bisa di kustom agar hanya berjalan pada halaman WooCommerce saja. Hal itu dimungkinkan dengan membuat fungsi kondisional. Misalnya dengan kondisi if(!is_woocommerce() && !is_cart() && !is_checkout()), contoh sebagai berikut :

/*
 * Conditional function
 * styling halaman WooCommerce
 */

add_action('wp_enqueue_scripts', 'disable_cart_fragments', 11);
function disable_cart_fragments() {
    if(is_page(array(520, 521, 522, 523)) || is_singular('post')) { // ini adalah list halaman non WC.
        wp_dequeue_script('wc-cart-fragments');
    }
}

Dengan kondisi if(!is_woocommerce() && !is_cart() && !is_checkout()) seperti di atas, maka script wc-cart-fragments tidak akan berjalan pada halaman non WooCommerce (id halaman 520, 521, 522, 523) dan is_singular('post') adalah halaman konten artikel (blog).

Kustom lainnya terkait WooCommerce lihat artikel yang kami tag sebagai Kustom WooCommerce di halaman kategori coding for fun.

Artikel terkait :

Feed Ads by Google!