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

מה כוללות הודעות החנות של ווקומרס?

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

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

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

איך מעצבים את הודעות ווקומרס בעזרת CSS?

הדבר הפשוט ביותר הוא להקליק על התאמה אישית, ולהדביק את הקוד הבא:

.woocommerce-message, .woocommerce-info,.woocommerce-error{
	background-color:#F2F2F2 !important;
	border: none !important;
	border-bottom: 1px solid #6E14C8 !important;
	color: #010001 !important;
	font-size: 18px;
	
}

.woocommerce-message::before,.woocommerce-info::before, .woocommerce-error::before{
	color: #6E14C8 !important;
}

.woocommerce-message a, .woocommerce-info a,.woocommerce-error a{
	color: #6E14C8 !important;
}

קצת הסבר על הקוד:

לכל ההודעות הגדרנו את אותו הרקע (background-color). ניתן להחליף לכל צבע הקסדצימלי שתרצו. כך גם לגבי צבע הטקסט (color).

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

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

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

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