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

سفارشی کردن تجربه پرداخت روی فروشگاه WooCommerce شما می تواند به کاهش نرخ رها شدن سبد خرید کمک کند، مشتریان را تشویق کند تا خریدهای خود را تکمیل کنند و حتی آنها را ترغیب به خرج کردن بیشتر کند.

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

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

WooCommerce یکی از محبوب ترین افزونه های وردپرس تجارت الکترونیک در بازار است. بسیاری از ویژگی های داخلی را برای راه اندازی یک سایت تجارت الکترونیک بدون کدنویسی ارائه می دهد.

با این حال، پرداخت پیش فرض page ممکن است کاملاً با نیازهای منحصر به فرد و هویت برند تجارت الکترونیک شما هماهنگ نباشد. با سفارشی کردن پرداخت استاندارد WooCommerce page، تو می توانی:

افزایش تجربه کاربری

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

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

افزایش نرخ تبدیل

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

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

افزایش میانگین ارزش سفارش (AOV)

وارسی page سفارشی سازی به شما امکان می دهد استراتژی هایی را برای فروش متقابل و افزایش فروش پیاده سازی کنید.

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

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

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

خوشبختانه، هاستینگerمیزبانی WooCommerce دارای یک ابزار مرحله‌بندی داخلی وردپرس است که می‌توانید از طریق hPanel راه‌اندازی کنید:

1. سر به وب سایت ها در نوار بالا و انتخاب کنید مدیریت کنید در کنار نام دامنه شما
2. در منوی سمت چپ، به وردپرس → صحنه سازی.
3. کلیک مرحله بندی ایجاد کنید برای راه اندازی سایت استیجینگ خود

اگر با WooCommerce یا به طور کلی وردپرس تازه کار هستید، استفاده از یک افزونه باعث تسویه حساب می شود page سفارشی سازی process بسیار ساده تر.

در اینجا چندین پلاگین قیف فروش و پرداخت وجود دارد page سازندگان سازگار با ووکامرس:

• FunnelKit Builder. قالب‌ها و فرم‌های تسویه‌حساب آماده را دریافت کنید که می‌توانید با استفاده از ویرایشگر بلوک گوتنبرگ یا شخص ثالث ویرایش کنید. page سازندگان می‌توانید بلوک‌ها، تصاویر، متون و فیلدهای سفارشی مخصوص نیازهای خود را اضافه کنید.

• CartFlows. یکی از بهترین افزونه‌های WooCommerce برای بهینه‌سازی جریان پرداخت، CartFlows process اضافه کردن پیشنهادهای فروش و شخصی سازی WooCommerce متشکرم page.

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

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

ایجاد یک صفحه پرداخت سفارشی با FunnelKit Builder

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

1. داشبورد وردپرس خود را باز کنید، به پلاگین ها → افزودن پلاگین جدید، و جستجو کنید FunnelKit Builder.

2. پس از نصب و فعال سازی افزونه، به ادامه مطلب بروید FunnelKit داشبورد روی نوار کناری سمت چپ

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

FunnelKit Builder به شما امکان می دهد از ابتدا یک قیف فروش ایجاد کنید یا از یک پرداخت از پیش ساخته شده WooCommerce استفاده کنید. page قالب. اگر گزینه دوم را ترجیح می دهید، کلیک کنید خرید فروشگاه را ایجاد کنید و از بین طیف گسترده ای از الگوهای قیف انتخاب کنید.

برای جستجوی هدفمندتر، فیلترها را بر اساس تغییر دهید روی پرداخت page انواع و page سازگاری سازنده – Elementor، Divi، Block Editor، Oxygen یا سایر موارد.

توجه داشته باشید که نسخه رایگان فقط یکpage وارسی process. برای ایجاد یک تسویه حساب چند مرحله ای page، باید به عنوان یک کاربر حرفه ای ثبت نام کنید.

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

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

برای تنظیم پرداخت خود pageطرح‌بندی و محتوا، روی آن کلیک کنید پیش نمایش دکمه داخل وارسی جعبه

از آنجا، انتخاب کنید تسویه حساب را ویرایش کنید در نوار منوی بالا، و رابط گوتنبرگ باز خواهد شد.

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

به عنوان مثال، می توانید لوگوی فروشگاه WooCommerce خود را با کلیک کردن روی لوگوی پیش فرض و انتخاب آپلود کنید جایگزین کردن. سپس، یک تصویر را از کتابخانه رسانه وردپرس انتخاب کنید یا یک تصویر جدید را از رایانه خود آپلود کنید.

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

