프로그래밍 방식으로 사용자 지정 WooCommerce 제품 유형을 만드는 방법

게시 됨: 2023-01-03

복잡한 WooCommerce 상점을 구축할 때 특정 문제에 대한 고유한 솔루션을 만들어야 할 수 있습니다. 이러한 문제 중 하나는 특정 WooCommerce 제품 유형이 없다는 것입니다. 이것이 바로 QuadLayers에서 귀하의 웹사이트를 위한 맞춤형 WooCommerce 제품 유형을 생성하는 방법에 대한 가이드를 가져온 이유입니다.

제품 유형을 정의하고 특정 옵션 및 가격을 활성화하는 방법 등을 살펴보겠습니다. 그러나 먼저 WooCommerce 제품 유형과 맞춤형 제품 유형이 무엇을 할 수 있는지 살펴보겠습니다.

WooCommerce에 사용자 정의 제품 유형을 추가하는 이유는 무엇입니까?

기본적으로 WooCommerce에는 네 가지 고유한 제품 유형이 있습니다. 이것들은:

간단한 제품
가변 상품
외부/계열사
다운로드 가능한 제품

물론 외부 WooCommerce 플러그인을 사용하면 구독 제품, 예약 가능한 제품, 멤버십 등과 같은 더 많은 제품 유형을 추가할 수 있습니다.

하지만 이러한 특정 유형이 아닌 제품 유형을 만들고 싶다면 어떻게 해야 할까요? 기본 WooCommerce 제품 유형이 충족할 수 없는 특정 요구 사항이 있는 경우 또는 타사 플러그인을 사용하지 않고 멤버십 또는 경매 제품과 같은 사용자 정의 제품 유형을 생성하려는 경우 약간의 방법을 사용하여 사용자 정의 제품 유형을 생성할 수 있습니다. 코딩.

맞춤형 제품 유형을 사용한다는 것은 제품 유형에 다양하고 고유한 설정을 추가하는 것을 의미합니다. 예를 들어 특정 가변 제품 유형을 원하고 이에 대해 다른 가시성 또는 가격 설정을 추가하는 경우 사용자 지정 제품 유형을 사용하여 그렇게 할 수 있습니다. 또한 고유한 단일 종류의 제품에 대해 특정 제품 유형을 정의하고 원하는 경우에만 제품 유형 설정을 변경할 수도 있습니다.

필요에 관계없이 맞춤형 제품 유형을 사용하면 웹 사이트에서 판매하는 제품을 사용자 정의하고 정의할 때 더 많은 유연성을 얻을 수 있습니다.

사용자 지정 WooCommerce 제품 유형을 만드는 방법은 무엇입니까?

WooCommerce 제품 유형을 만드는 프로세스는 매우 간단하지만 어느 정도 코딩이 필요합니다. 이 기사를 계속하려면 고객이 사용자 지정 WordPress 플러그인을 만들고 코드를 추가하는 방법에 대해 조금 더 알아보는 것이 좋습니다.

웹 사이트 디렉토리에서 WordPress 플러그인 생성의 기본 사항을 이해했으면 WP 설치 디렉토리 를 열고 wp-content/plugins 를 열고 ' QuadLayers_custom-product-type ' 폴더를 생성하십시오. 데모에서는 localhost 디렉토리를 사용합니다.

사용자 정의 WooCommerce 제품 유형에 대한 폴더 생성

그런 다음 ' Quadlayers_custom-product-type.php '라는 파일을 만듭니다. 이것은 플러그인의 나머지 기능을 위한 출입구 역할을 하는 기본 파일입니다.

이 파일을 열고 다음 코드 줄을 파일에 붙여넣습니다.

 <?php

/**
* 플러그인 이름: Quadlayers Custom Product Type
* 설명: 사용자 정의 WooCommerce 제품 유형 생성에 대한 Quadlayers용 코드 가이드
*/

if ( ! 정의된( 'ABSPATH' ) ) {
반품;
}

플러그인의 기본 파일에 코드 추가

이 코드 세트는 플러그인 이름과 설명을 추가하여 플러그인을 정의합니다. 지금은 이 파일이 작동하려면 이 파일에 더 많은 코드를 추가해야 하므로 이것으로 충분합니다. 이제 새로 만든 플러그인을 활성화해야 합니다. 튜토리얼을 위해 플러그인을 활성화 상태로 유지하고 진행하면서 더 많은 코드를 추가할 것입니다.

