אני בטוחה שזה מעצבן שאתם לא מבינים למה התמונה של המוצר אחת גדולה, אחד קטנה מדיי וזה הופך את העמוד ללא פרופוציונלי ולא מקצועי.
כאשר מדובר גם בכמות לא קטנה של מוצרים, יש קושי רב של לעבור מוצר מוצר ולעלות אותו בתוך קובייה ולהשתדל שכל התמונות יהיו בגודל אחיד.. בקיצור הבנתם, זה כאב ראש במיוחד שלקוח קצה צריך לנהל את האתר שלו.
אם הייתי אומרת לכם שאפשר לפתור את זה בעזרת קוד CSS שהולך לעבוד בצורה מושלמתתתת!? ממש כמו קסם.
הנה איך שתוכלו לעשות את זה
- כניסה ללוח הבקרה בוורדפרס
כנסו לטמפלט בו נמצא הארכיון שלכם (ניתן לגשת מתוך טמפלטים, shop) - כניסה לעריכה באמצעות אלמנטור
אחרי שפתחתם את עמוד הארכיון (חנות / קטגוריות) תלחצו על הווידג׳ט של ארכיון ואז תלכו לחלק של ״מתקדם״ ושם חפשו CSS - הדבקת קוד CSS
בחלק הזה תצטרכו להדביק את הקוד CSS שהולך לקבוע גודל אחיד לכל התמונות, במידה ואתם רוצים לעשות גודל קבוע בכל האתר במקרה הזה תצטרכו להיכנס ל״התאמה אישית״ ולהדביק את הקוד שם, כי בצורה כזו הוא הולך להשפיע על כל האתר ולא רק על הארכיון הספציפי.הנה הקוד
.woocommerce ul.products li.product a img {
width: 100%;
height: 240px!important;
object-fit: contain !important;
}
כמו שאתם רואים בקוד יש width וזה מוגדר על 100%, ממליצה להשאיר את התמונה של המוצר תמיד ברוחב מלא, אבל מה מה שמשפיע באמת על גודל תמונות שאחת קטנה ואחת גדולה הוא גובה. ובמקרה הזה תוכלו להגדיר את הגובה למה שאתם רוצים נניח כאן הגדרתי גובה של 240px.
בשביל שהתמונה לא תהיה מתוחה כי יש תמונות שהן פחות מ 250px, במקרה הזה הגדרתי object-fit: contain, מה שזה אומר כל התמונות יהיו בגובה של 240px אבל הן לא ימתחו ועדיין יראו כמו שצריך!
אהבתם את המדריך? תגיבו כאן למטה איזה עוד מדריכים הייתם רוצים לראות ואם יש משהו שלא עבד, מוזמנים לפנות אליי בעמוד אינסטגרם.
