进阶指南：如何通过 WooCommerce 钩子与过滤器自定义你的电商网站

WooCommerce Hooks dan Filters: Fungsi dan Perbezaan

Semasa melakukan pembangunan khusus untuk WooCommerce, memahami dua mekanisme pengembangan utamanya – Hook dan Filter – adalah sangat penting. Kedua-duanya merupakan komponen penting dalam arkitektur asas WordPress, tetapi berfungsi untuk tujuan yang berbeza.

Hooks“Hook” merupakan antara muka yang disediakan oleh WooCommerce semasa kod dijalankan pada titik-titik tertentu dalam kitaran hayat (lifecycle) aplikasi, membenarkan anda untuk “menyambungkan” kod anda sendiri untuk melaksanakan tindakan atau fungsi baru. Terdapat dua jenis hook:Actions(Aktiviti) danFilters(Filter). Secara ringkas, hook tindakan digunakan untuk “melakukan sesuatu”; ia tidak mengembalikan sebarang nilai, tetapi hanya menyediakan peluang untuk menjalankan kod yang anda buat sendiri pada masa tertentu. Sebagai contoh, menambahkan sebuah banner setelah halaman keranjang beli-belah dimuat. Hook penapis pula digunakan untuk “mengubah sesuatu”; ia menerima sebuah nilai, membenarkan anda mengubah nilai tersebut, dan kemudian anda perlu mengembalikan nilai yang telah diubah. Sebagai contoh, mengubah format penampilan harga barang.

Filters(Filter) adalah sejenis hook, tetapi kerana semantik khususnya iaitu “mengubah dan mengembalikan” data, ia sering disebut bersama-sama dengan action hooks. Salah faham yang biasa adalah menggunakan action hooks untuk mencuba mengembalikan nilai, yang boleh menyebabkan kod tidak berfungsi dengan betul. Menentukan dengan jelas sama ada keperluan anda adalah untuk “melakukan operasi” atau “mengubah data” adalah langkah pertama dalam memilih alat yang sesuai.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Memahami lebih mendalam tentang hook dan filter teras WordPress: daripada pengenalan hingga pengaturcaraan dalam dunia sebenar.。

Core Hook and Filter Interfaces

Menggunakan pengait (hooks) dan penapis (filters) bergantung terutamanya pada beberapa fungsi teras yang disediakan oleh WordPress. Menguasai fungsi-fungsi ini merupakan asas untuk melakukan sebarang penyesuaian (customization) pada WordPress.

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.

Lawati halaman

Fungsi utama untuk hook tindakan (action hook)

Fungsi yang paling sering digunakan adalah…add_action()Fungsi ini digunakan untuk “mengsubscribe” fungsi kustom anda ke pada satu hook tindakan yang ditentukan. Syntax asasnya termasuk nama hook, fungsi panggilan balik (callback function), keutamaan (priority), dan bilangan parameter yang diterima. Keutamaan menentukan urutan pelaksanaan apabila beberapa fungsi dipasang pada hook yang sama; semakin kecil nombor tersebut, semakin tinggi keutamaannya.

add_action(‘woocommerce_before_add_to_cart_button’, ‘my_custom_message’, 10, 0 );
function my_custom_message() {
    echo ‘<p>Semak spesifikasi sebelum membuat pembelian!</p>’;
}

Kod di atas akan memaparkan mesej pengesahan yang ditentukan sebelum butang “Menambah ke Keranjang Beli-belah” ditekan.

Fungsi utama untuk hook penapis (filter hook)

Oleh itu, untuk memodifikasi data, anda perlu menggunakan kaedah yang sesuai.add_filter()Fungsi. Strukturnya adalah…add_action()Serupa, tetapi fungsi panggilan balik (callback function) anda mesti menerima satu nilai masukan dan mengembalikan satu nilai.

add_filter( ‘woocommerce_currency_symbol’, ‘change_currency_symbol’, 10, 2 );
function change_currency_symbol( $currency_symbol, $currency ) {
    if ( $currency == ‘USD’ ) {
        $currency_symbol = ‘US$’;
    }
    return $currency_symbol;
}

