סניפטים שימושיים ל-Woocommerce שישפרו את חוויית הגלישה

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

תוכן עניינים

מחפשים את תוכן העניינים?
הרכיב נמצא בתחתית המסך בצד שמאל 🙂

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

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

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


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

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

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

לפני שמתחילים

כל הקרדיט לסניפטים שאספתי מגיע לאתר Ecommerce Hints.

אתר של Hints & Tips לחנות ווקומרס

באתר יש מעל 176+ סניפטים שמחולקים לקטגוריות:

  • ארכיון מוצרים
  • מוצר יחיד
  • מיני עגלה
  • עמוד עגלה
  • עמוד צ'קאאוט
  • עמוד תודה רבה
  • אימיילים
  • עמוד החשבון שלי
  • אדמין דאשבורד

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

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

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

איך להטמיע את הקוד?

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

קטעי הקוד נועדו להטמעה על ידי אנשים שנוח להם לקרוא ולהבין את הקוד הכתוב. תו אחד שלא כתוב נכון בקובץ functions.php יוכל להקריס לכם את האתר.

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

סניפטים לעמוד מוצר

שינוי טקסט "אזל מהמלאי" ב-WooCommerce

Customize Out Of Stock Text
Customize Out Of Stock Text

על הסניפט:

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

יתרונות לסניפט:

התאם אישית את טקסט סטטוס המלאי "אזל במלאי" כך שיתאים לשפת האתר.

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

