วิธีใช้ WooCommerce Hooks - คู่มือฉบับสมบูรณ์

เผยแพร่แล้ว: 2022-05-03

ในบทความนี้ เราจะพูดถึงวิธีที่คุณสามารถใช้ WooCommerce Hooks เพื่อขยายร้านค้า WooCommerce ของคุณตามข้อกำหนดของคุณ

เคยสงสัยไหมว่า WordPress มีขนาดใหญ่มากได้อย่างไร? ปัจจุบันกว่า 40% ของเว็บไซต์ทั่วโลกใช้ WordPress เป็น CMS ทั้งหมดนี้เกิดขึ้นได้ด้วยตะขอและตัวกรองซึ่งผู้คนสร้างปลั๊กอินนับพัน

บางครั้งคุณอาจฟังคนพูดว่า PHP จะตายในไม่ช้า แต่การแบ่งปันของ WordPress ยังคงเติบโตอย่างต่อเนื่องและ WordPress นั้นใช้ PHP อย่างสมบูรณ์ เวลาเท่านั้นที่จะบอกได้

หากคุณไม่เคยพัฒนาปลั๊กอิน WordPress คุณต้องดูคู่มือนี้เพราะคุณต้องรู้วิธีสร้างปลั๊กอิน WordPress ก่อนจึงจะสามารถใช้คู่มือนี้ได้

สารบัญ

ตะขอคืออะไร?

เป็นไปได้ที่จะแก้ไขหรือเพิ่มโค้ดใน WordPress โดยไม่ต้องแก้ไขไฟล์หลักโดยใช้ hooks

WordPress และ WooCommerce ใช้ hooks อย่างกว้างขวาง ซึ่งเป็นฟังก์ชันที่นักพัฒนา WordPress และ WooCommerce สามารถปรับแต่งได้ ตะขอมีสองแบบ

  1. การ ดำเนิน การ : ตะขอประเภทนี้ช่วยให้คุณสามารถรันโค้ดที่กำหนดเองได้ทุกเมื่อที่ทริกเกอร์
  2. ตัวกรอง : Filter Hooks ช่วยให้คุณสามารถจัดการและคืนค่า (เช่น ราคาสินค้า) เมื่อผ่านฟังก์ชันบางอย่าง

WooCommerce เป็นปลั๊กอิน WordPress ที่สร้างขึ้นโดยใช้ Actions และ Hooks อย่างไรก็ตาม ปลั๊กอินแต่ละตัวยังสามารถสร้าง Hooks และ Filter ของตัวเอง ซึ่งนักพัฒนาปลั๊กอินรายอื่นสามารถใช้เพื่อขยายฟังก์ชันการทำงานของปลั๊กอินเพิ่มเติม

WooCommerce Hooks

ในบทช่วยสอนนี้ เราจะอธิบายเกี่ยวกับ WooCommerce hooks ต่างๆ และยังให้ตัวอย่างภาพและตัวอย่างโค้ดอีกด้วย เริ่มแรกโค้ดปลั๊กอินของเราดูเหมือน

 <?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."); }

ขณะที่เราดำเนินการกับบทช่วยสอน เราจะเพิ่มโค้ดเพิ่มเติมในไฟล์นี้ต่อไป

สินค้า WooCommerce Hooks

ก่อนอื่นเราจะเริ่มต้นด้วย hooks ที่คุณสามารถใช้ได้ในหน้าผลิตภัณฑ์ หลังจากนั้นเราจะให้ตัวอย่างโค้ดของวิธีใช้ woocommerce_before_single_product เพื่อแสดงบางอย่างที่ด้านบนของผลิตภัณฑ์ของคุณ

ตะขอแสดงที่ด้านบนและส่วนท้ายของหน้าสินค้า

  • woocommerce_before_main_content
  • woocommerce_after_main_content
woocommerce hooks

ตะขอที่แสดงด้านบนและด้านล่างรายละเอียดสินค้า

  • 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_share

ตะขอแสดงในความคิดเห็น

  • 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

ตอนนี้ สมมติว่าคุณต้องการแสดงบางอย่างที่ด้านบนของหน้าผลิตภัณฑ์เดียว คุณสามารถใช้ WooCommerce Hooks ที่เรียกว่า woocommerce_before_single_product โค้ดของเรามีลักษณะดังนี้:

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

