כדי לשנות את מיקום כפתור ״הוסף לעגלה״ ב-WooCommerce, העבירו את woocommerce_template_single_add_to_cart לעדיפות (priority) אחרת באקשן woocommerce_single_product_summary. כברירת מחדל הוא נמצא בעדיפות 30, אחרי התיאור הקצר ולפני נתוני המוצר (meta).
באחד מאתרי וורדפרס שבניתי ללקוח התבקשתי לעשות בדיוק את זה, ואותה שיטה עובדת לכל אלמנט באזור תקציר המוצר.
הזזת כפתור הוסף לעגלה
הוסיפו את הקוד הבא לקובץ functions.php של תבנית הבת שלכם. הקוד מעביר את הכפתור מעדיפות 30 לעדיפות 15, בין המחיר לתיאור הקצר:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );remove_action() עובדת רק כשהעדיפות זהה לזו שבה נרשמה הפונקציה, ולכן בשורה הראשונה חייב להופיע 30.
סדר העדיפויות של woocommerce_single_product_summary
האקשן רץ בתוך ה-div בעל המחלקה .summary שבקובץ templates/content-single-product.php. אלה הפונקציות ש-WooCommerce רושם בקובץ includes/wc-template-hooks.php:
| עדיפות | פונקציה | פלט |
|---|---|---|
| 5 | woocommerce_template_single_title |
שם המוצר |
| 10 | woocommerce_template_single_rating |
דירוג כוכבים |
| 10 | woocommerce_template_single_price |
מחיר |
| 20 | woocommerce_template_single_excerpt |
תיאור קצר |
| 30 | woocommerce_template_single_add_to_cart |
טופס ההוספה לעגלה |
| 40 | woocommerce_template_single_meta |
מק״ט, קטגוריות ותגיות |
| 50 | woocommerce_template_single_sharing |
תבנית השיתוף |
| 60 | WC_Structured_Data::generate_product_data |
נתוני Schema של המוצר, ללא פלט גלוי |
הדירוג והמחיר חולקים את עדיפות 10. פונקציות עם אותה עדיפות רצות לפי סדר ההוספה שלהן, והדירוג נוסף ראשון.
איך זה עובד?
וורדפרס מריצה את הפונקציות שמחוברות ל-אקשן מהעדיפות הנמוכה ביותר לגבוהה ביותר. בחרו מספר שנמצא בין שני ״שכנים״ כדי למקם את הכפתור ביניהם:
- מעל שם המוצר: עדיפות 1 עד 4.
- מיד אחרי המחיר: 11 עד 19.
- אחרי נתוני המוצר: 41 עד 49.
woocommerce_template_single_add_to_cart() לא מדפיסה את הכפתור בעצמה. היא מפעילה את woocommerce_{product_type}_add_to_cart, ולאקשן הזה WooCommerce מחבר פונקציה לכל סוג מוצר מובנה, כמו woocommerce_simple_add_to_cart ו-woocommerce_variable_add_to_cart. הפונקציות האלה טוענות את התבניות שבתיקייה single-product/add-to-cart/.
הזזת פונקציית האב מזיזה את הטופס עבור כל סוגי המוצרים בבת אחת. למבט רחב יותר על האקשנים האלה, תנו מבט בפוסט הוקים של WooCommerce: מדריך ויזואלי אינטראקטיבי לכל עמוד.
עמוד החנות ועמודי ארכיון
לולאות המוצרים בעמוד החנות ובעמודי הקטגוריות משתמשות באקשן אחר. בלולאות האלה הכפתור מגיע מ-woocommerce_template_loop_add_to_cart על woocommerce_after_shop_loop_item בעדיפות 10. הקוד הבא מעביר אותו אל מעל תמונת המוצר:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 5 );בחרו את המיקום בלולאה בזהירות. הקישור למוצר נפתח ב-woocommerce_before_shop_loop_item בעדיפות 10 ונסגר ב-woocommerce_after_shop_loop_item בעדיפות 5, וכל מה שמחובר ביניהם יוצא בתוך אותו קישור. הכפתור הוא גם קישור, וקישורים מקוננים הם HTML לא תקין.
תבניות בלוקים ו-page builders
ההוקים האלה רלוונטיים לתבניות הקלאסיות. בתבנית בלוקים, התבנית Single Product בנויה מבלוקים, ולכן במקום זאת גררו את הבלוק Add to Cart with Options למיקום חדש ב-Site Editor.
WooCommerce עדיין מפעיל את האקשנים הקלאסיים בתבניות בלוקים (לצורך תאימות), ומסיר רק את הפונקציות שלו בעדיפויות ברירת המחדל. אם תוסיפו שם מחדש את פונקציית ההוספה לעגלה בעדיפות חדשה, ייתכן שיוצג כפתור שני.
גם page builders כמו Elementor משתמשים בווידג'טים משלהם, אז בדקו קודם איזו מערכת מרנדרת את עמוד המוצר שלכם.
שאלות נפוצות
שאלות נפוצות על מיקום כפתור הוסף לעגלה וההוק שלו:
woocommerce_single_product_summary. היא רצה אחרי התיאור הקצר (20) ולפני נתוני המוצר (40).
woocommerce_template_single_add_to_cart ל-woocommerce_after_single_product_summary. הטאבים של המוצר רצים שם בעדיפות 10, כך שעדיפות 5 תציב את הכפתור מעל הטאבים ועדיפות 11 מתחתם.
מאמר יפה וברור !
איפה אני מוסיפה בקוד שהמקום של הכפתור בעמודי קטגוריה יהיה מתחת התמונה ?
כרגע הכפתור מוצג במעבר על התמונה