WooCommerce: كيفية تخصيص الخروج للتحويلات

تشرفت بالتحدث في WCEU 2020 بفضل WooCommerce ، الذي استضافني في مسار الراعي. كان حديثًا قصيرًا ورائعًا في اليوم الأول (الجمعة) ، بعنوان " تخصيص WooCommerce Checkout لتحسين التحويلات " ، تلته جلسة ترميز مباشرة يوم السبت.

إليك تسجيل الفيديو للحديث الخفيف ، بالإضافة إلى بعض مقتطفات PHP و CSS التي يمكنك نسخها / لصقها لتحسين WooCommerce Checkout وتوقع على الفور زيادة في معدل التحويل. لذا ، استمتع بالفيديو ثم اذهب واختبر المقتطفات التي تجدها أدناه!

فيديو: تخصيص WooCommerce Checkout لتحسين التحويلات

تعد WooCommerce Checkout أهم صفحة في موقع الويب الخاص بك. مما يعني أنه يجب عليك تحسينه.

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

يرجى ملاحظة أن هناك ترجمات متاحة. ما عليك سوى النقر فوق الزر "CC" في الجزء السفلي الأيمن من مشغل الفيديو.

10 مقتطفات من تحسين معدل التحويل في PHP و CSS WooCommerce Checkout

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

1. قم بإزالة الرأس والشريط الجانبي والتذييل حتى لا يكون هناك أي انحرافات ويركز العميل بشكل كامل على العبارة الوحيدة المتبقية التي تحث المستخدم على اتخاذ إجراء - الزر "الدفع"
2. انقل ملخص الطلب واختيار طريقة الشحن والدفع إلى الجانب الأيمن بحيث يكون مرئيًا دائمًا
3. قم بتقسيم المخطط الطويل المصنوع من الفواتير والشحن وملاحظات الطلب ونموذج القسيمة وما إلى ذلك في خطوات مرئية
4. انقل نموذج القسيمة إلى أسفل لتجنب الاحتيال في القسيمة
5. احتفظ بنموذج الشحن دائمًا "مفتوحًا" لأن هذا هو القسم الأكثر أهمية في B2C
6. انقل نموذج الفاتورة أسفل نموذج الشحن
7. إزالة حقول الفواتير / الشحن غير الضرورية ؛ كلما زاد عدد الحقول انخفض معدل التحويل الخاص بك!
8. اجعل اختيار طريقة الشحن أكثر بروزًا ، لأن التخطيط الافتراضي رديء جدًا
9. أضف رابط "تعديل عربة التسوق" حتى يتمكن المستخدمون من العودة إلى صفحة سلة التسوق وتعديل طلباتهم
10. أضف شارات الأمان / الهاتف / الأسئلة الشائعة للسماح للعميل بالثقة في عملك على الإنترنت

لكن قبل البرمجة ، دعنا نلقي نظرة على مجموعة الأدوات.

الموضوع : لقد استخدمت موضوع WooCommerce الرسمي ، واجهة المتجر. يأتي هذا بالفعل مع بعض تخصيصات CSS المدمجة للخروج. يمكن أن يكون Shoptimizer من الأشياء المفضلة الأخرى الخاصة بي ، وهو موضوع مصمم لسرعة WooCommerce والتحويلات. على أي حال ، نظرًا لأن أحد المقتطفات يتعلق بإزالة الرأس والتذييل من صفحة الخروج ، فقد استخدمت دليل الخطاف المرئي لموضوع Storefront الخاص بي ، لذلك أعرف أي الخطافات يجب استخدامها.

الخطافات : علاوة على استخدام دليل الخطاف المرئي الخاص بي لواجهة المتجر ، نحتاج أيضًا إلى معرفة جميع خطاطيف WooCommerce Checkout. يعد دليل WooCommerce Visual Hook لصفحة الخروج مثاليًا لما نحتاج إليه.

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

1. PHP Snippet: قم بإزالة الرأس والشريط الجانبي والتذييل @ WooCommerce Checkout Page

هذا المقتطف صالح لموضوع واجهة المتجر فقط . سوف تحتاج إلى تعديل الكود لموضوعك المخصص.

