WooCommerce 관련 제품을 추가하는 방법: 3가지 방법

게시 됨: 2022-01-15

제품 전환을 개선할 방법을 찾고 계십니까? 온라인 상점에 맞춤형 관련 제품 섹션 을 추가하면 고객이 더 많은 품목을 구매하도록 유도할 수 있습니다. 이를 돕기 위해 WooCommerce 관련 제품을 추가하는 방법에 대한 가이드를 가져왔습니다.

유사한 제품을 표시하면 전환율을 높일 수 있습니다. 고객에게 올바른 범위의 제품을 제공하면 확실히 매출이 향상됩니다. 하지만 그 과정을 진행하기 전에 관련 제품 섹션이 왜 필요한지 간단히 살펴보겠습니다.

WooCommerce에서 관련 제품 섹션을 사용하는 이유는 무엇입니까?

교차 판매 는 전환율을 높이는 중요한 부분입니다. 고객에게 유사한 제품을 구매할 수 있는 옵션을 제공함으로써 고객이 부가가치를 위해 더 많은 제품을 구매하도록 유도할 수 있습니다. 마찬가지로 교차 판매를 사용하여 함께 구매하는 제품을 홍보할 수도 있습니다. 구매를 잘 추적할 수 있다면 더 많은 수익을 위해 언제든지 교차 판매 목록에 특정 제품을 추가하도록 선택할 수 있습니다.

이 방법 자체는 대규모 온라인 비즈니스에서 매우 두드러집니다. 예를 들어 Amazon에서는 " 자주 함께 구매하는 제품" , " 고객이 함께 구매한 제품" 또는 " 유사한 브랜드 제품"이라는 섹션을 사용하여 교차 판매를 제공하는 것을 볼 수 있습니다.

따라서 판매 를 늘리려면 WooCommerce 관련 제품 섹션을 추가하고 사용자 지정하는 것이 좋습니다. 이제 중요성에 대한 아이디어를 얻었으므로 전자 상거래 웹 사이트에 추가할 수 있는 방법을 살펴보겠습니다.

WooCommerce 관련 제품을 추가하는 방법

기본적으로 WooCommerce를 사용하면 세 가지 유형의 관련 제품을 사용자 지정할 수 있습니다. 이러한 옵션은 다음과 같습니다.

  • 상향 판매 : 상품 페이지를 볼 때 표시되는 상품입니다.
  • Cross-Sells : 장바구니 페이지를 볼 때 표시되는 제품입니다.
  • 관련 상품: 상품 태그 및 카테고리에 따라 상품 페이지에 자동으로 노출되는 상품입니다.

각 WooCommerce의 상향 판매 및 교차 판매에 표시할 제품을 수동으로 추가할 수 있지만 태그와 카테고리를 올바르게 설정해야만 관련 제품 섹션을 구성할 수 있습니다.

WooCommerce에서 관련 상품을 추가하는 방법은 크게 3가지 가 있습니다. 그들은:

  • WooCommerce 대시보드에서
  • 플러그인 사용
  • 프로그래밍 방식으로

참고: 프로세스에서 불필요한 문제가 발생하지 않도록 호환되는 WooCommerce 테마 중 하나를 설치하고 웹사이트에 WooCommerce를 올바르게 설정했는지 확인하십시오.

WooCommerce 대시보드에서 WooCommerce 관련 제품 구성

특정 제품에 대한 상향 판매 및 교차 판매를 설정하려면 WordPress 관리 대시보드 에서 제품 > 모든 제품 으로 이동합니다. 그런 다음 상향 판매 및 교차 판매를 추가하려는 특정 제품의 편집 버튼을 클릭합니다.

우커머스 관련 상품 추가 - 상품 열기

그런 다음 아래로 스크롤하여 제품 데이터 아래에서 연결된 제품을 클릭합니다. 이제 특정 제품에 대한 관련 제품으로 표시하려는 모든 제품을 나열하십시오. 여기에는 상향 판매와 교차 판매가 모두 포함될 수 있습니다.

마지막으로 제품을 업데이트 합니다.

우커머스 관련 상품 추가 - 연동 상품

웹사이트에서 특정 제품을 미리 볼 때 웹사이트의 프런트 엔드에서 링크된 제품을 볼 수 있습니다.

마찬가지로 장바구니 페이지를 미리 볼 때 교차 판매 관련 제품도 볼 수 있습니다.

wocommerce 관련 제품 추가 - 교차 판매 데모

