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

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

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

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

ووکامرس از دو ساختار Checkout Block و Classic Checkout برای نمایش فرم تسویه‌حساب استفاده می‌کند. برای تشخیص ساختار فروشگاه، در پیشخوان وردپرس به بخش برگه‌ها (Pages) بروید و برگه پرداخت را باز کنید.

اگر فرم پرداخت را به‌صورت یک بلوک با عنوان Checkout مشاهده می‌کنید و با انتخاب آن، تنظیمات بلوک در پنل کناری نمایش داده می‌شود، صفحه پرداخت فروشگاه از نوع بلوکی است.

در مقابل، اگر محتوای برگه شامل شورت‌کد [woocommerce_checkout] باشد، فروشگاه از Checkout کلاسیک استفاده می‌کند. در این حالت، فرم پرداخت از طریق شورت‌کد در صفحه نمایش داده می‌شود و فیلدهای آن مستقیماً در ویرایشگر برگه قابل‌ویرایش نیستند.

این تفاوت مهم است، زیرا همه روش‌های شخصی‌سازی با هر دو ساختار سازگار نیستند. برای مثال، فیلتر woocommerce_checkout_fields برای تغییر فیلدهای Checkout کلاسیک استفاده می‌شود و در Checkout Block کاربرد ندارد. افزونه Flexible Checkout Fields از WP Desk هم برای فرم کلاسیک مبتنی بر شورت‌کد [woocommerce_checkout] طراحی شده است و برای Checkout بلوکی باید از افزونه جداگانه Checkout Fields for Blocks این شرکت استفاده کرد.

در سمت مقابل، Checkout Field Editor از ThemeHigh در نسخه فعلی از هر دو ساختار پشتیبانی می‌کند، اما تنظیمات Classic و Block آن جدا هستند. بنابراین، قبل از انتخاب افزونه یا روش کدنویسی، ابتدا نوع صفحه پرداخت فروشگاه را مشخص کنید.

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

اگر فروشگاه از Checkout Block استفاده می‌کند، می‌توانید برخی تغییرات را مستقیما در ویرایشگر بلوکی وردپرس انجام دهید. برای این کار، برگه پرداخت را باز کنید و از نمای فهرست بلوک‌ها (List View)، بخش Shipping Address را درون بلوک Checkout انتخاب کنید. سپس در پنل کناری، تنظیمات Address Fields را باز کنید. در این قسمت می‌توانید نمایش فیلدهایی مانند نام شرکت، خط دوم آدرس و شماره تلفن را مدیریت کنید و وضعیت اجباری یا اختیاری‌بودن فیلدهای قابل‌تنظیم را تغییر دهید.

همچنین می‌توانید از نمای List View برای مدیریت بخش‌های داخلی صفحه استفاده کنید و در صورت نیاز، بخش‌هایی مانند توضیحات سفارش را حذف کنید. این روش برای تغییرات محدود مناسب است، اما امکان افزودن آزادانه فیلدهای سفارشی یا تعریف منطق شرطی را به‌صورت پیش‌فرض در اختیار شما قرار نمی‌دهد.

شخصی‌سازی ظاهر صفحه پرداخت از طریق قالب

اگر هدف شما تغییر رنگ‌ها، فونت‌ها، فاصله عناصر یا چیدمان ظاهری صفحه پرداخت است، ابتدا امکانات قالب فروشگاه را بررسی کنید. در قالب‌های بلوکی، می‌توان از مسیر Appearance → Editor → Styles به تنظیمات ظاهری دسترسی داشت. تغییرات این بخش ممکن است بر سایر قسمت‌های سایت نیز اثر بگذارند؛ بنابراین هنگام ویرایش، محدوده اعمال تنظیمات را بررسی کنید.

امکانات شخصی‌سازی به قالب فعال بستگی دارد و همه قالب‌ها ابزار اختصاصی برای ویرایش صفحه پرداخت ندارند. همچنین تغییر ظاهر فرم با تغییر ساختار فیلدهای آن متفاوت است؛ برای افزودن یا حذف فیلدهایی که قالب امکان مدیریت آن‌ها را فراهم نمی‌کند، باید از روش دیگری استفاده کنید.

ویرایش فرم تسویه حساب ووکامرس با افزونه

