Apa itu WooCommerce dan bagaimana cara kerjanya?

Apa itu WooCommerce dan bagaimana cara kerjanya?

WooCommerce adalah plugin perdagangan elektronik berbasis open source (sumber terbuka) yang dikembangkan menggunakan platform WordPress. Plugin ini mampu mengubah situs web WordPress standar menjadi toko online yang lengkap dengan berbagai fitur. Inti dari WooCommerce adalah mekanisme penghubung antara sistem manajemen konten WordPress (Content Management System/CMS) dengan fitur-fitur perdagangan elektronik. Awalnya dikembangkan oleh WooThemes, kini WooCommerce menjadi bagian dari proyek Automattic dan terintegrasi secara mendalam dengan ekosistem WordPress.

Prinsip kerjanya adalah dengan menambahkan tabel basis data khusus ke dalam basis data WordPress, yang digunakan untuk menyimpan data e-commerce seperti produk, pesanan, dan informasi pelanggan. Ketika fitur ini diaktifkan… WooCommerce Setelah plugin diaktifkan, ia akan menambahkan serangkaian menu dan opsi ke antarmuka administrator WordPress, serta menghasilkan halaman-halaman yang diperlukan di sisi frontend, seperti halaman utama toko, keranjang belanja, dan halaman pembayaran. Logika di sisi backend dijalankan melalui serangkaian action hook dan filter hook. woocommerce_before_main_content 和 woocommerce_after_shop_loop_itemImplementasi ini memungkinkan para pengembang untuk melakukan penyesuaian mendalam terhadap fungsi dan tampilan aplikasi.

Platform ini mengikuti arsitektur MVC (Model-View-Controller) yang umum, meskipun telah disesuaikan dalam konteks WordPress. Model data terdiri dari kelas-kelas yang berkaitan dengan produk dan pesanan. WC_Product 和 WC_OrderLapisan manajemen dan tampilan (view) dikendalikan melalui berkas template tema, sedangkan logika bisnis (controller) ditangani oleh inti plugin dan berbagai mekanisme “hook”. Struktur ini memastikan tingkat fleksibilitas dan skalabilitas yang tinggi.

推荐阅读 Panduan Ultimate WooCommerce 2025: Membangun Toko Online Anda dari Nol.。

Bagaimana cara menginstal dan mengonfigurasi toko WooCommerce pertama Anda?

Proses menginstal WooCommerce tidak berbeda dengan menginstal plugin WordPress lainnya. Cara yang paling langsung adalah dengan melakukan pencarian dan penginstalan melalui halaman “Plugins” -> “Install Plugins” di panel administrator WordPress.

UltaHost – Hosting untuk WordPress

Jaminan pengembalian uang dalam 30 hari, bandwidth dan basis data yang tidak terbatas, perlindungan DDoS gratis, diskon 50% untuk pembelian selama 3 tahun (dari harga normal: 50%).

halaman akses

Setelah Anda menginstal dan mengaktifkan plugin tersebut, sistem akan memulai sebuah panduan pengaturan yang akan membimbing Anda dalam menyelesaikan konfigurasi awal yang penting. Tahap ini sangat penting, karena akan menentukan kerangka dasar dari toko (store) Anda. Berikut adalah penjelasan rinci mengenai langkah-langkah konfigurasi utama tersebut.

Melakukan pengaturan informasi dasar toko

Panduan pengaturan akan pertama kali meminta Anda untuk mengisi alamat toko, jenis mata uang, jenis barang yang dijual (barang fisik, barang digital, atau keduanya), metode pembayaran, serta pengaturan awal untuk wilayah pengiriman. Misalnya, ketika Anda memilih mata uang “RMB” (Renminbi), plugin akan menetapkan opsi konfigurasi yang sesuai di dalam basis data.

Pengaturan-pengaturan ini terutama disimpan di dalam WordPress. wp_options Dalam tabel tersebut, woocommerce_ Simpan nama opsi yang diawali dengan suatu prefiks. Misalnya, informasi negara/wilayah toko disimpan di… woocommerce_default_country Termasuk dalam daftar opsi tersebut. Konfigurasi dasar ini menjadi dasar bagi pengoperasian semua fitur yang akan datang.

Mengonfigurasi pengaturan inti terkait pembayaran dan pengiriman

