WooCommerce에서 관련 제품을 숨기고 제거하는 방법

게시 됨: 2021-07-17

상점에서 관련 제품을 숨길 수 있는 간단한 방법을 찾고 계십니까? 당신을 위한 것이 있습니다. 이 기사에서는 WooCommerce에서 관련 제품을 제거 하는 다양한 방법을 보여줍니다.

관련 제품은 무엇입니까?

이름에서 알 수 있듯이 관련 제품은 다른 항목과 어떻게든 연결된 제품입니다. WooCommerce에서 관련 상품은 쇼핑객이 보고 있는 상품과 관련된 권장 사항으로 주요 품목을 보완하는 경향이 있습니다. 일반적으로 제품 페이지 하단에 표시되며 비즈니스 매출 및 수익 증대에 도움이 됩니다. 예를 들어, 전화기와 관련된 제품은 헤드폰, 전화기 케이스, 카메라 액세서리 등이 될 수 있습니다.

우커머스 관련 제품

WooCommerce에서 관련 제품을 제거하는 이유는 무엇입니까?

관련 제품이 매출 증대에 도움이 된다면 왜 제거하고 싶습니까? WooCommerce에서 관련 제품을 숨기고 싶을 수 있는 몇 가지 상황이 있습니다. 예를 들어 관련이 없는 몇 가지 제품만 판매하는 경우 해당 제품을 표시하고 싶지 않을 수 있습니다. 또한 테마가 관련 제품 섹션에서 제대로 작동하지 않는 경우 스토어에서 테마를 제거해야 할 수도 있습니다.

게다가 때로는 일부 테마 또는 플러그인의 CSS 코드가 웹사이트 또는 웹사이트의 일부를 손상시킬 수 있습니다. 관련 상품 섹션과 충돌이 있는 경우 제거할 수 있습니다.

또한 제품 페이지가 복잡하거나 관련 제품이 너무 많은 경우에는 더 적은 수의 항목을 표시하거나 해당 섹션을 완전히 제거할 수 있습니다.

제거하는 방법을 보여주기 전에 WooCommerce에서 관련 제품을 설정하는 방법을 살펴보겠습니다.

WooCommerce에서 관련 제품을 설정하는 방법

WooCommerce에서 관련 제품을 설정하는 것은 매우 간단합니다. WordPress 대시보드 에서 제품으로 이동하여 제품 을 엽니다. WooCommerce 제품 편집기에서 제품 데이터 섹션으로 이동하여 연결된 제품 탭을 선택하면 상향 판매 및 교차 판매를 구성하는 옵션이 표시됩니다.

woocommerce에서 관련 제품 제거 - 연결된 제품

상향 판매 및 교차 판매는 WooCommerce가 기본적으로 제공하는 일종의 관련 제품이지만 사용자 정의 옵션은 상당히 제한적입니다. 관련 상품을 표시하고 싶다면 전용 플러그인을 사용하면 됩니다.

이 데모에서는 WooCommerce용 Custom Related Products라는 무료 도구를 사용할 것입니다. 플러그인을 설치하고 활성화하면 연결된 제품 섹션에 옵션이 하나 더 표시됩니다.

디스플레이 관련 제품

관련상품으로 표시하고 싶은 상품을 검색할 수 있습니다. 예를 들어 4개의 제품을 나열하려고 합니다.

관련 제품 추가됨

그런 다음 설정을 업데이트하고 프론트 엔드에서 제품 페이지를 확인하면 선택된 관련 제품을 볼 수 있습니다.

관련 제품 표시

또는 일부 관련 제품을 제거하고 더 적은 수의 항목을 표시할 수 있습니다. 예를 들어 4개의 항목 대신 3개의 항목을 표시하려고 한다고 가정해 보겠습니다. 숨기려는 제품을 제거하고 페이지를 업데이트하고 프런트 엔드를 확인하십시오.

세 가지 관련 제품

이것은 상점에 적용할 수 있는 최고의 사용자 정의 중 하나입니다. 임의의 관련 제품을 표시하는 대신 각 제품과 연결하려는 항목을 선택할 수 있습니다. 몇 가지 테스트를 실행하고 전환율을 확인하여 최상의 조합을 찾는 것이 좋습니다.