그러나 WooCommerce 관련 제품 은 교차 판매 및 상향 판매가 제공하는 " 당신이 좋아할 수 있는" 섹션과 상당히 다릅니다. 기본적으로 WooCommerce는 태그와 카테고리를 사용하여 "좋아할 수 있는" 섹션에 표시할 제품을 무작위로 선택합니다. 이 옵션은 WooCommerce의 기본 옵션을 사용하여 구성할 수 없습니다.

WooCommerce 관련 제품 플러그인을 사용하거나 WooCommerce Hooks를 사용하여 프로그래밍 방식으로 이러한 관련 제품을 사용자 정의할 수 있습니다.

이 가이드에서 두 가지를 모두 수행하는 방법에 대해 더 자세히 설명합니다. 따라서 WooCommerce 관련 제품을 사용자 정의하는 방법을 더 배우고 싶다면 계속 읽으실 것을 권장합니다. 초보자에게 더 친숙한 플러그인 방법 부터 시작하겠습니다.

플러그인을 사용하여 WooCommerce 관련 제품을 추가하는 방법

플러그인을 사용하는 것은 관련 제품을 추가하고 사용자 정의하는 가장 쉬운 방법 중 하나입니다. 이 플러그인은 WooCommerce 관련 제품 섹션에 추가할 제품을 수동으로 선택할 수 있도록 특별히 설계되었습니다.

WordPress에는 다양한 기능을 갖춘 여러 플러그인이 있습니다. 그 중 일부를 사용하면 웹사이트의 어느 부분에나 추가할 수 있는 사용자 지정 가능한 관련 섹션을 추가할 수 있습니다. 완전히 사용자 정의 가능한 슬라이더 및 배너를 제공하여 다른 작업을 수행합니다.

물론 플러그인을 선택하는 옵션은 사용자에게 달려 있습니다. 그러나 오늘 데모에서는 Scott Nelle 의 WooCommerce 플러그인용 Custom Related Products를 사용할 것입니다. 이 플러그인은 원하는 제품의 관련 제품에 추가할 제품을 지정하는 간단한 방법으로 작동합니다.

하지만 플러그인 사용을 시작하려면 먼저 플러그인을 설치하고 활성화해야 합니다.

1. 플러그인 설치 및 활성화

WP 관리 대시보드 를 열고 플러그인 > 새로 추가 를 클릭하여 시작합니다. 그런 다음 오른쪽 상단의 검색 창을 사용하여 WooCommerce 사용자 정의 관련 제품 을 검색하십시오. 그런 다음 플러그인 탭에서 지금 설치 를 클릭하고 설치가 완료된 후 활성화 하십시오. 이제 플러그인 활성화 및 설치를 완료해야 합니다.

wocommerce 관련 제품 추가 - 플러그인 설치

WordPress 저장소에 포함되지 않은 플러그인을 사용하려면 수동으로 설치해야 합니다. 추가 정보가 필요한 경우 WordPress를 수동으로 설치하는 자세한 가이드가 있습니다.

2. 상품 페이지를 통해 관련 상품 추가

플러그인 자체는 관련 제품 섹션을 각 특정 제품에 추가할 수 있도록 하여 작동합니다. WooCommerce 제품을 열고 제품 데이터에서 지정하면 됩니다. 관련 제품 섹션에 제품을 추가하지 않으면 플러그인은 태그를 사용하여 WooCommerce 관련 제품을 무작위로 선택하는 기본 WooCommerce 동작으로 대체됩니다.

따라서 WP 관리 대시보드 에서 제품 > 모든 제품 을 다시 열고 관련 제품을 추가하려는 제품에 대해 편집 을 클릭합니다. 이는 WooCommerce 대시보드의 이전 접근 방식과 동일합니다.

다시 제품 데이터 아래로 스크롤하여 연결된 제품 을 클릭합니다. 이제 관련 제품 이라는 새 필드가 표시되어야 합니다. 이제 특정 제품에 대한 관련 제품으로 추가하려는 제품의 이름을 수동으로 입력하기만 하면 됩니다.

wocommerce 관련 제품 추가 - 관련 제품 추가

제품을 업데이트 하면 제품 페이지에서 변경 사항을 볼 수 있습니다.

wocommerce 관련 제품 추가 - 관련 제품 편집

프로그래밍 방식으로 WooCommerce 관련 제품 추가