Pembayaran dan pengiriman merupakan inti dari bisnis e-commerce. WooCommerce telah menyertakan berbagai gateway pembayaran, seperti PayPal Standard, transfer bank, dan pembayaran melalui cek. Anda dapat mengaktifkan dan mengonfigurasikannya di halaman “WooCommerce” -> “Settings” -> “Payment”. Untuk pembayaran melalui PayPal, Anda perlu memasukkan alamat email akun pedagang dan kunci API (API key).

推荐阅读 WooCommerce: Panduan Lengkap untuk Membangun Situs Toko Online yang Kuat, Dari Nol Sampai Siap Digunakan。

Konfigurasi transportasi juga sangat penting. Di halaman “WooCommerce” -> “Settings” -> “Shipping”, Anda dapat menambahkan area pengiriman, serta mengatur metode pengiriman yang berbeda untuk setiap area (seperti pengiriman gratis, tarif tetap, atau pengambilan barang di lokasi) beserta biayanya. Plugin ini sangat berguna untuk membantu proses pengaturan tersebut. WC_Shipping_Method Kelas digunakan untuk mengabstraksi berbagai metode pengiriman (distribusi), sehingga pengembang dapat membuat logika pengiriman yang disesuaikan dengan kebutuhan mereka.

Contoh klasik dari hook kode pengiriman dengan tarif tetap dapat dilihat sebagai berikut, yang digunakan untuk menambah biaya tambahan berdasarkan berat keranjang belanja:

add_filter( 'woocommerce_package_rates', 'add_shipping_surcharge_by_weight', 10, 2 );
function add_shipping_surcharge_by_weight( $rates, $package ) {
    $cart_weight = WC()->cart->get_cart_contents_weight();
    foreach ( $rates as $rate_key => $rate ) {
        if ( 'flat_rate' === $rate->method_id ) {
            if ( $cart_weight > 10 ) {
                $rates[$rate_key]->cost += 20;
            }
        }
    }
    return $rates;
}

Menggunakan ekstensi (extensions) dan hook untuk melakukan penyesuaian (customization) yang lebih lanjut.

Kekuatan sebenarnya dari WooCommerce terletak pada koleksi ekstensi (yang secara resmi disebut “WooCommerce Extensions”) yang sangat luas, serta sistem hook yang ramah bagi para pengembang. Hal ini memungkinkan Anda untuk melampaui fitur-fitur bawaan dan membuat toko yang sesuai dengan kebutuhan bisnis Anda yang unik.

hosting.com hosting bersama

Kinerja tinggi, dilengkapi dengan CPU AMD EPYC, penyimpanan SSD NVMe, dan LiteSpeed, dukungan internal ahli 24 jam sehari, langkah-langkah keamanan canggih termasuk SSL, brute force, malware, dan perlindungan DDoS, menghemat hingga 731 TB/bulan.

halaman akses

Pasar ekstensi resmi menyediakan berbagai plugin dengan fitur canggih, mulai dari layanan berlangganan hingga sistem pemesanan dan sistem keanggotaan. Namun, untuk kebutuhan yang lebih khusus (dikustomisasi), penggunaan action hooks dan filter hooks secara langsung merupakan praktik yang umum digunakan dalam pengembangan.

Mengimplementasikan tampilan data produk yang disesuaikan (customized product data display)

Misalkan Anda menjual anggur dan perlu menampilkan informasi “tahun produksi” pada halaman produk. WooCommerce memungkinkan Anda dengan mudah menambahkan field produk khusus (custom product fields) dan menampilkannya di halaman web. Hal ini biasanya dilakukan dengan menggabungkan penggunaan kotak data produk (product data meta fields) dengan penyesuaian pada template (template overrides).

Pertama-tama, Anda perlu menggunakan… woocommerce_product_options_general_product_data Kait tersebut ditambahkan ke dalam sebuah bidang pada tab “Umum” pada halaman edit produk. Setelah itu, gunakan… woocommerce_process_product_meta Fungsi “hook” digunakan untuk menyimpan nilai dari field tersebut. Untuk menampilkan nilai tersebut, Anda perlu mengganti (mengoverwrite) file template detail produk yang bersangkutan. Biasanya, Anda akan… woocommerce/templates/single-product/ Salin file-file template yang ada di direktori tersebut ke dalam folder tema Anda. your-theme/woocommerce/single-product/ Anda perlu melakukan modifikasi pada teks tersebut.