참고 : 일부 템플릿에는 동일한 태그 또는 카테고리를 공유하는 제품을 가져오는 관련 제품 섹션이 포함되어 있습니다. 이러한 항목을 지정할 수는 없지만 함께 표시하려는 제품에 대해 동일한 태그 또는 범주를 사용할 수 있습니다.

관련 제품을 숨기는 다양한 방법을 살펴보겠습니다.

WooCommerce에서 관련 제품을 숨기고 제거하는 방법

WooCommerce 관련 제품을 제거하는 방법에는 여러 가지가 있습니다.

  1. 플러그인 사용
  2. 프로그래밍 방식(코딩)
  3. 페이지 빌더 사용
  4. CSS로
  5. 테마 옵션에서

각 방법에 대해 자세히 살펴보겠습니다.

1) 플러그인으로 관련 제품 숨기기

관련 제품을 숨기는 데 사용할 수 있는 여러 플러그인이 있습니다. 이 튜토리얼에서는 NS Remove Related Products를 사용할 것입니다. 먼저 플러그인을 설치하고 활성화해야 합니다. 플러그인 > 새로 추가 로 이동하여 도구를 찾아 사이트에 설치합니다.

woocommerce에서 관련 제품 제거 - ns 관련 제품 플러그인

플러그인을 활성화하면 단일 제품 페이지에서 모든 관련 제품을 성공적으로 제거한 것을 볼 수 있습니다. 이것은 플러그 앤 플레이 플러그인이며 추가 구성이 필요하지 않습니다.

단일 제품 페이지를 확인하면 관련 제품이 표시되지 않습니다.

woocommerce에서 관련 제품 제거 - NS 플러그인 활성화

관련 제품을 다시 표시하려면 플러그인을 비활성화하세요. NS Remove Related Products는 가벼운 도구이므로 설치를 유지해도 웹사이트의 속도와 성능에 영향을 미치지 않습니다.

2) 프로그래밍 방식으로 관련 제품 제거

코딩 기술이 있고 코드 편집 및 파일 수정에 익숙하다면 이것은 매우 흥미로운 방법입니다. 이 섹션에서는 테마의 functions.php 파일을 조정하고 온라인 스토어에서 WooCommerce 관련 제품을 제거하는 방법을 알려드립니다.

참고 : 이 방법에는 테마 파일의 일부 편집이 포함되므로 계속 진행하기 전에 WordPress/WooCommerce 웹사이트의 전체 백업이 있는지 확인하십시오. 그렇게 하면 문제가 발생할 경우 사이트를 복원할 수 있습니다.

관련 제품을 제거하기 위해 functions.php 테마를 편집합니다. 이를 위해 두 가지 방법이 있습니다.

  • 자식 테마를 통해
  • 사이트별 플러그인을 통해

어린이 테마를 만드는 방법을 알려주는 단계별 가이드를 만들었습니다. 사이트에 대한 하위 테마를 생성했으면 사용자 정의 코드 스니펫을 하위 테마의 functions.php 파일에 추가할 수 있습니다. 반면에 전용 플러그인에 의존하는 경우 사용자 정의 코드를 플러그인에 직접 추가합니다.

두 가지 옵션을 간단히 살펴보겠습니다.

2.1) 하위 테마

우리 블로그를 팔로우했다면 테마가 업데이트되면 모든 수정 사항이 손실되기 때문에 상위 테마 파일을 편집하지 않는 것이 좋습니다. 즉, 사용자 정의 파일이 새 버전의 새 파일로 대체됩니다.

그렇기 때문에 테마에 사용자 지정 코드를 추가해야 하는 경우 하위 테마를 사용하는 것이 좋습니다. 자식 테마를 만드는 것은 매우 간단합니다. 이 데모에서는 Child Themify라는 플러그인을 사용합니다.

먼저 스토어에 Child Themify를 설치하고 활성화합니다.

자식 테마화 플러그인 활성화

모양 섹션 아래에 Create Child Theme 라는 새로운 옵션이 보일 것입니다.

자식 테마 만들기

거기에서 부모 테마에 대한 자식 테마를 생성할 수 있습니다.

woocommerce에서 관련 제품 제거 - 자식 테마 만들기

하위 테마를 생성한 후 활성화하고 테마 편집기로 이동합니다.

