מדריך שימוש בהוקים של ווקומרס (WooCommerce Hooks)

לפני שנצלול להוקים של ווקומרס, בואו נסקור בקצרה כיצד הוקים עובדים. הוקים בוורדפרס מאפשרים לכם להוסיף או לשנות קוד ללא עריכת קבצי המקור, מה שהופך אותם לכלי חיוני עבור מפתחים.

ישנם שני סוגים של הוקים בוורדפרס: פעולות ופילטרים (actions & filters). פעולות מאפשרות לכם להוסיף קוד בנקודות מסוימות. פילטרים מאפשרים לכם לבצע מניפולציה על נתונים ולהחזיר ערך מעודכן.

לפני שאתם ממשיכים, חשוב שתדעו כיצד ליצור תבנית בת.

כיצד להשתמש בהוקים ופילטרים?

בכדי להשתמש בהוקים מסוג פעולות, עליכם לחפש או לדעת את הנקודה בה ההוק מתבצע בקבצי התבנית או התוסף ולמצוא את שמו הייחודי. אותה נקודת בה מתבצעת הפעולה תראה בסגנון הבא:

do_action('action_name');

כעת כשאתם יודעים את שם ההוק אתם יכולים בקלות להוסיף קוד משלכם שיתבצע בנקודה זו (בהוק זה):

if ( ! function_exists( 'your_function_name' ) ) {
    function your_function_name() {
    // Your custom code goes here
    }
    add_action( 'action_name', 'your_function_name' );
}

פילטרים נקראים לאורך הקוד באמצעות הקוד הבא:

apply_filters( 'filter_name', $variable );

באותו אופן שמצאתם את שם הפעולה, עליכם למצוא את שם הפילטר. ברגע שמצאתם, תוכלו ליצור פונקציה שמשנה את הערך המוחזר:

if ( ! function_exists( 'your_function_name' ) ) {
    function your_function_name( $variable ) {
// Your custom code goes here
        return $variable;
    }
    add_filter( 'filter_name', 'your_function_name' );
}

שימו לב – במקרה של פילטרים מאוד חשוב כי תחזירו ערך כלשהו!

הוקים מסוג פילטר יכולים לקבל מספר משתנים, לא רק אחד. ברירת המחדל היא 1, כך שכדי לגשת לערכים נוספים יש לציין את המספר כפרמטר הרביעי ב-add_filter:

apply_filter( 'filter_name', $variable1, $variable2, $variable3 );

והנה הפונקציה איתה אנו מבצעים מניפולציה כל הקוד ומחזירים ערך חדש (במקרה שלנו הסכום של שלושת המשתנים):

if ( ! function_exists( 'your_function_name' ) ) {
    function your_function_name( $variable1, $variable2, $variable3 ) {
    // Example custom code
        $new_value = $variable1 + $variable2 + $variable3;
        return $new_value;
    }
    add_filter( 'filter_name', 'your_function_name', 10, 3 );
}

שימו לב לפרמטר הרביעי (הספרה 3) בקריאה ל add_filter.

הפרמטר השלישי בפונקציה add_filter הוא העדיפות (priority). הוא שולט בסדר הביצוע כאשר מספר פונקציות מוצמדות לאותו הוק. מספרים נמוכים יותר רצים ראשונים (ברירת המחדל היא 10).

לאחר שהסברנו כיצד הוקים עובדים בוורדפרס, בואו נראה מספר טריקים שימושיים המאפשרים לנו לדרוס הגדרות או תבניות כלשהן של התוסף ווקומרס.

מניפולציה לווקומרס באמצעות הוקים

לצורך הדוגמאות נבצע שינויים לעמוד החנות הראשי (Shop Page) באמצעות הוקים של ווקומרס. הדוגמאות הבאות עובדות עם גרסאות ווקומרס עדכניות.

מיותר לציין אני מניח כי הוקים קיימים לא רק לעמוד החנות אלא עבור כל עמוד הקיים לווקומרס.

1. הסרת פירורי לחם מעמוד החנות

עמוד החנות של ווקומרס מיוצר על ידי הקובץ woocommerce/templates/archive-product.php. אם תתנו בו מבט תמצאו את הקוד הבא:

/**
 * Hook: woocommerce_before_main_content.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 * @hooked WC_Structured_Data::generate_website_data() - 30
 */
do_action( 'woocommerce_before_main_content' );

מפתחי ווקומרס מציינים כי ההוק woocommerce_before_main_content קורא למספר פונקציות, כולל woocommerce_breadcrumb עם עדיפות 20. כדי להסיר את פירורי הלחם:

// Remove WooCommerce Breadcrumbs
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

2. הסרה של הכותרת בעמוד החנות

על מנת להסיר את הכותרת בעמוד החנות ניתן להשתמש בקוד הבא:

if ( ! function_exists( 'hide_woocommerce_page_title' ) ) {
    /**
     * Hide WooCommerce Shop page title
     */
    function hide_woocommerce_page_title( $visibility ) {
        // Default $visibility value is true
        $visibility = false;
        return $visibility;
    }
    add_filter( 'woocommerce_show_page_title', 'hide_woocommerce_page_title' );
}

באותה מידה ובצורה פשוטה יותר ניתן להשתמש בקוד הבא:

