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

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

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

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

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

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

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

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

×

چک‌ باکس‌ ها و دکمه‌ های رادیویی فرم‌ ها رو حرفه‌ای استایل بده!

مطالعه

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

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

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

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

×

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

مطالعه

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

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

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

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

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

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

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

×

چگونه محدوده قیمت در محصولات متغیر ووکامرس را حذف کنیم؟

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

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

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

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

×

تغییر استایل محصولات ناموجود فروشگاه ووکامرس

مطالعه

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

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

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

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

×

آموزش حذف فیلدهای اضافی فرم تسویه حساب ووکامرس بدون افزونه

مطالعه

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

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

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

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

×

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

مطالعه

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

🔒

محتوای VIP+

این محتوا فقط برای اعضای ویژه قابل مشاهده است. برای دسترسی به تمام آموزش‌های اختصاصی رایا وردپرس، عضو ویژه شوید.

×

تغییر استایل محصولات ناموجود فروشگاه ووکامرس

مطالعه

🙂عضو ویژه شوید

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

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

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

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

سخن پایانی✌️

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

×

ساده‌ترین راه برای تغییر متن دکمه “افزودن به سبد خرید” در ووکامرس

مطالعه