계속해서 WP 관리 대시보드 를 열고 플러그인 을 클릭하십시오. 여기에서 Quadlayers Custom Product Type이라는 새 플러그인이 표시됩니다. 계속해서 활성화 하고 튜토리얼의 다음 단계로 이동하십시오.

사용자 정의 woocommerce 제품 유형 플러그인 활성화

사용자 지정 WooCommerce 제품 유형 등록

다음으로 사용자 지정 제품 유형을 정의하고 WooCommerce 제품 유형으로 등록하는 함수를 생성합니다. 이를 위해 다음 코드를 플러그인의 기본 파일에 추가합니다.

 add_action( '초기화', 'register_demo_product_type' );
함수 register_demo_product_type() {
클래스 WC_Product_Demo 확장 WC_Product {

공개 함수 __construct( $product ) {
$this->product_type = '데모';
부모::__construct( $product );
}
}
}

이렇게 하면 데모라는 사용자 지정 제품 유형이 등록됩니다. 제품 유형의 이름을 변경하려면 $this->product_type = 'demo'; 에서 텍스트를 변경하기만 하면 됩니다.

사용자 지정 WooCommerce 제품 옵션을 추가합니다.

그런 다음 제품 유형 드롭다운 목록에 사용자 지정 제품 유형을 추가해야 합니다. 이렇게 하면 WP 관리 대시보드에서 제품을 생성하거나 편집할 때 제품 유형을 선택할 수 있습니다. 플러그인의 기본 파일에 이 코드를 추가하면 제품 유형 목록에 새 옵션이 표시됩니다.

 add_filter( 'product_type_selector', 'add_demo_product_type' );
기능 add_demo_product_type( $types ){
$types[ 'demo' ] = __( '데모 제품', 'dm_product' );
반환 $types; 
}

이 코드는 $types['demo'] = __('Custom Product Type') 행을 사용하여 제품 데이터 드롭다운 목록에 사용자 정의 제품 유형을 추가합니다. 사용자 정의 제품 유형에서 데모 제품, 사용자 정의 주문, 기프트 카드 등과 같은 텍스트로 텍스트를 변경할 수 있습니다.

이제 WP 관리 대시보드 를 열고 새 제품을 생성하십시오. 제품 유형 드롭다운 메뉴 아래에 ' 데모 제품 '이라는 새 옵션이 표시됩니다.

새 제품을 생성하는 동안 사용자 정의 제품 유형을 선택하십시오.

사용자 지정 제품 유형 탭 추가

다음 기능은 사용자 정의 제품 유형에 대한 새 설정 탭을 작성합니다. 이렇게 하면 다른 제품 유형과 공유되지 않는 특정 세부 정보를 제품 유형에 추가할 수 있습니다.

이 기능을 붙여넣어 맞춤형 제품 세부 정보 탭을 만듭니다.

 add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
기능 demo_product_tab( $tabs) {

$tabs['demo'] = 배열(
'레이블' => __( '데모 제품', 'dm_product' ),
'target' => 'demo_product_options',
'클래스' => 'show_if_demo_product',
);
반환 $tabs;
}
}

위에서 고유한 product_type을 정의한 경우 $tabs['demo'] = array 에서 'demo' 대신 product_type ID 를 사용해야 합니다.

우리가 사용한 배열의 세 매개변수는 다음과 같습니다.

라벨: 맞춤 제품 탭의 이름을 정의합니다.
target: 탭에 설정을 추가하는 데 사용할 식별자를 설정합니다.
class: 맞춤 제품 탭을 표시할 시기를 확인할 수 있습니다.

여기에서 클래스 매개변수에서 show_if_Demo_product를 사용했습니다. 즉, 이 탭은 사용자 지정 제품 유형을 선택한 경우에만 표시됩니다.

맞춤형 제품 유형에 대한 특정 탭

사용자 정의 제품 유형 탭 필드 추가

다음으로 사용자 정의 제품 유형에 대한 가격 및 다양한 옵션을 설정할 수 있도록 몇 가지 설정 및 필드를 탭에 추가해 보겠습니다. 이를 위해 다음 코드를 플러그인의 기본 파일에 추가합니다.

 add_action( 'woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content' );

