Cara menggunakan WooCommerce Hooks – Panduan dengan Contoh

Apakah Anda ingin mempelajari cara menggunakan kait WooCommerce? Anda berada di tempat yang tepat! Dalam panduan ini, kami akan menunjukkan cara menggunakan kait aksi dan filter. Selain itu, kami akan memberi Anda banyak contoh yang dapat Anda terapkan ke toko WooCommerce Anda!

Saat Anda menginstal WooCommerce di situs web Anda, Anda memiliki akses ke daftar panjang kait baru yang memperluas kemungkinan Anda untuk mengembangkan solusi yang disesuaikan. Kait WooCommerce bekerja sama dengan kait WordPress asli dan memungkinkan Anda untuk mengeksekusi skrip khusus di halaman WooCommerce mana pun.

Mirip dengan kait WordPress, ada dua jenis kait WooCommerce: tindakan atau filter. Kait tindakan memungkinkan Anda memasukkan beberapa skrip, sedangkan kait filter menerima data asli dan mengembalikannya dengan semacam modifikasi.

Sintaks kait WooCommerce

Kait WooCommerce mengikuti sintaks yang sama dengan kait WordPress.

Kait aksi

add_action('name_of_the_action_hook','your_action_hook_funcion');

Kait penyaring

add_filter('name_of_the_filter_hook','your_filter_hook_funcion');

Setelah mendeklarasikan hook, Anda harus menambahkan skrip Anda ke dalam fungsi:

 fungsi your_action_hook_funcion(){
# kode Anda di sini
}

Kait filter harus mengembalikan beberapa data dalam parameter fungsi:

 fungsi your_filter_hook_function($data){
# kode Anda yang mengubah $data
kembalikan $data;
}

Untuk melihat hook WooCommerce beraksi, rekatkan kode berikut di file functions.php dari Tema Anak Anda:

 add_action( 'woocommerce_product_meta_start', 'quadlayers_woocommerce_hooks');
fungsi quadlayers_woocommerce_hooks() {
echo '<img src="https://kokohai.com/wp-content/uploads/2020/02/logo-kokohai-tienda-de-merchandising-de-anime-y-maga-e1584570981420.png">'; // Ubah ke url gambar yang diinginkan
}

Ini adalah contoh paling dasar, di mana Anda menambahkan gambar ke semua halaman produk. Gambar akan ditampilkan di bawah tombol Tambahkan ke troli , sebelum metadata produk.

Seperti yang Anda lihat, nama kaitnya, woocommerce_product_meta_start , cukup jelas dan memberi tahu Anda dengan tepat di mana kait ini memungkinkan Anda memasukkan kode.

Daftar kait WooCommerce

Ada lebih dari seribu kait WooCommerce. Di sini, kami akan membuat daftar yang paling populer sehingga Anda terbiasa dengan kait yang paling umum dan terkenal.

Kami telah membagi daftar menjadi beberapa bagian sesuai dengan halaman yang terkait dengannya. Nama kail sudah cukup jelas sehingga Anda tidak akan kesulitan memahami apa yang mereka lakukan.

• Keranjang

  • woocommerce_before_cart
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_after_cart_contents
  • woocommerce_cart_is_empty
  • woocommerce_cart_totals_before_shipping
  • woocommerce_cart_totals_after_shipping
  • woocommerce_cart_totals_before_order_total
  • woocommerce_cart_totals_after_order_total
  • woocommerce_after_shipping_rate
  • woocommerce_before_shipping_calculator
  • woocommerce_proceed_to_checkout
  • woocommerce_after_cart_totals
  • woocommerce_after_cart

• Periksa

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_after_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_payment
  • woocommerce_after_checkout_form
  • woocommerce_terima kasih
• Untuk informasi lebih lanjut tentang hook checkout, Anda dapat melihat panduan lengkap kami tentang WooCommerce Checkout Hooks.

• Produk

  • woocommerce_before_main_content
  • woocommerce_after_main_content
  • woocommerce_before_single_product_summary
  • woocommerce_after_single_product_summary
  • woocommerce_before_single_product
  • woocommerce_after_single_product
  • woocommerce_single_product_summary
  • woocommerce_product_meta_start
  • woocommerce_product_meta_end
  • woocommerce_review_before
  • woocommerce_review_before_comment_meta
  • woocommerce_review_before_comment_text
  • woocommerce_review_comment_text
  • woocommerce_review_after_comment_text

