WooCommerce Panduan Lanjutan: Dari Pembuatan Toko Online Hingga Optimisasi Kinerja Situs Web

Pembangunan Toko Online dan Konfigurasi Dasar

Langkah pertama dalam membangun toko online menggunakan platform WooCommerce adalah memastikan bahwa lingkungan dasarnya stabil. Hal ini tidak hanya mencakup proses instalasi plugin, tetapi juga berkaitan dengan fleksibilitas dan stabilitas toko tersebut saat diperluas di kemudian hari.

Pemilihan Plugin Inti dan Tema (Core Plugins and Themes)

WooCommerce Sebagai sebuah plugin, fungsinya dapat disesuaikan secara mendalam melalui “subtheme”. Untuk menimpa file template default dengan aman, Anda perlu membuat sebuah subtheme. Pertama-tama, buatlah subtheme tersebut di dalam direktori tema Anda (yang biasanya berada di…). /wp-content/themes/Buatlah sebuah folder baru di bawahnya, misalnya… yourstore-childKemudian, buat dua file inti di dalam folder tersebut:style.css 和 functions.php。

style.css Di awal sebuah file, harus terdapat header informasi tema yang spesifik.

推荐阅读 Bagi pengguna WordPress yang ingin meningkatkan kinerja toko online mereka, Woo。

/*
 Theme Name: YourStore Child
 Template: your-parent-theme-name
*/

在 functions.php Di dalamnya, Anda perlu mengatur urutan penampilan (queue) file gaya (style sheet) dari tema induk. Salah satu cara standar untuk melakukannya adalah…

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

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Pengaturan rinci untuk toko-toko kunci

Konfigurasi dasar tidak hanya terbatas pada pengaktifan format mata uang dan alamat. Di panel pengaturan WooCommerce, tab “Produk” dan sub-tab “Stok” sangat penting. Di sini, Anda dapat mengatur ambang batas stok secara global, serta menentukan apakah penjualan produk dengan stok kosong diperbolehkan atau tidak. Konfigurasi yang lebih lanjut melibatkan penyesuaian logika pencarian produk dan tampilan halaman toko.

Misalnya, jika Anda ingin mengubah cara produk ditampilkan di halaman toko default, Anda dapat melakukannya di subtema (sub-topic) yang sesuai. functions.php Gunakan dalam bahasa Cina woocommerce_get_catalog_ordering_args “Hook.” Berikut adalah kode yang akan mengubah pengurutan default menjadi berdasarkan tanggal penayangan produk, dari yang terbaru ke yang paling lama:

add_filter( 'woocommerce_get_catalog_ordering_args', 'custom_default_catalog_order' );
function custom_default_catalog_order( $args ) {
    $args['orderby'] = 'date';
    $args['order'] = 'desc';
    return $args;
}

Manajemen produk dan strategi kategorisasi.

Manajemen produk yang efisien merupakan inti dari operasional toko WooCommerce. Dengan memanfaatkan sistem jenis produk dan atribut yang sudah tersedia, Anda dapat meningkatkan efisiensi manajemen serta pengalaman pengguna secara signifikan.

Menggunakan produk yang dapat disesuaikan (variable products) dan atribut khusus (custom attributes)

可变产品 Ini adalah alat yang sangat kuat di WooCommerce untuk mengelola produk yang memiliki banyak atribut (seperti ukuran, warna), dan fokus utamanya terletak pada kombinasi antara “atribut” dan “varian” (variations). Pertama, buat atribut global di menu “Produk” > “Atribut”, misalnya “Warna”. Kemudian, saat mengedit produk tertentu, berikan atribut-atribut tersebut ke produk tersebut, dan buat variasi untuk setiap kombinasi atribut (misalnya “Warna Merah – Ukuran L”). Setiap variasi tersebut dapat diatur dengan harga, stok, dan gambar yang berbeda.

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

Untuk atribut yang memerlukan input atau penampilan yang lebih fleksibel, Anda dapat menggunakan fitur “Atribut Produk Khusus” (Custom Product Attributes). Atribut-atribut ini hanya berlaku untuk produk tertentu dan tidak akan disimpan ke dalam daftar atribut global. Dengan merancang struktur atribut dengan cermat, Anda dapat membuat matrix produk yang kompleks untuk memenuhi kebutuhan berbagai jenis barang, mulai dari pakaian hingga produk elektronik.

Implementasi Filtros Klasifikasi dan Tag Tingkat Lanjut