/*** WooCommerce Change Out Of Stock Text ***/add_filter( 'woocommerce_get_availability', 'ecommercehints_change_out_of_stock_text', 10, 2); function ecommercehints_change_out_of_stock_text( $availability, $product ) {if (!$product->is_in_stock() ) { $availability['availability'] = __('אנחנו מצטערים, לא נשאר!', 'woocommerce'); // Customised text } return $availability; }

שינוי הטקסט  בעת לחיצה על כפתור "הוספה לעגלה"

Customize Add To Cart Button Text On Click
Customize Add To Cart Button Text On Click

על הסניפט:

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

הסניפט מקיף את jQuery שמזהה מתי יש לחיצה על כפתור הוספה לעגלה. סוג זה של אירוע בלחיצה מאפשר למשתמש לדעת שהמוצר מתווסף לעגלת הקניות ולהתאזר בסבלנות. חשוב לציין שהקוד מוגדר לא לפעול על מוצרים חיצוניים/שותפים או מוצרים משתנים. מוצרים חיצוניים/שותפים לוקחים אותך לאתר אחר – שום דבר לא מתווסף לעגלת הקניות. עבור מוצרים משתנים, הקוד מושבת מכיוון שהמשתמש חייב תחילה אפשרויות בחירה. אם הטקסט היה אומר "מוסיף…" אך המשתמש לא בחר באפשרויות, זה יספק חווית משתמש שלילית (NUX).

יתרונות לסניפט:

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

/*** Change the WooCommerce Add To Cart button text on click. ***/add_action( 'wp_footer', 'single_add_to_cart_event_text_replacement' ); function single_add_to_cart_event_text_replacement() { global $product;if( ! is_product() ) return; // Only single product pages if( $product->is_type('variable') ) return; // Not variable products if( $product->is_type('external') ) return; // Not affiliate products ?> <script type="text/javascript"> (function($){ $('button.single_add_to_cart_button').click( function(){ $(this).text('<?php _e( "Adding...", "woocommerce" ); ?>'); }); })(jQuery); </script> <?php }

הצגת רק מוצרים במלאי כמוצרים קשורים

על הסניפט:

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

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

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

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

לכן, הגיוני שרק מוצרים הקשורים במלאי מוצגים ומוצרים קשורים שאזלו מהמלאי יהיו מוסתרים.

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

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

כדי למקד למיקומים אחרים, יש לשנות את שורה 8 בקוד.

יתרונות הסניפט:

הגדלת ערך ההזמנה הממוצע (AOV) על ידי הצגת רק מוצרים קשורים שנמצאים במלאי.

/*** WooCommerce Show Only In Stock Related Products ***/add_action( 'pre_get_posts', 'ecommercehints_in_stock_related_products_only' ); function ecommercehints_in_stock_related_products_only( $query ){ if( is_product() && $query->is_main_query() ) { // Only on the product page where Related Products are shown $query->set( 'meta_key', '_stock_status' ); $query->set( 'meta_value', 'instock' ); } }

הצגת "כמה חסכת" בסכום קבוע בדפי מוצר

Display Fixed Saving Amount On Sale Products Product Page
Display Fixed Saving Amount On Sale Products Product Page

על הסניפט:

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

Display Fixed Saving Amount On Sale Products Related Products
Display Fixed Saving Amount On Sale Products Related Products

מוצג בקטגוריית מוצרים, מוצרים קשורים, עמוד מוצרים וארכיונים.

ניתן לטרגט את תגית ה-HTML בשימוש <small> להוסיף לה קלאס או ישירות לעצב אותה בהתאם לעיצוב האתר.

/*** WooCommerce Display Fixed Saving Amount On Sale Products ***/// 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 .= '<br><small>You save ' . wc_price($savings) . '!</small>'; } 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'] .= 'You save' . wc_price($savings_amount); } return $data; }

הצגת "כמה חסכת" באחוזים בדפי מוצר

Display Percentage Saving Amount On Sale Product Product Page
Display Percentage Saving Amount On Sale Product Product Page

על הסניפט:

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

Display Percentage Saving Amount On Sale Product Related Products
Display Percentage Saving Amount On Sale Product Related Products

מוצג בקטגוריית מוצרים, מוצרים קשורים, עמוד מוצרים וארכיונים.

ניתן לטרגט את תגית ה-HTML בשימוש <small> להוסיף לה קלאס או ישירות לעצב אותה בהתאם לעיצוב האתר.

/*** WooCommerce Display Percentage Saving Amount On Sale Products ***/// Simple Products add_filter( 'woocommerce_get_price_html', 'ecommercehints_display_percentage_savings_amount_on_sale_simple_products', 10, 2 ); function ecommercehints_display_percentage_savings_amount_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_calculation = $sale_price * 100 / $regular_price; $savings_total = 100 - $savings_calculation; $price .= '<br><small>You save ' . round($savings_total) . '%</small>'; } return $price; }// Variable Products (shows when variations have been selected) add_filter( 'woocommerce_available_variation', 'ecommercehints_display_percentage_savings_amount_on_sale_variable_products', 10, 3 ); function ecommercehints_display_percentage_savings_amount_on_sale_variable_products( $data, $product, $variation ) { if( $variation->is_on_sale() ) { $savings_amount = $data['display_regular_price'] - $data['display_price']; $percentage_amount = round( $saved_amount / $data['display_regular_price'] * 100 ); $data['price_html'] .= 'You save ' . $percentage_amount. '%'; } return $data; }

הוספת תיבת סימון מותאמת אישית למוצר

Custom Checkbox On Product Page
Custom Checkbox On Product Page

על הסניפט:

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

ערך תיבת סימון מותאמת אישית של מוצר מוצג בעגלה:

Custom Checkbox Showcase On Cart Page
Custom Checkbox Showcase On Cart Page

ערך תיבת סימון מותאמת אישית של מוצר מוצג בעמוד הצ'קאאוט:

Custom Checkbox Showcase On Checkout Page
Custom Checkbox Showcase On Checkout Page

ערך תיבת סימון מותאמת אישית של מוצר מוצג בדף תודה רבה על הזמנה:

Custom Checkbox Showcase On Order Received Page
Custom Checkbox Showcase On Order Received Page

ערך תיבת סימון מותאמת אישית של מוצר מוצג בהזמנה באזור ניהול ההזמנות תחת שדה מטא:

Custom Checkbox Showcase In Backend Order
Custom Checkbox Showcase In Backend Order

יתרונות לסניפט:

מאפשר ללקוחות לציין ערך מטא Boolean של TRUE או FALSE עם מוצר.

/*** WooCommerce Custom Checkbox On Product ***/// Add the new field add_action( 'woocommerce_before_add_to_cart_button', 'ecommercehints_custom_product_checkbox_field' );function ecommercehints_custom_product_checkbox_field() { echo '<div class="ecommercehints_custom_product_checkbox_field"> <label for="is-gift-checkbox">לעטוף בתור מתנה? </label> <input type="checkbox" id="is-gift-checkbox" name="is-gift-checkbox" value="Yes"> </div>'; }// Save the field to the cart data add_filter( 'woocommerce_add_cart_item_data', 'ecommercehints_save_custom_checkbox_to_cart_data', 10, 3 ); function ecommercehints_save_custom_checkbox_to_cart_data( $cart_item_data, $product_id, $variation_id ) { if ( !empty( $_POST['is-gift-checkbox'] ) ) { $cart_item_data['is-gift-checkbox'] = sanitize_text_field( $_POST['is-gift-checkbox']); } return $cart_item_data; }// Show custom field data on cart, checkout, and thank you page. add_filter( 'woocommerce_get_item_data', 'ecommercehints_show_custom_field_data_under_product_name', 10, 2 ); function ecommercehints_show_custom_field_data_under_product_name( $item_data, $cart_item ) {if ( !empty( $cart_item['is-gift-checkbox'] ) ) { $item_data[] = array( 'key' => 'לעטוף מתנה?', 'value' => $cart_item['is-gift-checkbox'], ); } return $item_data; }// Save the custom field data as order meta add_action( 'woocommerce_checkout_create_order_line_item', 'ecommercehints_add_custom_field_data_as_order_meta', 10, 4 ); function ecommercehints_add_custom_field_data_as_order_meta( $item, $cart_item_key, $values, $order ) { if ( !empty( $values['is-gift-checkbox'] ) ) { $item->add_meta_data( 'לעטוף מתנה?', $values['is-gift-checkbox'] ); } }

שינוי מחיר "0" של מוצרים ל"חינם"

Change 0.00$ To Free
Change 0.00$ To Free

על הסניפט:

אם יש לך באתרים מוצרים חינמיים, תבנית המוצר ותבנית הארכיון יציגו את המחיר בתור " $0.00" כברירת מחדל. תצוגת ברירת מחדל זו עלולה לבלבל משתמשים. אפשרות טובה יותר תהיה להציג טקסט כמו "חינם" או "מחיר על יישום". קטע זה בוחן אם למוצר יש מחיר או אם הוא מוגדר ל-0 ואם נכון, יציג טקסט מותאם אישית.

יתרונות לסניפט:

החלפת התצוגה עבור המחיר של $0.00 כאשר למוצר אין מחיר או אם הוא מוגדר ל-0 (חינם) לטקסט מותאם אישית.

/*** WooCommerce Change "$0.00" to "Free" ***/add_filter( 'woocommerce_get_price_html', 'ecommercehints_change_zero_price_display', 10, 2 ); function ecommercehints_change_zero_price_display( $price, $product ) { if (empty($product->get_price()) || $product->get_price() == 0) { // If price is not entered or set to 0 $price = __( 'חינם', 'woocommerce' ); } return $price; }

סניפטים לעמוד עגלה

שינוי טקסט "העגלה שלך ריקה כרגע" לטקסט מותאם אישית

Customize “your Cart Is Currently Empty” Text
Customize “your Cart Is Currently Empty” Text

על הסניפט:

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

יתרונות לסניפט:

התאמה אישית להודעות העגלה הריקה בעמוד העגלה כדי לשפר את חווית המשתמש.

/*** WooCommerce Change Your Cart Is Currently Empty Text ***/remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 ); // Remove the current cart notice add_action( 'woocommerce_cart_is_empty', 'ecommercehints_change_empty_cart_text', 10 ); // Create your new custom cart noticefunction ecommercehints_change_empty_cart_text() { $empty_cart_notice = '<p class="cart-empty woocommerce-info">'; $empty_cart_notice .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'נראה שעגלת הקניות שלכם ריקה 🛒', 'woocommerce' ) ) ); echo $empty_cart_notice . '</p>'; }

הוספת טקסט מותאם אישית בעמוד עגלה ריקה ב-WooCommerce

Show Custom Text On Empty Cart Page
Show Custom Text On Empty Cart Page

על הסניפט:

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

יתרונות לסניפט:

שפרו את חווית המשתמש על ידי מתן מידע על דף העגלה כאשר הוא ריק.

/*** WooCommerce Show Custom Text On Empty Cart Page ***/add_action( 'woocommerce_cart_is_empty', 'ecommercehints_empty_cart_text' );function ecommercehints_empty_cart_text() { echo ' אתם רואים את ההודעה הזו מכיוון שעגלת הקניות שלכם ריקה 😢'; }

עדכון אוטומטי של העגלה על שינוי כמות מוצר

על הסניפט:

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


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

יתרונות לסניפט:

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

/*** WooCommerce Automatically Update Cart On Quantity Change ***/// First, hide the Update Cart button add_action( 'wp_head', 'ecommercehints_hide_update_cart_button' ); function ecommercehints_hide_update_cart_button() { ?> <style> button[name="update_cart"], input[name="update_cart"] { display: none; } </style> <?php }// Second, add the jQuery to update the cart automaitcally on quantity change add_action( 'wp_footer', 'ecommercehints_update_cart_on_quantity_change'); function ecommercehints_update_cart_on_quantity_change() { ?> <script> jQuery( function( $ ) { let timeout; $('.woocommerce').on('change', 'input.qty', function(){ if ( timeout !== undefined ) { clearTimeout( timeout ); } timeout = setTimeout(function() { $("[name='update_cart']").trigger("click"); }, 500 ); // 500 being MS (half a second) }); } ); </script> <?php }

הוספת אייקון "בניית אמון" מתחת לכפתור "לתשלום" בעמוד עגלה

Add Content Under The Proceed To Checkout Button On The Cart Page
Add Content Under The Proceed To Checkout Button On The Cart Page

על הסניפט:

כמה פעמים קניתם משהו באינטרנט וראיתם סמלי אמון (trust icons) ליד כפתור המשך לקופה בדף העגלה? "30 יום החזר כספי" או "תשלום מאובטח" הן דוגמאות פופולריות. כברירת מחדל, אין סמלי אמון או תוכן מתחת לכפתור "המשך לקופה" בדף העגלה. בעזרת הסניפט הזה, ניתן להוסיף תוכן תחת כפתור "המשך לקופה" בדף העגלה על ידי שימוש בהוק –woocommerce_after_cart_totals. באמצעות הסניפט, תוכלו להוסיף סמלי אמון, פרטי משלוח או כל הודעה מותאמת אישית אחרת שתרצו.

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

יתרונות לסניפט:

אייקונים של אמון/יתרונות נותנים ללקוחות ביטחון להמשיך בתהליך התשלום.

/*** WooCommerce How To Add Content Under The Proceed To Checkout Button On The Cart Page ***/function action_woocommerce_after_cart_totals( ) { echo '<div id="cart-trust-symbols"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="18px" height="18px"><path d="M144 144v48h160v-48a80 80 0 1 0-160 0zm-64 48v-48a144 144 0 0 1 288 0v48h16a64 64 0 0 1 64 64v192a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V256a64 64 0 0 1 64-64h16z" fill="green" /></svg> רכישה מאובטחת</div>'; }; add_action( 'woocommerce_after_cart_totals', 'action_woocommerce_after_cart_totals', 10, 0 ); add_action( 'wp_head', function () { if (is_cart()) { ?> <style> #cart-trust-symbols { color:green; text-align:center; } </style><?php } } );

סניפטים לעמוד תשלום

הוספת שדה בחירה "איך שמעתם עלינו" בעמוד תשלום

Add A Customized Select Question On Checkout Page How Did You Hear About Us
Add A Customized Select Question On Checkout Page How Did You Hear About Us

על הסניפט:

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

שימו לב שהפכנו את הפרמטר "נדרש" ל-TRUE. מה שהופך את השדה לשדה חובה ומציג כוכבית בשדה הבחירה (*).
אנו מוסיפים אימות מותאם אישית שלמעשה מונע מלשלוח את הטופס אם השדה אינו מאוכלס. אם השדה אינו מאוכלס, מוצגת הודעת שגיאה מותאמת אישית. 

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

Custom Validation Error – שגיאת אימות מותאם אישית

Show An Error Message If Field Is Not Populated
Show An Error Message If Field Is Not Populated

Select Field Saved As Order Meta – בחירת שדה שמורה כשדה מטא בהזמנה

Select Field Saved As Order Meta
Select Field Saved As Order Meta

יתרונות לסניפט:

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

/*** WooCommerce Checkout How Did You Hear About Us ***/// Create the custom select field in the billing section of the checkout form add_action( 'woocommerce_after_checkout_billing_form', 'ecommercehints_checkout_select_field' ); function ecommercehints_checkout_select_field($checkout) { woocommerce_form_field( 'how_did_you_hear', array( 'type' => 'select', 'required' => true, // Shows an asterisk if true (*) 'label' => 'איך שמעתם עלינו?', 'options' => array( '' => 'בבקשה תבחרו...', 'word-of-mouth' => 'פה לאוזן', 'google-search' => 'חיפוש בגוגל', 'social-media' => 'סושיאל מדיה', 'else' => 'אחר' ) ), ( isset($_POST['how_did_you_hear']) ? $_POST['how_did_you_hear'] : '' ) ); }// Show an error message of field is not populated add_action('woocommerce_checkout_process', 'ecommercehints_custom_checkout_select_field_validation'); function ecommercehints_custom_checkout_select_field_validation() { if (empty( $_POST['how_did_you_hear'] ) ) { wc_add_notice( 'מאוד נשמח לדעת איך שמעתם עלינו', 'error' ); } }// Save the custom field data as order meta add_action( 'woocommerce_checkout_update_order_meta', 'ecommercehints_save_custom_checkout_select_field' ); function ecommercehints_save_custom_checkout_select_field( $order_id ){ if( !empty( $_POST['how_did_you_hear'] ) ) { update_post_meta( $order_id, 'how_did_you_hear', sanitize_text_field( $_POST['how_did_you_hear'] ) ); } }

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

Add Custom Checkout Field If Specific Product Is In Cart
Add Custom Checkout Field If Specific Product Is In Cart

על הסניפט:

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

Custom Validation Error – שגיאת אימות מותאם אישית:

Show An Error Message If Custom Text Field Is Not Populated
Show An Error Message If Custom Text Field Is Not Populated

כיצד נשמר שדה התשלום בהזמנה:

The Checkout Text Field Is Saved As Order Meta
The Checkout Text Field Is Saved As Order Meta

יתרונות לסניפט:

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

/*** WooCommerce Add Custom Checkout Field If Specific Product Is In Cart ***/// Create the custom checkout text field in the billing section of the checkout form add_action( 'woocommerce_after_checkout_billing_form', 'ecommercehints_conditional_checkout_field' ); function ecommercehints_conditional_checkout_field($checkout) { if(WC()->cart->find_product_in_cart(WC()->cart->generate_cart_id(245))) { // The Product ID to trigger the new custom field woocommerce_form_field( 'team_name', array( 'type' => 'text', 'class' => array('form-row-wide'), 'required' => 'true', 'label' => 'איזה סוג פלפלים אתם אוהבים?', ), $checkout->get_value('team_name') ); } }// Show an error message of field is not populated add_action('woocommerce_checkout_process', 'ecommercehints_custom_checkout_field_validation'); function ecommercehints_custom_checkout_field_validation() { if(WC()->cart->find_product_in_cart(WC()->cart->generate_cart_id(245))) { // The Product ID to trigger the new custom field if (empty( $_POST['team_name'] ) ) { wc_add_notice( 'בבקשה שתפו אותנו עם הסוג האהוב עליכם', 'error' ); } } }// Save the custom field data as order meta add_action( 'woocommerce_checkout_update_order_meta', 'ecommercehints_save_custom_checkout_field' ); function ecommercehints_save_custom_checkout_field( $order_id ){ if( !empty( $_POST['team_name'] ) ) { update_post_meta( $order_id, 'team_name', sanitize_text_field( $_POST['team_name'] ) ); } }

מניעה מכתובות אימייל ספציפיות לבצע הזמנה

Prevent Specific Email Address From Checking Out
Prevent Specific Email Address From Checking Out

על הסניפט:

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

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

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

יתרונות לסניפט:

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

/*** WooCommerce Prevent Email From Checking Out ***/add_action( 'woocommerce_after_checkout_validation', 'ecommercehints_validate_checkout_email_address', 10, 2); function ecommercehints_validate_checkout_email_address($fields, $errors) { if ( $fields[ 'billing_email' ] == '1testemail@gmail.com' ) { // The email address to block $errors->add( 'validation', 'האימייל שכתבת חסום לרכישה באתר ועגלת הקניות שלך נמחקה, בבקשה עזבו את האתר' ); } WC()->cart->empty_cart(); // Empty the cart }

לאפשר להזין רק מספרים בשדה טלפון חיוב בדף תשלום

על הסניפט:

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

יתרונות לסניפט:

כפייה של מספרי טלפון עקביים דרך עמוד התשלום של WooCommerce.

/*** WooCommerce Only Allow Number Input For Billing Phone ***/add_action('wp_footer', 'ecommercehints_billing_phone_validation'); function ecommercehints_billing_phone_validation() { if ( is_checkout() && ! is_wc_endpoint_url() ) : ?> <script type="text/javascript"> jQuery( function($){ $('#billing_phone').on( 'input focusout', function() { var p = $(this).val(); $(this).val($(this).val().replace(/[^0-9]/g, '')); }); }); </script> <?php endif; }

העברת מיקום שדה כתובת אימייל לשדה הראשון בעמוד תשלום

Move Email Address Field To The Top Of The Checkout
Move Email Address Field To The Top Of The Checkout

על הסניפט:

העברת שדה כתובת האימייל לראש הטופס בעמוד קופה. מתן עדיפות של 1 לשדה כתובת האימייל בטופס התשלום מתקשר עם נטישת התשלום. אם המשתמש יחליט לנטוש את התשלום, סביר להניח שהוא לפחות השלים את השדה הראשון – כתובת אימייל היא הרבה יותר שימושית מאשר שם פרטי! עם קוד נוסף או תוסף ייעודי לנטישות עמוד צ'קאאוט, כאשר המשתמש הזין את הדוא"ל שלו, האימייל שהוזן יאפשר לשלוח מייל שאלה על מה הפריע לסיים את הרכישה. הסניפט מראה בדיוק כיצד ניתן להעביר את שדה כתובת האימייל לראש עמוד טופס התשלום ב-WooCommerce מכל סיבה.

יתרונות לסניפט:

מאפשר ללכוד כתובת דוא"ל מוקדם יותר בתהליך התשלום – כתובת דוא"ל שימושית יותר מאשר שם פרטי אם המשתמש ינטוש את התשלום.

/*** Move the email address checkout field to the top of the form in WooCommerce ***/add_filter( 'woocommerce_billing_fields', 'ecommercehints_show_email_first' );function ecommercehints_show_email_first( $address_fields ) { $address_fields['billing_email']['priority'] = 1; return $address_fields; }

סניפטים לדף תודה לאחר רכישה

הצגת כתובות של הזמנה לכתובת אחרת של לקוחות בדף תודה לאחר הרכישה

Show Customer Addresses On Thank You Page For Guest Checkouts
Show Customer Addresses On Thank You Page For Guest Checkouts

על הסניפט:

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

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

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

יתרונות לסניפט:

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

/*** Show Customer Addresses On Thank You Page For Guest Checkouts ***/ add_action( 'woocommerce_thankyou', 'adding_customers_details_to_thankyou', 10, 1 ); function adding_customers_details_to_thankyou( $order_id ) { // Only for non logged in users if ( ! $order_id || is_user_logged_in() ) return;$order = wc_get_order($order_id); // Get an instance of the WC_Order objectwc_get_template( 'order/order-details-customer.php', array('order' => $order )); }

שינוי כותרת "הזמנה התקבלה" ב-WooCommerce

Change Order Received Title
Change Order Received Title

על הסניפט:

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

יתרונות לסניפט:

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

התאימו אישית את הכותרת שתתאים לשפה המיתוגית של האתר.

/*** Change the Order Received title on the WooCommerce Thank You Page ***/add_filter( 'woocommerce_endpoint_order-received_title', 'ecommercehints_thank_you_title' );function ecommercehints_thank_you_title($old_title) { return 'ההזמנה התקבלה, סיימנו!'; }

החלפת הטקסט "תודה, ההזמנה שלך התקבלה" ב-WooCommerce

Customize Text Thank You. Your Order Has Been Received On Thank You Page
Customize Text Thank You. Your Order Has Been Received On Thank You Page

על הסניפט:

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

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

יתרונות לסניפט:

התאימו אישית את "הודעת התודה" בדף התודה של WooCommerce.

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

הראו ללקוחות שהשקעתם מאמץ כדי להודות להם באופן אישי.

/*** Change thank you page intro text on the WooCommerce Thank You Page ***/add_filter( 'woocommerce_thankyou_order_received_text', 'ecommercehints_thank_you_intro_text', 20, 2 ); function ecommercehints_thank_you_intro_text( $thank_you_title, $order ){ return 'קיבלנו את ההזמנה ' . $order->get_billing_first_name() . '<br>כבר מכינים את המשלוח אליך!'; }

סניפטים לאימיילים לאחר הזמנה

שליחת אימייל אוטומטי לפולואו-אפ לאחר השלמת ההזמנה ב-WooCommerce

על הסניפט:

משהו שבאמת עוזר לאחוזי המרה במוצרים באתר הוא הוכחה חברתית (Social Proof).

הצורה הנפוצה ביותר של הוכחה חברתית היא ביקורות ועדויות.

הרבה בעלי חנויות WooCommerce משתמשים בפלטפורמות צד שלישי כדי לבקש ביקורות.

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

בדוגמה הזו, הגדרתי את האימייל כך שישלח 7 ימים לאחר שסטטוס ההזמנה מוגדר ל"הושלם" ומבקש מהמשתמש לדרג את ההזמנה שלו ב-TrustPilot.

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

יתרונות לסניפט:

מאשפר לשלוח ללקוחות אימיילים באופן אוטומטי לאחר הרכישה מהאתר.

שליחה אוטומטית דוא"ל מעקב אחר ביקורות ללקוחות.

מתאים לבקשת סקירה או דעה.

/*** WooCommerce Send Review Follow-up Email After Order Complete ***/add_action( 'woocommerce_order_status_completed', 'ecommercehints_send_review_followup_email_after_order_complete' ); function ecommercehints_send_review_followup_email_after_order_complete( $order_id ) { $order = wc_get_order( $order_id ); $order_date = $order->get_date_created(); $order_date_timestamp = strtotime( $order_date ); $current_date_timestamp = strtotime( date( 'Y-m-d H:i:s' ) ); $difference = $current_date_timestamp - $order_date_timestamp; $days = floor( $difference / (60*60*24) ); if ( $days == 7 ) { // Number of days until the email is sent $to = $order->get_billing_email(); $subject = 'איך הייתה ההזמנה שלך?'; $message = 'היי '. $order->get_billing_first_name() . ',<br>איך הייתה ההזמנה שלך? נשמח לקבל את הפידבק שלך ב- <a href="g2.com">G2</a>'; $headers = array('Content-Type: text/html; charset=UTF-8'); wp_mail( $to, $subject, $message, $headers ); } }

הצגת קוד הקופון שהוכנס באימייל

Woocommerce Show Coupon Code Used In Emails
Woocommerce Show Coupon Code Used In Emails

על הסניפט:

הסניפט בוחן אם יש קודי קופון בשימוש בהזמנה.

אם יש, הוא מביא את סוג הקופון, השם והסכום.

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

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

כל הקודים מוצגים לאחר מכן בטבלה מעוצבת שהוחלה עליה CSS כדי שתתאים לשאר הטבלאות המוצגות בדוא"ל.

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

יתרונות לסניפט:

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

/*** WooCommerce Show Coupon Code Used In Emails ***/add_action( 'woocommerce_email_after_order_table', 'ecommercehints_show_coupons_used_in_emails', 10, 4 ); function ecommercehints_show_coupons_used_in_emails( $order, $sent_to_admin, $plain_text, $email ) { if (count( $order->get_coupons() ) > 0 ) { $html = '<div class="used-coupons"> <h2>קופון בשימוש<h2> <table class="td" cellspacing="0" cellpadding="6" border="1"><tr> <th>קוד קופון</th> <th>מחיר הקופון</th> </tr>';foreach( $order->get_coupons() as $item ){ $coupon_code = $item->get_code(); $coupon = new WC_Coupon($coupon_code); $discount_type = $coupon->get_discount_type(); $coupon_amount = $coupon->get_amount();if ($discount_type == 'percent') { $output = $coupon_amount . "%"; } else { $output = wc_price($coupon_amount); }$html .= '<tr> <td>' . strtoupper($coupon_code) . '</td> <td>' . $output . '</td> </tr>'; } $html .= '</table><br></div>';$css = '<style> .used-coupons table { width: 100%; font-family: \'Helvetica Neue\', Helvetica, Roboto, Arial, sans-serif; color: #737373; border: 1px solid #e4e4e4; margin-bottom:8px; } .used-coupons table th, table.tracking-info td { text-align: left; border-top-width: 4px; color: #737373; border: 1px solid #e4e4e4; padding: 12px; } .used-coupons table td { text-align: left; border-top-width: 4px; color: #737373; border: 1px solid #e4e4e4; padding: 12px; } </style>';echo $css . $html; } }

סניפטים לעמוד החשבון שלי

הוספת כפתור "להזמין שוב" לעמוד ההזמנות בחשבון שלי

Order Again From My Account View Orders Endpoint
Order Again From My Account View Orders Endpoint

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

/*** WooCommerce Order Again From View Orders Endpoint ***/add_filter( 'woocommerce_my_account_my_orders_actions', 'ecommercehints_order_again', 50, 2 ); function ecommercehints_order_again( $actions, $order ) { if ( $order->has_status( 'completed' ) ) { // Order Again button will only show for completed orders. $actions['order-again'] = array( 'url' => wp_nonce_url( add_query_arg( 'order_again', $order->get_id() ) , 'woocommerce-order_again' ), 'name' => __( 'להזמין שוב', 'woocommerce' ) ); } return $actions; }

סיכום

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

הכל על מנת לתת חווית קנייה חלקה, להגדלת ה-AOV וביסוס המותג בהתאמה לשפה המיתוגית שלו בשוק.

התמקדתי בעיקר במיתוג, במיקרו קופי וב-CRO – כולם חלקים חשובים לחברות D2C שרוצות להצליח בשוק האיקומרס.

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

שתפו את הפוסט:

פייסבוק
וואטסאפ
לינקדאין
אי-מייל
מעוניינים לקבל עדכונים על פוסטים שאני כותב במייל? >>

יצירת דו"ח מעקב על דפי 404 ב-GA4

באמצעות Google Analytics 4, נוכל לייצר דו"ח מעקב על דפי 404. למזלנו, GA4 עוקבת בצורה אוטומטית אחרי דפי 404.
בהתחשב בתיעדוף כל הפעילות הדיגיטלית שלכם, טיפול בשגיאות דפי 404 לא נראה כמו משהו ששווה להשקיע בו, אך בכל מקרה זה לא משהו שכדאי לפספס.

לקריאת הפוסט

איך ליצור מיקום מותאם אישית לתיוגים באינסטגרם

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

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

לקריאת הפוסט

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

דילוג לתוכן