ساخت صفحه پیگیری سفارش در ووکامرس بدون افزونه

ساخت صفحه پیگیری سفارش در ووکامرس بدون افزونه

سلام به رفیق رایا وردپرسی خودم حالت چطوره؟ میزونی؟! 👋
حتماً برات پیش اومده که یه چیزی آنلاین خریدی و هی دلت خاسته بدونی الان کجاست و کی به دستت میرسه، مگه نه؟ 🤔 خب، اگه یه فروشگاه اینترنتی با ووکامرس داری، حتماً می‌دونی که داشتن یه صفحه برای پیگیری سفارش چقدر مهمه. مشتریان با دیدن وضعیت سفارش‌ها راحت‌تر خرید می‌کنن و تو هم دیگه لازم نیست مدام جواب تلفن و پیام بدی که سفارش در چه مرحله‌ای هست! 😉

یه خبر خوب برات دارم! لازم نیست برای این کار بری سراغ نصب کلی افزونه جورواجور که ممکنه سایتت رو سنگین کنن. امروز می‌خوام بهت یاد بدم چطوری خودت، بدون هیچ افزونه‌ای، یه صفحه پیگیری سفارش شیک و مدرن برای وکامرس بسازی. 😎 آماده‌ای؟ پس بزن بریم!

چرا باید صفحه پیگیری سفارش داشته باشیم؟ 🤔

فرض کن مشتریان بعد از خرید، هی بهت پیام بدن که “سفارشم کجاست؟” یا «کی به دستم می‌رسه؟» گاهی پاسخ دادن به این سوالات تکراری و حجم زیادی از این پیام ها دردسرساز و آزادهنده میشه از اونطرف کاربر هم اذیت میشه از اینکه دیر جواب میگیره اما همین این مشکلات رو میشه با یه صفحه پیگیری سفارش، حل کرد! مشتری با وارد کردن شماره سفارش و ایمیلش، خودش وضعیت سفارشش رو چک میکنه. اینجوری هم تجربه کاربری (UX) سایت می‌ره بالا، هم نیازی نیست تایم زیادی صرف پاسخ دادن به سوالات تکراری کاربرا بزاری.

ساخت صفحه پیگیری سفارش در ووکامرس بدون نیاز به افزونه 😎

توی ووکامرس یه شورت‌کد آماده به اسم [ woocommerce_order_tracking ] هست که کاربردش اینه: یه فرم به کاربر نشون می‌ده که با وارد کردن ایمیل و شماره سفارش، می‌تونه وضعیت سفارشش رو چک کنه. تا اینجا همه چی خوبه، ولی اگه این فرم رو دیده باشی، میدونی که استایلش خیلی خشک و بی‌روحه! انگار فقط یه فرم ساده‌ست که هیچ جذابیتی نداره. 😒 (استایل پیش فرضش رو توی ویدیو زیر میتونی ببینی😬)

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

حالا من رفتم سراغ این شورت‌کد و تصمیم گرفتم یه کاستوم حسابی روش بزنم. با این ترفند نه تنها می‌تونی یه فرم شیک و قشنگ برای پیگیری سفارش بسازی، بلکه می‌تونی تو هر جای سایتت که دلت خواست بذاریش. مثلاً توی پنل کاربری کاربران یا حتی توی یه صفحه. اینجوری کاربران همیشه می‌تونن از وضعیت سفارششون باخبر بشن و تو هم حرفه‌ای به نظر میرسی! 😍

توجه: شورت کد [ woocommerce_order_tracking ] مسئول نمایش فرم پیگیری سفارش ووکامرس هست و محتواش رو از فایل form-tracking.php واقع در مسیر
wp-content/plugins/woocommerce/templates/order/form-tracking.php
می‌گیره. برای ادیت این فرم پیش‌فرض باید همین فایل رو تغییر بدی. اما اگه این فایل رو توی مسیر اصلی ووکامرس ویرایش کنی، با هر آپدیت، تغییراتت از بین میره. پس بهترین راه اینه که همین ساختار رو روی چایلد تم خودت اجرا کنی تا تغییرات همیشه پابرجا بمونه و نگرانی از این بابت نداشته باشی.

ویدیو بالا مربوط به استایل جدید فرم پیگیری سفارش ووکامرسه 🙂

قدم اول: ایجاد پوشه woocommerce در چایلد تم 📂

از اونجایی که نمی‌خوایم تغییرات با آپدیت ووکامرس یا هر تغییر دیگه از بین بره، بهترین و منطقی‌ترین راه اینه که تغییرات رو داخل چایلد تم اعمال کنیم. اگه هنوز چایلد تم نداری، بهتره اول از همه آموزش ساخت چایلد تم استفاده کنی و یه چایلد تم بسازی. اینجوری همیشه تغییرات باقی می‌مونن و نگران نیستی که با آپدیت وردپرس یا ووکامرس تغییراتت بپرن 🥶

قدم دوم : ایجاد پوشه order داخل پوشه woocommerce در چایلد تم 📂

حالا که پوشه ووکامرس رو توی چایلد تم ساختی، قدم بعدی اینه که داخل اون پوشه، یه پوشه به نام order بسازی. این کار بهت اجازه می‌ده فایل‌های مربوط به سفارشات (مثل فرم پیگیری سفارش) رو جدا و به صورت سفارشی مدیریت کنی. به عبارت دیگه، با ایجاد پوشه order، تغییراتت به فایل‌های مهم مربوط به سفارشات حفظ می‌شه و با آپدیت‌های ووکامرس یا قالب اصلی از بین نمیره.