• Taksonomi

  • woocommerce_archive_description
  • woocommerce_shop_loop
  • woocommerce_before_shop_loop
  • woocommerce_after_shop_loop
  • woocommerce_after_shop_loop_item
  • woocommerce_after_shop_loop_item_title
  • woocommerce_shop_loop_item_title

• Akun

  • woocommerce_before_account_navigation
  • woocommerce_after_account_navigation
  • woocommerce_before_edit_account_address_form
  • woocommerce_account_content
  • woocommerce_before_my_account
  • woocommerce_after_my_account

• Kereta Mini

  • woocommerce_before_mini_cart
  • woocommerce_before_mini_cart_contents
  • woocommerce_mini_cart_contents
  • woocommerce_widget_shopping_cart_before_buttons
  • woocommerce_widget_shopping_cart_buttons
  • woocommerce_after_mini_cart

• Surel

  • woocommerce_email_after_order_table
  • woocommerce_email_before_order_table
  • woocommerce_email_customer_details
  • woocommerce_email_footer
  • woocommerce_email_header
  • woocommerce_email_order_details

• Global

  • pra_get_produk_formulir_pencarian
  • woocommerce_breadcrumb
  • woocommerce_no_products_found

Untuk menemukan daftar lengkap hook WooCommerce, Anda dapat melihat dokumentasi WC resmi.

Contoh berguna dari WooCommerce Hooks

Sekarang, mari kita lihat beberapa contoh hal berguna yang dapat Anda lakukan dengan hook WooCommerce.

CATATAN : Sebelum Anda mulai, kami sarankan Anda membuat tema anak. Jika Anda tidak terbiasa dengannya, Anda dapat melihat panduan kami tentang cara membuat tema anak dan daftar plugin tema anak terbaik.

Jika Anda baru memulai dengan hook, Anda cukup menyalin skrip ini dan menempelkannya di file functions.php dari tema anak Anda. Kemudian, saat Anda merasa lebih nyaman, Anda dapat mengedit skrip dan membuat logika yang berbeda.

Tambahkan deskripsi ke Halaman Toko

Secara default, Halaman Toko tidak menampilkan deskripsi. Namun, Anda dapat mengaktifkannya menggunakan kait woocommerce_archive_description sebagai berikut:

 fungsi quadlayers_shop_description() {
$description = '<p>Selamat datang di toko saya, mohon murah hati dan beli banyak barang, terima kasih.</p>';
echo $deskripsi;
}

add_action('woocommerce_archive_description', 'quadlayers_shop_description');

Tambahkan catatan informasi setelah tombol Tambahkan ke Keranjang

Kait keranjang WooCommerce memungkinkan Anda memasukkan skrip khusus di banyak bagian halaman keranjang. Di sini, kami akan menunjukkan cara menambahkan teks setelah tombol Tambahkan ke troli .

Skrip ini akan mencetak teks khusus setelah tombol Tambahkan ke Keranjang.

 add_action( 'woocommerce_after_add_to_cart_form', 'quadlayers_after_addtocart_button' );