استفاده از افزونه ویرایش صفحه پرداخت ووکامرس برای مدیرانی کاربرد دارد که می‌خواهند بدون کدنویسی، فیلدهای فرم را مدیریت کنند. افزونه‌های تخصصی می‌توانند امکاناتی مانند تغییر عنوان فیلد، تعیین اجباری یا اختیاری‌بودن، جابه‌جایی ترتیب، حذف فیلدهای اضافی و افزودن فیلد سفارشی را ارائه دهند.

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

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

کدنویسی برای تغییراتی کاربرد دارد که از طریق تنظیمات داخلی، قالب یا افزونه انتخابی قابل انجام نیستند. در Checkout کلاسیک می‌توان از هوک‌ها و فیلترهای PHP مانند woocommerce_checkout_fields برای تغییر، حذف یا جابه‌جایی فیلدها استفاده کرد. این فیلتر در Checkout Block کاربرد ندارد و برای افزودن فیلد به ساختار بلوکی باید از API اختصاصی آن استفاده شود.

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

مقایسه روش‌های ویرایش صفحه پرداخت ووکامرس

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

انتخاب روش مناسب به ساختار صفحه پرداخت و نوع تغییر موردنیاز بستگی دارد. امکانات قالب یا ویرایشگر ممکن است برای اصلاحات ظاهری کافی باشد، اما برای تغییر فیلدهای صفحه پرداخت ووکامرس باید از ابزار یا کدی استفاده کنید که با ساختار Checkout فروشگاه سازگار باشد. قبل از حذف هر فیلد هم بررسی کنید که اطلاعات آن برای ثبت سفارش، محاسبه هزینه ارسال یا پردازش خرید ضروری نباشد.

تغییر، حذف و اضافه کردن فیلدهای فرم تسویه حساب ووکامرس

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

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

اگر فروشگاه از Checkout Block استفاده می‌کند، می‌توانید وضعیت برخی فیلدهای پیش‌فرض را بدون نصب افزونه تغییر دهید. برای این کار، مراحل زیر را انجام دهید:

• از پیشخوان وردپرس به بخش «برگه‌ها» (Pages) بروید و برگه پرداخت ووکامرس را برای ویرایش باز کنید.
• از نمای فهرست بلوک‌ها (List View)، بلوک Shipping Address را که داخل Checkout قرار دارد انتخاب کنید تا تنظیمات آن در پنل کناری نمایش داده شود.
• بخش Address Fields را باز کنید. در این قسمت، گزینه‌های نام شرکت (Company)، خط دوم آدرس (Address Line 2) و شماره تلفن (Phone) را مشاهده می‌کنید.
• کلید مقابل هر فیلد را برای مدیریت نمایش آن تغییر دهید و در صورت وجود گزینه‌های Optional و Required، وضعیت اختیاری یا اجباری‌بودن فیلد را تعیین کنید.

روی ذخیره (Save) کلیک کنید. سپس صفحه پرداخت را در نمای فروشگاه باز کنید و مطمئن شوید تغییرات به‌درستی اعمال شده‌اند.

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

حذف فیلدهای غیرضروری ووکامرس

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

اگر از Checkout Block استفاده می‌کنید، برگه پرداخت را باز کنید و بلوک Shipping Address را انتخاب کنید. سپس در بخش Address Fields، کلید مقابل فیلدی مانند Company را خاموش کنید تا نام شرکت در فرم نمایش داده نشود. در عکس ۴، کلید Company غیرفعال است، اما Address Line 2 همچنان فعال است. برای مخفی‌کردن خط دوم آدرس نیز باید کلید مقابل آن را خاموش کنید. اگر فیلد موردنظر در تنظیمات داخلی قابل مدیریت نیست، به افزونه یا کدنویسی سازگار با ساختار صفحه پرداخت نیاز دارید.

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

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

پس از ذخیره تغییرات، یک سفارش آزمایشی ثبت کنید تا مطمئن شوید اطلاعات ضروری همچنان دریافت می‌شوند و فرایند خرید بدون اختلال تکمیل می‌شود.

تغییر عنوان، ترتیب و وضعیت اجباری فیلدها

پس از حذف فیلدهای غیرضروری، می‌توانید عنوان، ترتیب و وضعیت اجباری‌بودن فیلدهای باقی‌مانده را متناسب با نیاز فروشگاه تنظیم کنید. برای مثال، اگر شماره تلفن را برای هماهنگی ارسال دریافت می‌کنید، عنوان «شماره تماس گیرنده» می‌تواند منظور فیلد را روشن‌تر کند. همچنین بهتر است اطلاعات مرتبط، مانند نام و نام خانوادگی یا استان و شهر، در کنار یکدیگر قرار بگیرند تا تکمیل فرم برای مشتری ساده‌تر شود.