ตอนนี้คุณสามารถดูได้จากภาพด้านล่างที่พิมพ์คำว่า Hello World ไว้ด้านบนของภาพผลิตภัณฑ์

ในทำนองเดียวกัน คุณสามารถใช้ hooks อื่นๆ ในตารางด้านล่างเพื่อเพิ่มข้อมูลในหน้าผลิตภัณฑ์ รูปลักษณ์ปัจจุบันของไฟล์ปลั๊กอินของเรา:

 <?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"; }

รถเข็น WooCommerce Hooks

ตอนนี้ให้เราดู hooks ทั้งหมดที่ใช้ในหน้ารถเข็นซึ่งแบ่งออกเป็นสามประเภทเพื่อความสะดวกของคุณ

ตะขอที่แสดงก่อนรายการสินค้าในรถเข็น

  • woocommerce_before_cart
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_after_cart_contents

ตะขอที่แสดงหลังรายการสินค้าในรถเข็น

  • woocommerce_cart_coupon
  • woocommerce_cart_actions
  • woocommerce_after_cart_table
  • woocommerce_cart_collaterals
  • woocommerce_before_cart_totals

ตะขอแสดงเมื่อสิ้นสุดคำสั่งซื้อ

  • 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

และหากไม่มีสินค้าในตะกร้า จะขอใช้ขอเกี่ยวดังต่อไปนี้

woocommerce_cart_is_empty

woocommerce_before_cart

มาดูกันว่าเราจะใช้ woocommerce_before_cart hook เพื่อแสดงอะไรหน้าโต๊ะรถเข็นได้อย่างไร

และโค้ดสำหรับสิ่งนี้คือ

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

และโค้ดสุดท้ายจะเป็นแบบนี้

 <?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"; }

ในทำนองเดียวกัน คุณสามารถใช้ hooks อื่นๆ ในโค้ดของคุณ และคุณสามารถทำอะไรกับโค้ดของคุณได้เกือบทุกอย่าง

ชำระเงิน - WooCommerce Hooks

หน้าชำระเงินเป็นหน้าที่สำคัญและใช้งานได้จริงในร้านค้า WooCommerce ตะขอหลายประเภทที่ใช้ในหน้าชำระเงินมีการระบุไว้ด้านล่าง

ตะขอที่ใช้ก่อนรูปแบบข้อมูลติดต่อผู้ใช้

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form

ตะขอใช้สำหรับตั้งค่ามาร์กอัปของรายละเอียดการเรียกเก็บเงิน

  • woocommerce_after_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes

ตะขอที่ใช้ก่อนสรุปสินค้าตามลำดับ

  • 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

ตะขอที่แสดงด้านล่างแบบฟอร์มการสั่งซื้อ

  • 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

ตะขอหมวดหมู่ WooCommerce

กำลังแสดงชื่อหมวดหมู่

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
  • woocommerce_before_shop_loop_item_title

บทสรุป

เราได้พยายามอย่างดีที่สุดเพื่อให้คุณเห็นภาพของ hooks นำเข้าเกือบทั้งหมดที่คุณสามารถใช้เพื่อขยายร้านค้า WooCommerce ของคุณ

นอกจากนั้น เราได้ให้ตัวอย่างโค้ดที่ใช้งานได้จริงสองตัวอย่างเพื่อแสดงให้เห็นว่าการใช้ hooks เหล่านั้นในโค้ดปลั๊กอินของคุณทำได้ง่ายเพียงใด คุณสามารถใช้ WooCommerce hooks เหล่านี้เพื่อเพิ่มฟิลด์เช็คเอาต์หรือเพิ่มกล่องอินพุตเพื่อรวบรวมข้อมูลเพิ่มเติมจากผู้ใช้ระหว่างขั้นตอนการสั่งซื้อได้อย่างง่ายดาย

มีความเป็นไปได้ไม่ จำกัด ในมือของคุณ หากคุณยังคงมีคำถามใด ๆ อย่าลังเลที่จะถามพวกเขาในช่องแสดงความคิดเห็นด้านล่าง