여기에서 테마의 functions.php 파일에 약간의 코드를 추가합니다. 기본적으로 WordPress는 편집기에 style.css 파일을 표시하지만 오른쪽 열에서 functions.php 파일을 선택할 수 있습니다.

테마 기능

파일을 선택한 후 아래에서 코드를 복사합니다.

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

그런 다음 편집기에 붙여넣고 파일을 업데이트합니다.

업데이트 파일

그게 다야! 이제 프런트 엔드에서 제품 페이지를 확인하면 관련 제품 섹션이 더 이상 표시되지 않는 것을 볼 수 있습니다.

관련 제품 제거됨

2.2) 코드 조각

또 다른 대안은 플러그인을 사용하여 사용자 정의 코드 조각을 추가하는 것입니다. 이 자습서에서는 시장에서 사용할 수 있는 무료 사이트별 플러그인 중 하나인 코드 조각을 사용합니다.

먼저 사이트에 플러그인을 설치하고 활성화합니다.

코드 조각 플러그인 설치

그러면 왼쪽에 새 설정이 표시됩니다.

코드 조각 방법

기본적으로 플러그인은 일부 사용자 정의 코드 스니펫을 표시하지만 활성 상태가 아니므로 웹사이트에 영향을 미치지 않습니다.

코드 조각 샘플

WooCommerce에서 관련 제품을 제거하기 위해 사이트에 새 스니펫을 추가합니다.

새 스니펫 추가

스니펫에 이름을 지정한 다음 이 코드를 복사합니다.

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

코드 섹션에 붙여넣고 모든 위치에서 스니펫 실행 옵션을 선택한 다음 활성화합니다.

스니펫 저장

스니펫이 활성화되면 단일 제품 페이지를 확인하면 관련 제품이 없는 것을 볼 수 있습니다.

관련 제품 제거됨

약간의 코딩으로 WooCommerce 관련 제품을 제거하거나 숨길 수 있는 방법입니다. 이제 페이지 빌더를 사용하여 수행하는 방법을 살펴보겠습니다.

3) 페이지 빌더를 사용하여 관련 제품 숨기기

개별 WooCommerce 제품 페이지에서 관련 제품을 숨기는 또 다른 흥미로운 옵션은 전용 페이지 빌더 플러그인을 사용하는 것입니다.

이 튜토리얼에서는 가장 인기 있고 사용하기 쉬운 페이지 빌더 중 하나인 Divi 빌더를 사용할 것입니다. 먼저 사이트에 플러그인을 설치하고 활성화해야 합니다. 프리미엄 상품이기 때문에 엘레강트 테마 사이트에서 구매하셔야 합니다.

우아한 테마 계정에서 플러그인을 다운로드한 후 설치하고 활성화하세요.

divi 빌더 설치

Divi 빌더에는 프론트 엔드에서 직접 페이지를 편집하는 데 도움이 되는 시각적 편집 환경이 제공됩니다.

이제 WooCommerce 관련 제품을 제거하는 데 사용하는 방법을 살펴 보겠습니다. 제품 페이지를 연 다음 상단 표시줄에서 Visual Builder 활성화 버튼을 클릭합니다.

비주얼 빌더 활성화

WordPress는 Divi 빌더를 로드하고 여기에서 페이지 템플릿을 편집할 수 있습니다.

이제 관련 제품 요소를 클릭하면 여러 옵션이 표시됩니다. 이 섹션을 제거하려면 삭제 버튼을 선택하기만 하면 됩니다.

관련 제품 삭제

해당 섹션이 페이지에서 사라지는 것을 즉시 확인할 수 있습니다.

관련 제품 제거됨

그 위에 제품 페이지의 다른 요소를 편집할 수 있지만 지금은 모든 것을 그대로 두고 변경 사항을 저장하겠습니다.

divi 빌더 변경 사항 저장

Divi 빌더의 가장 큰 장점 중 하나는 변경 사항을 실시간으로 볼 수 있다는 것입니다. 모든 것이 잘 보이는지 확인하려면 프런트 엔드에서 제품 페이지를 확인하고 결과를 볼 수 있습니다.

divi builder가 관련 제품을 제거했습니다.

Divi 빌더는 Divi 또는 Extra by 우아한 테마뿐만 아니라 대부분의 테마와 함께 작동한다는 점은 주목할 가치가 있습니다.