در Checkout Block، برای تغییر وضعیت اجباری‌بودن فیلدهای قابل‌تنظیم، برگه پرداخت را باز کنید و پس از انتخاب بخش Shipping Address، به تنظیمات Address Fields بروید. اگر نمایش فیلدی مانند شماره تلفن فعال باشد، می‌توانید با انتخاب Optional آن را اختیاری یا با انتخاب Required تکمیل آن را الزامی کنید.

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

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

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

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

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

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

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

تاثیر حذف یا تغییر فیلدهای ضروری بر ثبت سفارش

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

پس از اعمال تغییرات، یک سفارش آزمایشی ثبت کنید و موارد زیر را بررسی کنید:

• تکمیل فرم: مطمئن شوید مشتری می‌تواند اطلاعات لازم را وارد کند و هنگام ثبت سفارش، خطای غیرمنتظره‌ای درباره فیلدهای حذف‌شده دریافت نمی‌کند.
• ارسال و پرداخت: بررسی کنید روش‌های ارسال و پرداخت متناسب با سفارش نمایش داده می‌شوند و هزینه ارسال به‌درستی محاسبه می‌شود.
• ثبت اطلاعات سفارش: پس از ثبت سفارش آزمایشی، از مسیر «ووکامرس ← سفارش‌ها» وارد جزئیات آن شوید. در بخش Billing، ذخیره‌شدن اطلاعات صورتحساب و راه‌های تماس مشتری را بررسی کنید. سپس در بخش Shipping، آدرس تحویل و اطلاعات مرتبط با ارسال را کنترل کنید. توجه داشته باشید که مشاهده این اطلاعات در جزئیات سفارش، به‌تنهایی به معنای موفق‌بودن پرداخت نیست. نتیجه پرداخت را هم جداگانه بررسی کنید.

• سازگاری افزونه‌ها: اگر از افزونه‌های حمل‌ونقل، صدور فاکتور یا مدیریت سفارش استفاده می‌کنید، عملکرد آن‌ها را نیز پس از تغییر فیلدها بررسی کنید.

آزمایش را روی همان ساختار صفحه پرداختی انجام دهید که فروشگاه از آن استفاده می‌کند، زیرا احتمال دارد که سازگاری افزونه‌ها با Checkout Block و Checkout کلاسیک متفاوت باشد. اگر پس از تغییر فیلدها مشکلی در ثبت یا پردازش سفارش مشاهده کردید، تغییرات اخیر را بررسی کنید و تا زمان رفع مشکل، فیلدهای ضروری را به وضعیت قبلی بازگردانید.

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

استفاده از افزونه ویرایش صفحه پرداخت ووکامرس، راهکاری مناسب برای مدیریت فیلدها و شخصی‌سازی فرم تسویه‌حساب بدون نیاز به کدنویسی است. شما می‌توانید بسته به امکانات افزونه، عنوان فیلدها را تغییر دهید، ترتیب نمایش آن‌ها را تنظیم کنید، فیلدهای غیرضروری را حذف کنید یا اطلاعات جدیدی از مشتری دریافت کنید. برخی افزونه‌ها هم امکاناتی برای تغییر چیدمان و ظاهر صفحه پرداخت ارائه می‌دهند.

البته باید بدانید که همه افزونه‌ها قابلیت‌های یکسانی ندارند. بعضی از آن‌ها روی ویرایش فرم تسویه حساب ووکامرس تمرکز دارند و برخی برای طراحی صفحه پرداخت سفارشی ساخته شده‌اند. همچنین سازگاری افزونه با Checkout کلاسیک یا Checkout Block اهمیت دارد، بنابراین پیش از نصب، باید مطمئن شوید افزونه انتخابی از ساختار صفحه پرداخت فروشگاه و تغییرات موردنظر شما پشتیبانی می‌کند.

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

برای انتخاب افزونه، ابتدا مشخص کنید که هدف شما مدیریت فیلدهای فرم است یا قصد تغییر ظاهر و چیدمان صفحه پرداخت را دارید. افزونه‌های زیر کاربردهای متفاوتی در این زمینه دارند:

