كيفية تخصيص WooCommerce شكرا لك صفحة مع الكود

أهم جانب في صفحة الشكر الناجحة هو التأكد من رؤية الناس لها. لا تحتاج إلى أي شيء خيالي أو معقد. إنه يحتاج فقط إلى ترك انطباع أول جيد من خلال التميز عن باقي الموقع.

الغرض من هذه المقالة هو تزويدك ببرنامج تعليمي عام حول كيفية تخصيص صفحة WooCommerce شكرًا لك أو صفحة الطلب المستلمة باستخدام التعليمات البرمجية.

لماذا تخصيص صفحة WooCommerce شكرًا لك؟

تمنحك صفحة الشكر طريقة للبقاء على اتصال مع عملائك بعد الشراء.

قد تتجاهل أهمية تأكيد الطلب أو صفحة الشكر في متجرك عبر الإنترنت ، لكنها في الواقع جزء مهم من عملية البيع.

صفحة WooCommerce الافتراضية لشكرك مملة وطريق مسدود للعملاء. العملاء في حيرة من أمرهم بشأن الخطوة التالية.

بدلاً من ذلك ، إذا قمت بتخصيصه ، يمكنك:

• أضف إرشادات الإعداد ، والخطوات التالية ...
• الترويج للمنتجات ذات الصلة عن طريق البيع العابر والبيع الإضافي
• استخدم القسائم لتشجيع عمليات الشراء المتكررة
• توفير موارد قيمة للعملاء
• اجذب العملاء بإثبات اجتماعي ومقاطع فيديو وما إلى ذلك.

في ضوء ذلك ، دعنا نرى كيف يمكننا بسهولة إنشاء وتخصيص صفحة شكر مخصصة باستخدام التعليمات البرمجية. أعزائي المطورين ، كل العيون هنا!

قم بتخصيص WooCommerce ، صفحة شكرًا لك بالشفرة

هناك ثلاث طرق لتخصيص صفحة الشكر أو صفحة الطلب المستلمة باستخدام الكود:

1. إنشاء إعادة توجيه
2. استخدام المرشحات
3. الكتابة فوق ملفات القوالب

أيضًا ، احتفظ بهذا المنشور حول إضافة رمز بأمان إلى الملف مفتوحًا في علامة تبويب أخرى للرجوع إليها.

دعونا نرى كل طريقة من الطرق الثلاث بالتفصيل.

تخصيص صفحة الشكر عن طريق إنشاء إعادة توجيه

من السهل إجراء إعادة التوجيه عن طريق إنشاء مكون إضافي جديد أو فتح ملف function.php وإدخال الكود التالي في نهاية الملف.

add_action ('template_redirect'، 'sa_custom_redirect_after_purchase') ؛
الوظيفة sa_custom_redirect_after_purchase () {
	العالمية $ wp؛
	إذا (is_checkout () &&! فارغ ($ wp-> query_vars ['تم استلام الطلب'])) {
		wp_redirect ('https://demo.storeapps.org/woocommerce/thank-you/') ؛
		خروج؛
	}
}

ها هي صفحة الشكر المخصصة بعد تقديم الطلب.

تبدو إعادة التوجيه جيدة ، ولكن هذا يفتقد إلى أشياء مهمة مثل جدول ملخص الطلب وتفاصيل الفوترة والشحن والمعلومات المهمة الأخرى التي يوفرها WooCommerce حاليًا.

تخصيص صفحة الشكر باستخدام المرشحات

بدلاً من إنشاء صفحة شكر ، قد ترغب في تغيير عنوان الصفحة أو تغيير بعض النص قبل معلومات الطلب. في مثل هذه الحالات ، يمكنك استخدام المرشحات.

تغيير عنوان صفحة الشكر

add_filter ('the_title'، 'sa_title_order_received'، 10، 2)؛
الوظيفة sa_title_order_received ($ title، $ id) {
	إذا (function_exists ('is_order_received_page') && is_order_received_page () && get_the_ID () === $ id) {
		$ title = "شكرًا لك على طلبك :)" ؛
	}
	عودة $ title؛
}

يوفر WooCommerce الوظيفة is_order_received_page() في ملف include / wc-conditional-function.php. هذه هي الطريقة التي سيظهر بها العنوان الذي تم تغييره:

إضفاء الطابع الشخصي على عنوان صفحة الشكر

يمكنك القيام بذلك لتضمين اسم العميل في العنوان أو أي شيء آخر.

