Tutorial WooCommerce: Membina laman web e-dagang WordPress yang lengkap dari awal.

Baca dalam masa 2 minit.
2026-03-14
2026-06-04
2,787
Saya mendapat komisen apabila anda membeli-belah melalui pautan di bawah, tanpa sebarang kos tambahan kepada anda.

WooCommerce, sebagai tambahan e-dagang yang paling kuat dan popular dalam ekosistem WordPress, menyediakan asas teknikal yang kukuh untuk jutaan kedai dalam talian di seluruh dunia. Ia berjaya mengubah sebuah sistem pengurusan kandungan (Content Management System) menjadi platform e-dagang yang lengkap dengan ciri-ciri, membolehkan pengguna mengurus produk, mengendalikan pesanan, dan menetapkan proses pembayaran serta penghantaran tanpa perlu menulis kod yang kompleks. Tutorial ini akan membimbing anda dari awal hingga akhir dalam membina dan mengkonfigurasi kedai WooCommerce yang berfungsi dengan baik, meliputi keseluruhan proses daripada persiapan persekitaran hingga pelancaran rasmi.

Pengurusan persiapan dan pembinaan persekitaran asas

Sebelum memulakan proses pemasangan WooCommerce, anda perlu memastikan bahawa anda mempunyai persekitaran pelayan yang memenuhi keperluan untuk menjalankannya. Sebuah persekitaran asas yang stabil dan cekap merupakan prasyarat penting bagi kelancaran semua fungsi yang disediakan oleh WooCommerce.

Pelayan dan Penginstalan WordPress

Pertama sekali, anda memerlukan sebuah pelayan maya atau pelayan yang menyokong PHP, MySQL, dan Apache/Nginx. Kebanyakan penyedia perkhidmatan pelayan profesional kini menawarkan fungsi pemasangan WordPress dengan satu klik. Jika anda memilih untuk memasang secara manual, anda perlu memuat turun paket pemasangan terkini dari laman web rasmi WordPress dan mengunggahkannya ke direktori akar laman web anda (contohnya, /wp-content/).public_htmlSeterusnya, ikuti proses pemasangan yang terkenal “Lima Minit” untuk menyambungkan pangkalan data dan mengkonfigurasi maklumat laman web asas. Pastikan WordPress anda telah diperbaharui ke versi terkini untuk mendapatkan keselamatan dan keserasian yang terbaik.

Diperoleh daripada WEB\nDisyorkan untuk membaca. WooCommerce: Dari Pemulaan Hingga Kemahiran Lanjutan: Panduan Lengkap Untuk Membina Laman Web E-dagang Profesional

Pilih dan pasang tema.

Walaupun WooCommerce boleh berfungsi dengan banyak tema, untuk mendapatkan hasil visual yang terbaik dan pengalaman pengguna yang lebih memuaskan, adalah sangat disyorkan untuk menggunakan tema “Storefront” yang disyorkan oleh pihak pengeluar, atau tema komersial berkualiti yang jelas menunjukkan sokongan untuk WooCommerce. Tema-tema ini biasanya sudah dilengkapi dengan sokongan yang sempurna untuk templat halaman, paparan produk, dan reka bentuk keranjang beli-belah yang sesuai dengan keperluan WooCommerce. Proses pemasangan tema sangat mudah: anda hanya perlu pergi ke bahagian “Penampilan” -> “Tema” di panel kawalan WordPress, klik “Tambah Tema Baru”, kemudian cari nama tema yang diinginkan dan pasang serta aktifkannya.

UltaHost – Penyedia Hosting untuk WordPress
Jaminan pemulangan wang dalam tempoh 30 hari, lebar jalur dan pangkalan data yang tidak terhad, perlindungan DDoS percuma, diskaun 50% untuk pembelian selama 3 tahun.

Pemasangan Plugin Utama dan Tetapan Asas Dalam Store

Setelah menyelesaikan persiapan persekitaran asas, langkah seterusnya adalah memasang plugin WooCommerce dan melakukan konfigurasi asas untuk kedai. Ini merupakan langkah kritikal dalam membina kerangka kedai tersebut.

Panduan Pemasangan dan Pelaksanaan

