전문적인 WooCommerce 상점을 구축할 때, 기본 제공되는 제품 페이지 필드들은 종종 모든 비즈니스 요구사항을 충족시키지 못합니다. 예를 들어, 전자제품에는 “모델명”이나 “보증 기간”을, 의류에는 “소재 구성”이나 “세탁 방법”을 추가해야 할 수 있습니다. 이러한 경우에는 제품에 사용자 정의 필드와 메타데이터를 추가하는 것이 매우 중요합니다. 이를 통해 제품 정보를 보다 풍부하게 하고 사용자 경험을 향상시킬 수 있을 뿐만 아니라, 후속의 검색, 필터링, 고급 기능 개발을 위한 데이터 기반도 마련할 수 있습니다.
이 글에서는 WooCommerce에서 제품 사용자 정의 필드를 구현하는 몇 가지 핵심 방법에 대해 자세히 설명합니다. 가장 기본적인 코드 추가 방법부터 고급 플러그인을 활용하는 방법까지 다루며, 완전하고 실행 가능한 코드 예제도 제공합니다.
WooCommerce의 내장 액션 후크를 사용하여 필드를 추가하는 방법입니다.
WooCommerce는 다양한 액션 후크(Action Hooks)를 제공하여 개발자가 제품 데이터 패널의 특정 위치에 콘텐츠를 삽입할 수 있도록 해줍니다. 이는 가장 직접적이며, 원본 시스템에 미치는 영향이 가장 적은 방법입니다.
추천 읽기 워드프레스 사용자 정의 필드에 대한 심층 분석: 입문서부터 고급 애플리케이션 실습까지。
가장 자주 사용되는 훅(hook)은… woocommerce_product_options_general_product_data이것은 “일반 제품 데이터” 섹션에 필드를 추가하는 데 사용됩니다.
일반 제품 데이터 패널에 필드를 추가합니다.
다음 코드는 “단순 제품” 및 “가변 제품”의 일반 데이터 패널에 텍스트 입력 필드와 드롭다운 선택 목록을 추가하는 방법을 보여줍니다.
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' );
function add_custom_general_fields() {
global $post;
echo '<div class="options_group">';
// 文本字段示例：产品型号
woocommerce_wp_text_input(
array(
'id' => '_product_model',
'label' => __( '产品型号', 'woocommerce' ),
'placeholder' => '例如：X-2024Pro',
'desc_tip' => 'true',
'description' => __( '请输入此产品的具体型号。', 'woocommerce' ),
)
);
// 下拉选择框示例：保修期
woocommerce_wp_select(
array(
'id' => '_warranty_period',
'label' => __( '保修期', 'woocommerce' ),
'options' => array(
'' => __( '请选择...', 'woocommerce' ),
'1year' => __( '一年', 'woocommerce' ),
'2years' => __( '两年', 'woocommerce' ),
'lifetime'=> __( '终身保修', 'woocommerce' ),
),
'desc_tip' => 'true',
'description' => __( '请选择该产品提供的保修时长。', 'woocommerce' ),
)
);
echo '</div>';
}커스텀 필드의 값을 저장합니다.
단순히 백엔드에서 필드를 표시하는 것만으로는 충분하지 않습니다. 사용자가 입력한 값들을 제품의 메타데이터에 반드시 저장해야 합니다. 이를 위해서는… woocommerce_process_product_meta 이것은 저장을 위한 훅(hook)입니다.
add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' );
function save_custom_general_fields( $post_id ) {
// 保存产品型号字段
$product_model = isset( $_POST['_product_model'] ) ? sanitize_text_field( $_POST['_product_model'] ) : '';
update_post_meta( $post_id, '_product_model', $product_model );
// 保存保修期字段
$warranty_period = isset( $_POST['_warranty_period'] ) ? sanitize_text_field( $_POST['_warranty_period'] ) : '';
update_post_meta( $post_id, '_warranty_period', $warranty_period );
}프론트엔드 제품 페이지에 사용자 정의 필드를 표시합니다.
최종 목표는 저장된 필드 값들을 프론트엔드 제품 페이지에 표시하는 것입니다. 이를 위해 다음과 같은 방법들을 사용할 수 있습니다: woocommerce_product_additional_information 또는 woocommerce_single_product_summary 등록된 후크를 사용하여 데이터를 제품 설명 뒤나 태그 페이지 내에 출력하세요.
“추가 정보” 탭에 표시합니다.
다음 코드는 사용자 정의 필드를 WooCommerce의 기본 “추가 정보” 탭에 추가합니다.
추천 읽기 WooCommerce 심층 분석: 고성능 전자상거래 웹사이트 구축을 위한 완벽한 가이드。
add_action( 'woocommerce_product_additional_information', 'display_custom_fields_on_product_page' );
function display_custom_fields_on_product_page() {
global $product;
$product_model = get_post_meta( $product->get_id(), '_product_model', true );
$warranty_period = get_post_meta( $product->get_id(), '_warranty_period', true );
if ( $product_model ) {
echo '<div class="product-model"><strong>' . esc_html__( '产品型号：', 'woocommerce' ) . '</strong>'`. esc_html($product_model).`'</div>';
}
if ( $warranty_period ) {
// 将存储的值转换为可读的标签
$warranty_options = array(
'1year' => __( '一年', 'woocommerce' ),
'2years' => __( '两年', 'woocommerce' ),
'lifetime' => __( '终身保修', 'woocommerce' ),
);
$warranty_label = isset( $warranty_options[ $warranty_period ] ) ? $warranty_options[ $warranty_period ] : $warranty_period;
echo '<div class="warranty-period"><strong>' . esc_html__( '保修期：', 'woocommerce' ) . '</strong>'`. esc_html($warranty_label).`'</div>';
}
}고급 사용자 정의 필드 플러그인을 사용하여 시각화 설정을 구성합니다.
코드에 익숙하지 않은 사용자나 이미지, 관계 선택, 반복자와 같은 복잡한 필드 유형이 필요한 경우에는 플러그인을 사용하는 것이 더 효율적인 선택입니다.Advanced Custom Fields 이것이 해당 분야의 업계 표준입니다.
필드 그룹을 생성하고 제품과 연결합니다.
ACF 플러그인을 설치하고 활성화하면, WordPress 관리자 페이지에서 직관적으로 필드 그룹을 생성할 수 있습니다. 예를 들어, “제품 사양”이라는 이름의 필드 그룹을 만들어 “모델”(텍스트 필드)과 “보증 기간”(선택 필드)을 포함시킬 수 있습니다. 그런 다음 “위치 규칙”에서 이 필드 그룹을 “글의 유형이 ”제품’일 때”에만 표시되도록 설정할 수 있습니다.
ACF는 백엔드에서의 필드 렌더링, 데이터 저장, 그리고 프론트엔드에서의 값 가져오기 작업을 자동으로 처리합니다. 따라서 관리 인터페이스를 위한 코드를 작성할 필요가 전혀 없습니다.
프론트엔드 템플릿에서 ACF(Active Campaign Form) 필드를 호출합니다.
프론트엔드에서 표시할 때는 ACF가 제공하는 기능을 사용합니다. get_field() 함수를 사용하여 값을 가져옵니다.
add_action( 'woocommerce_single_product_summary', 'display_acf_fields_on_product_page', 25 );
function display_acf_fields_on_product_page() {
$product_model = get_field( 'product_model' );
$warranty_period = get_field( 'warranty_period' );
if ( $product_model ) {
echo '<p class="acf-product-model"><strong>제품 모델:</strong>'`. esc_html($product_model).`'</p>';
}
if ( $warranty_period ) {
echo '<p class="acf-warranty-period"><strong>보증 기간:</strong>'`. esc_html($warranty_period)`.'</p>';
}
}가변 제품에 변형별 사용자 정의 필드를 추가하기
변동 가능한 제품의 경우, 각 변형(예: 다른 크기, 색상)에 대해 별도의 사용자 정의 필드를 설정해야 할 때가 있습니다. 이를 위해서는 해당 변형과 관련된 훅(hook)을 사용해야 합니다. woocommerce_product_after_variable_attributes。
변형 패널에 필드를 추가하세요.
add_action( 'woocommerce_product_after_variable_attributes', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
// 变体专属字段：例如，每个颜色变体的 Pantone 色号
woocommerce_wp_text_input(
array(
'id' => '_pantone_code[' . $variation->ID . ']',
'label' => __( 'Pantone 色号', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_pantone_code', true ),
'placeholder' => '例如：PMS 185 C',
'wrapper_class' => 'form-row form-row-first',
)
);
}변이 필드 값 저장 (Save Variant Field Values)
변형 필드를 저장하려면 전용 훅(hook)을 사용해야 합니다. woocommerce_save_product_variation。
추천 읽기 전문 웹사이트를 만들기 위한 완전한 가이드: 워드프레스 테마를 처음부터 개발하는 방법。
add_action( 'woocommerce_save_product_variation', 'save_custom_variation_field', 10, 2 );
function save_custom_variation_field( $variation_id, $loop ) {
$pantone_code = isset( $_POST['_pantone_code'][ $variation_id ] ) ? sanitize_text_field( $_POST['_pantone_code'][ $variation_id ] ) : '';
update_post_meta( $variation_id, '_pantone_code', $pantone_code );
}요약
WooCommerce 제품에 사용자 정의 필드를 추가하는 것은 상점 기능을 심층적으로 맞춤화하는 데 기본이 됩니다. 기본 제공되는 액션 후크를 통해 개발자는 필드의 위치, 유형, 데이터 처리 로직을 정확하게 제어할 수 있으며, 이를 통해 가볍고 효율적인 통합을 실현할 수 있습니다. 반면에 빠른 배포가 필요하거나 복잡한 필드 유형이 관련된 프로젝트의 경우, 추가적인 도구나 방법을 활용하는 것이 유용합니다. Advanced Custom Fields 이러한 플러그인들은 개발 효율성을 크게 향상시킬 수 있습니다. 간단한 제품이든 변동 가능한 제품이든, 이러한 방법들을 숙달하면 제품 데이터 구조를 유연하게 확장할 수 있으며, 이를 통해 다양한 전자상거래 비즈니스 요구사항을 충족시키고 웹사이트의 전문성과 사용자 경험을 향상시킬 수 있습니다.
자주 묻는 질문
커스텀 필드의 데이터는 제품을 내보내거나 가져올 때 함께 전송됩니까?
네, 하지만 추가적인 처리가 필요합니다. WooCommerce의 기본 CSV 가져오기/내보내기 도구를 사용할 때, 코드를 통해 추가한 사용자 정의 필드는 기본적으로 내보내기 파일에 포함되지 않습니다. 따라서 CSV 파일에 해당 필드의 제목을 직접 수동으로 추가해야 합니다. _product_model또는 내보낼 때 “모든 메타데이터 내보내기” 옵션을 사용하십시오. ACF 필드의 내보내기/가져오기는 일반적으로 ACF 플러그인 자체나 관련된 가져오기/내보내기 플러그인(예: WP All Import)에서 더 나은 지원을 제공합니다.
커스텀 필드를 기반으로 제품 필터를 생성할 수 있나요?
네, 가능합니다. 하지만 이는 단순히 필드를 추가하는 것을 넘어서는 작업입니다. 사용자 정의 필드의 값을 WooCommerce의 제품 분류 체계(product taxonomy)에 인덱싱하거나, WooCommerce Product Filters와 같은 제3자 필터 플러그인을 사용하여 이러한 사용자 정의 메타데이터를 인식해야 합니다. 더 고급적인 방법으로는 사용자 정의 쿼리를 작성하는 것도 가능합니다. pre_get_posts 또는 woocommerce_product_query 후크(hook) 내에서 메인 루프를 수정하여 특정 메타데이터를 가진 제품들을 필터링합니다.
코드를 통해 추가된 필드와 ACF(Advanced Custom Fields) 플러그인을 통해 추가된 필드의 근본적인 차이점은 무엇인가요?
근본적인 차이점은 데이터의 관리 및 저장 방식에 있습니다. 코드를 통해 데이터를 수동으로 추가함으로써, 필드의 HTML 출력, 검증, 저장 로직을 직접 제어할 수 있으며, WordPress의 기능을 활용할 수 있습니다. update_post_meta 그리고 get_post_meta 함수를 사용하여 데이터에 접근합니다. ACF 플러그인은 이 기능을 기반으로 완전한 관리 계층을 구축하여, 사용자 친화적인 인터페이스를 제공함으로써 필드 그룹과 규칙을 정의할 수 있게 해주며, 데이터를 더 구조화된 방식으로 저장합니다(동일한 배열 내에 저장될 수도 있음). get_field() 이러한 함수들은 포맷된 값을 반환합니다. ACF는 프로세스를 간소화하지만, 코드 구조가 더 가볍고 직관적이며 제어하기에 더 용이합니다.
필드를 추가한 후에, 제품 아카이브 페이지(상점 페이지)에 어떻게 표시할 수 있을까요?
제품 아카이브 페이지(예: 상점 홈페이지, 카테고리 페이지)에 사용자 정의 필드를 표시하려면 일반적으로 제품 정보를 표시하는 템플릿을 수정해야 합니다. 가장 안전한 방법은 WooCommerce의 템플릿 파일을 복사하는 것입니다. templates/content-product.php 해당 하위 주제의 경로로 이동하여 내용을 덮어쓰세요. 그런 다음 적절한 위치(예: 가격 정보 뒤)에 필요한 코드를 호출하십시오. get_post_meta() 출력 필드 값입니다. 사용할 수도 있습니다. woocommerce_after_shop_loop_item_title 이런 종류의 훅을 사용하면 콘텐츠를 삽입할 수 있지만, 레이아웃이 테마에 따라 달라질 수 있다는 점에 유의해야 합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어