Divi를 사용하여 사이트를 사용자 정의하는 방법에 대한 추가 가이드는 다음 가이드를 참조하십시오.

  • Divi로 WooCommerce 제품 페이지를 사용자 정의하는 방법
  • Divi Shop 페이지에서 장바구니에 추가 버튼 추가
  • Divi 문의 양식이 작동하지 않습니까? 해결 방법

4) CSS로 관련 제품 제거

테마 파일을 편집하거나 플러그인을 사용하고 싶지 않다면 단일 제품 페이지에서 관련 제품을 숨기는 데 도움이 되는 간단한 CSS 스니펫이 있습니다.

먼저 WordPress 대시보드 에서 모양 > 사용자화 로 이동합니다.

우커머스에서 관련 제품 제거 - 커스터마이저

추가 CSS 섹션을 엽니다.

woocommerce에서 관련 제품 제거 - 추가 CSS

그리고 다음 CSS 코드를 추가합니다.

 .관련 상품 {
 디스플레이: 없음;
 }

워드프레스 커스터마이저는 아래와 같이 실시간으로 모든 업데이트를 볼 수 있는 라이브 미리보기 마법사와 함께 제공됩니다.

보시다시피 CSS를 사용하여 관련 제품을 숨기는 것은 매우 간단합니다. 코드를 붙여넣은 후 구성을 업데이트하기만 하면 됩니다.

5) 테마 옵션에서 제품 제거

일부 프리미엄 테마에는 WooCommerce 스토어를 사용자 정의할 수 있는 몇 가지 옵션이 포함된 전용 테마 패널이 제공됩니다. 대부분의 경우 관련 제품을 제거하는 옵션은 단일 제품 페이지 옵션 아래에 있습니다.

또한 일부 WordPress 테마에는 활성화/비활성화할 수 있는 관련 제품 섹션이 포함된 전용 템플릿이 있습니다. 테마를 살펴보거나 지원팀에 문의하여 알아보는 것이 좋습니다.

보너스: 관련 제품을 개별적으로 끄는 방법

이것은 제품 페이지에서 WooCommerce 관련 제품을 제거하는 고급 방법입니다. 각 제품에서 관련 제품을 활성화/비활성화할 수 있는 체크박스를 WooCommerce 대시보드에 추가하는 코드 스니펫을 추가합니다.

하위 테마의 functions.php 파일에 다음 코드를 추가하거나 사이트별 플러그인을 사용해야 합니다. 이 데모에서는 코드 조각 플러그인을 사용할 것이므로 플러그인 설정으로 이동하여 새 조각을 만들기만 하면 됩니다.

이름을 지정하고 아래에 붙여넣습니다.

코드 설명

이 코드는 관련 제품 섹션을 제거하기 위해 선택할 수 있는 체크박스를 제품 페이지에 추가합니다. 확인란을 "관련 제품 제거"라고 했지만 레이블 라인을 변경하여 사용자 정의할 수 있습니다.

 // 1. 상품 페이지에 체크박스를 추가하여 관련 상품을 삭제합니다.
add_action( 'woocommerce_product_options_general_product_data', 'quadlayers_add_related_products_checkbox' ); 
함수 quadlayers_add_related_products_checkbox()
 {woocommerce_wp_checkbox(배열(
 'id' => 'hide_related',
 '클래스' => '',
 'label' => '관련 제품 제거'
 )
 );
 }