Contoh ini mengubah simbol dolar Amerika daripada “$” kepada “US$”.

Diperoleh daripada WEB\nDisyorkan untuk membaca. 提升电商转化率：深度解析 WooCommerce 产品页面优化策略。

Kes Penggunaan Sebenar: Halaman Produk yang Dibina Secara Khusus

Halaman produk merupakan komponen penting dalam sistem WooCommerce, dan susun atur serta cara maklumat dipaparkan boleh diubah dengan ketara melalui penggunaan “hooks”. Berikut adalah beberapa hooks yang boleh membantu anda menentukan dengan tepat titik pengubahsuaian yang perlu dilakukan.

Tambahkan kandungan sebelum kawasan “Masukkan ke Keranjang Beli-belah”.

woocommerce_before_add_to_cart_form和woocommerce_before_add_to_cart_buttonIni adalah dua jenis “hook” yang sering digunakan. Yang pertama akan diaktifkan sebelum keseluruhan borang dipaparkan, sesuai untuk menambahkan banner atau blok amaran; yang kedua akan diaktifkan di antara kotak masukan nombor dan butang, sesuai untuk menambahkan penjelasan ringkas atau kotak pilihan (checkbox).

add_action( ‘woocommerce_before_add_to_cart_button’, ‘add_product_notes_field’ );
function add_product_notes_field() {
    echo ‘<div class="“product-notes”"><label>Keperluan Penyesuaian:</label><textarea name="“customer_notes”"></textarea></div>’;
}

Modifikasi output ringkasan produk

Penerangan ringkas produk olehwoocommerce_short_descriptionKawalan penapis. Anda boleh menggunakannya untuk mengubah kandungan deskripsi, seperti menambahkan segmen teks umum di akhir semua deskripsi.

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%.

Lawati halaman

add_filter( ‘woocommerce_short_description’, ‘append_to_short_description’ );
function append_to_short_description( $desc ) {
    $desc .= ‘<p><em>Produk ini menyokong pengembalian barang dalam tempoh 7 hari tanpa sebarang sebab.</em></p>’;
    return $desc;
}

Kes Penggunaan Sebenar: Cart Beli-Belah dan Proses Pembayaran yang Dibina Secara Sendiri

Keranjang beli-belah dan halaman pembayaran merupakan komponen utama dalam proses penukaran pembelian (conversion process), dan mengoptimumkannya dapat meningkatkan pengalaman pengguna serta kadar penyelesaian pesanan secara langsung.

Tambahkan maklumat global di belakang jadual keranjang beli-belah.

woocommerce_after_cart_tableHook membenarkan anda menyisipkan kandungan di belakang jadual item dalam keranjang beli-belah, dan sebelum ringkasan keranjang beli-belah, seperti petunjuk kod promosi atau penjelasan anggaran kos penghantaran.

add_action( ‘woocommerce_after_cart_table’, ‘add_cart_promotion_notice’ );
function add_cart_promotion_notice() {
    echo ‘<div class="“cart-promotion”">Beli barang bernilai 500 yuan ke atas dan percuma penghantaran!</div>’;
}

Modify the settlement fields.

Sistem medan pembayaran di WooCommerce sangat boleh disesuaikan, dan banyak penapis yang digunakan. Sebagai contoh, untuk mengubah label dan penunjuk tempat (placeholder) bagi medan “Alamat 2”, anda boleh menggunakan…woocommerce_default_address_fieldsAtau lebih khusus lagi…woocommerce_billing_fieldsPenapis.

Diperoleh daripada WEB\nDisyorkan untuk membaca. WooCommerce 教程：从零开始构建功能强大的 WordPress 电商网站。

add_filter( ‘woocommerce_default_address_fields’, ‘modify_address_2_field’ );
function modify_address_2_field( $fields ) {
    if ( isset( $fields[‘address_2’] ) ) {
        $fields[‘address_2’][‘label’] = ‘公寓、套房、单元等（可选）’;
        $fields[‘address_2’][‘placeholder’] = ‘可不填’;
    }
    return $fields;
}