또는 WooCommerce 플러그인을 사용하여 WooCommerce 관련 제품을 관리하고 사용자 지정하지 않으려면 코드 조각을 사용하여 추가하도록 선택할 수도 있습니다. 이를 위해 테마의 functions.php 파일에 몇 줄의 코드를 추가해야 합니다. 그러나 이 방법은 프로그래밍에 대한 기본적인 이해가 있는 경우에만 적용할 수 있습니다.

하위 테마를 만들고 WordPress 웹사이트를 백업하는 것이 좋습니다. 이렇게 하면 WordPress 테마를 업데이트하더라도 변경 사항이 저장됩니다. 도움이 필요하면 WordPress용 최고의 하위 테마 플러그인 중 하나를 사용하여 만들 수도 있습니다.

하위 테마로 전환하면 모양 > 테마 편집기를 클릭하여 functions.php 파일에 액세스할 수 있습니다. 그런 다음 테마 함수 또는 functions.php 파일을 클릭합니다. 테마 편집기에서 파일이 열립니다.

woocommerce 관련 제품 추가 - 기능 php

그런 다음 다음 코드 조각을 사용하여 편집기에 붙여넣을 수 있습니다.

 add_filter( 'woocommerce_related_products', 'QuadLayers_related_products_by_same_title', 9999, 3 ); 

기능 QuadLayers_related_products_by_same_title( $related_posts, $product_id, $args ) {
$product = wc_get_product( $product_id );
$title = $product->get_name();
$related_posts = get_posts( 배열(
'post_type' => '제품',
'post_status' => '게시',
'제목' => $제목,
'필드' => 'ID',
'posts_per_page' => -1,
'제외' => 배열( $product_id ),
));
$related_posts 반환;
}

코드 스니펫은 동일한 제목의 관련 제품을 제공함으로써 작동합니다. 이렇게 하면 이름이 같은 동일한 제품이 있는 경우 WooCommerce 관련 제품 섹션에 추가됩니다. 파일 업데이트를 클릭하여 functions.php 파일을 업데이트 하면 완료됩니다.

여기에 코드의 원래 작성자에 대한 크레딧이 있습니다.

WooCommerce 관련 제품을 제거하는 방법

또한 위와 동일한 방법을 사용하여 웹사이트에서 WooCommerce 관련 제품 섹션을 제거 하도록 선택할 수도 있습니다. 모든 관련 제품을 완전히 제거하거나 특정 제품에 대해서만 제거하도록 선택할 수 있습니다.

1. 모든 관련 제품 제거

모든 제품 페이지에서 모든 관련 제품 섹션을 제거하려면 하위 테마의 functions.php 파일을 열고 다음 코드 조각을 붙여넣기만 하면 됩니다.

 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

드디어. 파일을 업데이트 합니다. 그러면 모든 WooCommerce 제품에서 관련 제품 섹션이 완전히 제거됩니다.

여기에서 코드 작성자에게 크레딧을 제공합니다.

2. 특정 제품에 대해서만 관련 제품 제거

필요한 경우 코드 스니펫을 사용하여 웹사이트의 특정 제품에 대해서만 관련 제품 섹션을 제거할 수도 있습니다. 다음 코드는 단순히 모든 제품에서 숨기는 옵션을 추가합니다.

먼저 이전과 같은 방식으로 테마의 functions.php 파일에 이것을 붙여넣습니다.

 add_action( 'woocommerce_product_options_general_product_data', 'QuadLayers_add_related_checkbox_products' );

기능 QuadLayers_add_related_checkbox_products() { 
woocommerce_wp_checkbox( 배열( 
'id' => 'hide_related', 
'클래스' => '', 
'label' => '관련 제품 숨기기'
) 
); 
}

// ------------------------------------------
// 2. 사용자 정의 필드에 체크박스 저장

add_action( 'save_post_product', 'QuadLayers_save_related_checkbox_products' );