/**
 * @snippet       Storefront Theme Remove Header Footer @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp', 'bbloomer_unhook_storefront_functions' );

function bbloomer_unhook_storefront_functions() {
	if ( is_checkout() ) {
		remove_all_actions( 'storefront_header' );
		remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
		remove_action( 'storefront_footer', 'storefront_footer_widgets', 10 );
	}
}

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

هذا يعني أننا نحتاج أيضًا إلى القليل من CSS لإصلاح ذلك:

@media (min-width: 768px) {
	.woocommerce-checkout.right-sidebar .content-area {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}

هل تحتاج إلى دليل مرئي؟ انقر هنا لعرض تخصيص صفحة WooCommerce Checkout "قبل" و "بعد" لقطات الشاشة.

2. مقتطف CSS: انقل مراجعة الطلب إلى أعلى اليمين في صفحة الخروج من WooCommerce @

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

بالطبع ، معظم السمات لا تفعل ذلك افتراضيًا. للإلهام ، يمكنك محاولة نسخ CSS الخاص بـ Storefront (قد تحتاج إلى تغيير بعض المحددات):

@media (min-width: 768px) {

	/* Billing & Shipping @ Left */

	.col2-set {
		width: 52.9411764706%;
		float: left;
		margin-right: 5.8823529412%;
	}

	/* Order Review @ Right */

	#order_review_heading, #order_review {
		width: 41.1764705882%;
		float: right;
		margin-right: 0;
		clear: right;
	}

}

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

لقد جربت CSS التالية ولكن للأسف لا يبدو أنها تعمل (موضوع واجهة المتجر). هل يمكنك المساعدة ربما؟

#order_review {
    position: sticky;
    top: 0;
}

هل تحتاج إلى دليل مرئي؟ انقر هنا لعرض تخصيص صفحة WooCommerce Checkout "قبل" و "بعد" لقطات الشاشة.

3. PHP Snippet: انقل نموذج القسيمة إلى أسفل صفحة الخروج من @ WooCommerce

يمكننا استخدام دليل الخطاف المرئي للخروج لهذا الغرض. أولاً ، نزيله ، ثم نقرأه في الأسفل.

