כברירת מחדל של תוסף WooCommerce תצוגת המוצרים בעמודי החנות (קטגוריות/תגיות וארכיון) מוצגים כ 4 מוצרים בשורה. במקרים מסויימים אנחנו נרצה להציג את מספר שונה של מוצרים בכל שורה. לצורך כך צריך לעשות מספר צעדים שיאפשרו לכם לעשות את זה בצורה טובה.
לצורך ההמחשה בלבד, הקוד הזה יציג לכם 3 מוצרים בשורה. אבל על אותו עיקרון ניתן לשים 2 או 5 מוצרים בשורה. רק כמובן שתצטרכו לשנות את הקוד בהתאם.
שימו לב: כיון שמדובר בהוספת פונקציות לתוסף WooCommerce שיכולות ליצור שגיאות או בעיות באתר, אנחנו לא יכולים לתת תמיכה במקרים אלו. לכן, חשוב מאוד לבצע גיבוי של הקבצים הקיימים שלך, כך שתוכל להחליף אותם אם משהו משתבש ואתה צריך להתחיל מחדש. בנוסף, כתיבת קוד אפשרית אך ורק בתבנית בת. אין להוסיף את הפונקציות הללו לתבנית אב, הן עשויות לגרום להתנגשות או להדרס בעדכונים!
1. השתמשו בתבנית בת אותה קיבלתם עם ערכת העיצוב שלכם (מה זה תבנית בת?)
2. יש לפתוח את הקובץ functions.php של תבנית הבת ולהוסיף את הקוד הבא:
// Change number or products per row to 3
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 3; // 3 products per row
}
}3. לאחר מכן, יש להתאים את ה CSS של המוצרים כדי שיוצגו במבנה של 3 עמודות. בשביל זה צריך להוסיף את הקוד CSS הבא לתוך הקובץ CSS של התבנית בת שנמצאת בתיקיה הזו: Child-Theme/asstes/css/style.css
@media (min-width: 960px) {
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 33.333%;
}
}עכשיו תחזרו לעמוד החנות שלכם ותוכלו לראות שמוצגים 3 מוצרים בשורה.