함수 QL_custom_product_options_product_tab_content() {
// 제품 탭의 대상으로 div의 ID를 변경하는 것을 잊지 마십시오.
?><div class='패널 woocommerce_options_panel'><?php
?><사업부 클래스='options_group'><?php

woocommerce_wp_checkbox(배열(
'id' => '_enable_custom_product',
'label' => __( '맞춤형 제품 유형 활성화'),
) );

woocommerce_wp_text_input(
정렬(
'id' => 'demo_product_info',
'label' => __( '맞춤 제품 세부정보', 'dm_product' ),
'자리 표시자' => '',
'desc_tip' => '참',
'description' => __( '데모 제품 세부정보를 입력하세요.', 'dm_product' ),
'타입' => '텍스트'
)
);


?></div>
</div><?php
}

이렇게 하면 제품에 대한 사용자 지정 제품 유형 및 사용자 지정 텍스트 필드 를 활성화하는 확인란 옵션 이 추가됩니다. 물론 드롭다운 목록에 대한 woocommerce_wp_select(), 텍스트 영역에 대한 woocommerce_wp_textarea_input() 등과 같은 다른 WooCommerce 기능을 사용하여 더 많은 설정을 추가할 수 있습니다.

그러나 데모에서는 사용자 지정 제품 관리자가 백엔드에서 사용자 지정할 수 있는 간단한 텍스트 정보만 표시합니다.

맞춤형 제품 탭 유형에 대한 특정 옵션

여기에서 이러한 기능과 사용 방법에 대해 자세히 알아볼 수 있습니다.

사용자 정의 WooCommerce 제품 유형 탭 필드 저장

이제 제품 유형 설정을 만들었으므로 데이터베이스에 저장해야 합니다. 이것은 woocommerce_process_product_meta 후크를 사용하여 수행됩니다. 이를 위해 다음 코드 줄을 사용합니다.

 add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' );

