WooCommerce에서 품절 제품을 숨기는 방법

게시 됨: 2021-03-02

WooCommerce 제품 페이지를 사용자 정의하고 사용자 경험을 개선할 수 있는 좋은 방법을 찾고 계십니까? 그럼 당신은 바로 이곳에 왔습니다. 이 가이드에서는 WooCommerce에서 품절 제품을 숨기는 다양한 방법을 배웁니다.

WooCommerce에서 품절 제품을 숨기는 이유는 무엇입니까?

실제 제품을 판매하는 온라인 비즈니스를 운영하는 경우 일부 품목이 때때로 매진될 수 있습니다. 이러한 경우 다음을 수행할 수 있습니다.

  • Google 검색에서 제품 가격과 재고를 숨기고 제품을 사용할 수 없는 경우에도 쇼핑객이 제품 페이지를 방문할 수 있도록 합니다.
  • 가격을 숨기고 있는 제품을 표시하고 사용자가 제품을 다시 사용할 수 있을 때 푸시 알림을 받도록 선택할 수 있는 "알림" 버튼을 추가합니다.
  • 고객이 제품을 구매할 수 없도록 장바구니에 추가 버튼 제거
  • 품절된 상품 숨기기

이러한 각 옵션에는 장단점이 있습니다. 이 가이드에서는 사용할 수 없는 제품을 숨기는 방법에 중점을 둘 것입니다. 기본적으로 WooCommerce에서 제품의 재고가 없으면 쇼핑 페이지에 기존의 구매 또는 장바구니에 추가 버튼 대신 자세히 보기 버튼 이 표시됩니다. 또한 품절된 제품의 구매 옵션은 제품 페이지에서 비활성화됩니다.

이는 특히 제한된 기간 동안 제품을 판매하거나 재고를 자주 변경하는 경우 일부 사용자에게는 불편할 수 있습니다. 따라서 현재 사용 가능하고 배송 준비가 된 제품만 표시하려면 사용할 수 없는 항목을 일시적으로 숨기는 것이 좋습니다. WooCommerce에서 이를 수행하는 방법을 살펴보겠습니다.

WooCommerce에서 품절된 제품을 숨기는 방법

WooCommerce에서 품절 제품을 숨기는 두 가지 주요 방법이 있습니다.

  1. WooCommerce 설정에서
  2. 프로그래밍 방식으로

두 가지 방법을 자세히 살펴보겠습니다.

1) WooCommerce 설정에서 품절 상품 숨기기

사용할 수 없는 제품을 숨기는 가장 간단한 방법은 WooCommerce 설정 을 사용하는 것입니다. WordPress 대시보드에서 WooCommerce > 설정 > 제품 > 인벤토리로 이동합니다. 거기 에 재고 없음 표시 옵션이 표시 됩니다. 활성화하고 변경 사항 저장 을 클릭하기만 하면 됩니다.

품절 상품 숨기기 - 우커머스 설정

이제 모든 재고가 없는 제품은 다음 페이지에서 자동으로 숨겨집니다.

  • 쇼핑 페이지
  • 검색 결과
  • 제품 카테고리
  • 제품 태그 페이지
  • 관련 제품 섹션
  • 상향 판매 및 교차 판매 섹션

간단한 솔루션을 원하고 해당 페이지에서 사용할 수 없는 제품을 숨기고 싶다면 이것이 훌륭한 대안입니다. 그러나 더 많은 유연성을 원하고 특정 페이지 에서 품절 제품을 숨기는 옵션을 원할 경우 약간의 코드를 사용해야 합니다.

2) 프로그래밍 방식으로 재고가 없는 WooCommerce 제품 숨기기

프로그래밍 방식으로 WooCommerce에서 품절된 제품을 숨기려면 필터 후크 를 사용해야 합니다. 후크에 익숙하지 않다면 이 가이드에서 후크에 대해 자세히 알아보고 최대한 활용하는 방법을 알아보는 것이 좋습니다.

이 자습서에서는 사이트에 직접 추가하여 품절된 제품을 숨길 수 있는 몇 가지 스크립트를 보여줍니다.

시작하기 전에

일부 핵심 파일을 수정하므로 사이트를 백업하는 것이 좋습니다. 또한 다음 번에 테마를 업데이트할 때 변경 사항을 잃지 않도록 하위 테마를 만들거나 이러한 플러그인 중 하나를 사용하십시오.

오늘 보여줄 스크립트는 functions.php 파일에 있어야 합니다. 이 파일을 열려면 WordPress 관리 대시보드 에서 모양 > 테마 편집기 로 이동합니다. 그런 다음 오른쪽 사이드바에 있는 functions.php 파일을 클릭하여 테마 함수 파일을 엽니다.

품절 상품 숨기기 우커머스 - 테마 편집기 기능