• Checkout Field Editor از ThemeHigh: این افزونه برای تغییر فیلدهای صفحه پرداخت ووکامرس طراحی شده است و امکاناتی مانند ویرایش عنوان، تغییر ترتیب، غیرفعال‌کردن فیلدهای غیرضروری و افزودن فیلد جدید را ارائه می‌دهد. قابلیت‌های نسخه رایگان و حرفه‌ای آن یکسان نیستند و سازگاری با Checkout Block نیز باید براساس نسخه مورد استفاده بررسی شود.
• Flexible Checkout Fields از WP Desk: افزونه Flexible Checkout Fields برای شخصی‌سازی فرم تسویه‌حساب ووکامرس طراحی شده است. با استفاده از آن می‌توان فیلدهای فرم را ویرایش کرد، عنوان و ترتیب نمایش آن‌ها را تغییر داد و فیلدهای جدیدی به صفحه پرداخت اضافه کرد. نسخه حرفه‌ای افزونه هم امکانات پیشرفته‌تری مانند نمایش شرطی فیلدها را ارائه می‌دهد.
• FunnelKit: این افزونه برای ساخت و شخصی‌سازی صفحات پرداخت کاربرد دارد و امکاناتی برای تغییر چیدمان، مدیریت فیلدها و طراحی فرایند خرید ارائه می‌دهد. افزونه FunnelKit بیشتر زمانی مطرح است که علاوه بر تغییر فیلدها، قصد دارید ساختار صفحه پرداخت را هم به‌صورت گسترده شخصی‌سازی کنید.
• SeedProd: افزونه SeedProd یک صفحه‌ساز وردپرس است که می‌توان از امکانات مرتبط با ووکامرس آن برای طراحی ظاهر و چیدمان صفحه پرداخت استفاده کرد. این افزونه بیشتر برای شخصی‌سازی بصری کاربرد دارد و نباید بدون بررسی قابلیت‌های نسخه موردنظر، آن را جایگزین افزونه تخصصی مدیریت فیلدها دانست.

تفاوت نسخه رایگان و پولی این افزونه‌ها فقط به تعداد امکانات محدود نمی‌شود و نوع صفحه پرداختی که پشتیبانی می‌کنند هم اهمیت دارد. جدول زیر وضعیت نسخه‌ها و کاربرد هر افزونه را برای Checkout کلاسیک و بلوکی نشان می‌دهد.

آموزش تصویری ویرایش صفحه پرداخت ووکامرس با افزونه Checkout Field Editor

برای ویرایش فرم تسویه حساب ووکامرس بدون کدنویسی، می‌توانید از افزونه Checkout Field Editor از ThemeHigh استفاده کنید. در این آموزش، ابتدا فیلد «شماره واحد» را به فرم پرداخت اضافه می‌کنیم و سپس نحوه ویرایش، تغییر ترتیب و حذف فیلدها را توضیح می‌دهیم. مراحل زیر مربوط به صفحه پرداخت کلاسیک ووکامرس هستند.

مرحله اول: ورود به تنظیمات افزونه

پس از نصب و فعال‌سازی Checkout Field Editor، از پیشخوان وردپرس به مسیر ووکامرس ← Checkout Form ← Checkout Fields بروید. در این صفحه، سه بخش Billing Fields برای اطلاعات صورت‌حساب، Shipping Fields برای اطلاعات ارسال و Additional Fields برای اطلاعات اضافی در دسترس هستند.

برای افزودن فیلد «شماره واحد» به فرم صورت‌حساب، بخش Billing Fields را انتخاب کنید و روی دکمه Add field بزنید.

مرحله دوم: افزودن فیلد جدید

با انتخاب Add field، پنجره New Field باز می‌شود. در این پنجره، مشخصات فیلد شماره واحد را به شکل زیر وارد کنید:

• Type: گزینه Text را انتخاب کنید. شماره واحد همیشه فقط یک عدد نیست و ممکن است به‌شکل‌هایی مانند «۳/۲» وارد شود؛ بنابراین، نوع Text برای این فیلد مناسب‌تر است.
• Name: شناسه فیلد را billing_flatnumber وارد کنید.
• Label: عنوان نمایشی را «شماره واحد» قرار دهید.
• Placeholder: عبارت «مثلاً ۳/۲» را به‌عنوان متن راهنمای داخل فیلد وارد کنید.