Di bahagian “Pemasangan Plugin” dalam panel pentadbiran WordPress, cari “WooCommerce”. Setelah menemukannya, klik “Pasang Sekarang”. Setelah pemasangan selesai, klik “Aktifkan”. Pada masa itu, panduan tetapan untuk WooCommerce akan dimulakan secara automatik. Panduan ini akan membimbing anda melalui konfigurasi awal yang paling penting, termasuk:
* 商店地址与货币:设置你的国家/地区、所在地和交易货币(如人民币 CNY)。
* 产品类型:根据你计划销售的商品,选择对应的产品类型,如实物商品、数字下载商品或两者兼有。
* 支付网关:在此可以先启用一些基础选项,如“银行转账”、“支票支付”的测试方式,后续再详细配置在线支付。
* 配送设置:设置一个默认的配送区域和大致运费。

Saya sangat mengesyorkan anda mengikuti arahan panduan tersebut untuk menyelesaikan semua langkah. Panduan tersebut akan secara automatik membuat halaman-halaman yang diperlukan, seperti kedai, keranjang beli-belah, proses pembayaran, dan akaun saya.

Konfigurasi Maklumat Toko Asas

Setelah panduan selesai, anda perlu menyempurnakan tetapan dengan lebih terperinci. Masuk ke halaman “WooCommerce” -> “Settings”. Dalam tab “General”, isi alamat kedai anda dengan lengkap dan tetapkan kawasan jualan. Dalam tab “Products”, anda boleh mengkonfigurasi unit ukuran, ulasan produk, ambang stok, dan lain-lain. Dalam tab “Taxes”, berdasarkan keperluan undang-undang di kawasan anda, pilih sama ada untuk mengaktifkan dan mengira cukai. Semasa konfigurasi awal, jika model perniagaan anda agak mudah, anda boleh menonaktifkan pengiraan cukai untuk sementara waktu.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pengalaman Analisis Mendalam WooCommerce: Panduan Lengkap Dari Konfigurasi Asas Hingga Operasi Yang Cekap

Pengurusan Produk, Konfigurasi Pembayaran dan Penghantaran

Setelah kerangka kedai dibina, langkah seterusnya adalah mengisi kandungannya – menambahkan produk, serta mengkonfigurasi saluran pembayaran dan logistik yang memungkinkan transaksi berjaya dilakukan.

Menambah dan Mengurus Produk

Di bahagian belakang WordPress, sebuah menu baru yang bernama “Produk” akan muncul. Klik pada “Tambah Produk” untuk masuk ke halaman edit produk. Di sini, anda perlu mengisi maklumat berikut:
* 产品标题和详细描述:清晰、有吸引力的文字和图片。
* 产品数据面板:这是核心。在产品数据Dalam menu drop-down, pilih jenis produk yang telah anda tetapkan semasa menggunakan panduan (seperti Produk Ringkas atau Produk Berubah-ubah). Kemudian isi maklumat seperti harga, status stok, dan kos penghantaran (berdasarkan berat dan saiz). Bagi produk berubah-ubah (seperti T-shirt dengan pelbagai warna dan saiz), anda perlu menetapkan butiran tersebut terlebih dahulu.属性Kemudian,变体Harga dan stok untuk setiap kombinasi disetkan secara berasingan dalam tab tersebut.
Galeri produk: Muat naik gambar utama dan gambar terperinci yang berkualiti tinggi.

Konfigurasi gateway pembayaran

Pembayaran merupakan langkah terakhir dalam proses transaksi. Masuk ke halaman “WooCommerce” -> “Settings” -> “Payment”. Anda akan melihat senarai kaedah pembayaran yang tersedia. Bagi peniaga di China daratan, gateway pembayaran yang sering digunakan termasuk:
* 支付宝:需要安装“Alipay for WooCommerce”之类的扩展插件,并配置从支付宝开放平台获取的商家ID和密钥。
* 微信支付:同样需要专门的扩展插件来集成。
* PayPal:适用于国际交易,直接启用标准版并配置API凭证即可。
* COD(货到付款):对本地配送非常有用。

hosting.com Hosting Bersama
Prestasi tinggi, menampilkan CPU AMD EPYC, storan SSD NVMe dan LiteSpeed, dengan sokongan pakar dalaman 24/7, langkah keselamatan canggih termasuk SSL, perlindungan serangan paksa kata laluan, perisian hasad dan DDoS, menjimatkan sehingga 73%.

