גובה זהה בעמוד החנות והקטגוריות בווקומרס

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

אז מה עושים?

טוב, קודם כל צריך להגדיר את הבעיה, ממה נובע הבלאגן?

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

1. תמונות המוצרים לא בגודל זהה

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

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

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

לא הסתדר עדיין? אז כנראה..

התמונות קטנות מידי

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

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

רוחב ויחס מומלץ לתמונות

באופן כללי תרצו שהתמונות בחנות יהיו בגודל 800-1000 פיקסל, אבל את התמונות של הארכיון, בדר”כ נגדיר רוחב של 300-400 פיקסל בעיקר תלוי כמה מוצרים יש בכל שורה.

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

יחס שונה מתמונה לתמונה

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

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

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

				
					.woocommerce ul.products li.product a img{
     height: 200px;
    object-fit: contain;
    }

2. אורך כותרת לא זהה

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

אז מה עושים?

הגדרת מספר מילים או אותיות לכותרת

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

הנה קוד להגדרת מספר המילים (שנו את המספר 5)

				
					function shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return wp_trim_words( $title, 5 ); 
} else {
return $title;
}
}

והנה קוד להגדרת מספר אותיות (תווים), הקוד הזה לפעמים עושה בעיות בעברית (שנו את המספר 10),

				
					add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
function shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return substr( $title, 0, 10 ); 
} else {
return $title;
}
}

הצמדת הכפתור לתחתית

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

הנה קוד שיעשה את זה (תשנו את ה-500 וה-175 לפי הצורך),

				
					.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  min-height: 500px !important;
}
ul.products li.product a.button
{
  position: absolute !important;
  width: 175px;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
    }

והנה קוד יותר פשוט,

				
					.woocommerce-LoopProduct-link
{
height:83%;}

או זה,

				
					.woocommerce-loop-product__link
{
    height: 83%
}

הבעיה העיקרית, שהמחיר עדיין ישתנה ממוצר למוצר,

אפשר לפתור את זה עם אותו רעיון,

				
					.woocommerce-loop-product__title{
    height: 25%
}

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

				
					.woocommerce-loop-product__title{
    height: 15%;
    overflow: hidden;
    
}

ואחרון חביב, זה יעשה את העבודה הכי טוב (אפשר לשחק עם ה-5ex לקבוע את מספר השורות).

				
					.woocommerce-loop-product__title{
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
}

עזר לכם? ספרו לי בתגובות!!

רוני רביץ

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