سفارشی کردن صفحه پرداخت:با ویجت جدید Checkout در Elementor Pro، اکنون می توانید صفحه پرداخت خود را با استفاده از رابط بصری و گزینه های بدون کد Elementor به طور کامل سفارشی کنید. این ویجت در کنار ویجت های Elementor Cart و My Account کار می کند تا به شما کمک کند تا تمام صفحات کلیدی فروشگاه خود را طراحی کنید. نحوه استفاده از آن را قدم به قدم یاد بگیرید.
به دنبال ساده ترین راه برای سفارشی کردن صفحه پرداخت WooCommerce هستید؟
در گذشته، برای طراحی صفحه پرداخت باید به موضوع WooCommerce خود اعتماد کنید. یا، ممکن است با CSS سفارشی یا افزونه پرداخت شخص ثالث WooCommerce رفته باشید.
اما با ویجت جدید Checkout در Elementor Pro ، اکنون می توانید صفحه پرداخت خود را با استفاده از رابط بصری و گزینه های بدون کد Elementor به طور کامل سفارشی کنید. این ویجت در کنار ویجت های Elementor Cart و My Account کار می کند تا به شما کمک کند تا تمام صفحات کلیدی فروشگاه خود را طراحی کنید.
در این آموزش، شما می خواهید یاد بگیرید که چگونه از ویجت Checkout Elementor Pro برای سفارشی کردن و بهینه سازی صفحه پرداخت فروشگاه خود بدون نیاز به ترک Elementor استفاده کنید.
سپس، ما همچنین نکات بیشتری را در مورد نحوه استفاده از قلاب‌های اقدام WooCommerce برای سفارشی‌سازی بیشتر صفحه پرداخت به اشتراک می‌گذاریم.
در حالی که اگر از ویجت Checkout Elementor Pro استفاده می‌کنید، نیازی به استفاده از کد ندارید، اگر می‌خواهید محتوای سفارشی را به صفحه پرداخت خود اضافه کنید، مانند مجموعه‌ای از نشان‌های اعتماد که در زیر کارت اعتباری ظاهر می‌شوند، این قلاب‌های اقدام می‌توانند مفید باشند. زمینه های.
اگر ترجیح می دهید یک فیلم آموزشی را تماشا کنید، می توانید ویدیوی بالا را در مورد نحوه استفاده از ویجت Elementor Checkout تماشا کنید.
در غیر این صورت، به خواندن آموزش کامل مبتنی بر متن که موازی با ویدیو است، و همچنین برخی نکات اضافی در مورد استفاده از قلاب‌های اکشن WooCommerce که در ویدیو به آنها اشاره نکردیم، ادامه دهید.
ویجت Elementor Pro Checkout چگونه کار می کند؟
صفحه پرداخت WooCommerce صفحه ای است که خریداران با وارد کردن آدرس، اطلاعات تماس، اطلاعات صورتحساب و غیره، سفارشات خود را نهایی می کنند.
این یک صفحه ضروری برای هر فروشگاهی است، بنابراین مهم است که آن را برای تبدیل بهینه کنید و آن را تا حد امکان کاربر پسند کنید.
با ویجت Elementor Checkout، می توانید به طور کامل صفحه پرداخت فروشگاه خود را مستقیماً از Elementor شخصی سازی کنید. این به شما کمک می کند تا یک طراحی سازگار با بقیه فروشگاه خود ایجاد کنید و جزئیات کلیدی صفحه خود را بهینه کنید.
شما می توانید رنگ ها و تایپوگرافی را تغییر دهید، فاصله را تنظیم کنید، بخش و متن فرم را تغییر دهید و موارد دیگر. می‌توانید تغییراتی را در سطح تسویه‌حساب ایجاد کنید یا می‌توانید گزینه‌های دانه‌بندی را برای اعمال سبک‌های مختلف در بخش‌های خاصی از پرداخت خود فعال کنید.
برای مثال، اگر می‌خواهید توجه را به قسمت کوپن جلب کنید، می‌توانید رنگ‌های خاص، حاشیه، و غیره اضافه کنید – همه با کد صفر مورد نیاز است.
چگونه صفحه پرداخت WooCommerce را با Elementor سفارشی کنیم
اکنون، بیایید به یک راهنمای دقیق برای نحوه استفاده از ویجت Checkout در Elementor Pro برای سفارشی کردن صفحه پرداخت فروشگاه خود برویم.
باز هم، اگر ترجیح می دهید این آموزش را به صورت ویدیویی مشاهده کنید، می توانید آن را در بالا تماشا کنید. هر دو آموزش حاوی اطلاعات یکسانی هستند.
1. صفحه سبد خرید پیش فرض فروشگاه خود را در المنتور ویرایش کنید
هنگامی که یک فروشگاه WooCommerce ایجاد می کنید، WooCommerce به طور خودکار یک صفحه پرداخت برای فروشگاه شما ایجاد می کند که از کد کوتاه پرداخت WooCommerce استفاده می کند .
در این آموزش می توانید از همان صفحه برای سادگی استفاده کنید. فقط به جای تکیه بر کد کوتاه WooCommerce، صفحه را در Elementor ویرایش کرده و ویجت Checkout را اضافه می کنید.
برای شروع، به لیست صفحات در داشبورد وردپرس خود بروید و صفحه پرداخت را پیدا کنید. WooCommerce به طور خودکار آن را با یک شناسه که عبارت “صفحه پرداخت” را نشان می دهد.
هنگامی که صفحه صحیح را پیدا کردید، روی دکمه ویرایش کلیک کنید تا ویرایشگر وردپرس باز شود.
هنگامی که وارد ویرایشگر شدید، روی دکمه Edit With Elementor کلیک کنید تا Elementor برای این صفحه فعال شود و ویرایشگر Elementor راه اندازی شود.
2. شورت کد WooCommerce Checkout را با ویجت Elementor Checkout جایگزین کنید
وقتی صفحه سبد خرید پیش فرض را در المنتور باز می کنید، باید یک طرح بسیار ساده را ببینید. تنها عناصر موجود در صفحه، کد کوتاه
برای استفاده از Elementor برای کنترل پرداخت خود، ابتدا باید ویجت/کد کوتاه موجود را حذف کنید:
سپس، ویجت Elementor Checkout را در جای خود اضافه کنید. هنگامی که ویجت Checkout را اضافه کردید، یک پیش نمایش زنده از صفحه پرداخت را مستقیماً در ویرایشگر خواهید دید.
توجه – از آنجایی که ویرایشگر Elementor یک پیش‌نمایش بصری به شما ارائه می‌دهد که کاملاً با آنچه بازدیدکنندگان وب‌سایت شما می‌بینند مطابقت دارد، می‌خواهید مواردی را به سبد خرید خود اضافه کنید تا بتوانید ببینید که فرآیند پرداخت واقعی چگونه به نظر می‌رسد. تمام کاری که باید انجام دهید اینجاست:
- به جلوی فروشگاه خود بروید.
- چند مورد را به سبد خرید خود اضافه کنید.
- رابط Elementor را دوباره بارگیری کنید.
هنگامی که Elementor را مجدداً بارگیری می‌کنید، این موارد باید در خلاصه تسویه‌حساب ظاهر شوند، در حالی که روی طراحی خود کار می‌کنید.
3. تنظیمات عمومی صفحه پرداخت خود را سفارشی کنید
اکنون زمان شروع سفارشی سازی است.
برای شروع، تنظیمات ویجت Checkout را در نوار کناری Elementor باز کنید.
بیایید ابتدا تمام تنظیمات موجود در برگه محتوای ویجت را مرور کنیم.
عمومی – طرح بندی یک ستونی یا دو ستونی
ابتدا، می توانید از قسمت تنظیمات عمومی برای انتخاب بین طرح بندی تک ستونی یا دو ستونی برای صفحه پرداخت خود استفاده کنید.
اگر طرح دو ستونی را انتخاب کنید، می توانید ستون سمت راست را نیز چسبناک کنید. اگر ستون سمت راست چسبنده را فعال کنید، یک گزینه اضافی برای اضافه کردن یک افست دریافت می کنید که به شما کمک می کند از همپوشانی هدر خود با ستون جلوگیری کنید.
جزئیات صورتحساب و حمل و نقل
بخش جزئیات صورتحساب و ارسال به شما امکان می‌دهد جزئیات صورتحساب و فرم حمل و نقل را سفارشی کنید.
اگر جزئیات صورتحساب و ارسال را در تنظیمات WooCommerce یکسان تنظیم کنید، این فیلدها را با هم خواهید دید. با رفتن به WooCommerce → Settings → Shipping و انتخاب Force Shipping to the Custom Billing address می توانید این کار را فعال کنید . در غیر این صورت، آنها را جداگانه خواهید دید.
ابتدا می توانید عنوان بخش و تراز را برای این بخش تنظیم کنید.
سپس، می‌توانید تنظیمات را برای هر فیلد جداگانه باز کنید تا برچسب‌ها و مکان‌ها را سفارشی کنید.
اطلاعات تکمیلی
بخش اطلاعات اضافی به شما امکان می دهد این قسمت از صفحه پرداخت را سفارشی کنید. به‌طور پیش‌فرض، اینجا جایی است که خریداران می‌توانند یادداشت‌های سفارش ویژه را بگذارند، اگرچه ممکن است بسته به تنظیمات فروشگاه خود جزئیات بیشتری را مشاهده کنید.
همانند سایر بخش‌های صفحه پرداخت خود، می‌توانید تراز و برچسب‌های این بخش را سفارشی کنید.
یا، همچنین می‌توانید این بخش را از صفحه پرداخت مخفی کنید، که اگر خریداران نیازی به گذاشتن یادداشت‌های سفارشی نداشته باشند، ممکن است مفید باشد.
سفارش شما
تنظیمات « سفارش شما » به شما امکان می‌دهد قسمت خلاصه سفارش را سفارشی کنید. اگر از طرح دو ستونی استفاده می کنید، این بخش در بالای ستون سمت راست ظاهر می شود. در یک طرح تک ستونی، در زیر جزئیات صورتحساب و حمل و نقل ظاهر می شود.
کوپن
تنظیمات کوپن همچنین به شما امکان می دهد عنوان و تراز بخش کوپن را سفارشی کنید. با این حال، گزینه ای برای سفارشی کردن متن پیوند برای اعمال کد کوپن نیز دریافت می کنید. این می تواند به شما کمک کند تا برای خریدارانی که از کوپن استفاده می کنند، تجربه ای بهینه تر و کاربرپسندتر ایجاد کنید.
پرداخت
تنظیمات پرداخت به شما امکان می دهد تراز دکمه خرید را تغییر دهید و همچنین پیام شرایط و ضوابط و متن پیوند را سفارشی کنید.
برای مشاهده پیام شرایط و ضوابط، باید صفحه شرایط و ضوابط را در تنظیمات WooCommerce خود تنظیم کنید. برای ساده کردن کارها، می توانید این صفحه را بدون خروج از Elementor انتخاب کنید:
- روی نماد منوی همبرگر در گوشه سمت چپ بالای رابط Elementor کلیک کنید.
- تنظیمات سایت را انتخاب کنید .
- WooCommerce را انتخاب کنید .
- از قسمت شرایط و ضوابط برای جستجو و انتخاب صفحه مناسب برای شرایط و ضوابط خود استفاده کنید.
مشتری برگشتی
اگر در تنظیمات WooCommerce پرداخت مهمان را مجاز کنید، یک قسمت تنظیمات اضافی به نام مشتری بازگشتی نیز دریافت خواهید کرد که به شما امکان می‌دهد پیامی را سفارشی کنید که از مشتریان بازگشتی می‌خواهد به حساب‌های موجود خود وارد شوند.
4. تنظیمات سبک صفحه پرداخت خود را سفارشی کنید
در مرحله بعد، می‌توانید به برگه « سبک » در تنظیمات ویجت «Checkout» بروید تا سبک و طراحی صفحه پرداخت را سفارشی کنید، از جمله اینکه مطمئن شوید که با بقیه طراحی فروشگاه شما مطابقت دارد.
در اینجا گزینه های طراحی کلی وجود دارد که می توانید در قسمت های مختلف تنظیمات پیکربندی کنید…
بخش ها
در تنظیمات بخش ها، می توانید سبک کلی تمام بخش های مختلف پرداخت را کنترل کنید.
به عنوان مثال، اگر رنگ پس زمینه را تغییر دهید، روی پس زمینه تمام بخش ها تأثیر می گذارد. همچنین می توانید حاشیه و فاصله را در صورت نیاز تنظیم کنید.
تایپوگرافی
در تنظیمات تایپوگرافی ، می‌توانید رنگ‌ها و تایپوگرافی اکثر متن‌های موجود در صفحه پرداخت خود را سفارشی کنید، از جمله عناوین، عناوین ثانویه، توضیحات، پیام‌ها، دکمه‌های رادیویی، چک باکس‌ها و موارد دیگر.
یک بیت از تایپوگرافی که نمی‌توانید در اینجا سفارشی کنید، فرم‌هایتان است که از بخش بعدی انجام خواهید داد.
تشکیل می دهد
در تنظیمات فرم‌ها ، می‌توانید همه چیز را در مورد فرم‌های صفحه تسویه‌حساب و فیلدهای فرم کنترل کنید، که در درجه اول بر فیلدهای صورتحساب/ارسال و فرم کوپن تأثیر می‌گذارد.
می‌توانید شکاف ستون‌ها و ردیف‌ها را برای فیلدهای فرم مختلف تنظیم کنید. همچنین می‌توانید تایپوگرافی برچسب‌ها و فیلدها را سفارشی کنید، همچنین فاصله، حاشیه‌ها و پس‌زمینه‌ها را تنظیم کنید.
فراتر از آن، شما همچنین گزینه ای برای استایل دادن به دکمه کوپن دارید، درست مانند هر دکمه دیگری در سایت خود.
خلاصه سفارش
در Order Summary ، می‌توانید ردیف‌ها را کنترل کنید، که بر فاصله فهرست اقلام در سبد خرید تأثیر می‌گذارد.
شما همچنین می توانید رنگ ها و تایپوگرافی موارد مختلف خلاصه را کنترل کنید. برای مثال، می‌توانید از یک تنظیم تایپوگرافی برای موارد و تنظیم دیگری برای مجموع سفارش‌ها استفاده کنید.
دکمه خرید
در تنظیمات دکمه خرید ، می‌توانید دکمه خرید را به‌طور کامل سفارشی کنید، از جمله تایپوگرافی، رنگ‌ها، فاصله، حاشیه‌ها و موارد دیگر.
این احتمالاً مهمترین دکمه در صفحه پرداخت است، بنابراین باید مطمئن شوید که توجه شما را جلب می کند و با بقیه طراحی شما مطابقت دارد.
شخصی سازی
در نهایت، آیتم سفارشی‌سازی به شما امکان می‌دهد کنترل‌های استایل فردی را برای بخش‌های خاصی از صفحه پرداخت خود اضافه کنید. می توانید آنها را برای مناطق زیر اضافه کنید:
- جزئیات صورتحساب
- اطلاعات تکمیلی
- آدرس حمل و نقل
- خلاصه سفارش
- کوپن
- پرداخت
برای مثال، ممکن است بخواهید با افزودن یک حاشیه سفارشی، خلاصه سفارش را از بقیه صفحه پرداخت متمایز کنید.
شما می توانید این کار را با فعال کردن تنظیمات سفارشی برای منطقه خلاصه سفارش و پیکربندی آنها بر اساس ترجیحات خود انجام دهید.
5. پرداخت خود را برای خریداران موبایل تنظیم کنید
اکنون که سفارشی‌سازی صفحه پرداخت را برای کاربران دسکتاپ به پایان رساندید، باید به حالت واکنش‌گرا بروید تا ببینید آیا نیاز به انجام تنظیماتی برای بازدیدکنندگان موبایل یا تبلت دارید یا خیر.
مانند تمام طرح هایی که با Elementor ایجاد می کنید، طراحی صفحه پرداخت شما به طور پیش فرض پاسخگو است.
با این حال، می‌توانید از کنترل‌های موبایل Elementor نیز برای تنظیم طرح در صورت نیاز استفاده کنید. تنها کاری که باید انجام دهید این است که نماد دستگاه را در کنار تنظیماتی که می توان برای دستگاه های مختلف تغییر داد، جستجو کنید.
برای مثال، ممکن است بخواهید فاصله عناصر مختلف را برای طراحی موبایل خود کمی تنظیم کنید.
6. در صورت نیاز، تکالیف صفحات ووکامرس را در تنظیمات سایت تنظیم کنید
این مرحله آخر کاملاً اختیاری است، اما شایان ذکر است که می‌توانید تکالیف کلیدی صفحه WooCommerce را از قسمت تنظیمات سایت Elementor نیز کنترل کنید .
این می تواند مفید باشد اگر به جای استفاده از صفحه پیش فرضی که WooCommerce ایجاد کرده است، یک صفحه جدید برای صفحه پرداخت خود ایجاد کنید.
می توانید از تب WooCommerce در قسمت تنظیمات سایت معمولی به این گزینه ها دسترسی داشته باشید. گزینه WooCommerce را در قسمت تنظیمات پیدا خواهید کرد .
نحوه سفارشی کردن صفحه پرداخت ووکامرس با کد
برای سفارشی‌سازی‌های بیشتر در صفحه پرداخت WooCommerce، می‌توانید از کد استفاده کنید و از قلاب‌های عمل پرداخت متعدد WooCommerce استفاده کنید.
اگر می‌خواهید محتوای جدیدی را به صفحه پرداخت اضافه کنید، مانند درج نشان اعتماد در زیر دکمه پرداخت، می‌تواند مفید باشد.
نکته خوب در مورد این رویکرد این است که همچنان با ویجت Elementor Checkout کار می کند، که آن را به یک مکمل عالی برای Elementor برای تغییرات اضافی تبدیل می کند.
اکشن هوک‌های پرداخت ووکامرس چیست؟
قلاب های اکشن وردپرس اساساً به شما امکان می دهند از PHP برای تزریق محتوا در قسمت های مختلف صفحه پرداخت استفاده کنید. به عنوان مثال، می توانید یک پیام متنی جدید اضافه کنید، یک تصویر (شاید یک نشان اعتماد) و غیره اضافه کنید.
در مجموع، WooCommerce 16 قلاب عمل مختلف را برای صفحه پرداخت ارائه می دهد.
9 قلاب اول همیشه در دسترس هستند:
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing
- woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- woocommerce_checkout_after_order_review
- woocommerce_after_checkout_form
بسته به تنظیمات WooCommerce شما، هفت هوک آخر ممکن است موجود باشد یا نباشد. به عنوان مثال، اگر ثبت نام را در صفحه پرداخت فعال نکرده باشید، نمی توانید از اکشن هوک مربوط به فرم ثبت نام استفاده کنید:
- woocommerce_checkout_before_terms_and_conditions
- woocommerce_checkout_after_terms_and_conditions
- woocommerce_before_checkout_billing_form
- woocommerce_before_checkout_registration_form
- woocommerce_after_checkout_registration_form
- woocommerce_before_checkout_shipping_form
- woocommerce_after_checkout_shipping_form
برای درک اینکه این قلاب ها کجا محتوا را به صفحه پرداخت اضافه می کنند، Business Bloomer یک راهنمای تصویری عالی برای هر مکان دارد :
نحوه استفاده از WooCommerce Checkout Action Hooks
برای تزریق محتوا با اکشن هوک، باید یک قطعه کد را به فایل functions.php طرح زمینه فرزند خود یا از طریق افزونه‌ای مانند Code Snippets اضافه کنید.
از آنجایی که شما کدی را به سایت خود اضافه می کنید، توصیه می کنیم قبل از ادامه ، یک نسخه پشتیبان تهیه کنید و/یا ابتدا تغییرات را در یک سایت مرحله بندی آزمایش کنید .
ابتدا محل قلاب را انتخاب کنید که می خواهید محتوا را در آن اضافه کنید.
برای مثال، فرض کنید می‌خواهید مجموعه‌ای از نشان‌های اعتماد را در زیر دکمه «سفارش دهید» اضافه کنید. برای آن، از قلاب woocommerce_review_order_after_submit استفاده کنید.
سپس، یک قطعه کد مانند این اضافه کنید:
add_action( ‘action_name’, ‘your_function_name’ );
function your_function_name() {
// Your code
}به عنوان مثال، برای افزودن یک تصویر نشان اعتماد، کد ممکن است به شکل زیر باشد:
add_action( ‘woocommerce_review_order_after_submit’, ‘display_trust_badges’ );
function display_trust_badges() {
echo ‘<img src=”trust-badges.png” />’
;}در زیر، می‌توانید ببینید که نشان‌های اعتماد در زیر دکمه سفارش مکان ظاهر می‌شوند، حتی هنگام کار با ویجت Checkout در رابط Elementor:
چگونه صفحه پرداخت ووکامرس خود را تست کنید
قبل از ایجاد تغییرات در صفحه پرداخت خود، به شدت توصیه می کنیم همه چیز را آزمایش کنید تا مطمئن شوید مشکلی وجود ندارد. به هر حال، هر چیزی که با صفحه پرداخت فروشگاه شما تداخل داشته باشد، تأثیر منفی مستقیمی بر قیمت نهایی شما خواهد داشت.
بسیاری از روش‌های پرداخت WooCommerce شامل حالت‌های آزمایشی هستند که می‌توانید برای ارسال سفارش‌ها از آنها استفاده کنید. این در مورد پلاگین رسمی دروازه Stripe و پلاگین رسمی دروازه PayPal و همچنین پرداخت WooCommerce صادق است. همه پیوندهای جمله قبلی شما را به صفحه مستندسازی مناسب برای عملکرد آزمایشی آن دروازه می‌برد.
یا، همچنین می‌توانید از افزونه رایگان تست سفارش WC استفاده کنید ، که یک درگاه پرداخت جدید «Order Test» را اضافه می‌کند. می توانید این دروازه را با رفتن به WooCommerce → Settings → Payments راه اندازی کنید .
هنگامی که درگاه پرداخت آزمایشی را فعال کردید، می‌توانید برخی از سفارش‌های آزمایشی را ارسال کنید تا مطمئن شوید که تمام فیلدهای پرداخت کار می‌کنند و هیچ یک از تغییرات محتوا یا طراحی شما در فرآیند پرداخت تداخلی ندارد.
توصیه می کنیم هم روی دستگاه های دسکتاپ و هم در دستگاه های تلفن همراه تست کنید.
سفارشی کردن صفحات ووکامرس خود را با Elementor شروع کنید
با ویجت Checkout در Elementor Pro، اکنون می توانید صفحه پرداخت WooCommerce را با استفاده از طراحی بصری، کشیدن و رها کردن Elementor به طور کامل سفارشی کنید.
برای اکثر مردم، Elementor تنها چیزی است که نیاز دارید، زیرا به شما امکان می‌دهد رنگ‌ها، تایپوگرافی، متن، فاصله، حاشیه‌ها و موارد دیگر را سفارشی کنید.
اگر می‌خواهید حتی فراتر بروید و محتوای جدیدی را به صفحه پرداخت خود اضافه کنید، می‌توانید از قلاب‌های اکشن داخلی WooCommerce نیز استفاده کنید که کاملاً با ویجت Elementor Checkout سازگار است.
بهتر از همه، Elementor شما را به سفارشی کردن صفحه پرداخت محدود نمی کند.
Elementor WooCommerce Builder همچنین می‌تواند به شما کمک کند تا سایر بخش‌های فروشگاه خود را با استفاده از سازنده بصری، کشیدن و رها کردن Elementor سفارشی کنید. برای مثال، می‌توانید صفحه سبد خرید ووکامرس، صفحه تک محصول ووکامرس، صفحه حساب من ووکامرس و موارد دیگر را سفارشی کنید.