Cara menggunakan WooCommerce Hooks - Panduan Lengkap

Diterbitkan: 2022-05-03

Pada artikel ini kita akan membahas bagaimana Anda dapat menggunakan WooCommerce Hooks untuk memperluas toko WooCommerce Anda sesuai dengan kebutuhan Anda.

Pernah bertanya-tanya bagaimana WordPress menjadi begitu besar? Lebih dari 40% situs web Dunia sekarang menggunakan WordPress sebagai CMS mereka. Itu semua dimungkinkan oleh kait dan filter yang digunakan orang untuk membuat ribuan plugin.

Dari waktu ke waktu Anda mungkin mendengarkan orang mengatakan bahwa PHP akan segera mati, namun pangsa WordPress terus tumbuh dan WordPress sepenuhnya didasarkan pada PHP. Yah hanya waktu yang akan menjawab.

Jika Anda belum pernah mengembangkan plugin WordPress, maka Anda harus melihat panduan ini karena Anda harus tahu cara membuat plugin WordPress sebelum dapat menggunakan panduan ini.

Daftar isi

Apa itu Hooks?

Dimungkinkan untuk mengedit atau menambahkan kode di WordPress tanpa mengedit file inti menggunakan kait.

WordPress dan WooCommerce menggunakan hook secara ekstensif, yang merupakan fungsi yang dapat disesuaikan oleh pengembang WordPress dan WooCommerce. Kait ada dua jenis

  1. Tindakan : Jenis kait ini memungkinkan Anda untuk mengeksekusi kode khusus setiap kali dipicu.
  2. Filter : Filter Hooks memungkinkan Anda untuk memanipulasi dan mengembalikan nilai (misalnya, harga produk) saat melewati fungsi tertentu.

WooCommerce adalah plugin WordPress yang juga dibuat menggunakan Actions dan Hooks, namun, setiap plugin juga dapat membuat Hooks dan Filter mereka sendiri yang dapat digunakan pengembang plugin lain untuk lebih memperluas fungsionalitas plugin.

Kait WooCommerce

Sekarang dalam tutorial ini kami akan menjelaskan tentang berbagai kait WooCommerce, juga akan memberi Anda contoh visual serta contoh kode. Awalnya kode plugin kami terlihat seperti

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberpanel.net * Description: CyberPanel Tutorial * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberpanel.net * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); }

Saat kami melanjutkan tutorial, kami akan terus menambahkan lebih banyak kode ke file ini.

Kait Produk WooCommerce

Pertama kita akan memulai dengan hook yang bisa Anda gunakan di halaman produk, nanti kami akan memberikan contoh kode bagaimana menggunakan woocommerce_before_single_product untuk menampilkan sesuatu di atas produk Anda.

Kait ditampilkan di bagian atas dan kaki halaman Produk

  • woocommerce_before_main_content
  • woocommerce_after_main_content
kait woocommerce

Kait ditampilkan di atas dan di bawah deskripsi produk

  • woocommerce_before_single_product_summary
  • woocommerce_after_single_product_summary

Kait ditampilkan di bagian atas dan kaki halaman Produk

  • woocommerce_before_single_product
  • woocommerce_after_single_product

Kait yang ditampilkan dalam deskripsi produk singkat

  • woocommerce_single_product_summary
  • woocommerce_product_meta_start
  • woocommerce_product_meta_end
  • woocommerce_share

Kait ditampilkan di komentar

  • woocommerce_review_before
  • woocommerce_review_before_comment_meta
  • woocommerce_review_meta
  • woocommerce_review_before_comment_text
  • woocommerce_review_comment_text
  • woocommerce_review_after_comment_text

woocommerce_before_single_product

Sekarang katakanlah Anda ingin menampilkan sesuatu di atas halaman produk tunggal Anda, Anda dapat menggunakan WooCommerce Hooks yang disebut woocommerce_before_single_product , kode kami untuk ini terlihat seperti:

 add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; }

Sekarang Anda dapat melihat pada gambar di bawah bahwa hello world tercetak di atas gambar produk