برای این فیلد اعتبارسنجی عددی تعیین نکنید تا مقادیری مانند «۳/۲» نیز قابل ثبت باشند. گزینه Required مشخص می‌کند که تکمیل فیلد اجباری باشد یا خیر و گزینه Enabled برای فعال‌بودن فیلد است. همچنین با گزینه‌های Display in Emails و Display in Order Detail Pages می‌توانید نمایش اطلاعات فیلد را در ایمیل‌ها و صفحات جزئیات سفارش تنظیم کنید. پس از تکمیل مشخصات، روی Save & Close کلیک کنید.

اکنون فیلد جدید با شناسه billing_flatnumber به فهرست فیلدهای صورت‌حساب اضافه شده است. ردیف آن را در جدول بررسی کنید و برای ذخیره تنظیمات صفحه، روی Save changes بزنید.

مرحله سوم: ویرایش عنوان و تنظیمات فیلدها

برای ویرایش یک فیلد موجود، در جدول مدیریت فیلدها روی دکمه Edit در سمت راست ردیف موردنظر کلیک کنید. این دکمه در تصویر ۹ (تصویر بالا) مقابل هر فیلد دیده می‌شود.

پس از بازشدن پنجره تنظیمات، می‌توانید عنوان فیلد (Label)، متن راهنما (Placeholder) و سایر گزینه‌های آن را تغییر دهید. برای مثال، اگر نمی‌خواهید واردکردن شماره واحد اجباری باشد، تیک Required را بردارید. در پایان، روی Save & Close و سپس Save changes کلیک کنید.

مرحله چهارم: تغییر ترتیب نمایش فیلدها

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

مرحله پنجم: حذف فیلدهای اضافی

اگر دیگر به فیلد شماره واحد نیاز ندارید، چک‌باکس کنار نام billing_flatnumber را انتخاب کنید و روی دکمه Remove در بالای جدول بزنید.

پس از حذف، جدول فیلدهای صورت‌حساب را بررسی کنید. همان‌طور که در تصویر بعد مشاهده می‌کنید، ردیف billing_flatnumber دیگر در فهرست وجود ندارد. برای ثبت تغییرات، روی Save changes کلیک کنید.

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

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

کدنویسی یکی از روش‌های شخصی‌سازی صفحه پرداخت ووکامرس است که امکان تغییر، حذف یا افزودن فیلدها را فراهم می‌کند. پیش از استفاده از کد، نوع Checkout فروشگاه را مطابق بخش «شناسایی ساختار صفحه پرداخت ووکامرس» مشخص کنید. کدهای مبتنی بر فیلتر woocommerce_checkout_fields که در ادامه می‌بینید مربوط به Checkout کلاسیک هستند؛ برای افزودن فیلدهای سفارشی به Checkout Block باید از API فیلدهای اضافی ووکامرس استفاده شود.

تغییر عنوان و اجباری‌بودن فیلدها با کد

در صفحه پرداخت کلاسیک، فیلتر woocommerce_checkout_fields امکان تغییر تنظیمات فیلدهای فرم تسویه‌حساب را فراهم می‌کند. برای مثال، کد زیر عنوان فیلد تلفن را به «شماره تماس» تغییر می‌دهد و تکمیل آن را اجباری می‌کند:

add_filter( 'woocommerce_checkout_fields', function( $fields ) {
    if ( isset( $fields['billing']['billing_phone'] ) ) {
        $fields['billing']['billing_phone']['label']    = 'شماره تماس';
        $fields['billing']['billing_phone']['required'] = true;
    }

    return $fields;
} );

در این نمونه، billing_phone شناسه فیلد تلفن در بخش اطلاعات صورت‌حساب است. ویژگی label عنوان فیلد را مشخص می‌کند و مقدار true در ویژگی required به معنای اجباری‌بودن آن است. اگر بخواهید فیلدی را اختیاری کنید، می‌توانید مقدار required را به false تغییر دهید؛ البته به شرطی که آن اطلاعات برای ثبت یا پردازش سفارش ضروری نباشد. بررسی وجود فیلد با isset() هم مانع دسترسی مستقیم کد به فیلدی می‌شود که ممکن است در تنظیمات فعلی فروشگاه وجود نداشته باشد.

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