Disyorkan untuk mengaktifkan sekurang-kurangnya satu kaedah pembayaran dalam talian yang boleh dipercayai, serta satu kaedah alternatif (seperti pemindahan bank).

Setkan kaedah penghantaran

Masuk ke “WooCommerce” -> “Settings” -> “Shipping” (Penghantaran). Klik “Add Shipping Zone” (Tambah Zon Penghantaran); sebagai contoh, anda boleh membuat sebuah zon bernama “Mainland China” (China Daratan). Kemudian, dalam zon tersebut, klik “Add Shipping Method” (Tambah Kaedah Penghantaran). WooCommerce menyediakan beberapa kaedah penghantaran yang boleh digunakan.
* 免运费Keadaan seperti jumlah pesanan minimum boleh disetkan.
* 固定运费Yuran penghantaran yang sama dikenakan untuk semua pesanan.
* 本地配送Sesuai untuk stesen pengambilan sendiri.

Untuk pengiraan kos penghantaran yang lebih kompleks, berdasarkan berat, isipadu atau kawasan, perlu memasang perisian seperti…WooCommerce ShippingAtau plugin caj penghantaran pihak ketiga.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Penguraian Mendalam WooCommerce: Panduan Lengkap Untuk Membina Laman Web E-dagang Berprestasi Tinggi Dari Kosong

Pembesaran ciri-ciri lanjutan dan pengoptimuman kedai

Sebuah kedai yang lengkap tidak terhad hanya pada aktiviti jual beli, tetapi juga perlu mempertimbangkan aspek pemasaran, pengalaman pengguna, dan prestasi perkhidmatan. Fungsi-fungsi canggih ini sering dilaksanakan melalui tambahan (plugin).

Alat Pemasaran dan Promosi

WooCommerce mempunyai ciri kupon asas yang telah dibina dalamnya, dan anda boleh membuatnya di “Pemasaran” -> “Kupon”. Namun, untuk promosi yang lebih kompleks (seperti beli satu dapat satu percuma, diskaun ahli, atau peraturan diskaun keranjang beli-belah), anda boleh menggunakan alat tambahan seperti…WooCommerce Dynamic PricingEkstensi jenis ini, selain itu, plugin seperti integrasi pemasaran melalui e-mel (seperti penyambungan dengan Mailchimp), cadangan produk, dan pemulihan keranjang beli-belah yang terabai, dapat meningkatkan kadar konversi jualan dengan ketara.

Hosting Bersama InterServer
Hosting kongsi: 1TB/bulan pada $2.50 USD, bulan pertama pada $0.10 USD dengan kod promo tryinterserver. 461 skrip aplikasi awan tersedia untuk pemasangan satu klik.

Menggunakan hook untuk penyesuaian tersuai

Apabila anda perlu mengubah tingkah laku lalai WooCommerce dan plugin sedia ada tidak dapat memenuhi keperluan tersebut, anda perlu menggunakan Action Hooks dan Filter Hooks. Sebagai contoh, jika anda ingin menambahkan medan khusus pada halaman pembayaran, anda boleh menambahkan kod ke dalam sub tema (sub-theme) untuk melakukannya.functions.phpDalam dokumen tersebut.

// 示例:在结账页面添加一个自定义“礼品留言”字段
add_action( 'woocommerce_after_order_notes', 'custom_checkout_field' );

function custom_checkout_field( $checkout ) {
    echo '<div id="custom_checkout_field"><h2>' . __('礼品留言') . '</h2>';
    woocommerce_form_field( 'gift_message', array(
        'type' =&gt; 'textarea',
        'class' =&gt; array('form-row-wide'),
        'label' =&gt; __('如有需要,请留下礼品留言'),
        'placeholder' =&gt; __('请输入您的留言'),
    ), $checkout-&gt;get_value( 'gift_message' ));
    echo '</div>';
}

Pengoptimuman Prestasi dan Keselamatan