기능 QuadLayers_save_related_checkbox_products( $product_id ) {
전역 $pagenow, $typenow;
if ( 'post.php' !== $pagenow || 'product' !== $typenow ) return;
if ( 정의된( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 반환;
if ( isset( $_POST['hide_related'] ) ) {
update_post_meta( $product_id, 'hide_related', $_POST['hide_related'] );
} else delete_post_meta( $product_id, 'hide_related' );
}

// ------------------------------------------
// 3. 관련 상품 숨기기 @ 단일 상품 페이지

add_action( 'woocommerce_after_single_product_summary', 'QuadLayers_hide_related_checkbox_products', 1 );

기능 QuadLayers_hide_related_checkbox_products() {
글로벌 $product;
if ( ! 비어 있으면 ( get_post_meta( $product->get_id(), 'hide_related', true ) ) ) {
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
}
}

wocommerce 관련 제품 추가 - 조건부로 관련 제품 제거

그런 다음 WordPress 대시보드에서 제품 > 모든 제품 으로 다시 이동하고 관련 제품을 숨기려는 제품에 대해 편집 을 클릭합니다. 이전 접근 방식과 같이 제품 데이터 아래에서 스크롤할 때 일반 탭을 클릭합니다.

새로운 관련 제품 숨기기 옵션이 표시되어야 합니다. 특정 제품 페이지에서 관련 제품을 숨기려면 이 옵션을 활성화합니다.

여기에 코드 작성자에게 크레딧이 있습니다.

관련 제품 번호 및 열을 사용자 지정하는 방법

또한 웹사이트에 표시되는 제품 수 와 행과 열을 구성하여 관련 제품 섹션을 사용자 정의할 수도 있습니다.

이를 위해 우리는 functions.php 파일에서 WooCommerce 후크와 사용자 정의 함수를 사용할 것입니다. 계속해서 테마 편집기 를 사용하여 파일을 다시 열고 다음 코드 스니펫을 붙여넣습니다.

 add_filter( 'woocommerce_output_related_products_args', 'QuadLayers_change_number_related_products', 9999 );

기능 QuadLayers_change_number_related_products( $args ) {
$args['posts_per_page'] = 4; // 관련 제품의 #
$args['열'] = 4; // 행당 열 수
$args 반환;
}

이 코드는 WooCommerce 관련 제품 섹션을 4열 4행으로 구성하여 작동합니다. $args['posts_per_page'] = 4 및 $args['columns'] = 4.

또한 추가 CSS 코드를 사용하여 이 섹션을 구성할 수도 있습니다. 섹션이 웹 사이트에 더 잘 맞도록 열과 행의 레이아웃과 정렬을 변경하는 데 사용할 수 있습니다. 다음 CSS 스니펫을 사용할 수 있습니다.

 @media (최소 너비: 768px) {
.site-main .related.products ul.products li.product {
너비: 22%;
왼쪽으로 뜨다;
여백 오른쪽: 4%;
}

테마 사용자 정의 도구의 추가 CSS 아래에 붙여넣기만 하면 됩니다. WordPress 대시보드에서 모양 > 사용자 정의 를 클릭하여 액세스할 수 있습니다. 테마 사용자 지정 프로그램이 열립니다.

그런 다음 추가 CSS 탭을 클릭하고 여기에 CSS 스크립트를 붙여넣습니다. 웹사이트의 필요에 따라 관련 제품의 정렬을 조정할 수 있습니다. 마지막으로 완료되면 게시 를 클릭합니다.

wocommerce 관련 제품 추가 - 추가 CSS

여기에 코드 작성자에게 크레딧이 있습니다.

결론

이것으로 WooCommerce 관련 제품 추가 가이드를 마칩니다. 전자 상거래 웹 사이트의 판매를 향상시키는 가장 좋은 방법 중 하나입니다. 그러나 이 가이드를 사용하면 원하는 경우 추가, 사용자 지정 또는 제거할 수도 있습니다.

요약하면 다음 3가지 방법을 사용하여 WooCommerce에 관련 제품을 추가할 수 있습니다.

  • WooCommerce 대시보드에서
  • 플러그인 사용
  • 프로그래밍 방식으로

또한 이러한 관련 제품을 사용자 지정하는 데 도움이 되는 몇 가지 단계를 더 포함했습니다. 여기에는 제품 페이지에서 해당 제품을 제거하고 관련 제품 및 해당 열의 수를 수정하는 작업이 포함됩니다. 관련 제품을 추가할 때도 도움이 되길 바랍니다. WooCommerce 관련 제품을 사용자 정의하는 자세한 자습서에서 더 많은 정보를 찾을 수 있습니다.

기타 다양한 WooCommerce 섹션 및 페이지를 사용자 정의하는 방법에 대해 자세히 알아보려면 다음과 같은 다른 기사를 참조하십시오.

  • WooCommerce에서 제품에 이미지를 추가하는 방법
  • WooCommerce Checkout 오류 메시지 사용자 정의
  • WooCommerce 템플릿을 사용자 정의하는 방법

우리 기사를 사용하여 WooCommerce 관련 제품 섹션을 사용자 정의하고 관리할 수 있는지 알려주십시오. 문제가 있으면 의견 섹션에 알려주십시오. 최선을 다해 도와드리겠습니다.