아래에 나열된 스크립트를 이 섹션에 간단히 붙여넣을 수 있습니다.

이제 WooCommerce에서 품절 상품을 숨기는 몇 가지 예를 살펴보겠습니다.

2.1) 상점 아카이브 페이지에서 품절 상품을 숨기는 방법

woocommerce_product_query_meta_query 필터 후크와 함께 다음 기능을 사용하여 Shop 아카이브 페이지 에서 품절 제품을 숨길 수 있습니다. 하위 테마의 functions.php 파일에 다음 스크립트를 추가하고 파일을 업데이트하기만 하면 됩니다.

 add_filter( 'woocommerce_product_query_meta_query', 'shop_only_instock_products', 10, 2 );
 함수 shop_only_instock_products( $meta_query, $query ) {
 // 상점 아카이브 페이지에서만
 if( is_admin() || is_search() || ! is_shop() ) $meta_query를 반환합니다.

 $meta_query[] = 배열(
 '키' => '_stock_status',
 '값' => '재고 없음',
 '비교' => '!='
 );
 $meta_query 반환;
 } 
품절 제품 숨기기 - 상점 아카이브에서

2.2) 홈페이지에서 품절 상품을 숨기는 방법

품절된 상품을 홈페이지 에서만 숨기고 싶다면 동일한 woocommerce_product_query_meta_query 필터 후크를 사용하여 다음 기능을 사용할 수 있습니다.

 add_filter( 'woocommerce_product_query_meta_query', 'filter_product_query_meta_query', 10, 2 );
 기능 filter_product_query_meta_query( $meta_query, $query ) {
 // 우커머스 홈페이지에서만
 if( is_front_page() ){
 // "재고 없음" 제품 제외
 $meta_query[] = 배열(
 '키' => '_stock_status',
 '값' => '재고 없음',
 '비교' => '!=',
 );
 }
 $meta_query 반환;
 }


2.3) 검색 페이지에서 품절 제품을 숨기는 방법

모든 검색 페이지 에서 사용할 수 없는 제품을 숨기려면 pre_get_posts 작업 후크를 사용하는 다음 기능을 사용할 수 있습니다. 하위 테마의 functions.php 에 붙여넣고 파일 업데이트 버튼을 누르기만 하면 됩니다. 이렇게 하면 고객이 품절된 제품을 검색해도 찾을 수 없게 됩니다.

 add_action( 'pre_get_posts', hide_out_of_stock_in_search' );
 기능 hide_out_of_stock_in_search( $query ){
 if( $query->is_search() && $query->is_main_query() ) {
 $query->set( '메타_키', '_stock_status' );
 $query->set( '메타_값', '재고' );
 }
 } 
품절 제품 숨기기 - 검색 페이지에서

2.4) 관련 상품 섹션에서 품절 상품을 숨기는 방법

관련 제품 섹션 에 품절 제품이 표시되지 않도록 하려면 이 스크립트를 사용할 수 있습니다. 이렇게 하면 고객은 바로 구매할 수 있는 제품의 추천만 받게 됩니다.

 기능 hide_out_of_stock_option( $option ){
 '예'를 반환합니다.
 }
 add_action( 'woocommerce_before_template_part', 기능( $template_name ) {
 if( $template_name !== "단일 제품/관련.php" ) {
 반품;
 }
 add_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'hide_out_of_stock_option' );
 } );
 add_action( 'woocommerce_after_template_part', function( $template_name ) {
 if( $template_name !== "단일 제품/관련.php" ) {
 반품;
 }
 remove_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'hide_out_of_stock_option' );
 } );

관련 제품 섹션을 쉽게 제거하는 방법을 배우고 싶다면 이 가이드를 확인하세요.

특정 제품에서 품절 텍스트를 제거하는 방법

또 다른 흥미로운 대안은 약간의 CSS 를 사용하여 특정 제품 에서만 품절 텍스트를 숨기는 것입니다. 이렇게 하면 상점에 특정 제품을 표시할 수 있지만 구매 옵션을 비활성화할 수 있습니다. 이것은 새로운 제품을 출시하려고 하고 약간의 과장된 광고를 만들려는 경우 또는 항목이 다시 사용 가능하게 되었을 때 알림을 받을 수 있는 옵션을 추가할 때 유용할 수 있습니다.

품절 제품 숨기기 - 품절 텍스트

특정 상품의 품절 텍스트를 삭제하려면 숨기고 싶은 상품의 상품 ID 를 확인해야 합니다. 이를 위해 WordPress 관리 대시보드 에서 제품으로 이동하여 제품 위로 마우스를 가져간 다음 특정 WooCommerce 제품 아래에 제품 ID 를 복사합니다. 예를 들어 우리의 경우 제품 ID는 37입니다.

품절 제품 숨기기 - 제품 ID