Laman web e-dagang mempunyai keperluan yang sangat tinggi dari segi prestasi dan keselamatan. Pastikan anda memasang plugin pengekalan cache (seperti WP Rocket, W3 Total Cache) untuk mempercepatkan proses memuatkan halaman. Gunakan plugin pengoptimuman imej (seperti ShortPixel) untuk mengekompresi gambar produk. Selain itu, anda perlu memasang plugin keselamatan (seperti Wordfence) dan mengkonfigurasi sijil SSL (HTTPS) untuk melindungi data pengguna dan maklumat transaksi. Mengemaskini secara berkala versi asas WordPress, plugin WooCommerce, serta semua tema dan tambahan (extensions) merupakan amalan yang paling penting untuk menjaga keselamatan laman web tersebut.

RINGKASAN

Membina sebuah kedai WooCommerce dari awal merupakan satu proses yang teratur dan sistematis, tetapi ia boleh dilakukan dengan cekap dengan mengikuti langkah-langkah yang jelas. Prosesnya bermula dengan menyediakan persekitaran pelayan yang sesuai dan memasang WordPress. Kemudian, gunakan panduan pengaturan WooCommerce untuk membina struktur asas kedai dengan cepat, dan konfigurasikan dengan teliti fungsi-fungsi perniagaan yang penting seperti produk, pembayaran, dan penghantaran. Akhirnya, tingkatkan kedai anda ke tahap profesional melalui pengembangan pemasaran, penyesuaian kod, serta pengoptimuman prestasi dan keselamatan. Ingatlah bahawa kekuatan WooCommerce terletak pada kebolehannya yang sangat tinggi untuk diperluas; anda boleh menambahkan modul fungsi baru pada bila-bila masa mengikut pertumbuhan perniagaan anda. Kini, laman web e-dagang WordPress anda yang lengkap dengan semua fungsi sudah siap, dan anda boleh mula menyambut pelanggan pertama anda.

FAQ - Soalan Lazim

Adakah WooCommerce benar-benar percuma?

Plugin WooCommerce itu sendiri adalah sumber terbuka (open-source) dan sepenuhnya percuma. Anda boleh menggunakan semua fungsi asasnya secara percuma untuk membuat dan mengurus kedai dalam talian. Namun, untuk integrasi dengan beberapa gateway pembayaran tertentu (seperti tambahan rasmi Alipay), pengiraan penghantaran yang lebih canggih, fungsi pemasaran yang kompleks, atau tema yang profesional, anda mungkin perlu membeli tambahan (extensions) atau tema yang berbayar.

Bagaimana untuk membuat sandaran kedai WooCommerce saya?

Salinan sandaran harus merangkumi kedua-dua pangkalan data dan fail-fail laman web. Penggunaan plugin sandaran yang profesional disyorkan, seperti UpdraftPlus atau BlogVault. Plugin ini membenarkan pengaturan sandaran automatik secara berkala dan menyimpan fail-fail sandaran ke perkhidmatan awan (seperti Google Drive, Dropbox). Sebelum melakukan sebarang kemas kini atau perubahan yang penting, pastikan anda membuat salinan sandaran yang lengkap secara manual terlebih dahulu.

Bolehkah saya membina laman web ujian untuk WooCommerce terlebih dahulu pada komputer lokal saya?

Tentu saja boleh, dan ini merupakan amalan yang sangat baik. Anda boleh menggunakan set alat persekitaran pelayan tempatan seperti Local by Flywheel, XAMPP, atau MAMP. Pasang WordPress dan WooCommerce dalam persekitaran tersebut, dan lakukan semua konfigurasi, ujian, dan kerja pembangunan yang diperlukan. Setelah ujian selesai, gunakan plugin migrasi seperti All-in-One WP Migration untuk memindahkan laman web yang lengkap ke pelayan produksi dalam talian.

Bagaimana untuk mengubah bidang pada halaman pembayaran di WooCommerce?

Terdapat pelbagai cara untuk mengubah bidang pembayaran (checkout fields). Untuk penyesuaian yang mudah, seperti mengatur susunan bidang, menetapkan bidang yang wajib diisi, atau mengubah label, anda boleh menggunakan plugin visual seperti “Checkout Field Editor for WooCommerce”. Jika anda memerlukan penyesuaian yang lebih mendalam, seperti menambah atau menghapus bidang, anda perlu menulis kod.woocommerce_checkout_fieldsPenapisan dilakukan menggunakan “filter hooks”, dan kod tersebut perlu ditambahkan ke dalam sub-topik yang berkaitan.functions.phpDalam dokumen tersebut.