Dengan cara ini, anda boleh menyembunyikan, mengatur semula susunan, menukar nama, atau menambahkan sebarang bidang penyelesaian (settlement fields) untuk memastikannya sepenuhnya memenuhi keperluan perniagaan anda.

RINGKASAN

Dengan menggunakan hook dan filter dalam WooCommerce, anda boleh membuat penyesuaian khusus pada setiap aspek laman web e-dagang tanpa perlu mengubah kod asas. Mulakan dengan memahami perbezaan asas antara action dan filter, dan kuasai penggunaannya.add_action()和add_filter()Dua fungsi teras ini, apabila digunakan dalam kawasan-kawasan kritikal seperti halaman produk, keranjang beli-belah, dan proses pembayaran, anda boleh membina kedai dalam talian yang sangat diperibadikan dan berkuasa secara beransur-ansur. Ingatlah, sentiasa tambahkan kod yang disesuaikan ke dalam subtema yang berkaitan.functions.phpIa boleh dilakukan dalam fail atau melalui plugin yang dibangunkan khusus, dan ini merupakan amalan terbaik untuk memastikan keselamatan proses pengemaskinan (update).

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.

Lawati halaman

FAQ - Soalan Lazim

Di mana saya harus meletakkan kod kustom saya, ####?
Cara yang paling selamat dan disyorkan adalah untuk meletakkannya dalam sub-topik tema yang anda gunakan sekarang.functions.phpDalam dokumen tersebut.

Dengan melakukan ini, anda dapat memastikan bahawa kod kustom anda tidak akan ditimpa apabila tema dikemaskini. Jika anda tidak menggunakan sub-tema, anda juga boleh membuat sebuah plugin fungsi kustom khusus untuk menyimpan kod tersebut.

Bagaimana untuk mencari hook atau filter tertentu yang saya perlukan?

Anda boleh merujuk kepada dokumentasi pembangun rasmi WooCommerce, di mana terdapat indeks hook yang terperinci.

Selain itu, dalam editor kod di bahagian belakang WordPress, atau dengan menggunakan plugin seperti “Simply Show Hooks”, semua hook yang tersedia untuk halaman tersebut dapat dipaparkan secara visual terus pada halaman frontend. Ini sangat berguna untuk mencari dan menentukan lokasi hook dengan cepat.

Saya menggunakan hook tetapi kodnya tidak berfungsi, bagaimana untuk menyelesaikannya?

Pertama sekali, periksa kod anda untuk memastikan tiada ralat sintaks yang boleh menyebabkan PHP gagal untuk memprosesnya. Pastikan fungsi panggilan balik (callback function) didefinisikan dengan betul, dan…add_action或add_filterKeutamaan dan bilangan parameter adalah betul.

Kedua, pastikan nama hook tersebut adalah betul, dan ia benar-benar dijalankan di lokasi halaman yang diharapkan. Gunakan…error_log或var_dumpMelakukan output penyelarasan yang mudah dapat membantu anda menentukan sama ada fungsi tersebut telah dipanggil (dipanggil).

Apa perbezaan antara memodifikasi fail templat WooCommerce dan menggunakan hook?

Menggantikan fail templat WooCommerce secara langsung (menyalinnya ke dalam direktori tema anda) merupakan cara yang cepat untuk mengubah penampilan dan struktur laman web, namun kaedah ini biasanya digunakan untuk mengubah struktur output HTML.

Manakala hook lebih sesuai digunakan untuk menambahkan fungsi baru, memodifikasi data, atau menyisipkan kandungan di lokasi tertentu. Hook menyediakan fleksibiliti dan kebolehjagaan yang lebih tinggi, terutama semasa melakukan pengembangan fungsi logik, dan sepatutnya diutamakan sebagai pilihan pertama. Teknik penutupan template (template overriding) dan penggunaan hook sering digabungkan bersama-sama untuk mencapai hasil yang terbaik.