วิธีเพิ่มแบบฟอร์มในหน้าผลิตภัณฑ์ 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 แบบเต็มความกว้าง
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. ปลั๊กอินฟอร์ม WordPress ที่ดีที่สุด 30 อันดับแรก » ปลั๊กอินฟอร์ม WordPress ที่ดีที่สุด
19. วิธีการตั้งค่า WooCommerce ซื้อหนึ่งแถมหนึ่ง
20. วิธีสร้างหน้าเข้าสู่ระบบใน WordPress โดยไม่ต้องใช้ปลั๊กอิน