if ( ! function_exists( 'hide_woocommerce_page_title' ) ) {
    /**
     * Hide WooCommerce page title
     */
    function hide_woocommerce_page_title() {
        return false;
    }
    add_filter( 'woocommerce_show_page_title', 'hide_woocommerce_page_title' );
}

שתי הגישות עובדות. הראשונה דורסת את ערך המשתנה, והשנייה פשוט מחזירה false ישירות.

3. שינוי מספר המוצרים בעמוד החנות

כדי לשנות את מספר המוצרים המוצגים בעמוד החנות, השתמשו בקוד הבא. שנו את הערך המוחזר למספר הרצוי:

if ( ! function_exists( 'change_woocommerce_products_per_page' ) ) {
    /**
     * Change number of products on main shop page
     */
    function change_woocommerce_products_per_page()
    {
        return 9;
    }

    add_filter('loop_shop_per_page', 'change_woocommerce_products_per_page', 8);

}

4. עטיפת המוצרים בחנות באלמנט HTML כלשהו

בכדי להוסיף Markup נוסף סביב רשימת המוצרים בעמוד החנות עלינו להשתמש בשתי פונקציות. הראשונה תוסיף div פותח לפני הרשימה והשנייה תוסיף את ה div הסוגר בסופה.

if ( ! function_exists( 'additional_markup_before_products' ) ) {
    /**
     * Adding additional markup before product list
     */
    function additional_markup_before_products() {
        echo '<div class="my-custom-class"><h1>' .esc_html__( 'Custom Title Before Products' ) . '</h1>';
    }
    add_action( 'woocommerce_before_shop_loop', 'additional_markup_before_products', 40 );
}

שימו לב שקבענו עדיפות 40, מכיוון שווקומרס כבר מצמידה פונקציות ל-woocommerce_before_shop_loop עם עדיפויות 10, 20 ו-30. הפונקציה שלנו רצה אחריהן:

if ( ! function_exists( 'additional_markup_after_products' ) ) {
    /**
     * Adding additional markup after product list
     */
    function additional_markup_after_products() {
        echo '</div>';
    }
    add_action( 'woocommerce_after_shop_loop', 'additional_markup_after_products', 5 );
}

5. הוספת תגית ״אזל מהמלאי״ על מוצר [ שאזל מהמלאי כמובן 🙂 ]

דוגמה זו משתמשת באובייקט global $product ובמתודה is_in_stock() כדי לבדוק האם המוצר קיים במלאי. אם לא, נציג תגית "אזל מהמלאי":

/**
 * Adding sold badge for product item
 */
if (!function_exists('add_sold_badge_mark')) {

    function add_sold_badge_mark()
    {
        global $product;
        if (!$product->is_in_stock()) {
            echo '<span class="out-of-stock">' . esc_html__('Sold') . '</span>';
        }
    }
    add_action('woocommerce_before_shop_loop_item_title', 'add_sold_badge_mark');
}

תנו מבט בפוסט הבא אם מעניין אתכם כיצד להתייחס למוצרים שאזלו מהמלאי מבחינת SEO וחווית משתמש.

6. שינו ה Markup של כותרת המוצר

אם תתנו מבט בקובץ content-product.php תראו כי כותרת המוצר נוספת על ידיד ההוק woocommerce_shop_loop_item_title ובאמצעות הפונקציה woocommerce_template_loop_product_title:

/**
* Hook: woocommerce_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );

אם תתנו מבט בפונקציה, תראו כי מפתחי ווקומרס מייצרים את התגית בצורה ישירה ואינם מספקים פילטר כלשהו לשנות אותה.

אז ישנן שתי דרכים לגשת לכך, הראשונה היא לדרוס את הפונקציה בשלמותה על ידי הקובץ. בכדי לעשות זאת העתיקו את הפונקציה הבאה מהתוסף ווקומרס לקובץ functions.php לתבנית הבת שלכם:

function woocommerce_template_loop_product_title() {
    echo '<h2 class="woocommerce-loop-product__title">' . get_the_title() . '</h2>';
}

ושנו את שם הקלאס כרצונכם:

function woocommerce_template_loop_product_title() {
    echo '<h2 class="savvy-title">' . get_the_title() . '</h2>';
}

אפשרות 2 (מומלצת): הסירו את הפעולה המקורית והצמידו פונקציה משלכם. גישה זו מונעת קונפליקטים בעדכונים עתידיים של ווקומרס:

if ( ! function_exists( 'add_product_item_title' ) ) {
    /**
     * Adding product item title markup
     */
    function add_product_item_title() {
        echo '<h4 class="my-product-item-title">' . get_the_title() . '</h4>';
    }
    add_action( 'woocommerce_shop_loop_item_title', 'add_product_item_title' );
}
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title' );

שאלות נפוצות

סיכום

הוקים של ווקומרס הם הבסיס להתאמה אישית של החנות הדיגיטלית שלכם ללא שינוי קבצי הליבה של התוסף. הבנה של ההבדל בין פעולות לפילטרים, ואיך עדיפות שולטת בסדר הביצוע, מאפשרת לכם לשנות כמעט כל היבט בווקומרס.

להבנה מעמיקה יותר של הוקים באופן כללי, עיינו במדריך שלנו על הוקים בוורדפרס. המסקנה העיקרית: השתמשו תמיד בהוקים במקום לערוך תבניות של ווקומרס ישירות, ומקמו את ההתאמות שלכם בתוסף לתחזוקה ארוכת טווח.