推荐阅读 Pembangunan Situs Web E-commerce dengan WooCommerce: Panduan Lengkap untuk Membangun Toko Online Profesional dari Nol。

Contohnya, dalam price.php Potongan kode untuk menampilkan field kustom di dekat file template:

// 显示存储在 _product_year 自定义字段中的年份
$year = get_post_meta( get_the_ID(), '_product_year', true );
if ( $year ) {
    echo '<p class="product-year">Tahun: ' . esc_html( $year ) . '</p>';
}

Membuat bidang pembayaran (checkout field) yang khusus (custom).

Mengubah proses pembayaran (proses penyelesaian transaksi) merupakan kebutuhan yang umum terjadi. Anda dapat menggunakan… woocommerce_checkout_fields Filter hooks digunakan untuk menambahkan, menghapus, atau mengubah field dalam formulir pembayaran. Misalnya, untuk menambahkan field nomor pajak perusahaan bagi pelanggan B2B.

Hosting bersama InterServer.

Hosting bersama seharga $2,50 USD per bulan, diskon $0,1 USD untuk bulan pertama dengan kode promo tryinterserver, serta 461 skrip aplikasi cloud yang dapat diinstal dengan sekali klik.

halaman akses

Kode berikut mendemonstrasikan cara menambahkan sebuah bidang kustom di area bidang tagihan:

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['billing']['billing_vat'] = array(
        'label' => __( '增值税号', 'your-text-domain' ),
        'placeholder' => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
        'required' => false, // 可以根据业务需求设置为 true
        'class' => array('form-row-wide'),
        'clear' => true,
        'priority' => 25, // 控制字段显示顺序
    );
    return $fields;
}

Setelah menambahkan field tersebut, Anda juga perlu menggunakannya (mengimplementasikannya dalam aplikasi atau sistem Anda). woocommerce_checkout_update_order_meta Hook tersebut menyimpan nilai field ke dalam metadata pesanan, dan kemudian menggunakannya… woocommerce_admin_order_data_after_billing_address Hook tersebut menampilkan informasinya di halaman detail pesanan administrator.

Best Practices for Performance Optimization and Security

Seiring dengan pertumbuhan skala toko, peningkatan jumlah produk dan pesanan, serta penggunaan berbagai fitur ekspansi, masalah terkait kinerja dan keamanan akan semakin menonjol. Sebuah toko yang berjalan lambat atau tidak aman akan secara langsung mempengaruhi tingkat konversi dan kepercayaan pelanggan.

Langkah utama dalam mengoptimalkan kinerja adalah dengan memilih host berkualitas tinggi dan menerapkan mekanisme caching. Untuk WooCommerce, karena halaman keranjang belanja dan halaman pembayaran bersifat dinamis serta memuat informasi sesi pengguna, halaman-halaman tersebut perlu ditangani secara khusus; biasanya halaman-halaman ini dikecualikan dari proses caching seluruh halaman (full-page caching). Penggunaan cache berbasis objek (seperti Redis atau Memcached) dapat secara signifikan meningkatkan kecepatan operasi yang membutuhkan banyak kueri terhadap basis data, misalnya saat menampilkan daftar produk yang banyak di halaman utama toko.

Optimizing database queries and image loading

Selama proses pengoperasian WooCommerce, terjadi banyak kueri terhadap basis data. Optimisasi dapat dimulai dengan memastikan bahwa indeks pada tabel-tabel basis data berfungsi dengan benar. Bersihkan secara berkala data sesi yang sudah kedaluwarsa (yang disimpan di…) wp_woocommerce_sessions Data dalam tabel) dan log lama dari pesanan yang telah selesai dibayar.wp_wc_admin_notes Metode-metode seperti ini dapat mengurangi ukuran basis data.

Gambar biasanya merupakan komponen utama yang menyumbang pada ukuran halaman web. Pastikan semua gambar produk telah dikompresi dengan benar dan menggunakan format modern seperti WebP. WooCommerce secara default akan menghasilkan berbagai ukuran thumbnail, dan Anda dapat mengelola ukuran-ukuran tersebut di “Pengaturan” -> “Media”, namun penggunaan format WebP sangat disarankan. add_image_size() Pastikan ukuran gambar yang didefinisikan dalam fungsi tersebut akurat dan sesuai dengan kebutuhan desain topik Anda, sehingga gambar yang dihasilkan tidak sia-sia (tidak memiliki ukuran yang tidak perlu).

