Build a Multi‑Step Wizard Checkout – Wizard רכישה בשלבים במקום Checkout קלאסי

מה נפתור: טופס קופה אחד ארוך מוריד המרות.

נפצל ל‑4 שלבים React + REST: פרטים, משלוח, תשלום, סקירה.

שלבי יישום מפורטים

1. צור קובץ wizard.js עם קומפוננטות React לשלבים.
2. השתמש ב‑REST route /wc/v3/checkout לשמירת draft.
3. שלב כתובת → Validate עם Google Address API חינמי.
4. החלף כפתור Place‑Order לקריאה ל‑/orders כאשר state Valid.
5. בדף תודה, הפנה ל‑/my-account/orders.

קטע קוד מלא (PHP 8.3)

העתק קוד

// Enqueue assets
add_action('wp_enqueue_scripts', function(){
  wp_enqueue_script('wizard-checkout', plugins_url('wizard.js',__FILE__), ['react','wp-element'], '1.0', true);
  wp_localize_script('wizard-checkout','wizardCheckout',{nonce:wp_create_nonce('wp_rest')});
});
// Disable default checkout url
add_filter('woocommerce_get_checkout_url', function(){ return site_url('/wizard-checkout'); });

הסבר שורה‑שורה

• wp_localize_script מוסיף nonce לאימות REST.
• filter get_checkout_url מחליף את כתובת הקופה למינימליסטית.
• React‑state נשמר ב‑localStorage במקרה ריענון.

שיפור SEO ו‑Yoast

השתמש במילת המפתח WooCommerce wizard checkout בכותרת, בתיאור המטא וב‑URL הידידותי.