add_filter ('the_title'، 'sa_personalize_order_received_title'، 10، 2)؛
الوظيفة sa_personalize_order_received_title ($ title، $ id) {
	إذا (is_order_received_page () && get_the_ID () === $ id) {
		العالمية $ wp؛

		// احصل على الطلب. الأسطر التالية موجودة في order_received () في ملف include / shortcodes / class-wc-shortcode-checkout.php
		$ order_id = apply_filters ('woocommerce_thankyou_order_id'، absint ($ wp-> query_vars ['تم استلام الطلب'])) ؛
		$ order_key = application_filters ('woocommerce_thankyou_order_key' ، فارغ ($ _GET ['key'])؟ ': wc_clean ($ _GET [' key '])) ؛

		إذا ($ order_id> 0) {
			الطلب بالدولار = wc_get_order ($ order_id) ؛
			if (! $ order ||! hash_equals ($ order-> get_order_key ()، $ order_key)) {
				الطلب بالدولار = خطأ ؛
			}
		}
		إذا (طلب مثيل من WC_Order بالدولار) {
			$ title = sprintf ("أنت رائع ،٪ s!"، esc_html ($ order-> get_billing_first_name ()))؛
		}
	}
	عودة $ title؛
}

سيبدو هذا كالتالي:

تخصيص النص قبل معلومات الطلب

النص الافتراضي المعروض قبل معلومات الطلب هو "شكرًا لك. تم استلام طلبك.".

يأتي هذا النص من قوالب الملف / checkout / thankyou.php. يمكنك تغيير هذا النص باستخدام عوامل التصفية المتوفرة في WooCommerce وهي woocommerce_thankyou_order_received_text .

add_filter ('woocommerce_thankyou_order_received_text'، 'sa_update_order_received_text'، 10، 2) ؛
الوظيفة sa_update_order_received_text ($ text، $ order) {
	$ text. = 'لقد أرسلنا إليك إيصال الطلب بالبريد الإلكتروني.'؛
	إرجاع نص $؛
}

سيُلحق هذا الرمز النص "لقد أرسلنا إليك إيصال الطلب عبر البريد الإلكتروني". إلى النص الموجود.

إذا كنت تريد استبدال النص بالكامل ، فأنت بحاجة إلى تجنب تسلسل متغير text $ .

 $ text = 'لقد أرسلنا لك إيصال الشراء بالبريد الإلكتروني.'؛

إذا كنت ترغب في إضافة التعليمات هنا التي تتطلب من العميل تنزيل نموذج ، فيمكنك القيام بذلك أيضًا.

add_filter ('woocommerce_thankyou_order_received_text'، 'sa_change_order_received_text'، 10، 2) ؛
الوظيفة sa_change_order_received_text ($ text، $ order) {
	$ text = 'لقد أرسلنا إليك إيصال الشراء عبر البريد الإلكتروني. يرجى التأكد من ملء <a href="https://demo.storeapps.org/form.pdf"> هذا النموذج قبل حضور الحدث. '؛
	إرجاع نص $؛
}

سيبدو هذا كالتالي:

تخصيص صفحة الشكر عن طريق الكتابة فوق ملفات قالب WooCommerce

يعرض WooCommerce محتويات صفحة شكرًا لك من ملف قالب thankyou.php الذي يمكن العثور عليه في مجلد woocommerce / قوالب / checkout /.

ستحتاج إلى بعض المعرفة بلغة PHP إذا كنت ترغب في اختيار هذه الطريقة لتخصيص صفحة WooCommerce شكرًا لك.

يمكنك استخدام القالب الخاص بك عن طريق نسخ ملف thankyou.php إلى مجلد السمة الخاصة بك في بنية مجلد مماثلة.

على سبيل المثال ، إذا كنت تستخدم سمة واجهة المتجر ، فيجب نسخ thankyou.php الخاص بك إلى:
wp-content/themes/storefront/woocommerce/checkout/ folder. ستحتاج إلى إنشاء المجلدين ، "woocommerce" و "checkout".

عندما يجد WooCommerce أن نفس القالب موجود في قالبك الخاص ، يتم إعطاء الأولوية للقالب الموجود في قالبك.

لنأخذ مثالا. في صفحة شكرًا الافتراضية ، تظهر طريقة الدفع في البداية وفي تفاصيل الطلب.

نريد تقديم رمز قسيمة للعميل لعملية الشراء التالية وإزالة طريقة الدفع من القسم العلوي.

يوجد أدناه نموذج thankyou.php:

<؟ php
إذا (! المعرفة ("أبسبات")) {
	خروج؛
}
؟>
 
<div class = "woocommerce-order">
 
	<؟ php if ($ order):؟>

		<؟ php if ($ order-> has_status ('فشل')):؟>

			<p class = "woocommerce-note woocommerce-إشعار - خطأ woocommerce-thankyou-order-failed"> <؟ php _e ('للأسف لا يمكن معالجة طلبك لأن البنك / التاجر الأصلي قد رفض معاملتك. يُرجى محاولة الشراء مرة أخرى. '،' woocommerce ') ؛ ؟> </p>
 
			<p class = "woocommerce-note woocommerce-إشعار - خطأ woocommerce-thankyou-order-failure-Actions">
				<a href="<؟php echo esc_url( $order-> get_checkout_payment_url ())؛؟> "class =" button pay "> <؟ php _e ('Pay'، 'woocommerce')؟>
				<؟ php if (is_user_logged_in ()):؟>
					<a href="<؟php echo esc_url( wc_get_page_permalink('myaccount'))؛ ؟> "class =" button pay "> <؟ php _e ('My account'، 'woocommerce')؛ ؟>
				<؟ php endif؛ ؟>
			</p>

		<؟ php else:؟>
 
			<p class = "woocommerce-إشعار woocommerce-إشعار - نجاح woocommerce-thankyou-order-Received"> <؟ php echo application_filters ('woocommerce_thankyou_order_received_text'، __ ('شكرًا لك. لقد تم استلام طلبك. لقد أرسلنا إليك بالبريد الإلكتروني إيصال طلب هذه المعاملة. '،' woocommerce ')، $ order)؛ ؟> </p>
 
			<ul class = "woocommerce-order-Overview woocommerce-thankyou-order-details order_details">
 				<li class = "woocommerce-order-Overview__order order">
					<؟ php _e ('معرّف المعاملة:'، 'woocommerce')؛ ؟>
					<strong> <؟ php echo $ order-> get_order_number ()؛ ؟> </strong>
				</li>
 
				<li class = "woocommerce-order-Overview__date date">
					<؟ php _e ('Date:'، 'woocommerce')؛ ؟>
					<strong> <؟ php echo date_i18n (get_option ('date_format')، $ order-> get_date_created ()) ؛ ؟> </strong>
				</li>
 
				<li class = "woocommerce-order-Overview__total total">
					<؟ php _e ('Total:'، 'woocommerce')؛ ؟>
					<strong> <؟ php echo $ order-> get_formatted_order_total ()؛ ؟> </strong>
				</li>
			</ul>

		<؟ php endif؛ ؟>

		<p> تهانينا على طلبك الأول. هنا خصم 15٪ على طلبك القادم. استخدم رمز القسيمة <strong> WELCOME15 </strong> للاستفادة من الخصم. </ p>

		<؟ php do_action ('woocommerce_thankyou_'. $ order-> get_payment_method ()، $ order-> get_id ())؛ ؟>
		<؟ php do_action ('woocommerce_thankyou'، $ order-> get_id ())؛ ؟>
 
	<؟ php else:؟>
 
		<p class = "woocommerce-إشعار woocommerce-إشعار - نجاح woocommerce-thankyou-order-Received"> <؟ php echo application_filters ('woocommerce_thankyou_order_received_text'، __ ('شكرًا لك. تم استلام طلبك.'، 'woocommerce' )، لا شيء )؛ ؟> </p>
 
	<؟ php endif؛ ؟>
 
</div>

قد ترغب في تغيير البيانات الموضحة في جدول تفاصيل الطلب وتفاصيل العميل (عند تسجيل الدخول).

هؤلاء قادمون من ملف آخر. يستخدم WooCommerce دالة woocommerce_order_details_table() مرفقة woocommerce_thankyou hook .

يتم تعريف الوظيفة woocommerce_order_details_table () في ملف include / wc-template-function.php.

صفحة الشكر عبارة عن مجموعة من أربعة ملفات نماذج مختلفة:

1. قوالب / الخروج / thankyou.php
2. القوالب / الطلب / Order-details.php
3. القوالب / الطلب / Order-details-item.php
4. القوالب / الطلب / Order-details-customer.php

بمجرد معرفة البيانات التي تأتي من أي قالب ، تحتاج فقط إلى نسخ القالب الصحيح إلى مجلد السمة الخاص بك وهذا كل شيء.

الآن ، دعنا نرى كيفية تخصيص صفحة WooCommerce شكرًا لك على تنوع المنتج.

كيف يتم إعادة التوجيه إلى صفحة شكر مخصصة بناءً على معرف الاختلاف باستخدام الخطاف؟

add_action ('woocommerce_thankyou'، 'sa_redirect_product_attribute_based'، 10، 1) ؛ 
الوظيفة sa_redirect_product_attribute_based ($ order_id) {
	الطلب بالدولار = wc_get_order ($ order_id) ؛
	إذا (طلب مثيل من WC_Order بالدولار) {
		foreach ($ order-> get_items () كـ $ item) {
			// أضف معرّف الاختلاف الذي تريده أدناه هنا
			إذا (! فارغ ($ item ['variation_id']) && 446 == $ item ['variation_id']) {
				// قم بالتغيير أدناه إلى عنوان URL الذي تريد إرسال العميل إليه
				wp_redirect ('https://demo.storeapps.org/custom-thank-you/') ؛
			}
		}
	}
}

طباعة نص على صفحة الشكر على أساس سمة المنتج

لتوسيع المثال أعلاه ، يمكنك أيضًا عرض أي نص مخصص على صفحة WooCommerce شكرًا لك استنادًا إلى معرف التباين. هذا هو الكود الخاص بها:

add_action ('woocommerce_thankyou'، 'sa_show_custom_text_by_variation_id'، 10، 1) ؛ 
الوظيفة sa_show_custom_text_by_variation_id ($ order_id) {
	الطلب بالدولار = wc_get_order ($ order_id) ؛
	إذا (طلب مثيل من WC_Order بالدولار) {
		foreach ($ order-> get_items () كـ $ item) {
			// أضف معرّف الاختلاف الذي تريده أدناه هنا. صفاتي هي اللون والحجم
			إذا (! فارغ ($ item ['variation_id']) && 446 == $ item ['variation_id']) {
				echo '<p> لا تتردد في التواصل معنا في حال كنت ترغب في استبدال التيشيرت بمقاس مختلف. </ p>'؛
			}
		}
	}
}

عند إضافة الشفرة ، ستبدو صفحة شكرًا كما يلي:

هذا عدد كبير جدًا من مقتطفات التعليمات البرمجية هنا. إذا لم تكن مهتمًا بالبرمجة وتريد حلاً سهلاً ، فاقرأ أدناه لاكتشاف مكون إضافي قوي.

كيفية إعداد صفحة شكر مخصصة لكل منتج وعلى مستوى الموقع باستخدام مكون إضافي؟

يتضمن تخصيص صفحة الشكر الكثير من العناصر. يبدو الأمر كذلك ليس بهذه السهولة. خطأ صغير ترتكبه أثناء إضافة مقتطف الشفرة وكل شيء يسير على ما يرام.

لذلك ، إذا كنت ترغب في التركيز أكثر على مبيعاتك وتسويقك وتنقذ نفسك من متاعب الترميز ، فنحن نقترح استخدام صفحة الشكر المخصصة للمكوِّن الإضافي WooCommerce.

يساعدك على إعداد صفحة شكر مخصصة لكل منتج وكذلك على مستوى الموقع. سنضيف دعمًا لنوع المنتج قريبًا.

تتيح لك صفحة الشكر التي تم تحسينها باستخدام هذا المكون الإضافي زيادة البيع (باستخدام العروض الذكية) ، وإنشاء قائمة بريد إلكتروني ، والترويج لعروضك ، وجمع التعليقات ، وإظهار رسالة فيديو ، وكوبونات ، والقيام بأشياء أخرى.

ستتحول صفحة WooCommerce الافتراضية الخاصة بك إلى أداة تسويق قوية مثل هذه:

المزيد من ميزات البرنامج المساعد :

• أربعة قوالب جاهزة للصفحات جاهزة للتحويل العالي لمساعدتك على البدء في إحداث ضجة.
• إعادة توجيه المستخدمين بعد الشراء / الدفع إلى الروابط التابعة أو روابط الجهات الخارجية أو الموارد.
• يمنحك فرصة لبناء صفحة الشكر وفقًا للموضوع المفضل لديك والمكونات الإضافية ومحرري الصفحة وتصميم الصفحة بالطريقة التي تريدها.

جرب العرض المباشر

الكلمات الأخيرة

نأمل أن تساعدك هذه المقالة على فهم أهمية تخصيص صفحة شكر مخصصة جنبًا إلى جنب مع فهم جيد لكيفية القيام بذلك عبر رمز ومكوِّن إضافي.

يمكن أن يكون استخدام هذه الصفحة الصغيرة فرصة ممتازة لزيادة المبيعات ، بغض النظر عن مدى طبيعتها التي قد تبدو لنا.