הסרה, הוספה ועריכת לשוניות (Tabs) במוצרי ווקומרס

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

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

אם לא ברור, מדובר בלשוניות שמופיעות מתחת למוצר עצמו, כפי שמוצג בתמונה הבאה (הן עשויות להיראות אחרת בהתאם לתבנית שלכם):

"Product tabs can be removed, renamed, re-ordered and customized using the woocommerce_product_tabs filter." – WooCommerce official documentation.

הסרת לשוניות

השתמשו ב-unset() על מפתחות הלשוניות כדי להסיר לשוניות ספציפיות. שלושת מפתחות ברירת המחדל הם description, reviews ו-additional_information:

add_filter( 'woocommerce_product_tabs', function( $tabs ) {

    unset( $tabs['description'] );
    unset( $tabs['reviews'] );
    unset( $tabs['additional_information'] );

    return $tabs;
}, 98 );

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

שינוי שם הלשוניות

שנו את מאפיין ה-title של כל לשונית כדי לשנות את שמה. בדקו תמיד עם isset() קודם, מכיוון שלשונית עשויה לא להתקיים עבור כל מוצר:

add_filter( 'woocommerce_product_tabs', function( $tabs ) {

    if ( isset( $tabs['description'] ) ) {
        $tabs['description']['title'] = __( 'More Information', 'woocommerce' );
    }

    if ( isset( $tabs['reviews'] ) ) {
        $tabs['reviews']['title'] = __( 'Ratings', 'woocommerce' );
    }

    if ( isset( $tabs['additional_information'] ) ) {
        $tabs['additional_information']['title'] = __( 'Product Data', 'woocommerce' );
    }

    return $tabs;
}, 98 );

שינוי סדר הלשוניות

שנו את ערך ה-priority כדי לשלוט בסדר הלשוניות. מספרים נמוכים יותר מופיעים ראשונים:

add_filter( 'woocommerce_product_tabs', function( $tabs ) {

    if ( isset( $tabs['reviews'] ) ) {
        $tabs['reviews']['priority'] = 5;
    }

    if ( isset( $tabs['description'] ) ) {
        $tabs['description']['priority'] = 10;
    }

    if ( isset( $tabs['additional_information'] ) ) {
        $tabs['additional_information']['priority'] = 15;
    }

    return $tabs;
}, 98 );

ערכי ה-priority של ברירת המחדל הם: Description (10), Additional Information (20), Reviews (30). התאימו מספרים אלה כדי למקם לשוניות בכל סדר שתרצו.

התאמה אישית של תוכן לשונית

החליפו את ה-callback של לשונית כדי לשנות את התוכן שלה לחלוטין:

add_filter( 'woocommerce_product_tabs', function( $tabs ) {

    if ( isset( $tabs['description'] ) ) {
        $tabs['description']['callback'] = 'savvy_custom_description_content';
    }

    return $tabs;
}, 98 );

function savvy_custom_description_content() {
    echo '<h2>תיאור מותאם אישית</h2>';
    echo '<p>הנה תוכן התיאור המותאם שלכם.</p>';
}

פונקציית ה-callback מחליפה הכל בתוך פאנל הלשונית. תוכלו להציג כל HTML, למשוך תוכן משדות מותאמים אישית, או לקרוא לפונקציות תבנית אחרות.

הוספת לשונית מותאמת אישית

הוסיפו רשומה חדשה למערך $tabs עם מפתח ייחודי, כותרת, priority ופונקציית callback:

add_filter( 'woocommerce_product_tabs', function( $tabs ) {

    $tabs['usage_instructions'] = array(
        'title'    => __( 'הוראות שימוש', 'woocommerce' ),
        'priority' => 50,
        'callback' => 'savvy_usage_instructions_content',
    );

    return $tabs;
} );

function savvy_usage_instructions_content() {
    echo '<h2>הוראות שימוש</h2>';
    echo '<p>עקבו אחרי השלבים הבאים לשימוש במוצר זה...</p>';
}