برای حذف یک فیلد از فرم تسویه‌حساب کلاسیک، می‌توان از تابع unset() در فیلتر woocommerce_checkout_fields استفاده کرد. کد زیر فیلد «نام شرکت» را از بخش اطلاعات صورت‌حساب حذف می‌کند:

add_filter( 'woocommerce_checkout_fields', function( $fields ) {
    if ( isset( $fields['billing']['billing_company'] ) ) {
        unset( $fields['billing']['billing_company'] );
    }

    return $fields;
} );

این کد فقط فیلد billing_company را حذف می‌کند و سایر اطلاعات صورت‌حساب را تغییر نمی‌دهد. پیش از حذف فیلدهایی مانند کشور، آدرس یا کد پستی، باید وابستگی روش‌های ارسال، محاسبه مالیات و سایر افزونه‌های فروشگاه به آن‌ها بررسی شود. حذف اطلاعات موردنیاز ممکن است باعث شود سفارش ثبت شود، اما اطلاعات کافی برای پردازش یا ارسال آن در دسترس نباشد.

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

برای افزودن فیلد جدید به Checkout Block، ووکامرس تابع woocommerce_register_additional_checkout_field() را ارائه می‌دهد. این تابع باید در اکشن woocommerce_init یا پس از آن فراخوانی شود. فیلد سفارشی را می‌توان در بخش اطلاعات تماس، آدرس یا اطلاعات سفارش قرار داد.

برای نمونه، کد زیر یک فیلد اختیاری با عنوان «توضیحات بسته‌بندی» به بخش اطلاعات سفارش اضافه می‌کند:

add_action( 'woocommerce_init', function() {
    if ( ! function_exists( 'woocommerce_register_additional_checkout_field' ) ) {
        return;
    }

    woocommerce_register_additional_checkout_field(
        array(
            'id'       => 'my-store/packaging-note',
            'label'    => 'توضیحات بسته‌بندی',
            'location' => 'order',
            'type'     => 'text',
            'required' => false,
        )
    );
} );

در این کد، id شناسه یکتای فیلد است و باید از نام‌فضا و نام فیلد تشکیل شود که با علامت / از یکدیگر جدا شده‌اند. مقدار order در ویژگی location مشخص می‌کند فیلد در بخش اطلاعات سفارش نمایش داده شود. مقدار واردشده در فیلدهای این بخش همراه سفارش ذخیره می‌شود و در اطلاعات حساب مشتری ذخیره نخواهد شد. همچنین بررسی function_exists() باعث می‌شود اگر تابع موردنظر در نسخه نصب‌شده ووکامرس وجود نداشت، کد آن را فراخوانی نکند.

این روش برای افزودن فیلد سفارشی به صفحه پرداخت بلوکی است و جایگزین مستقیمی برای فیلتر کلاسیک woocommerce_checkout_fields محسوب نمی‌شود. برای تغییر فیلدهای پیش‌فرض Checkout Block، ابتدا باید امکانات تنظیمات خود بلوک را بررسی کنید.

نکات ضروری پیش از اجرای کدهای صفحه پرداخت

پیش از افزودن کدهای سفارشی به ووکامرس، باید محل قرارگیری کد، امکان بازیابی سایت و عملکرد صحیح فرایند خرید را بررسی کنید. برای جلوگیری از بروز مشکل، نکات زیر را در نظر بگیرید:

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

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

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

حفظ اطلاعات ضروری سفارش

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

کاهش پیچیدگی فرم

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

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

بررسی نمایش فرم در موبایل

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

حفظ سازگاری با درگاه پرداخت و حمل‌ونقل

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

آزمایش کامل فرایند خرید

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

جمع‌بندی

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

قبل از حذف، تغییر یا افزودن هر فیلد، ابتدا مشخص کنید فروشگاه از Checkout Block یا Checkout کلاسیک استفاده می‌کند، زیرا ابزارها، هوک‌ها و روش‌های قابل استفاده در این دو ساختار یکسان نیستند. همچنین لازم است اطلاعات موردنیاز برای ارسال سفارش، محاسبه هزینه‌ها، صدور فاکتور و پردازش پرداخت حفظ شوند.

در نهایت، هر تغییری را ابتدا در محیط آزمایشی بررسی کنید و با ثبت یک سفارش واقعیِ آزمایشی، عملکرد فرم، نمایش در موبایل، روش‌های ارسال، درگاه پرداخت و ذخیره صحیح اطلاعات سفارش را تست کنید.