코드의 다음 부분은 확인란을 사용자 정의 필드에 저장합니다.

 // 2. 체크박스 필드 저장

 add_action( 'save_post_product', 'quadlayers_save_related_products_checkbox' );
 기능 quadlayers_save_related_products_checkbox( $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_products_checkbox', 1 );
 기능 quadlayers_hide_related_products_checkbox() {
 글로벌 $product;
 if ( ! 비어 있으면 ( get_post_meta( $product->get_id(), 'hide_related', true ) ) ) {
 remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
 }
 }

모든 코드를 함께 붙여넣고 변경 사항을 저장합니다. 이제 제대로 작동하는지 확인할 때이므로 제품 페이지로 이동하여 게시된 제품을 선택하십시오.

woocommerce에서 관련 제품 제거 - 제품 편집

편집기 내부에 관련 제품 숨기기라는 새 옵션이 표시됩니다.

보너스 숨기기 관련 상품

이 확인란을 선택하면 관련 제품 섹션이 해당 제품 페이지에 표시되지 않습니다. 이제 프론트 엔드를 확인하면 다음과 같은 것을 볼 수 있습니다.

woocommerce에서 관련 제품 제거 - woocommerce 대시보드 옵션

이것은 특정 제품 페이지에 관련 제품 섹션만 표시할 수 있는 유연성을 갖는 훌륭한 옵션입니다. 이것에 대한 자세한 내용은 이것을 볼 수 있습니다.

페이지에 표시할 수 있는 관련 제품 수 변경

이것은 페이지당 표시하는 관련 제품의 수를 변경하는 또 다른 흥미로운 옵션입니다. 이것은 더 깔끔한 관련 제품 섹션이 있거나 몇 가지 관련 항목만 표시하려는 경우에 유용할 수 있습니다.

이렇게 하려면 하위 테마의 functions.php 에 다음 코드를 추가하거나 코드 조각 플러그인을 사용할 수 있습니다.

 /**
 * 관련 상품 수 변경
 */
 기능 woo_related_products_limit() {
 글로벌 $product;
 $args['posts_per_page'] = 6;
 $args를 반환합니다.
 }
 add_filter( 'woocommerce_output_related_products_args', 'quadlayers_related_products_args', 20 );
 기능 quadlayers_related_products_args( $args ) {
 $args['posts_per_page'] = 3; // 관련 상품 3개
 $args['열'] = 1; // 1열로 배열
 $args 반환;
 }

코드를 자세히 보면 1개의 열에 3개의 관련 제품이 표시되는 것을 볼 수 있습니다. 요구 사항에 따라 코드를 조정하고 변경 사항을 저장하기만 하면 됩니다. 프런트 엔드에 반영된 모든 변경 사항을 볼 수 있습니다.

관련 제품을 사용하여 전환율을 높이는 방법

관련 제품의 주요 이점 중 하나는 전환율을 높일 수 있다는 것입니다. 아이디어는 쇼핑객이 보고 있는 품목과 관련된 제품을 표시하여 더 많은 제품을 구매하도록 하는 것입니다. 이러한 관련 제품은 일반적으로 주요 항목의 성능을 보완하거나 향상시킵니다. 예를 들어 노트북을 보고 있다면 노트북 케이스, 외장 하드 드라이브, HDMI 케이블 등이 관련 제품이 될 수 있다.

이것은 전자 상거래에서 인기 있는 전략입니다. 예를 들어 Amazon이나 Flipkart와 같은 인기있는 온라인 상점은 사용자의 과거 주문, 검색 기록, 브랜드 등에 따라 여러 관련 제품을 표시합니다.

결론

대체로 관련 제품은 매출을 높이는 데 도움이 될 수 있습니다. 그러나 이를 숨겨야 하는 상황이 있습니다.

이 가이드에서는 WooCommerce에서 관련 제품을 제거하는 다양한 방법을 보았습니다.

  • 플러그인 사용
  • 프로그래밍 방식(코딩)
  • 전용 페이지 빌더 사용
  • CSS 스니펫 사용
  • 테마 옵션에서

관련 제품 섹션을 숨기는 가장 간단한 방법은 플러그인을 사용하는 것입니다. 플러그인을 활성화하기만 하면 자동으로 관련 제품이 숨겨집니다. 반면에 코딩에 익숙하다면 functions.php 파일을 편집하거나 작은 CSS 스크립트를 추가할 수 있습니다.

또는 개별 페이지에서 관련 제품을 제거하려는 경우 페이지 빌더를 사용하여 제거할 수 있습니다. 마지막으로 프리미엄 테마가 있는 경우 테마 패널에서 관련 제품을 숨길 수 있는 옵션이 제공되는지 확인합니다. 페이지 빌더가 설치되어 있으면 이를 사용하여 상점에서 관련 제품을 숨길 수 있습니다.

매장을 최대한 활용하기 위한 추가 팁은 다음 가이드를 참조하세요.

  • WooCommerce 제품을 추가하는 방법
  • WooCommerce 제품 페이지 사용자 지정
  • WooCommerce 상점 페이지를 편집하는 방법

스토어에서 WooCommerce 관련 제품을 제거하셨습니까? 어떤 방법을 사용하셨나요? 아래 의견 섹션에서 알려주십시오!