كيفية إضافة نموذج إلى صفحة المنتج WooCommerce

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

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

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

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

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

WooCommerce إضافة نموذج إلى صفحة المنتج

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

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

دعونا ندخله مباشرة.

خطوات إضافة نموذج إلى صفحة منتج WooCommerce

فيما يلي الخطوات التي يجب عليك اتباعها:

1. قم بتسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
2. من قائمة لوحة التحكم ، انقر فوق قائمة المظهر> قائمة محرر السمات . عند فتح صفحة Theme Editor ، ابحث عن ملف وظائف النسق لإضافة وظيفة لإضافة نموذج إلى صفحة منتج WooCommerce .
3. أضف الكود التالي إلى ملف php :

add_action( 'woocommerce_before_add_to_cart_button', 'njengah_fields_before_add_to_cart' );
function njengah_fields_before_add_to_cart( ) {
	?>
	<table>
		<tr>
			<td>
				<?php _e( "Name:", "aoim"); ?>
			</td>
			<td>
				<input type = "text" name = "customer_name" id = "customer_name" placeholder = "Name on Gift Card">
			</td>
		</tr>
		<tr>
			<td>
				<?php _e( "Message:", "aoim"); ?>
			</td>
			<td>
				<input type = "text" name = "customer_message" id = "customer_message" placeholder = "Your Message on Gift Card">
			</td>
		</tr>
	</table>
	<?php
}
/**
 * Add data to cart item
 */
add_filter( 'woocommerce_add_cart_item_data', 'njengah_cart_item_data', 25, 2 );
function njengah_cart_item_data( $cart_item_meta, $product_id ) {
	if ( isset( $_POST ['customer_name'] ) && isset( $_POST ['customer_message'] ) ) {
		$custom_data  = array() ;
		$custom_data [ 'customer_name' ]    = isset( $_POST ['customer_name'] ) ?  sanitize_text_field ( $_POST ['customer_name'] ) : "" ;
		$custom_data [ 'customer_message' ] = isset( $_POST ['customer_message'] ) ? sanitize_text_field ( $_POST ['customer_message'] ): "" ;
		$cart_item_meta ['custom_data']     = $custom_data ;
	}
		return $cart_item_meta;
}
/**
 * Display the custom data on cart and checkout page
 */
add_filter( 'woocommerce_get_item_data', 'njengah_item_data' , 25, 2 );
function njengah_item_data ( $other_data, $cart_item ) {
	if ( isset( $cart_item [ 'custom_data' ] ) ) {
		$custom_data  = $cart_item [ 'custom_data' ];
				$other_data[] =   array( 'name' => 'Name',
					 'display'  => $custom_data['customer_name'] );
		$other_data[] =   array( 'name' => 'Message',
					 'display'  => $custom_data['customer_message'] );
	}
		return $other_data;
}
/**
 * Add order item meta
 */
add_action( 'woocommerce_add_order_item_meta', 'njengah_order_item_meta' , 10, 2);
function njengah_order_item_meta ( $item_id, $values ) {
	if ( isset( $values [ 'custom_data' ] ) ) {
		$custom_data  = $values [ 'custom_data' ];
		wc_add_order_item_meta( $item_id, 'Name', $custom_data['customer_name'] );
		wc_add_order_item_meta( $item_id, 'Message', $custom_data['customer_message'] );
	}
}

4. هذه هي النتيجة على صفحة المنتج:
5. هذه هي النتيجة على صفحة عربة التسوق:
6. هذه هي النتيجة على صفحة الخروج:
7. هذه هي النتيجة في صفحة تفاصيل الطلب:
8. هذه هي النتيجة في صفحة تعديل الطلب:

تغليف

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

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

نأمل أن يساعدك هذا الحل في فهم كيفية عمل دورة الطلب.

مقالات مماثلة

1. كيفية الهجرة من Shopify إلى WooCommerce
2. كيفية تغيير رسائل خطأ WooCommerce Checkout
3. WooCommerce إنشاء صفحة منتج فردية مخصصة
4. كيفية تعيين WooCommerce Storefront لصفحة المنتج بالعرض الكامل
5. كيفية إرسال بريد إلكتروني عند تغيير الحالة في WooCommerce
6. كيفية الحصول على معرف الطلب على صفحة الخروج WooCommerce
7. كيفية تغيير WooCommerce لرمز الكوبون
8. كيفية إضافة مربع البحث في أعلى الصفحة موضوع واجهة المتجر
9. كيفية إضافة WooCommerce حقول المنتج المخصصة
10. كيفية إضافة عمود جديد في صفحة طلبات WooCommerce
11. كيفية إضافة حاسبة الشحن WooCommerce في صفحة عربة التسوق
12. كيفية إضافة تصنيف مخصص إلى منتجات WooCommerce
13. كيفية إضافة تصنيف النجوم لمنتج WooCommerce
14. كيفية إخفاء أسعار الشحن إذا توفر الشحن المجاني WooCommerce
15. كيفية ترجمة صفحة الخروج من WooCommerce
16. كيفية الوصول إلى قاعدة بيانات WooCommerce
17. كيفية الحصول على منتج WooCommerce الحالي
18. أعلى 30+ أفضل ملحقات WordPress Form »أفضل مكون إضافي لنموذج WordPress
19. كيفية إعداد WooCommerce اشترِ واحدًا واحصل على الآخر
20. كيفية إنشاء صفحة تسجيل الدخول في WordPress بدون استخدام البرنامج المساعد