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

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

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

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

במדריך הזה אני אראה איך לפתור את הבעיה הזאת בקוד. אם אינכם מנוסים בקוד תוכלו לוותר על ההדרכה ולהשתמש בתוסף כמו Kadence WooCommerce Email Designer. זה תוסף פופולארי ואמין מאוד (מעל 100,000 התקנות).

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

במדריך על SMTP אני מסביר כיצד לפתור תופעה נפוצה אחרת: מה עושים כשאימיילים מהחנות בכלל לא מגיעים ללקוח?

מגדירים לווקומרס אימיילים רספונסיבים

  1. פותחים את מערכת הקבצים של האתר (באמצעות FTP או מנהל קבצים בפאנל הניהול)
  2. נכנסים לתיקיית wp-content/plugins/woocommerce/templates/emails
  3. פותחים את הקובץ email-styles.php ומעתיקים את הקוד שבו. הקובץ הזה מכיל את הגדרות העיצוב של האימיילים של ווקומרס. אם היינו משנים דברים בקובץ הזה ושומרים השינוי היה בא לידי ביטוי באימיילים שישלחו ללקוחות, אבל זה לא רעיון טוב. כאשר ווקומרס היה מתעדכן השינוי שהיינו עושים היה נדרס (מתבטל). לכן אנחנו רק מעתיקים את תוכן הקובץ והולכים ליצור לו חלופה בתבנית הבת. סוגרים את הקובץ בלי לעשות שום שינוי ובלי לשמור.
  4. פותחים את התיקייה של תבנית הבת (wp-content/themes/CHILD THEME NAME) ויוצרים בתוכה תיקייה חדשה: woocommerce.
  5. בתוך התיקייה woocommerce יוצרים תיקייה בשם emails ובתוכה יוצרים קובץ חדש, ריק, בשם email-styles.php.
  6. פותחים את הקובץ הריק לעריכה, ומדביקים לתוכו את תוכן הקובץ המקורי שהעתקנו ללוח. שומרים.
  7. כעת יש בתבנית הבת קובץ ש"מנצח" את קובץ הגדרות העיצוב של ווקומרס. הקובץ לא ימחק כאשר ווקומרס יתעדכן, ותמיד ישפיע על העיצוב.
  8. אבל כל עוד התוכן של הקובץ זהה לחלוטין לתוכן הקובץ המקורי אז אין שום שינוי בתבנית האימיילים. כעת נעשה את השינוי:
    1. בכלל של הסלקטור #template_container מוסיפים להצהרות הקיימות שורה חדשה: max-width: 90vw;
    2. בכלל של הסלקטור #body_content table td להחליף את padding: 48px 48px 32px; ב padding: 0 4% 32px;
    3. בכלל של הסלקטור #header_wrapper להחליף את padding: 36px 48px; ב padding: 36px 4%;
    4. להוסיף (איפה שכל הכללים. לא ממש משנה לפני או אחרי מה) כלל חדש:
      table {
        max-width: 90vw;
      }
  9. אם צריך להסביר בקצרה את השינוי: אנחנו לוקחים ערכים מוחלטים (שמוגדרים בפיקסלים) ומחליפים אותם בערכים יחסיים (באחוזים), כאלו שמושפעים מרוחב המסך. אנחנו גם מגדירים לטבלה של המוצרים שבשום אופן לא תתפרס על פני יותר מ 90% מרוחב המסך.
  10. לאחר ששמסיימים לערוך את כל השינויים, שומרים את הדף ומוודאים שהגרסה המעודכנת עולה לאתר.
  11. שולחים אימייל של ווקומרס ומוודאים שהוא נראה מצויין גם במובייל.

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

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

לסיכום

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

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

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

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

שיתוף  

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

עוד באותו נושא

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

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

דילוג לתוכן