如何將表單添加到產品頁面 WooCommerce

已發表: 2021-07-21

WooCommerce 將表單添加到產品頁面 您想在產品頁面上添加自定義表單嗎？ 請繼續閱讀，因為這篇文章旨在為您提供解決方案。

WooCommerce 繼續為許多商店提供支持，因為它可以靈活定制。 例如，您可能希望向產品頁面添加一些額外信息。 實現這一點的最佳方法是向產品添加自定義字段。

自定義字段也稱為項目元。 它們也可以顯示在購物車頁面、結帳頁面和電子郵件中。 購物車項目元是將在額外產品字段中收集的信息添加到購物車中的產品並可以為訂單保存。

因此，我們需要一個將自定義數據字段添加到產品頁面並將此信息添加到購物車項目元數據的解決方案。 之後，收集的數據會顯示在購物車、結帳和訂單詳細信息上。

但是，WooCommerce 沒有用於添加此功能的內置解決方案。 這意味著我們需要創建一個自定義代碼片段來實現這一點。 僅當您希望對您的網站進行重大更改時，我們才推薦插件。

WooCommerce 將表單添加到產品頁面

在今天的教程中，我們將分享一個我們創建的自定義代碼片段，用於添加包含兩個字段的表單。 我們將創建一個名稱和消息字段，並將字段數據顯示為購物車項目元數據和訂單項目元數據。 這意味著它將在整個訂單週期中顯示。

在我們繼續之前，我們建議安裝或創建一個子主題。 這是因為我們將修改一些核心文件。 子主題將確保更新期間更改不會丟失。

讓我們直接進入它。

向 WooCommerce 產品頁面添加表單的步驟

以下是您需要遵循的步驟：

  1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
  2. 從儀表板菜單中，單擊外觀菜單 > 主題編輯器菜單。 打開主題編輯器頁面後，查找主題函數文件以添加將表單添加到 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'] );
	}
}
  1. 這是產品頁面上的結果： 產品頁面
  2. 這是購物車頁面上的結果： 自定義消息
  3. 這是結帳頁面上的結果： 結帳頁面
  4. 這是訂單詳情頁面上的結果： 訂單詳細信息
  5. 這是編輯訂單頁面上的結果： 編輯頁面

包起來

在今天的教程中，我們分享了一個自定義解決方案，用於在產品頁面上添加表單。 正如我們在這篇文章中所展示的，收集的詳細信息將出現在整個訂單詳細信息中。

但是，在編輯 WooCommerce 商店的核心文件時應該非常小心。 如果您犯了任何錯誤，將顯示錯誤。

我們希望此解決方案能幫助您了解訂單週期的工作原理。

類似文章

  1. 如何從 Shopify 遷移到 WooCommerce
  2. 如何更改 WooCommerce 結帳錯誤消息
  3. WooCommerce 創建自定義單個產品頁面
  4. 如何設置 WooCommerce 店面主題產品頁面全寬
  5. 如何在 WooCommerce 中發送有關狀態更改的電子郵件
  6. 如何在結帳頁面 WooCommerce 上獲取訂單 ID
  7. 如何更改優惠券代碼佔位符 WooCommerce
  8. 如何在頁麵店面主題頂部添加搜索框
  9. 如何添加自定義產品字段 WooCommerce
  10. 如何在 WooCommerce 訂單頁面上添加新列
  11. 如何在購物車頁面上添加 WooCommerce 運費計算器
  12. 如何向 WooCommerce 產品添加自定義分類
  13. 如何為 WooCommerce 產品添加星級
  14. 如果可以免費送貨，如何隱藏運費 WooCommerce
  15. 如何翻譯 WooCommerce 結帳頁面
  16. 如何訪問 WooCommerce 數據庫
  17. 如何獲取當前產品 WooCommerce
  18. 前 30 多個最佳 WordPress 表單插件 » 最佳 WordPress 表單插件
  19. 如何設置 WooCommerce 買一送一
  20. 如何在不使用插件的情況下在 WordPress 中創建登錄頁面