Meningkatkan konfigurasi keamanan toko (store security configuration)

Keamanan adalah hal yang paling penting. Pertama-tama, selalu gunakan kata sandi yang kuat dan aktifkan autentikasi dua faktor (2FA) untuk melindungi akun administrator. Pastikan WordPress core, plugin WooCommerce, tema, serta semua ekstensi diperbarui ke versi terbaru agar kerentanan yang diketahui dapat diperbaiki.

Dalam hal keamanan pembayaran, pastikan untuk menggunakan sertifikat SSL dan pastikan seluruh situs web, terutama halaman pembayaran, dapat diakses melalui protokol HTTPS. Anda dapat melakukannya dengan mengaktifkannya secara paksa (forced). FORCE_SSL_CHECKOUT Gunakan konstanta untuk memperkuat pengaturan ini.

在 wp-config.php Tambahkan ke dalam file:

define( 'FORCE_SSL_CHECKOUT', true );

Selain itu, membatasi jumlah percobaan login, menggunakan kunci keamanan yang aman, melakukan pemindaian keamanan secara berkala, serta melakukan verifikasi dan pembersihan yang ketat terhadap file yang diunggah oleh pengguna (seperti gambar yang diunggah melalui ulasan produk), merupakan langkah-langkah keamanan yang sangat penting. Untuk toko yang menangani data pelanggan yang sensitif, pertimbangkan untuk menerapkan langkah-langkah kompatibilitas yang lebih ketat.

Menyimpulkan.

WooCommerce, sebagai fondasi dari ekosistem WordPress, berhasil menggabungkan fitur perdagangan elektronik yang kuat dengan fleksibilitas dan aksesibilitas yang luar biasa. Mulai dari proses instalasi dan konfigurasi yang sederhana, melalui panduan pengaturan yang intuitif dan manajemen di backend, hingga penggunaan pustaka ekstensi yang luas serta sistem hook yang mendalam untuk melakukan penyesuaian sesuai kebutuhan, WooCommerce menyediakan alat yang ideal bagi perusahaan berbagai skala untuk membangun toko online mereka. Selain itu, pemantauan terus-menerus terhadap kinerja basis data, optimisasi gambar, dan penguatan keamanan secara menyeluruh merupakan kunci untuk memastikan toko berjalan dengan stabil, cepat, dan aman. Baik perusahaan rintisan maupun perusahaan yang sudah mapan, dengan memahami prinsip-prinsip dasar dan praktik terbaik dari WooCommerce, mereka dapat membangun posisi yang kuat dan fleksibel di bidang bisnis digital.

FAQ - Pertanyaan yang Sering Diajukan.

Cara untuk menyembunyikan sidebar pada halaman toko WooCommerce:

Anda dapat menggunakan tag kondisional dalam file tema Anda untuk menghapus sidebar. Metode yang paling umum adalah dengan membuat sebuah file bernama… woocommerce.php Salin file template tersebut ke direktori akar tema Anda, berdasarkan tema yang Anda gunakan. page.php File telah diubah, dan pengaruh/penggunaan yang terkait dengannya telah dihapus. get_sidebar() Panggilan fungsi.

Cara yang lebih fleksibel adalah dengan menggunakan… is_shop() Tag kondisional digunakan bersama dengan “hook” (mekanisme penghubung antara komponen aplikasi). Misalnya, dalam sub-topik Anda… functions.php Tambahkan kode berikut ke dalam file, untuk menghapus sidebar dari halaman toko WooCommerce:

add_action( 'wp', 'remove_sidebar_on_shop' );
function remove_sidebar_on_shop() {
    if ( is_shop() ) {
        remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
        // 或者，如果你的主题使用不同的侧边栏钩子
        // add_filter( 'is_active_sidebar', 'deactivate_sidebar_on_shop', 10, 2 );
    }
}

Dengan cara ini, dapat dipastikan bahwa sidebar hanya akan disembunyikan di halaman utama toko, tanpa mempengaruhi halaman-halaman lainnya.

Apakah bisa mengubah teks tombol default “Tambah ke Keranjang Belanja”?