그런 다음 모양 > 사용자 정의 > 추가 CSS 로 이동합니다.

주제 설정

그런 다음 다음 CSS 코드를 붙여넣고 Publish 를 누릅니다. xx를 게시물 ID 번호로 바꾸는 것을 잊지 마십시오.

 .postid-xx .out-of-stock { 표시: 없음 !중요; }

우리의 경우 제품 ID가 37인 특정 제품의 품절 텍스트를 숨기기 위해 다음 코드를 사용합니다.

 .postid-37 .out-of-stock { 표시: 없음 !중요; } 
품절 CSS

또한 이 CSS 코드를 사용하여 모든 WooCommerce 제품에서 품절 텍스트를 숨길 수도 있습니다.

 .woocommerce-page .out-of-stock { 표시: 없음 !중요; }

변경 사항을 저장하여 사용자 지정을 완료하면 됩니다.

보너스: 제품 재고를 표시하지 않음

품절 상품을 제거하는 대신 상품의 재고 표시 여부를 결정할 수도 있습니다. WooCommerce > 설정 > 제품 > 인벤토리 로 이동하여 주식 표시 형식으로 이동하면 세 가지 옵션이 표시됩니다.

  1. 항상 재고 남은 수량 표시
  2. 재고가 적을 때만 잔여 수량 표시
  3. 재고 잔여 수량 표시 안 함

세 번째 옵션을 선택하면 제품 페이지에 제품 재고가 표시되지 않습니다. 단, 가변형 상품에는 적용되지 않습니다. 다양한 제품 페이지에서 사용자는 선택한 변형에 대해 " 재고 있음 " 또는 " 재고 없음 " 레이블을 볼 수 있습니다.

품절 상품 숨기기 WooCommerce - 재고 정보

좋은 소식은 약간의 코드로 제품 재고 라벨을 숨길 수 있다는 것입니다.

가변 제품에 대한 재고 정보를 제거하려면 functions.php 파일에 다음 코드를 추가하기만 하면 됩니다.

참고 : 다시 한 번 핵심 파일을 편집할 것이므로 코드 조각을 추가하기 전에 사이트를 백업하고 하위 테마를 만드는 것을 잊지 마십시오.

 // 가변 상품의 상품 페이지에서 재고 정보를 제거합니다.
기능 quadlayers_remove_stock_data_variable_products( $data ) {
    unset( $data['availability_html'] );
    $ 데이터 반환;
}
add_filter( 'woocommerce_available_variation', 'quadlayers_remove_stock_data_variable_products', 99 );

그게 다야! 이렇게 하면 가변 제품에 대한 제품 페이지에서 재고 정보를 제거 할 수 있습니다. 자세한 내용은 이 페이지를 확인하세요.

최종 권장 사항

테마 파일에 코드 줄을 잘못된 방식으로 추가하면 사이트가 손상될 수 있으므로 사용자 지정을 시작하기 전에 다음 사항을 기억하십시오.

  • 사이트의 전체 백업 생성
  • 코드나 스크립트 수정에는 항상 자식 테마를 사용하세요. 만드는 방법을 모르는 경우 가이드를 확인하세요.
  • 변경 사항을 개별적으로 테스트하여 문제를 일으키는 항목을 식별할 수 있습니다.
  • 여러 코드를 사용하는 경우 코드를 결합할 때 가능한 모든 시나리오에서 원활하게 작동하는지 확인하십시오.

결론

요약하자면, 쇼핑객이 상점에서 살 수 있는 제품만 표시하려는 경우 사용할 수 없는 품목을 숨기는 것은 실제 제품을 판매하는 사람들에게 좋은 아이디어가 될 수 있습니다.

이 가이드에서는 WooCommerce에서 재고가 없는 제품을 두 가지 방법으로 숨기는 방법을 보여주었습니다.

  1. WooCommerce 설정에서
  2. 프로그래밍 방식으로

쉬운 솔루션을 원하고 모든 페이지에서 사용할 수 없는 제품을 숨기려면 WooCommerce 설정에서 수행하는 것이 탁월한 선택입니다. 쉽고 빠르며 누구나 할 수 있습니다. 더 많은 유연성을 갖고 특정 페이지에서만 제품을 숨기려면 약간의 코드를 사용해야 합니다. 더 많은 작업을 수행할 수 있으므로 이러한 스크립트를 기본으로 사용하여 스토어를 최대한 활용할 수 있도록 사용자 지정하는 것이 좋습니다.

마지막으로 약간의 CSS 를 사용하여 특정 제품 에서 품절된 텍스트를 제거하는 방법을 살펴보았습니다.

질문이 있는 경우 알려주세요. 기꺼이 도와드리겠습니다.

품절된 가격을 숨길 수 있는 다른 방법을 알고 있습니까? 아래 의견 섹션에서 알려주십시오!