برای سفارشی کردن خود pageطراحی، انتخاب کنید فرم پرداخت container و سر به سبک روی منوی سمت راست در اینجا، می توانید با گزینه های مختلف ویرایش بازی کنید:

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

هنگامی که همه چیز خوب به نظر می رسد، فراموش نکنید که کلیک کنید انتشار یا به روز رسانی برای ذخیره تغییرات شما

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

همچنین می توانید طرح بندی فرم حمل و نقل را با انتخاب گزینه سفارشی کنید فرم پرداخت ووکامرس مسدود کردن و پیمایش به عمومی → اطلاعات حمل و نقل روی نوار کناری سمت راست

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

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

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

برای افزودن تسویه حساب جدید page فیلدها را تشکیل دهید، به سادگی آنها را از قسمت بکشید زمینه های منو روی نوار کناری سمت راست به بخش دلخواه شما.

متأسفانه، برای اضافه کردن فیلدهای ممتاز، باید طرح حرفه ای FunnelKit Builder را خریداری کنید محصولات و سفارش مجموع.

اگر می خواهید روش ظاهر شدن ستون ها را ترتیب دهید روی هر بخش، روی هر قسمتی کلیک کنید و نگه دارید و آن را در هر جایی که دوست دارید رها کنید. همچنین می‌توانید یک فیلد را با نگه داشتن نشانگر روی آن و کلیک کردن روی آن حذف کنید ایکس آیکون.

همچنین گزینه ای برای سفارشی کردن برچسب هر فیلد وجود دارد تا مشتریان بتوانند فرم را به درستی پر کنند و تسویه حساب خود را تکمیل کنند. process بدون هیچ گونه سردرگمی

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

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

سفارشی کردن فیلد کوپن WooCommerce در حین پرداخت

یکپارچه سازی فیلد کوپن روی تسویه حساب شما page می تواند به مشتریان تخفیف بدهد و تبدیل را تشویق کند.

برای افزودن فیلد کوپن، به ویرایشگر گوتنبرگ بروید و آن را انتخاب کنید فرم پرداخت container. در نوار کناری سمت راست، به عمومی → خلاصه سفارش تاشوو سپس تغییر دهید روی را فعال کردن دکمه.

به پایین بروید متن دکمه کوپنو یک فراخوان کوتاه برای اقدام وارد کنید – مقدار پیش فرض است درخواست دادن. مطمئن شوید که کوپن را فعال کنید دکمه تغییر می کند روی.

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

افزودن محصولات به صفحه پرداخت

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

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

اگر به نسخه حرفه ای ارتقا دهید، FunnelKit همچنین امکان ایجاد پیشنهادهای فروش با یک کلیک را برای افزایش فروش شما ارائه می دهد. برای انجام این کار، روی نماد برگشت (←).. زیر مراحل، انتخاب کنید با یک کلیک Upsell و یک قالب مناسب انتخاب کنید.

برای بهبود تجربه کاربری، محصولات و فرم پرداخت را نمایش دهید روی همان page با استفاده از افزونه هایی مانند پرداخت یک صفحه و طرح بندی برای WooCommerce.

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

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

اما اگر می خواهید گزینه های پرداخت بیشتری را ارائه دهید، افزونه هایی مانند درگاه پرداخت ووکامرس استریپ می تواند این ترفند را انجام دهد. علاوه بر ارائه دهندگان اصلی کارت اعتباری و نقدی مانند Visa، MasterCard، UnionPay و American Express، این افزونه از Google Pay و Apple Pay نیز پشتیبانی می کند.

متأسفانه، اگر عمدتاً از طریق PayPal پرداخت می کنید، باید جداگانه نصب کنید پرداخت های پی پال ووکامرس افزونه

برای راه اندازی Stripe برای وردپرس، به این آدرس بروید پلاگین ها → افزودن پلاگین جدید و وارد شوید درگاه پرداخت ووکامرس استریپ در قسمت جستجو پس از یافتن، کلیک کنید الآن نصب کن، چند ثانیه صبر کنید و افزونه را فعال کنید.

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

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

برای راه اندازی تسویه حساب تازه ایجاد شده خود page، به عقب برگردید FunnelKit → تسویه حساب فروشگاه، روی نماد سه نقطه داخل کادر Checkout کلیک کنید و انتخاب کنید انتشار.

خودشه؛ شما با موفقیت یک تسویه حساب سفارشی ایجاد و منتشر کرده اید page. هنگامی که کاربران روی سبد خرید خود کلیک می کنند باید به طور خودکار ظاهر شود.