Tentu saja, ada beberapa cara untuk mengubah teks pada tombol tersebut. Yang paling mudah adalah dengan menggunakan plugin penerjemahan seperti Loco Translate, yang memungkinkan Anda menerjemahkan teks “Add to cart” menjadi teks apa pun yang Anda inginkan (misalnya, “Beli sekarang”). Cara ini tidak memerlukan penulisan kode sama sekali.

Metode lainnya adalah dengan menggunakan filter hook. woocommerce_product_add_to_cart_text(Digunakan untuk halaman arsip) dan woocommerce_product_single_add_to_cart_text(Digunakan untuk halaman produk tunggal.) Dalam tema Anda… functions.php Tambahkan kode berikut ke dalam:

add_filter( 'woocommerce_product_add_to_cart_text', 'change_archive_add_to_cart_text' );
function change_archive_add_to_cart_text() {
    return __( '立即订购', 'your-text-domain' );
}

add_filter( 'woocommerce_product_single_add_to_cart_text', 'change_single_add_to_cart_text' );
function change_single_add_to_cart_text() {
    return __( '加入购物车', 'your-text-domain' );
}

Menggunakan filter hooks memungkinkan Anda untuk melakukan kontrol yang lebih detail berdasarkan jenis produk (seperti produk yang dapat diubah, produk yang dikelompokkan).

Bagaimana cara menetapkan harga produk yang berbeda berdasarkan peran pengguna?

Pengenaan harga berdasarkan peran pengguna merupakan fitur yang lebih canggih, yang biasanya memerlukan pengembangan kode khusus atau penggunaan ekstensi khusus untuk sistem keanggotaan/mengatur harga grosir (seperti WooCommerce Memberships atau Wholesale Suite). Jika diimplementasikan melalui kode, konsep utamanya adalah menggunakan… woocommerce_get_price Filter hook digunakan untuk mengubah harga produk secara dinamis.

Berikut adalah contoh dasar untuk memberikan diskon 20% kepada pelanggan dengan peran pengguna “wholesaler”:

add_filter( 'woocommerce_get_price', 'apply_role_based_pricing', 10, 2 );
function apply_role_based_pricing( $price, $product ) {
    if ( is_user_logged_in() && current_user_can( 'wholesaler' ) ) {
        $price = $price * 0.8; // 打八折
    }
    return $price;
}

Harap perhatikan bahwa kode ini hanya untuk demonstrasi konsep saja. Dalam aplikasi nyata, Anda perlu mempertimbangkan aspek kinerja (mungkin perlu melakukan caching terhadap data harga), kompatibilitas antara keranjang belanja dan tampilan pesanan, serta cara berinteraksi dengan proses perhitungan pajak. Untuk lingkungan produksi, menggunakan ekstensi yang telah diuji secara menyeluruh umumnya merupakan pilihan yang lebih dapat diandalkan.

Bagaimana cara mendeteksi dan memperbaiki masalah “halaman kosong” (white screen) yang umum terjadi pada WooCommerce?

Masalah “White Screen of Death” (WSOD) pada WooCommerce biasanya disebabkan oleh kesalahan fatal di PHP, dan pesan kesalahannya tersebut disembunyikan. Pertama-tama, Anda perlu memeriksa kode PHP di situs web Anda untuk mencari tanda-tanda kesalahan tersebut. wp-config.php Aktifkan mode debug WordPress di dalam file tersebut. Temukan atau tambahkan definisi berikut di dalam file tersebut:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', false ); // 防止错误直接输出到屏幕
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件

Setelah menambahkannya, kunjungi kembali halaman tersebut; halaman tersebut akan menampilkan layar kosong (white screen). Kemudian, periksa bagian yang terletak di… wp-content Yang berada di dalam direktori… debug.log File tersebut seharusnya mencatat informasi kesalahan spesifik yang menyebabkan masalah, seperti kehabisan memori, kesalahan sintaksis, atau konflik dengan suatu tema/plug-in.

Penyebab umum terkait WooCommerce meliputi: konflik antara tema atau plugin (coba menyelesaikannya dengan menonaktifkan plugin satu per satu dan beralih ke tema default), serta batasan memori PHP yang tidak mencukupi (coba mengatasi masalah ini dengan…). wp-config.php Tambahkan ke dalam… define( 'WP_MEMORY_LIMIT', '256M' );), atau ada tabel basis data WooCommerce yang rusak (Anda dapat mencoba menjalankan perintah “Create Default WooCommerce Tables” di alat status WooCommerce, atau menggunakan plugin perbaikan basis data).