قدم سوم: بارگذاری فایل form-tracking.php داخل پوشه order چایلدتم

form-tracking.php، این فایل همون فرم پیگیری سفارشه که قراره تو سایت نمایش داده بشه. یه فایل با همین نام داخل پوشه و مسیر wp-content/themes/your-child-theme/woocommerce/order/ ایجاد کن و داخلش کدهای زیر رو قرار بده یا هم فایل نهایی رو گذاشتم بارگذاری کن:

form-tracking.php، همون فایلی هست که فرم پیگیری سفارش رو توی سایت نمایش می‌ده. پیشنهاد می‌کنم یه فایل جدید با همین نام رو در مسیر زیر بسازی:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

سپس کدهای زیر رو داخلش قرار بدی :

کد فرم کاستوم شده پیگیری سفارش (form-tracking.php) 👇

ویژگی های این فرم پیگیری سفارش چیه؟ 🔍

• فرم شیک و جذاب: استایل جذاب و شیک برای فرم پیش فرض پیگیری سفارش
• لیبلهای شناور: وقتی داخل فیلدها تایپ میکنی، لیبل ها شناور میشن.
• اعتبارسنجی: اگر شماره سفارش یا ایمیل رو خالی بزاری، بهت یه خطای واضح نشون می‌ده که مشکل چیه.
• آیکن‌ها: با فونت اوسام آیکن‌های زیبا به فیلدها اضافه شده.
• ریسپانسیو: توی موبایل هم عالی کار میکنه.

بعد از اینکه مراحل بالا رو انجام دادی، کافیه یه صفحه توی وردپرس بسازی و یا داخل پنل کاربری سایتت، شورت‌کد [ woocommerce_order_tracking ] رو قرار بدی. تا فرم پیگیری سفارش رو با یه استایل جذاب و متفاوت تصویر زیر مشاهده کنی 🙂

🙂 سفارشی سازی بخش نمایش وضعیت سفارش

تا اینجا خوب پیش رفتیم اما کارمون هنوز تموم نشده! 😎✌️
تا اینجای کار فقط ظاهر فرم پیگیری سفارش رو کاستوم کردیم و خوشگل‌ترش کردیم 🎨✨
اما یه چیز مهم مونده…

وقتی کاربر شماره سفارش و ایمیلش رو وارد می‌کنه، ووکامرس یه بخش جدید بهش نشون می‌ده که وضعیت سفارش چطوره – ارسال شده؟ در حال پردازشه؟ لغو شده؟ 📦⏳❌

اگه می‌خوای اون قسمت هم مثل فرم پیگیری خوشگل و هماهنگ با استایل سایتت باشه، باید بریم سراغ فایل tracking.php و اون رو هم ویرایش کنیم 🛠️

بزن بریم سراغ مرحله بعدی! 🚀

طبق چیزی که بالا برای سفارشی کردن فرم پیگیری سفارش، بهت گفتم دو قدم اول رو انجام بده

1️⃣ اول داخل چایلد تم‌ات یه پوشه جدید به اسم woocommerce بساز 📂
2️⃣ بعدش داخل همین پوشه، یه پوشه دیگه با نام order ایجاد کن 🗂️
3️⃣ حالا داخل پوشه order، یه فایل بساز به اسم tracking.php 📝

قراره توی این فایل، استایل و ساختار اون بخشی که وضعیت سفارش رو نشون می‌ده رو کاستوم کنیم تا همه چی باحال و هماهنگ بشه! 😍🛍️

پس مسیر فایلمون اینشکلی میشه:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

حالا کد زیر رو داخل فایل tracking.php قرار بده :

کد فرم کاستوم شده نمایش وضعیت سفارش (tracking.php) 👇

این کد برای tracking.php چیکار میکنه؟ 🔎

• نمایش شیک: یه صفحه قشنگ با اطلاعات سفارش نشون می ده! 📦
• خط زمانی: مراحل سفارش رو با آیکن و رنگ نشون می‌ده (مثل در انتظار، پردازش، ارسال شده). ⏳
• وضعیت رنگی: هر وضعیت سفارش یک رنگ خاص دارد (مثلاً تکمیل شده سبز می‌شه). 🌈
• ریسپانسیو: توی موبایل هم عالیه! 📲

برای تست، بعد از بارگذاری فایل، یه سفارش رو توی فرم پیگیری چک کن تا نتیجه رو ببینی! 😊

سخن پایانی✌️

بهت تبریک میگم! 🥳 تو تونستی بدون نیاز به هیچ افزونه‌ای، یه صفحه پیگیری سفارش خیلی حرفه‌ای و خوشگل برای فروشگاه ووکامرسی خودت بسازی. حالا مشتریات میتونن خیلی راحت وضعیت سفارش‌هاشون رو پیگیری کنن و تو هم دیگه خیالت راحت‌تره. امیدوارم این آموزش برات مفید بوده باشه. اگه سوالی داشتی حتماً بپرس. موفق باشی فعلن تا یه آموزش خاص دیگه تو رو به خدای بزرگ میسپارم 🙂