برای بررسی مجدد، مرورگر خود را باز کنید و از وب سایت وردپرس خود بازدید کنید تا ببینید آیا پرداخت سفارشی WooCommerce انجام می شود یا خیر page به درستی نمایش داده می شود.

اگر سایت تجارت الکترونیک شما همچنان طرح پیش‌فرض ووکامرس را نشان می‌دهد، این مراحل را دنبال کنید:

1. داشبورد وردپرس خود را باز کنید و به آن بروید ووکامرس → تنظیمات.
2. انتخاب پیشرفته را بزنید و به پایین بروید صفحه پرداخت.
3. منوی کشویی را باز کنید، پرداخت سفارشی خود را وارد کنید page URL، و به درستی اختصاص دهید page.
4. کلیک ذخیره تغییرات.

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

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

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

می توانید فیلدهای سفارشی را به پرداخت سفارشی WooCommerce خود اضافه کنید page با ویرایش تم خود functions.php فایل.

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

به فایل های سایت وردپرس خود دسترسی داشته باشید. می توانید از یک سرویس گیرنده FTP مانند FileZilla یا مدیر فایل حساب میزبانی خود استفاده کنید. اگر شما یک هاستینگer کاربر، به سادگی این مراحل را دنبال کنید:

1. وارد حساب hPanel خود شوید، به این آدرس بروید وب سایت ها، و کلیک کنید مدیریت کنید در کنار نام دامنه شما
2. در منوی سمت چپ، به پایین بروید فایل ها → مدیر فایل و انتخاب کنید دسترسی به فایل های (دامنه شما).
3. باز کن public_html → wp-content → تم ها، و موضوعی را که در حال حاضر استفاده می کنید پیدا کنید.
4. پیدا کنید و کلیک راست کنید روی را functions.php فایل، سپس انتخاب کنید ویرایش کنید.
5. یک تابع PHP بنویسید که حاوی کدی است که می‌خواهید در پایین فایل اجرا کنید. استفاده کنید add_action() برای پیوست کردن تابع سفارشی خود

به عنوان مثال، برای افزودن یک فیلد جدید، از:

add_action('woocommerce_after_order_notes', 'your_custom_function');

در داخل تابع سفارشی، استفاده کنید woocommerce_form_field برای اضافه کردن فیلد پس از آن، نوع را مشخص کنید، مانند متن، چک باکس، کلاس، برچسب، مکان نگهدار، و وضعیت مورد نیاز:

function your_custom_function($checkout) {
    echo '<div id="your_custom_div">';
    woocommerce_form_field('your_custom_field', array(
        'type'          => 'text',
        'class'         => array('your-custom-class form-row-wide'),
        'label'         => __('Your Custom Field'),
        'placeholder'   => __('Enter something'),
        'required'      => true,
    ), $checkout->get_value('your_custom_field'));
    echo '</div>';
}

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

add_filter('woocommerce_checkout_fields', 'custom_remove_fields');
function custom_remove_fields($fields) {
    unset($fields['billing']['billing_phone']);
    return $fields;
}

اصلاح فیلدهای موجود نیز با woocommerce_checkout_fields فیلتر کنید. می‌توانید ویژگی‌هایی مانند برچسب، کلاس یا نوع فیلدهای موجود را تغییر دهید.

در اینجا یک مثال است:

add_filter('woocommerce_checkout_fields', 'custom_modify_fields');
function custom_modify_fields($fields) {
    $fields['billing']['billing_first_name']['label'] = 'New Label';
    $fields['billing']['billing_first_name']['required'] = false;
    return $fields;
}

برای ذخیره داده های فیلدهای سفارشی خود هنگام سفارش، از woocommerce_checkout_update_order_meta عمل hook:

add_action('woocommerce_checkout_update_order_meta', 'save_custom_field_data');
function save_custom_field_data($order_id) {
    if (!empty($_POST['your_custom_field'])) {
        update_post_meta($order_id, 'Your Custom Field', sanitize_text_field($_POST['your_custom_field']));
    }
}

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

Cascading Style Sheets (CSS) یکی از محبوب ترین زبان ها برای تنظیم دقیق ظاهر سایت WooCommerce شما است. با آن می‌توانید عناصر بصری را تنظیم کنید، از جمله تغییر رنگ پس‌زمینه فیلدها و گردتر کردن گوشه‌های آنها.

به سادگی با رفتن به CSS customizer در وردپرس دسترسی داشته باشید ظاهر → شخصی سازی. در سفارشی ساز تم، پیدا کن CSS اضافی بخش روی منوی سمت چپ اینجا جایی است که می توانید کد CSS سفارشی خود را بنویسید یا جایگذاری کنید.

