כברירת מחדל של תוסף WooCommerce תצוגת הגלריה בעמוד מוצר (שמופיעה תחת התמונה הראשית) מציגה 3 תמונות ממוזערות בשורה. במידה ותרצו להציג מספר אחר בשורה תצטרכו להכניס פילטר בקוד שמשנה את התצוגה הבסיסית ולאחר מכן להוסיף קצת קוד CSS שיסדר את זה סופית לתצוגה באתר.
לצורך ההמחשה בלבד, הקוד הזה יציג לכם 4 תמונות בשורה. אבל על אותו עיקרון ניתן לשים 2 או 5 תמונות בשורה.
שימו לב: כיון שמדובר בהוספת פונקציות לתוסף WooCommerce שיכולות ליצור שגיאות או בעיות באתר, אנחנו לא יכולים לתת תמיכה במקרים אלו. לכן, חשוב מאוד לבצע גיבוי של הקבצים הקיימים שלך, כך שתוכל להחליף אותם אם משהו משתבש ואתה צריך להתחיל מחדש. בנוסף, כתיבת קוד אפשרית אך ורק בתבנית בת. אין להוסיף את הפונקציה הזו לתבנית אב, היא עשויה לגרום להתנגשות או להידרס בעדכונים!
1. השתמשו בתבנית בת אותה קיבלתם עם ערכת העיצוב שלכם (מה זה תבנית בת?)
2. יש לפתוח את הקובץ functions.php של תבנית הבת ולהוסיף את הקוד הבא:
add_filter ( 'woocommerce_product_thumbnails_columns', 'four_thumb_cols' );
function four_thumb_cols() {
return 4; // .last class applied to every 4th thumbnail
}3. לאחר מכן, יש להתאים את ה CSS שיחלק את התמונות ל 4 עמודות, כדי שהתמונות תוצגנה בצורה טובה, בשביל זה צריך להוסיף את הקוד CSS הבא ל > התאמה אישית > Live CSS. או פשוט לתוך הקובץ CSS של התבנית בת שנמצאת בתיקיה הזו: Child-Theme/asstes/css/style.css
.woocommerce div.product div.thumbnails a,
.woocommerce-page div.product div.thumbnails a,
.woocommerce #content div.product div.thumbnails a,
.woocommerce-page #content div.product div.thumbnails a {
width: 22.1%;
}עכשיו תחזרו לעמוד המוצר שלכם ובמידה ובחרתם להציג 4 תמונות בגלריה, כולן תופענה בשורה אחת.
במקרים רבים תצטרכו לחתוך מחדש את התמונות הממוזערות, תוכלו לקרוא איך לעשות זאת במדריך הבא: https://pojo.co.il/topic/regenerate-thumbnails-wordpress-woocommerce/