התקנת פילטר מוצרים WOOF (סינון ווקומרס)

כדי להתקין פילטר מוצרים, יש להתקין את תוסף הפרימיום WOOF, שמאפשר לבצע סינון בווקומרס.

יש להגדירו לפי השלבים הבאים:

1. יש להתקין ולהפעיל את התוסף (WooCommerce Products Filter)
2. תחת עיצוב > וידג'טים יש להוסיף סרגל צד ל-Plugin | WooCommerce של WOOF
3. יש לתת כותרת משמעותית למודול, כך לדוגמא "סינון לפי פרמטרים"
4. לחלופין במקום סרגל הצד, אפשר להוסיף את הפילטרים בחלק העליון בכל דפי החנות, באמצעות הקוד הבא (לשילוב ב-functions.php):

   // Function to add shortcode to WooCommerce pages
   function add_shortcode_to_woocommerce_pages() {
       if (is_product_category() || is_shop()) {
           echo do_shortcode('[woof]');
       }
   }
   
   // Hook the function to WooCommerce pages
   add_action('woocommerce_before_main_content', 'add_shortcode_to_woocommerce_pages');

5. יש להיכנס לווקומרס > הגדרות > Products Filter ושם לסמן ב-"V" את כל הסינונים הרלוונטיים, ולבחור האם Radio, Checkbox או Drop-down לכל אחד
6. מומלץ להוסיף "סינון לפי מחיר" עם האופציה השנייה "woo range-slide" (לגרור למטה מתחת לסינון קטגוריות)
7. ניתן להוסיף פרמטרים לסינון ע"י מוצרים > תכונות ושם להוסיף את התכונות הרלוונטיות
8. לכל מוצר יש להוסיף את התכונות הרלוונטיות עבורו, ולבחור את הערכים המתאימים.
9. יש לבצע תיקון של תכונות המוצרים (כותרות) – דרך LocoTranslate > Woocommerce, ושם למצוא את "Product %s" ולהחליף ב-%s בלבד (מוריד את הקידומת "מוצר" מתכונות המוצר)
10. יש לערוך את קבצי התוסף, בקובץ הראשי להחליף את "Clear All" ב-"איפוס הסינון"

ניתן לסגנן את התוסף עם קוד ה-CSS הבא:

.woof_products_top_panel_ul > li:first-child {
  float:left !important;
}
.rtl .woof_checkbox_label {
 margin-bottom:0px;
 margin-left:0px !important;
 margin-right:3px !important;
}
.rtl .woof_price_search_container .price_slider_amount .price_label {
 text-align:center !important;
 width:100%;
direction:rtl;
 padding-top:0px !important;
}
.woof_list li ul li {
 padding-bottom:0px !important;
}
.woof_list li ul.woof_childs_list {
 margin-top:3px !important;
 margin-bottom:4px !important;
}
.rtl .woof_childs_list {
 margin:7px 15px 0 0 !important;
}
.rtl .woof_checkbox_count {
 float:left;
}
.rtl .woof_checkbox_count {
 margin-left:0px !important;
 margin-right:4px !important;
}
.rtl .woof_childs_list .woof_checkbox_label {
 margin-right:7px !important;
}
.woof_checkbox_count, .WOOF_Widget h4, .WOOF_Widget h3 {
 color:#79bd40;
}

כמו כן, ניתן להתאים את העברית ע"י LocoTranslate > תוספים > WOOF

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

1. יש להיכנס למנהל הקבצים, wp-content > plugins > woocommerce products filter > languages ואז להוריד קובץ .po
2. יש לשנות את שם הקובץ ל-he_IL
3. יש לוודא שהתרגומים מחוקים ע"י פתיחת קובץ ה-.po ב-Poedit, תוכנה לעריכת תרגומים (קישור כאן), ואז ביצוע הפעולות הבאות:
   1. החלפת שפת יעד התרגום ל-עברית, תחת Translation > Properties ואז לבחור תחת Language את Hebrew (Israel)
   2. מחיקת התרגומים – לבחור את הכל (Ctrl+a) ואז Edit > Clear Translation
   3. בחירת יעד ולשמור את הקובץ (מה שיוצר גם קובץ .mo)
4. יש להעלות את 2 הקבצים (.po ו-.mo) לתיקיית ה-languages ואז השפה העברית תופיע ב-LocoTranslate לעריכה
5. יש לערוך את כל המושגים (לפי הרשימה מטה + בקשות לקוח) ולשמור

המלצות לשינויים:
Reset – "איפוס הסינון"
Price: – "טווח מחירים:"
Show more – "הצג נוספים"
Show less – "הסתר נוספים"
Loading … – "טוען תוצאות סינון"

להתאמת סלולר, ניתן לייצר סרגל סינון מרחף, על ידי הוספת הקוד הבא תחת ווידג'ט טקסט באתר:

[woof_slideout image_h=50 image_w=50 location=right speed=100 action=click offset="100px" onloadslideout=false ][/woof_slideout]

ולהוסיף את הקוד הבא תחת רזולוציות סלולר, עבור הווידג'ט הראשי של התוסף:

#woof_widget-2 {
 display:none !important;
}

ואת הקוד הבא תחת רזולוציות שאינן סלולר להסתרת סרגל הסינון המרחף:

#text-7 {
 display:none;
}

ולבסוף, קוד CSS נוסף לסגנון:

#text-7 .woof-handle {
 background-image:url("https://www.mahmadi.co.il/wp-content/uploads/2021/07/Filters.png") !important;
}
#text-7 br,#text-7 p {
 display:none;
}
#text-7 .woof_list li ul li{
 padding-bottom:3px !important;
}