製品ページにフォームを追加する方法WooCommerce

公開: 2021-07-21

WooCommerce製品ページにフォームを追加 製品ページにカスタムフォームを追加しますか？ この投稿はあなたに解決策を提供することを目的としているので、読んでください。

WooCommerceは、カスタマイズに柔軟に対応できるため、引き続き多くの店舗に電力を供給しています。 たとえば、商品ページに情報を追加したい場合があります。 これを実装する最良の方法は、製品にカスタムフィールドを追加することです。

カスタムフィールドは、アイテムメタとも呼ばれます。 カートページ、チェックアウトページ、メールにも表示できます。 カートアイテムメタは、追加の商品フィールドで収集された情報がカート内の商品に追加され、注文のために保存できる場合です。

したがって、カスタムデータフィールドを商品ページに追加し、この情報をカートアイテムメタに追加するソリューションが必要です。 その後、収集されたデータはカート、チェックアウト、注文の詳細に表示されます。

ただし、WooCommerceには、この機能を追加するための組み込みソリューションがありません。 これは、これを実現するためにカスタムコードスニペットを作成する必要があることを意味します。 サイトに大きな変更が必要な場合にのみ、プラグインをお勧めします。

WooCommerce製品ページにフォームを追加

今日のチュートリアルでは、2つのフィールドを含むフォームを追加するために作成したカスタムコードスニペットを共有します。 名前とメッセージフィールドを作成し、フィールドデータをカートアイテムメタおよび注文アイテムメタとして表示します。 これは、注文サイクル全体で表示されることを意味します。

先に進む前に、子テーマをインストールまたは作成することをお勧めします。 これは、いくつかのコアファイルを変更するためです。 子テーマは、更新中に変更が失われないようにします。

さっそく始めましょう。

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. チェックアウトページで注文IDを取得する方法WooCommerce
  7. クーポンコードプレースホルダーWooCommerceを変更する方法
  8. ページ上部のストアフロントテーマに検索ボックスを追加する方法
  9. カスタム商品フィールドを追加する方法WooCommerce
  10. WooCommerceの注文ページに新しい列を追加する方法
  11. カートページにWooCommerceShippingCalculatorを追加する方法
  12. WooCommerce製品にカスタム分類法を追加する方法
  13. WooCommerce製品に星評価を追加する方法
  14. 送料無料が利用可能な場合に送料を非表示にする方法WooCommerce
  15. WooCommerceチェックアウトページを翻訳する方法
  16. WooCommerceデータベースにアクセスする方法
  17. 現在の製品を入手する方法WooCommerce
  18. トップ30以上の最高のWordPressフォームプラグイン»最高のWordPressフォームプラグイン
  19. WooCommerceの設定方法BuyOne Get One
  20. プラグインを使用せずにWordPressでログインページを作成する方法