יצירת עמוד מעקב אחר הזמנה ב-Woo

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

תוכן עניינים

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

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

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

מיותר לציין שאתר מאובטח ב-HTTPS, תשלום מאובטח בתקן PCI ועוד דברים שאנחנו לוקחים כבר כמובנים מאליו, נכון?

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

Generic Order Tracking Form
Generic Order Tracking Form

מה יש בטופס סטטוס הזמנה של Woo?

בווידג'ט ישנו טקסט דיפולטיבי שלא ניתן לשנות אותו בתוך השורטקוד אלא רק בהתערבות בקוד.

בטופס שנוצר יש שני שדות:

  • Order ID הוא מספר ההזמנה
  • Billing Email הוא המייל שאיתו בוצעה הרכישה

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

ניתן לעצב את שדות הטופס ואת התבנית בעזרת CSS בהתאם לקלאס: .woocommerce-form-track-order

לאחר שנמלא את הטופס ונלחץ על הכפתור "Track", הטופס ישלח, ה-URL של העמוד לא מתחלף, אך יופיע במקום הטופס, פרטי המידע של ההזמנה.

Order Details After Form Tracking Submission
Order Details After Form Tracking Submission

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

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

mark { background-color: mark; color: marktext; }

ניתן לשנות את הצבעים לצבעים שתרצו.

יצירת עמוד מעקב אחר הזמנות באמצעות שורטקוד

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

נוסיף בלוק מסוג שורטקוד ונקליד: [woocommerce_order_tracking]

Woo Order Tracking Shortcode
Woo Order Tracking Shortcode

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

Default Order Form Tracking From Shortcode
Default Order Form Tracking From Shortcode

בווידג'ט ישנו טקסט דיפולטיבי שלא ניתן לשנות אותו בתוך השורטקוד אלא רק בהתערבות בקוד. 

בטופס שנוצר יש שני שדות: 

Order ID הוא מספר ההזמנה
Billing Email הוא המייל שאיתו בוצעה הרכישה.

יצירת עמוד מעקב אחר הזמנות באמצעות אלמנטור

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

In Elementor, Search The Widget Woocommerce Pages
In Elementor, Search The Widget Woocommerce Pages

בתוך הווידג'ט של Woocommerce Pages אנחנו נרצה לבחור ב-Order Tracking Form

In Woocommerce Pages Choose Order Tracking Form
In Woocommerce Pages Choose Order Tracking Form

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

Order ID הוא מספר ההזמנה
Billing Email הוא המייל שאיתו בוצעה הרכישה. זהו.

Woocommerce Default Order Tracking Form
Woocommerce Default Order Tracking Form

סיכום, שהוא בעצם תזכורת

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

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

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

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

הלינק המושלם – למה לא כדאי לתת קישור של "לחצו כאן"

כולנו יודעים מה לינק באתר עושה בשביל SEO, וכולנו יודעים מה לינק באתר עושה בשבילנו: הוא לוקח אותנו למקום אחר.
ככה אנחנו משתמשים וחוקרים את האינטרנט. אבל, לא כולם יודעים שיש ללינק יותר להציע מאשר מילה או תמונה קליקבילית. הצורה שאנחנו כותבים, מתנסחים, מעצבים ומקודדים את הלינק, איך היא עובדת על כל מכשיר?

לקריאת הפוסט

פסיכולוגיית מהירות: איך אנחנו תופסים מהירות של טעינת אתר

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

לקריאת הפוסט

כתיבת תגובה

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

דילוג לתוכן