איך מציגים חסכון קבוע למוצר בווקומרס

לקוח רואה מוצר ב-249 ₪ במקום 349 ₪. עכשיו הוא צריך לעשות חשבון בראש. רוב הלקוחות לא יעשו אותו. כשאתם כותבים לו במפורש "תחסכו בקנייה זאת 100 ₪!" — החיסכון הופך מוחשי. זה טריק המרה קטן שחנויות גדולות משתמשות בו כל הזמן. בואו נוסיף אותו לחנות שלכם בשתי דקות.

איפה שמים את הקוד?

כמו תמיד עם קטעי קוד, שתי דרכים נכונות:

1. תוסף Code Snippets — הבטוחה והמומלצת. מדביקים כסניפט חדש ומפעילים. להורדה: Code Snippets
2. קובץ functions.php של תבנית הבת — למי שעובד עם Child Theme

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

/**
 * Snippet Name:	WooCommerce Display Fixed Saving Amount On Sale Products
 * Snippet Author:	ecommercehints.com
 */

// Simple Products
add_filter( 'woocommerce_get_price_html', 'ecommercehints_display_fixed_amount_savings_on_sale_simple_products', 10, 2 );
function ecommercehints_display_fixed_amount_savings_on_sale_simple_products( $price, $product ) {
    if ( $product->is_on_sale() && $product->is_type( 'simple' ) ) {
        $regular_price = $product->get_regular_price();
        $sale_price = $product->get_sale_price();
		$savings = $regular_price - $sale_price;
        $price .= '
תחסכו בקנייה זאת ' . wc_price($savings) . '!';
	}
    return $price;
}

// Variations (appears once variations have been selected)
add_filter( 'woocommerce_available_variation', 'ecommercehints_display_fixed_amount_savings_on_sale_variable_products', 10, 3 );
function ecommercehints_display_fixed_amount_savings_on_sale_variable_products( $data, $product, $variation ) {
    if( $variation->is_on_sale() ) {
        $savings_amount = $data['display_regular_price'] - $data['display_price'];
        $data['price_html'] .= '
תחסכו בקנייה זאת ' . wc_price($savings_amount) . '!';
    }
    return $data;
}

את הנוסח "תחסכו בקנייה זאת" אפשר כמובן להחליף לכל טקסט שתרצו 🙂

מה הקוד עושה?

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

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

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

בונוס: גרסה שמציגה חיסכון באחוזים

מעדיפים "חסכו 30%!" במקום סכום? החליפו את חלק המוצרים הפשוטים בגרסה הזאת:

add_filter( 'woocommerce_get_price_html', 'ym_display_percent_savings', 10, 2 );
function ym_display_percent_savings( $price, $product ) {
	if ( $product->is_on_sale() && $product->is_type( 'simple' ) ) {
		$regular_price = (float) $product->get_regular_price();
		$sale_price    = (float) $product->get_sale_price();
		if ( $regular_price > 0 ) {
			$percent = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
			$price  .= '
חסכו ' . $percent . '%!';
		}
	}
	return $price;
}

שימו לב לתוספת: עטפנו את הטקסט ב-span עם קלאס. ככה תוכלו לעצב את השורה ב-CSS — צבע אדום, הדגשה, רקע — בלי לגעת שוב בקוד.

סכום או אחוזים? כלל ה-100

וכאן טיפ מעולם התמחור ששווה זהב. מחקרי צרכנות מצביעים על כלל פשוט שנקרא "כלל ה-100":

• מוצר מתחת ל-100 ₪ — אחוזים נשמעים גדולים יותר. "50% הנחה" מרשים יותר מ"חסכו 30 ₪"
• מוצר מעל 100 ₪ — הסכום מנצח. "חסכו 400 ₪" חזק בהרבה מ"20% הנחה"

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

איפה השורה תופיע?

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

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

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

שאלות נפוצות

למה במוצר עם וריאציות השורה לא מופיעה מיד?

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

איך משנים את הטקסט של השורה?

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

אפשר לעצב את שורת החיסכון בצבע אחר?

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

הוספתי את הקוד ולא רואה שינוי. מה לבדוק?

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

לסיכום

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