기능 save_demo_product_settings( $post_id ){

$demo_product_info = $_POST['demo_product_info'];

if( !empty( $demo_product_info ) ) {
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}

이 코드를 플러그인의 기본 파일에 추가하면 제품을 업데이트하거나 게시할 때 사용자 지정 제품 유형 설정을 저장할 수 있습니다.

사용자 정의 제품 탭 유형에 대한 저장된 제품 설정

그러나 이러한 코드는 백엔드 전용이며 이제 WooCommerce에서 사용할 템플릿을 정의할 때까지 제품의 프런트 엔드에 표시됩니다. 이를 위해 자습서의 다음 단계를 사용하여 맞춤형 제품 유형에 대한 콘텐츠 를 표시합니다.

맞춤형 제품 유형에 대한 콘텐츠 추가

웹사이트에 대한 사용자 지정 제품 유형을 생성했지만 제품 유형에 포함할 콘텐츠 종류를 WooCommerce에 지정해야 합니다. 이를 위해 woocommerce_single_product_summary 후크를 사용하여 Custom Product Details 탭에 추가한 제품 정보를 추가합니다.

 add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

기능 demo_product_front () {
글로벌 $제품;
if ( 'demo' == $product->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

위에서 언급한 대로 제품 유형 ID가 코드 if ('demo' == $product->get_type() 와 일치하는지 확인하세요. 이 코드를 저장하면 전면에 맞춤 제품 세부정보가 표시됩니다.

전체 코드 스니펫

귀하의 편의를 위해 서로 다른 코드를 단일 세트로 결합하여 플러그인의 기본 파일에 붙여넣고 필요에 따라 편집할 수 있습니다.

 <?php
/**
* 플러그인 이름: QuadLayers Custom 제품 유형
* 설명: WooCommerce에 맞춤형 제품 유형을 추가하는 플러그인
* 저자: QuadLayers
* 저자 URI: https://www.quadlayers.com
* 버전: 1.0
*/


정의( 'ABSPATH' ) 또는 종료;

add_action( '초기화', 'register_demo_product_type' );
함수 register_demo_product_type() {
클래스 WC_Product_Demo 확장 WC_Product {

공개 함수 __construct( $product ) {
$this->product_type = '데모';
부모::__construct( $product );
}
}
}


add_filter( 'product_type_selector', 'add_demo_product_type' );
기능 add_demo_product_type( $types ){
$types[ 'demo' ] = __( '데모 제품', 'dm_product' );
반환 $types; 
}


add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
기능 demo_product_tab( $tabs) {

$tabs['demo'] = 배열(
'레이블' => __( '데모 제품', 'dm_product' ),
'target' => 'demo_product_options',
'클래스' => 'show_if_demo_product',
);
반환 $tabs;
}


add_action( 'woocommerce_product_data_panels', 'demo_product_tab_product_tab_content' );
기능 demo_product_tab_product_tab_content() {
?><div class='패널 woocommerce_options_panel'><?php
?><사업부 클래스='options_group'><?php


woocommerce_wp_checkbox(배열(
'id' => '_enable_custom_product',
'label' => __( '맞춤형 제품 유형 활성화'),
) );


woocommerce_wp_text_input(
정렬(
'id' => 'demo_product_info',
'label' => __( '데모 제품 세부정보', 'dm_product' ),
'placeholder' => '프론트 엔드에 표시할 텍스트를 여기에 삽입하십시오.',
'desc_tip' => '참',
'description' => __( '데모 제품 정보를 입력하세요.', 'dm_product' ),
'타입' => '텍스트'
)
);
?></div>
</div><?php
}

add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' );

기능 save_demo_product_settings( $post_id ){

$enable_custom_product = isset( $_POST['_enable_custom_product'] ) ? '예 아니오';
update_post_meta( $post_id, '_enable_custom_product', $enable_custom_product );
$demo_product_info = $_POST['demo_product_info'];

if( !empty( $demo_product_info ) ) {
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}


add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

기능 demo_product_front () {
글로벌 $제품;
if ( 'demo' == $product->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

물론 이 튜토리얼에서 보여드린 모든 단계는 매우 간단하며 사용자 지정 제품 유형에 더 많은 필드, 설정 및 콘텐츠를 추가할 수 있으며 시도해야 합니다. 또한 보시다시피 이 튜토리얼은 약간 프로그래밍이 많습니다. 따라서 WordPress 또는 코딩을 처음 사용하는 경우 댓글 섹션에서 언제든지 도움을 요청할 수 있습니다. 게다가, 완전히 다르게 일을 할 수도 있고 테마의 functions.php 파일을 사용하여 이 모든 코드를 웹사이트에 추가할 수도 있습니다.

이렇게 하면 WordPress 플러그인 생성 단계를 건너뛸 수 있지만 테마를 변경하거나 업데이트하면 변경 사항이 사라집니다(하위 테마를 사용하지 않는 한). 이 방법에 플러그인을 사용하는 것이 좋습니다. 하지만 원하는 경우 functions.php 파일을 사용하려면 이렇게 하면 됩니다.

functions.php 파일을 변경하기 전에 항상 WordPress 사이트의 전체 백업을 수행하는 것을 잊지 마십시오. 이렇게 하면 문제가 발생할 경우 언제든지 작업 버전으로 되돌릴 수 있습니다.

모양 > 테마 파일 편집기 를 클릭하고 오른쪽 테마 파일 사이드바에서 테마 기능 또는 functions.php를 클릭하십시오.

함수 파일을 사용하기 위해 테마 파일 편집기 열기

그런 다음 위의 코드를 편집기에 붙여넣고 파일 업데이트 를 클릭하여 완료할 수 있습니다.

테마 기능 파일에 코드 추가

결론

프로그래밍 방식으로 사용자 지정 WooCommerce 제품 유형을 생성하는 데 필요한 모든 단계가 종료됩니다. 맞춤형 제품 유형을 생성하는 데 필요한 모든 단계를 빠르게 요약해 보겠습니다.

사용자 지정 WooCommerce 제품 유형에 대한 플러그인을 만들고 활성화합니다.
새 제품 유형을 등록하십시오.
단일 제품 페이지에 대한 사용자 지정 제품 유형에 대한 탭을 추가합니다.
제품 탭에 필드 및 설정을 추가합니다.
제품 탭에서 필드와 설정을 저장합니다.
프런트 엔드에 제품 탭 콘텐츠를 표시합니다.

마지막으로 사용자의 편의를 위해 다양한 코드를 모두 결합하여 완전한 코드를 제공합니다. 따라서 기본 파일의 전체 코드를 복사하고 필요에 따라 변경할 수 있습니다.

이 기사가 도움이 되었기를 바랍니다. 다양한 WooCommerce 설정 및 제품 옵션 설정에 대해 자세히 알아보려면 다른 기사를 확인하십시오.

WooCommerce 대량 할인을 설정하는 방법
프로그래밍 방식으로 WordPress 사용자를 만드는 방법
프로그래밍 방식으로 WordPress 사용자 정의 필드 만들기