Demikian pula Anda dapat menggunakan kait lain dalam tabel di bawah ini untuk menambahkan informasi di halaman produk. Tampilan file plugin kami saat ini:

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberwp.cloud * Description: Manage multiple CyberPanel installations via WordPress. * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberwp.cloud * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); } add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; }

Keranjang WooCommerce Hooks

Sekarang mari kita lihat semua kait yang digunakan di halaman keranjang, dibagi menjadi tiga kategori untuk kenyamanan Anda.

Kait ditampilkan sebelum daftar produk di keranjang

  • woocommerce_before_cart
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_after_cart_contents

Kait ditampilkan setelah daftar produk di keranjang

  • woocommerce_cart_coupon
  • woocommerce_cart_actions
  • woocommerce_after_cart_table
  • woocommerce_cart_collaterals
  • woocommerce_before_cart_totals

Kait ditampilkan di akhir pesanan

  • 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

Dan jika tidak ada produk di keranjang, kait berikut akan digunakan:

woocommerce_cart_is_empty

woocommerce_before_cart

Mari kita lihat bagaimana kita bisa menggunakan woocommerce_before_cart hook untuk menampilkan sesuatu sebelum tabel cart

Dan cuplikan kode untuk ini adalah

 add_action( 'woocommerce_before_cart', 'woocommerce_before_cart_custom', 10, 0 ); function woocommerce_before_cart_custom() { echo "before cart content"; }

Dan kode terakhir akan terlihat seperti ini

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberpanel.net * Description: CyberPanel Tutorial * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberpanel.net * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); } add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; } add_action( 'woocommerce_before_cart', 'woocommerce_before_cart_custom', 10, 0 ); function woocommerce_before_cart_custom() { echo "before cart content"; }

Demikian pula Anda dapat menggunakan kait lain dalam kode Anda dan Anda dapat melakukan hampir semua hal dengan kode Anda.

Checkout - Kait WooCommerce

Halaman checkout adalah halaman yang sangat penting dan fungsional di toko WooCommerce. Beberapa kategori kait yang digunakan pada halaman checkout disebutkan di bawah ini.

Kait yang digunakan sebelum bentuk informasi kontak pengguna

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form

Kait yang digunakan untuk mengatur markup detail penagihan

  • woocommerce_after_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes

Kait digunakan sebelum ringkasan produk dalam rangka

  • 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_before_order_total
  • woocommerce_review_order_after_order_total

Kait ditampilkan di bawah formulir pemesanan

  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_payment
  • woocommerce_after_checkout_form

Kait Kategori WooCommerce

Menampilkan judul kategori

woocommerce_archive_description

woocommerce_shop_loop

Ini ditampilkan sebelum kartu Produk dalam daftar.

woocommerce_before_shop_loop

Itu ditampilkan di atas daftar produk dalam kategori.

woocommerce_after_shop_loop

Itu ditampilkan di bawah daftar produk dalam kategori.

woocommerce_after_shop_loop_item

Ini ditampilkan di akhir setiap deskripsi kartu Produk.

Kait yang juga menandai kartu Produk dalam daftar.

  • woocommerce_after_shop_loop_item_title
  • woocommerce_shop_loop_item_title
  • woocommerce_before_shop_loop_item_title

Kesimpulan

Kami telah mencoba yang terbaik untuk memberi Anda representasi visual dari hampir semua kait impor yang dapat Anda gunakan untuk memperluas toko WooCommerce Anda.

Selain itu, kami telah memberikan dua contoh kode praktis untuk menunjukkan betapa mudahnya menggunakan kait tersebut dalam kode plugin Anda. Anda dapat dengan mudah menggunakan kait WooCommerce ini bahkan untuk menambahkan bidang checkout atau menambahkan kotak input untuk mengumpulkan lebih banyak informasi dari pengguna selama proses pemesanan mereka.

Ada kemungkinan tak terbatas di tangan Anda, jika Anda masih memiliki pertanyaan, silakan tanyakan di kotak komentar di bawah.