Klasifikasi dan penandaan dasar memang sederhana, namun ketika jumlah produk sangat banyak, kemampuan navigasi menjadi terbatas. Pada saat itulah, penggunaan alat bantu tertentu menjadi sangat penting. 产品过滤器 Plugin atau kueri kustom merupakan pilihan yang lebih baik. WooCommerce menyediakan berbagai fitur yang memungkinkan pengguna untuk menyesuaikan tampilan dan fungsionalitas toko online mereka. Conditional Tags Dan fungsi pencarian (query function).

Misalnya, buatlah sebuah kode singkat yang hanya menampilkan produk dengan tag “Laris” (Bestseller) yang termasuk dalam kategori tertentu. Di dalam subtema Anda… functions.php Tambahkan ini ke dalam Chinese (sederhana):

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

add_shortcode( 'featured_by_category', 'display_featured_products_by_cat' );
function display_featured_products_by_cat( $atts ) {
    $atts = shortcode_atts( array(
        'category' => '',
    ), $atts, 'featured_by_category' );

$args = array(
        'post_type' => 'product',
        'posts_per_page' => 6,
        'tax_query' => array(
            'relation' => 'AND',
            array(
                'taxonomy' => 'product_cat',
                'field'    => 'slug',
                'terms'    => $atts['category'],
            ),
            array(
                'taxonomy' => 'product_tag',
                'field'    => 'slug',
                'terms'    => 'hot-sales',
            )
        ),
    );
    $products = new WP_Query( $args );
    // ... 后续循环输出产品HTML的逻辑
}

Dengan begitu, Anda dapat menggunakannya di halaman mana saja. [featured_by_category category="electronics"] Sekarang mari kita tampilkan produk-produk terlaris dalam kategori elektronik.

Proses pembayaran dan penyelesaian transaksi yang disesuaikan (customized checkout and payment processes)

Halaman pembayaran default mungkin tidak dapat memenuhi semua kebutuhan bisnis, seperti pengumpulan informasi tambahan atau integrasi dengan gateway pembayaran tertentu. WooCommerce menyediakan banyak fitur (hook) untuk memodifikasi proses pembayaran tersebut sesuai kebutuhan.

Menambahkan field kustom pada halaman pembayaran

Misalkan Anda perlu menambahkan kolom “Nomor Pajak Perusahaan” untuk klien B2B. Anda dapat melakukannya dengan: woocommerce_checkout_fields Dilakukan menggunakan “hook” (pemanggil fungsi tertentu). Di dalam sub-topik tersebut… functions.php Tambahkan ini ke dalam Chinese (sederhana):

推荐阅读 Panduan Lengkap WooCommerce: Dari Pemula hingga Ahli dalam Membuat Situs Web E-commerce Eksklusif.。

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['billing']['billing_vat_number'] = array(
        'label'     => __('增值税号', 'your-textdomain'),
        'placeholder'   => _x('请输入您的公司税号', 'placeholder', 'your-textdomain'),
        'required'  => false, // 根据需求设置为 true 或 false
        'class'     => array('form-row-wide'),
        'clear'     => true
    );
    return $fields;
}

// 保存字段值到订单元数据
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['billing_vat_number'] ) ) {
        update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
    }
}

Custom payment gateway and order processing logic

Terkadang, Anda mungkin perlu mengaktifkan atau menonaktifkan beberapa gateway pembayaran secara dinamis berdasarkan isi keranjang belanja atau informasi pelanggan. Hal ini dapat dilakukan dengan… woocommerce_available_payment_gateways Implementasi filter. Misalnya, ketika total nilai pesanan melebihi 1000 yuan, hanya transfer bank yang diizinkan sebagai metode pembayaran:

add_filter( 'woocommerce_available_payment_gateways', 'conditionally_disable_gateways' );
function conditionally_disable_gateways( $available_gateways ) {
    if ( is_admin() ) return $available_gateways; // 不在后台应用

$cart_total = WC()->cart->total;
    if ( $cart_total > 1000 ) {
        unset( $available_gateways['cod'] ); // 禁用货到付款
        unset( $available_gateways['paypal'] ); // 禁用PayPal
        // 只保留 ‘bacs’ (银行转账)
        if ( isset( $available_gateways['bacs'] ) ) {
            $available_gateways = array( 'bacs' => $available_gateways['bacs'] );
        }
    }
    return $available_gateways;
}

Optimisasi Kinerja dan Keamanan Situs Web

Sebuah situs web e-commerce yang sukses harus beroperasi dengan cepat dan aman. Seiring dengan pertumbuhan jumlah produk, pesanan, dan jumlah pengunjung, optimalisasi kinerja dan keamanan menjadi sangat penting.

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

