הוספת ״מחיר מומלץ לצרכן״ בעמוד המוצר של ווקומרס

מחיר מומלץ לצרכן על ידי היצרן (MSRP – Manufacturer's Suggested Retail Price), כשמו כן הוא – המחיר שהיצרן ממליץ לחנות הקמעונאית למכור מוצר מסוים. לבטח יצא לכם לראות זאת מתישהו בפרסומת או בעיתון כלשהו את המשפט: ״מחיר מומלץ לצרכן: 140 ש״ח. המחיר שלנו: 99 ש״ח בלבד!״.

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

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

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

הנה תמונה של התוצאה בעמוד עריכת המוצר:

והנה תמונה של עמוד המוצר אותו הלקוח יראה:

הוספת מחיר מומלץ לצרכן בעמוד מוצר יחיד של ווקומרס

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

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

// -----------------------------------------
// 1. Add MSRP field input at product edit page

function savvy_add_msrp_to_products() {
    global $product_object;

    woocommerce_wp_text_input( array(
            'id'        => '_msrp',
            'value'     => $product_object->get_meta( '_msrp', true, 'edit' ),
            'class'     => 'short wc_input_price',
            'label'     => __( 'MSRP', 'woocommerce' ) . ' (' . get_woocommerce_currency_symbol() . ')',
            'data_type' => 'price',
        )
    );
}
add_action( 'woocommerce_product_options_pricing', 'savvy_add_msrp_to_products' );




// -----------------------------------------
// 2. Save MSRP field via product object (WooCommerce CRUD)

function savvy_save_msrp( $product ) {
    if ( isset( $_POST['_msrp'] ) ) {
        $product->update_meta_data( '_msrp', wc_clean( wp_unslash( $_POST['_msrp'] ) ) );
    }
}
add_action( 'woocommerce_admin_process_product_object', 'savvy_save_msrp' );




// -----------------------------------------
// 3. Display MSRP field at single product page

function savvy_display_msrp() {
    global $product;

    if ( $product->get_type() !== 'variable' && $msrp = $product->get_meta( '_msrp', true ) ) {
        echo '<div class="woocommerce_msrp">';
        _e( 'מחיר מומלץ לצרכן: ', 'woocommerce' );
        echo '<span>' . wc_price( $msrp ) . '</span>';
        echo '</div>';
    }
}
add_action( 'woocommerce_single_product_summary', 'savvy_display_msrp', 9 );

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

עיצוב הצגת ה-MSRP בפרונט

כדי שהמחיר המומלץ יבלוט לעין הלקוח, הוסיפו את ה-CSS הבא לקובץ העיצוב של התבנית שלכם:

.woocommerce_msrp {
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}

.woocommerce_msrp span {
    text-decoration: line-through;
}

ה-text-decoration: line-through מוסיף קו חוצה על המחיר המומלץ, כך שהלקוח רואה בבירור את ההבדל בין מחיר היצרן למחיר המכירה שלכם. כמובן שאתם יכולים לשנות את העיצוב לפי הצרכים שלכם.

הוספת MSRP למוצרים עם וריאציות

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

// Add MSRP field to each variation
function savvy_add_msrp_to_variations( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( array(
        'id'        => '_msrp_variation[' . $loop . ']',
        'value'     => get_post_meta( $variation->ID, '_msrp', true ),
        'class'     => 'short wc_input_price',
        'label'     => __( 'MSRP', 'woocommerce' ) . ' (' . get_woocommerce_currency_symbol() . ')',
        'data_type' => 'price',
        'wrapper_class' => 'form-row form-row-first',
    ));
}
add_action( 'woocommerce_variation_options_pricing', 'savvy_add_msrp_to_variations', 10, 3 );


// Save MSRP field for each variation
function savvy_save_msrp_variation( $variation_id, $i ) {
    if ( isset( $_POST['_msrp_variation'][ $i ] ) ) {
        update_post_meta( $variation_id, '_msrp', wc_clean( wp_unslash( $_POST['_msrp_variation'][ $i ] ) ) );
    }
}
add_action( 'woocommerce_save_product_variation', 'savvy_save_msrp_variation', 10, 2 );

במקרה זה, כל וריאציה תקבל שדה MSRP משלה, כך שתוכלו להגדיר מחיר מומלץ שונה לכל וריאציה בהתאם למחירה.

שאלות נפוצות

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