ברוב המקרים תרצו למשוך את תוכן הלשונית משדה מותאם אישית במקום לקודד אותו קשיח. תוכלו להשתמש ב-Advanced Custom Fields כדי ליצור שדה בעמוד המוצר, ואז להציג את הערך שלו ב-callback באמצעות get_field().

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

השתמשו ב-global $product בתוך פונקציית הפילטר כדי להוסיף לוגיקה מותנית. למשל, הצגת לשונית רק עבור מוצר מסוים:

add_filter( 'woocommerce_product_tabs', function( $tabs ) {

    global $product;

    if ( $product->get_id() === 5 ) {
        $tabs['special_tab'] = array(
            'title'    => __( 'מידע מיוחד', 'woocommerce' ),
            'priority' => 25,
            'callback' => 'savvy_special_tab_content',
        );
    }

    return $tabs;
} );

או הצגת לשונית רק עבור מוצרים משתנים (variable):

add_filter( 'woocommerce_product_tabs', function( $tabs ) {

    global $product;

    if ( $product->is_type( 'variable' ) ) {
        $tabs['sizing_guide'] = array(
            'title'    => __( 'מדריך מידות', 'woocommerce' ),
            'priority' => 25,
            'callback' => 'savvy_sizing_guide_content',
        );
    }

    return $tabs;
} );

תוכלו להשתמש בכל מתודת מוצר לתנאים: is_type(), get_category_ids(), is_virtual(), is_downloadable() ועוד.

הלשונית "מידע נוסף"

הלשונית "מידע נוסף" היא מקרה מיוחד. ווקומרס מציגה אותה רק כשלמוצר מוגדרות תכונות, מידות או משקל (לא תכונות שבשימוש לוריאציות).

אם תנסו לשנות לשונית זו במוצר שאין לו מאפיינים אלה, תקבלו אזהרת PHP:

Warning: call_user_func() expects parameter 1 to be a valid callback, no array or string given in .../templates/single-product/tabs/tabs.php on line 35

כדי להימנע מכך, בדקו תמיד עם המתודות המובנות של ווקומרס לפני שינוי הלשונית:

add_filter( 'woocommerce_product_tabs', function( $tabs ) {

    global $product;

    if ( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) {
        $tabs['additional_information']['title'] = __( 'מפרט טכני', 'woocommerce' );
    }

    return $tabs;
}, 98 );

שלוש המתודות שניתן להשתמש בהן הן has_attributes(), has_dimensions() ו-has_weight().

דריסת תבנית הלשוניות

להתאמה עמוקה יותר מעבר למה שהפילטר woocommerce_product_tabs מספק, תוכלו לדרוס את תבנית הלשוניות של ווקומרס ישירות. העתיקו את קובץ התבנית מהתוסף לתבנית הבת שלכם:

From: wp-content/plugins/woocommerce/templates/single-product/tabs/tabs.php
To:   wp-content/themes/your-child-theme/woocommerce/single-product/tabs/tabs.php

זה נותן לכם שליטה מלאה על ה-markup של הלשוניות, כולל מבנה ה-HTML, מחלקות CSS, ואיך הלשוניות מרונדרות. השתמשו בגישה זו כשאתם צריכים לשנות את ממשק הלשוניות עצמו (למשל, מעבר מלשוניות אופקיות לפריסת אקורדיון).

שאלות נפוצות

שאלות נפוצות על לשוניות מוצר בווקומרס:

סיכום

הפילטר woocommerce_product_tabs של ווקומרס נותן לכם שליטה מלאה על לשוניות עמוד המוצר. תוכלו להסיר לשוניות עם unset(), לשנות שם על ידי שינוי מאפיין ה-title, לשנות סדר עם priority, להחליף תוכן עם callback מותאם, או להוסיף לשוניות חדשות לגמרי.

השתמשו תמיד בבדיקות isset() לפני שינוי לשוניות קיימות, במיוחד הלשונית "מידע נוסף" שקיימת רק כשלמוצר יש תכונות, מידות או משקל.

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