Strategi Caching yang Efisien dan Optimisasi Basis Data

Caching objek merupakan kunci untuk meningkatkan kecepatan halaman dinamis di WooCommerce. Pastikan lingkungan hosting Anda mendukung caching objek yang bersifat permanen, seperti Redis atau Memcached, dan atur dengan benar agar caching dapat berfungsi dengan optimal. wp-config.php Konfigurasikan dengan benar. Untuk basis data, optimisasi secara berkala sangat penting. WooCommerce menghasilkan sejumlah besar data sesi, catatan revisi pesanan, dan lainnya. Anda dapat menggunakan alat atau metode yang serupa untuk mengelola data tersebut dengan efisien. WP-Optimize Plugin semacam ini digunakan untuk membersihkan dan mengoptimalkan tabel-tabel dalam basis data.

Dalam hal pencarian produk, pastikan bahwa fungsi WooCommerce yang tepat telah digunakan dalam tema atau kode kustom Anda. wc_get_products()Itu lebih unggul daripada yang umum digunakan. WP_Query Lebih efisien. Hindari melakukan kueri langsung ke basis data dalam siklus (loop), sebaiknya gunakan API pra-pemuatan (preloading) dan cache sementara (transient cache) untuk menyimpan hasil kueri yang dapat digunakan kembali.

Memperkuat langkah-langkah perlindungan keamanan

Pertama-tama, selalu gunakan koneksi yang aman (HTTPS). WooCommerce memproses data yang sensitif, sehingga penggunaan SSL yang wajib merupakan hal yang sangat penting. Anda dapat mengatur hal ini di Pengaturan WooCommerce > Lanjutan > Pengaturan Halaman, dengan memaksa penggunaan koneksi aman untuk halaman “Bayar” dan “Akun Saya”.

Kedua, batasi jumlah upaya login untuk mencegah serangan brute-force. Gunakan plugin atau konfigurasi pada tingkat server (seperti .htaccess atau aturan Nginx) untuk membatasi upaya tersebut. /wp-login.php Frekuensi akses tersebut juga perlu diperhatikan. Memperbarui nilai kunci (keys) dan salt sangat penting. wp-config.php Dalam berkas tersebut, pastikan bahwa konstanta-konstanta berikut merupakan string acak yang unik:

define( 'AUTH_KEY',         'put your unique phrase here' );
define( 'SECURE_AUTH_KEY',  'put your unique phrase here' );
// ... 其他 salts

Terakhir, lakukan audit keamanan secara berkala. Periksa hak akses pada file dan direktori, hapus plugin serta tema yang tidak digunakan, dan gunakan alat pemindaian keamanan untuk memantau potensi kerentanan. Untuk data pesanan dan pelanggan, pastikan bahwa sistem cadangan (backup) yang Anda gunakan dapat diandalkan dan memungkinkan pemulihan data dengan cepat.

Menyimpulkan.

Melalui panduan lanjutan ini, kita telah membahas secara sistematis seluruh proses pembangunan dan pengoptimalan WooCommerce, mulai dari tahap dasar hingga tingkat yang lebih kompleks. Toko WooCommerce yang sukses didasarkan pada arsitektur sub tema yang kokoh, manajemen produk dan kategori yang terperinci, proses pembayaran yang dapat disesuaikan secara khusus, serta strategi kinerja dan keamanan yang ketat. Kuncinya adalah memanfaatkan sepenuhnya sistem Hook dan Filter yang disediakan oleh WooCommerce untuk melakukan penyesuaian, bukan dengan langsung mengubah file inti sistem. Seiring dengan pertumbuhan skala toko, pemantauan kinerja yang proaktif dan penguatan keamanan yang berkelanjutan harus menjadi bagian dari rutinitas operasional sehari-hari. Dengan menggabungkan praktik-praktik ini, Anda akan mampu membangun platform e-commerce yang profesional yang tidak hanya dapat memenuhi kebutuhan bisnis yang kompleks, tetapi juga memberikan pengalaman pengguna yang cepat dan aman.

FAQ - Pertanyaan yang Sering Diajukan.

Bagaimana cara mengubah teks tombol “Tambah ke Keranjang Belanja” (Add to Cart) yang bawaan dari WooCommerce?

Anda dapat melakukannya melalui… woocommerce_product_add_to_cart_text 和 woocommerce_product_single_add_to_cart_text Gunakan filter untuk mengubah teks tombol pada halaman arsip (halaman toko) dan halaman produk secara terpisah.