fungsi quadlayers_after_addtocart_button() {
	// CATATAN: ganti slug kategori Anda untuk 'musik' && ganti /delivery-costs/ untuk url yang valid
	if ( is_product() && has_term( array( 'music' ), 'product_cat' ) ) {
		echo '<div></div><div>;<a href="/delivery-costs/" target="_blank" rel="noopener"><i class="fa fa-truck" aria-hidden=" true"></i> Belanjakan $100 dan dapatkan pengiriman gratis;</a></div>
'; } }

Anda dapat menggunakan ini untuk mempromosikan diskon yang memerlukan pengeluaran minimum atau pengiriman gratis misalnya.

Penjelasan kode

• Kait woocommerce_after_add_to_cart_form mencetak kode HTML setelah tombol.
• Kami memeriksa apakah halaman saat ini adalah halaman produk dan apakah itu memiliki kategori yang kami tentukan.
• Gunakan siput kategori dalam array. Dengan cara ini, Anda dapat memeriksa beberapa kategori.
• Konten yang digaungkan memungkinkan tag HTML, variabel, dan apa pun lainnya dalam lingkup PHP.

Tambahkan teks ke taksonomi produk tertentu

Sekarang, mari kita lihat cara menggunakan kait WooCommerce untuk menampilkan pesan di produk dengan tag tertentu. Misalnya, kami akan menampilkan pesan yang menawarkan diskon untuk produk tertentu.

Jangan lupa untuk menandai produk terlebih dahulu.

 add_action( 'woocommerce_before_single_product', 'my_product_notice_function' );
function my_product_notice_function() { 
if ( is_product() && has_term( 'diskon-25','product_tag' ) ) {
echo '<p><strong>Produk ini berlaku untuk diskon 25% selama 48 jam ke depan!</strong></p>';
}
}

Penjelasan kode

1. 1. Kami menggunakan kait woocommerce_before_single_product untuk menampilkan pesan di bagian atas halaman produk.
   2. Di dalam fungsi, kami menggunakan kondisional pada is_product() untuk memastikan bahwa itu adalah halaman produk.
   3. Dan has_term() memeriksa apakah produk saat ini memiliki tag "diskon-25" .
   4. Kemudian, cetak pesan Anda dalam pernyataan if.

Blokir pembelian dari pengguna yang keluar

Kait WooCommerce memungkinkan Anda untuk menonaktifkan tombol Tambahkan ke troli pada halaman produk untuk pengguna yang keluar. Ini dapat berguna untuk produk atau penawaran yang hanya tersedia untuk pelanggan atau anggota. Untuk melengkapi contoh, kami akan menambahkan kait kedua untuk menampilkan pesan saat tombol beli dinonaktifkan.

Kait filter woocommerce_is_purchasable akan memblokir pembelian dan kait tindakan woocommerce_before_single_product akan menampilkan pesan.

 add_action( 'woocommerce_before_single_product', 'quadlayers_add_message');
add_filter( 'woocommerce_is_purchasable', 'quadlayers_block_admin_purchase' );
function quadlayers_block_admin_purchase($block) {
if ( is_user_logged_in() ):mengembalikan nilai true;
lain: kembali salah;
berakhir jika;
}

fungsi quadlayers_add_message(){
if ( !is_user_logged_in() ):echo '<H2>SILAHKAN LOGIN UNTUK MEMBELI PRODUK INI</h2>';
berakhir jika;
}

Penjelasan kode

1. Kami menggunakan kait tindakan untuk mencetak pesan dan kait filter untuk menonaktifkan tombol Tambahkan ke troli .
2. Kait filter woocommerce_is_purchasable akan benar jika pengguna masuk dan salah jika mereka keluar.
3. Kami juga menggunakan pernyataan if() bersyarat untuk menerapkan ketentuan hanya untuk pengguna yang keluar di kedua fungsi (tombol Tambahkan ke troli dinonaktifkan dan pesannya).
4. Terakhir, kami telah menambahkan beberapa gaya CSS ke pesan, yang disertakan dalam tag HTML H2.

Bagaimana cara memanfaatkan WooCommerce Hooks?

Kesimpulannya, kait WooCommerce adalah alat yang hebat untuk menyesuaikan situs Anda. Ada ratusan kait untuk digunakan dan semuanya mengikuti sintaks yang sama. Jadi, kami mendorong Anda untuk melihat contoh dan mendapatkan beberapa inspirasi untuk menerapkan kait yang Anda butuhkan di situs Anda.

Kait memungkinkan Anda untuk meningkatkan area mana pun di toko Anda: mulai dari kasir hingga troli hingga halaman produk, taksonomi, dan banyak lagi! Jadi, jika Anda ingin memanfaatkannya sebaik mungkin, silakan, mainkan, dan beri tahu kami bagaimana kelanjutannya. Jika Anda ingin informasi lebih rinci tentang kait checkout, Anda dapat melihat panduan kait checkout kami.

Terakhir, jangan ragu untuk menghubungi kami jika Anda memiliki pertanyaan. Kami akan melakukan yang terbaik untuk membantu Anda!