/**
 * @snippet       Move Coupon @ Checkout Bottom
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

هل تحتاج إلى دليل مرئي؟ انقر هنا لعرض تخصيص صفحة WooCommerce Checkout "قبل" و "بعد" لقطات الشاشة.

4. PHP Snippet: احتفظ بنموذج الشحن دائمًا "مفتوحًا" @ WooCommerce Checkout Page

لحسن الحظ ، إذا نظرت إلى ملف قالب form-shipping.php ، فإن WooCommerce يعطينا مرشحًا هنا:

apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 )

مما يعني أنه يمكنني الآن ترميز مقتطف PHP بسيط لتجاوز هذا السلوك:

/**
 * @snippet       Shipping Always Open @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_ship_to_different_address_checked', 'bbloomer_open_shipping_checkout' );

function bbloomer_open_shipping_checkout() {
	return 1;
}

هل تحتاج إلى دليل مرئي؟ انقر هنا لعرض تخصيص صفحة WooCommerce Checkout "قبل" و "بعد" لقطات الشاشة.

5. CSS Snippet: انقل نموذج الفوترة أسفل نموذج الشحن @ WooCommerce Checkout Page

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

.col2-set .col-1, .col2-set .col-2 {
	float:none;
	width: 100%
	margin: 0;
}

بمجرد حصولك على الفوترة والشحن واحدة فوق الأخرى ، نريد الآن تمييز نموذج الشحن أولاً (أعلى) ونموذج الفوترة بعد (أسفل). يمكن القيام بذلك باستخدام PHP ، ولكن هناك طريقة أكثر إتقانًا لإنجازه: CSS flex .

.col2-set {
    display: flex;
    flex-direction: column;
}

.col2-set > .col-1 {
	order: 2; 
}

.col2-set > .col-2 {
	order: 1; 
}

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

هل تحتاج إلى دليل مرئي؟ انقر هنا لعرض تخصيص صفحة WooCommerce Checkout "قبل" و "بعد" لقطات الشاشة.

6. PHP Snippet: قم بتقسيم المخطط الطويل المصنوع من الفواتير والشحن ومراجعة الطلب إلى خطوات مرئية @ WooCommerce Checkout Page

هنا نستخدم دليل الخطاف المرئي مرة أخرى ، ونطبع 3 أقسام جديدة في مواضع محددة (فوق الشحن ، فوق الفواتير ، مراجعة الطلب أعلاه).

/**
 * @snippet       Add Visual Steps @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_shipping', 'bbloomer_checkout_step1' );

function bbloomer_checkout_step1() {
	echo '<p class="steps">STEP1</p>';
}

add_action( 'woocommerce_checkout_billing', 'bbloomer_checkout_step2' );

function bbloomer_checkout_step2() {
	echo '<p class="steps">STEP2</p>';
}

add_action( 'woocommerce_checkout_before_order_review_heading', 'bbloomer_checkout_step3' );

function bbloomer_checkout_step3() {
	echo '<p class="steps">STEP3</p>';
}

بالطبع نحتاج أيضًا إلى بعض CSS:

.steps {
	background: black;
	color: white;
	display: inline-block;
	padding: 0.5em 2em;
}

هل تحتاج إلى دليل مرئي؟ انقر هنا لعرض تخصيص صفحة WooCommerce Checkout "قبل" و "بعد" لقطات الشاشة.

7. مقتطف PHP: قم بإزالة حقول الفوترة / الشحن غير الضرورية على صفحة الخروج من WooCommerce

هنا ، يأتي مرجع التوثيق الذي شاركته أعلاه للإنقاذ. يسمح لنا عامل التصفية " woocommerce_checkout_fields " "بإلغاء تعيين" الحقول التي لا نحتاج إليها.

/**
 * @snippet       Remove Ship/Bill Fields @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
	
     unset( 
		 $fields['order']['order_comments'], 
		 $fields['shipping']['shipping_company'],
		 $fields['shipping']['shipping_address_2'],
		 $fields['billing']['billing_company'],
		 $fields['billing']['billing_address_2'],
		 $fields['billing']['billing_postcode'],
		 $fields['billing']['billing_phone']
     );

     return $fields;
}

هل تحتاج إلى دليل مرئي؟ انقر هنا لعرض تخصيص صفحة WooCommerce Checkout "قبل" و "بعد" لقطات الشاشة.

8. PHP Snippet (فكرة): اجعل اختيار طريقة الشحن أكثر بروزًا @ WooCommerce Checkout Page

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

في نموذج الخروج "مراجعة الطلب" نجد PHP هذا:

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>

   <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>

   <?php wc_cart_totals_shipping_html(); ?>

   <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>

<?php endif; ?>

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

لسوء الحظ ، تستدعي هذه الوظيفة ملف قالب cart-shipping.php بفضل وظيفة wc_get_template () ؛ أقول لسوء الحظ لأنه يتم استخدام نفس النموذج أيضًا في صفحة سلة التسوق.

الآن ، أصبح هذا الأمر أكثر تعقيدًا مما كنت عليه ، ولكن إذا كنا نرغب في إخراج نموذج طريقة الشحن من جدول مراجعة الطلب ، فنحن نحتاج أساسًا إلى كتابة قالب مخصص أو امتلاكه (على سبيل المثال checkout-shipping.php) ، ضعه في / مجلد woocommerce لموضوعنا الفرعي ، ثم استخدم عامل التصفية wc_get_template لتحميل القالب البديل الخاص بنا على صفحة الخروج فقط. كندة معقدة ، لكنها قابلة للتنفيذ - سأترك الأمر لك

هل تحتاج إلى دليل مرئي؟ انقر هنا لعرض تخصيص صفحة WooCommerce Checkout "قبل" و "بعد" لقطات الشاشة.

9. PHP Snippet: أضف رابط "تعديل عربة التسوق" @ WooCommerce Checkout Page

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

يمكنك اختيار أي خطاف WooCommerce Checkout ، ولكن في هذه الحالة اخترت "woocommerce_checkout_before_order_review" ، والذي يقع أسفل عنوان "طلبك" مباشرةً.

/**
 * @snippet       Add edit cart link @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_checkout_before_order_review', 'bbloomer_edit_cart_checkout' );

function bbloomer_edit_cart_checkout() {
	echo '<a href="' . wc_get_cart_url() . '">Edit Cart</a>';
}

باستخدام القليل من CSS ، يمكنك أيضًا وضع هذا على نفس سطر "طلبك" وتوفير بعض المساحة.

هل تحتاج إلى دليل مرئي؟ انقر هنا لعرض تخصيص صفحة WooCommerce Checkout "قبل" و "بعد" لقطات الشاشة.

10. PHP Snippet: أضف رقم الهاتف @ WooCommerce Checkout Page

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

عادةً ما تضيف شارات دفع آمنة أو أسئلة وأجوبة أو روابط اتصال ، بالإضافة إلى وسيلة فورية للاتصال بك (الدردشة الحية ورقم الهاتف).

إذن ، هذه هي كيفية إضافة رقم هاتف أسفل زر "PLACE ORDER" في صفحة الخروج مباشرة.

/**
 * @snippet       Phone Number @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_review_order_after_submit', 'bloomer_phone_checkout_page' );

function bloomer_phone_checkout_page() {
	?>
	<p>Need help? Give us a call at <a href="tel:1123456789">+1 123456789</a></p>
	<?php
}

هل تحتاج إلى دليل مرئي؟ انقر هنا لعرض تخصيص صفحة WooCommerce Checkout "قبل" و "بعد" لقطات الشاشة.

تخصيص صفحة WooCommerce Checkout: لقطات شاشة "قبل" و "بعد"

قبل

بعد، بعدما