Misalnya, dalam subtopik… functions.php Tambahkan kode berikut ke dalam file tersebut, sehingga teks tombol di halaman produk dapat diubah menjadi “Beli Sekarang”:

add_filter( 'woocommerce_product_single_add_to_cart_text', 'change_single_add_to_cart_text' );
function change_single_add_to_cart_text() {
    return __( '立即购买', 'your-textdomain' );
}

Bisakah kita membuat sistem yang hanya menampilkan harga barang untuk peran pengguna tertentu?

Baik. Hal ini biasanya dilakukan dengan menggabungkan penilaian berdasarkan kondisi tertentu (condition judgment) dengan fitur filter harga dari WooCommerce. woocommerce_get_price_html Untuk melakukannya.

Pertama, periksa peran pengguna saat ini, lalu sesuaikan tampilan harga berdasarkan peran tersebut. Misalnya, tampilkan label harga yang berbeda untuk peran “wholesaler” (pembeli grosir).

add_filter( 'woocommerce_get_price_html', 'custom_price_based_on_user_role', 10, 2 );
function custom_price_based_on_user_role( $price, $product ) {
    $user = wp_get_current_user();
    if ( in_array( 'wholesaler', (array) $user->roles ) ) {
        // 获取批发价，这里假设存储在自定义字段 '_wholesale_price' 中
        $wholesale_price = get_post_meta( $product->get_id(), '_wholesale_price', true );
        if ( $wholesale_price ) {
            $price = wc_price( $wholesale_price ) . '<small>（批发价）</small>';
        }
    }
    return $price;
}

Bagaimana cara menambahkan status pesanan baru melalui kode?

Untuk menambahkan status pesanan khusus (custom order status), Anda perlu menggunakan… wc_register_order_status 和 wc_get_order_statuses Filter.

Berikut adalah kode yang menambahkan status pesanan baru bernama “Menunggu Persiapan” (slug: ‘awaiting-prepare’):

// 注册新状态
add_action( 'init', 'register_custom_order_status' );
function register_custom_order_status() {
    register_post_status( 'wc-awaiting-prepare', array(
        'label'                     => '待备货',
        'public'                    => true,
        'exclude_from_search'       => false,
        'show_in_admin_all_list'    => true,
        'show_in_admin_status_list' => true,
        'label_count'               => _n_noop( '待备货 (%s)', '待备货 (%s)' )
    ) );
}

// 将新状态加入到订单状态列表
add_filter( 'wc_order_statuses', 'add_custom_order_status_to_list' );
function add_custom_order_status_to_list( $order_statuses ) {
    $order_statuses['wc-awaiting-prepare'] = '待备货';
    return $order_statuses;
}

Setelah menambahkannya, Anda perlu mengonfigurasi gateway pembayaran mana yang dapat mengubah status pesanan menjadi status tersebut di Pengaturan > Pembayaran > Status Pesanan (Settings > Payments > Order Status) di WooCommerce.

Bagaimana cara mengoptimalkan kecepatan pengunduhan halaman depan toko ketika jumlah produk cukup banyak?

Bagi toko yang memiliki jumlah produk yang sangat banyak, mengoptimalkan kecepatan halaman utama (yang biasanya merupakan halaman arsip toko) sangat penting. Berikut adalah beberapa langkah yang dapat diambil:
1. 启用分页或“加载更多”按钮：避免一次性加载所有产品。确保产品列表设置了合理的每页显示数量。
2. 使用高效的图片格式和懒加载：确保所有产品图片都经过压缩（建议使用 WebP 格式），并为产品图片启用懒加载。WooCommerce 自 5.5.0 版本起，在兼容主题中默认启用了懒加载。
3. 实施片段缓存：使用对象缓存（如 Redis）来缓存 WooCommerce 的碎片化内容，如购物车小部件、产品循环等。一些高级缓存插件也提供针对 WooCommerce 的碎片化缓存功能。
4. 审查并简化商店页面的查询：检查你的主题在商店页面上运行的所有查询。移除不必要的查询，或者对结果进行缓存。可以通过在子主题的 functions.php Gunakan dalam bahasa Cina transient Data produk untuk bagian samping layar (seperti sidebar) disimpan dalam cache agar dapat diakses lebih cepat.
5. 考虑使用静态首页：如果动态的商店页面确实成为瓶颈，可以考虑设置一个精心设计的静态页面作为首页，并使用短代码或 Gutenberg 区块来展示精选分类和产品，将完整的商店归档页作为二级页面。