제품 페이지에 양식을 추가하는 방법 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 Checkout 오류 메시지를 변경하는 방법
  3. WooCommerce 맞춤형 단일 제품 생성 페이지
  4. WooCommerce Storefront 테마 제품 페이지 전체 너비를 설정하는 방법
  5. WooCommerce에서 상태 변경에 대해 이메일을 보내는 방법
  6. 결제 페이지에서 주문 ID를 얻는 방법 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 양식 플러그인 » 최고의 WordPress 양식 플러그인
  19. WooCommerce Buy One Get One 설정 방법
  20. 플러그인을 사용하지 않고 WordPress에서 로그인 페이지를 만드는 방법