برای سفارشی کردن عناصر خاص روی پرداخت page، باید انتخابگرهای CSS آنها را با بازرسی بشناسید page عناصر. اگر از Google Chrome استفاده می کنید، کلیک راست کنید روی هر عنصر روی پرداخت page و انتخاب کنید بازرسی کنید. با این کار ابزارهای توسعه دهنده باز می شود و ساختار HTML انتخاب شده برجسته می شود.

ماوس را روی قسمت‌های مختلف HTML نگه دارید تا قسمت مربوطه را پیدا کنید page. ابزارهای توسعه دهنده انتخابگرهای CSS را برای این عناصر به شما نشان می دهند.

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

.woocommerce-checkout #place_order {
    background-color: #000; /* Change #000 to your desired color */
    color: #fff; /* Change the text color if needed */
}

می توانید تغییرات مشابهی را برای عناصر دیگر مانند فیلدهای فرم، برچسب ها، سرصفحه ها و موارد دیگر ایجاد کنید.

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

استفاده از اکشن هوک ووکامرس

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

به عنوان مثال، می توانید از اکشن هوک برای اضافه کردن آرم کارت اعتباری استفاده کنید روی تسویه حساب یا سبد خرید pageکه برای بهبود اعتماد کاربران و کاهش رها شدن سبد خرید مفید است.

نام این قلاب ها معمولاً خود توضیحی است و نشان می دهد که کجاست hook اجازه درج کد را می دهد. نمونه های رایج اکشن هوک ووکامرس عبارتند از:

woocommerce_before_cart 
woocommerce_checkout_before_customer_details 
woocommerce_after_main_content

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

برای اضافه کردن یک عنصر، می توانید از add_action عملکرد در تم شما functions.php فایل. به عنوان مثال، برای افزودن یک پیام قبل از فرم ارسال، قطعه زیر را وارد کنید:

add_action( 'woocommerce_before_checkout_shipping_form', function() {
    echo 'Your custom message or HTML here';
});

این کد هر محتوایی را که در آن قرار می دهید درج می کند echo بیانیه ای که طی آن woocommerce_before_checkout_shipping_form hook اجرا می شود.

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

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

از طرف دیگر، یک افزونه مدیریت قطعه کد مانند Code Snippets را نصب کنید. با این روش می توان هر قطعه کد را به صورت جداگانه مدیریت کرد.

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

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

مشکلات رایج صفحه پرداخت WooCommerce

برای حفظ یک تجربه مشتری روان، درک پرداخت رایج WooCommerce page خطاها و روش حل آنها بسیار مهم است.

در این بخش به طور خلاصه در مورد پرداخت اصلی صحبت خواهیم کرد page خطاهایی که اغلب رخ می دهد:

روش های پرداخت نمایش داده نمی شود

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

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

مشکلات تضاد پلاگین

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

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

مشکلات کارکردی تم

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

زمان بارگذاری آهسته

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

برای جلوگیری از این امر، مطمئن شوید که یک ارائه دهنده میزبان ووکامرس قابل اعتماد انتخاب کنید. هاستینگerمیزبانی WooCommerce از یک سرور LiteSpeed ​​با عملکرد سریع و ویژگی‌های بهینه‌سازی سرعت، از جمله کش کردن شی برای وردپرس استفاده می‌کند. ابزار ذخیره اشیاء ما پرس و جوهای تکراری پایگاه داده را حذف می کند و باعث می شود فروشگاه تجارت الکترونیک شما تا سه برابر سریعتر عمل کند.

نتیجه

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

همانطور که گفته شد، پرداخت پیش فرض WooCommerce page طراحی ممکن است بهترین طراحی و تجربه کاربری را ارائه نکند. با سفارشی کردن پرداخت پیش فرض WooCommerce page، می توانید یک خرید یکپارچه و دلپذیر ایجاد کنید و نرخ تبدیل خود را افزایش دهید.

در این آموزش روش ایجاد یک پرداخت سفارشی ووکامرس را توضیح داده ایم page با استفاده از افزونه هایی مانند FunnelKit Builder یا با ویرایش کد.

امیدواریم این آموزش راهنمایی های لازم را در اختیار شما قرار داده باشد روی روش سفارشی کردن پرداخت ووکامرس page طرح ها. در تجارت آنلاین خود موفق باشید!

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

پاسخ سوالات متداول در مورد پرداخت WooCommerce را بیابید page سفارشی سازی