장바구니 메시지에서 제품을 변경하지 않는 방법

게시 됨: 2021-12-25

온라인 상점을 사용자 정의하면 경쟁업체와 차별화할 수 있다는 것은 비밀이 아닙니다. 제품 페이지, 쇼핑 페이지, 장바구니 페이지 또는 결제 페이지와 같이 편집할 수 있는 몇 가지 분명한 항목이 있습니다. 그러나 다른 것들은 종종 간과되고 귀하의 사이트에 큰 영향을 미칩니다. 이 가이드에서는 "장바구니에 제품이 없습니다" 메시지를 변경하는 다양한 방법을 보여줍니다.

이전에 명확하지 않은 온라인 상점의 일부 요소를 사용자 정의하는 방법을 살펴보았습니다. 예를 들어 결제 시 오류 메시지를 변경하거나 쇼핑 페이지에서 카테고리를 표시하는 방법을 살펴보았습니다. "장바구니에 제품이 없습니다" 메시지도 마찬가지입니다. 대부분의 상점은 기본 옵션을 그대로 유지하므로 이를 최적화하면 경쟁업체보다 눈에 띄고 이점을 얻을 수 있습니다.

해당 메시지를 변경하는 방법을 보기 전에 해당 메시지가 무엇이며 왜 변경해야 하는지 살펴보겠습니다.

"장바구니에 제품이 없습니다" 메시지가 무엇입니까?

전자 상거래 상점을 처음 열면 아직 장바구니에 항목을 추가하지 않았기 때문에 장바구니가 비어 있습니다. 마찬가지로 장바구니에 일부 항목을 추가한 다음 제거하거나 구매하는 경우에도 비어 있습니다.

이러한 경우 기본적으로 장바구니 페이지를 열면 "현재 장바구니가 비어 있습니다."라는 메시지가 표시됩니다. 이것은 일반적으로 "장바구니에 제품이 없습니다" 메시지라고 합니다.

장바구니 페이지에서 해당 경고를 보는 것 외에도 상점의 위젯 영역에 미니 장바구니로 장바구니 위젯을 추가한 경우 미니 장바구니에서도 확인할 수 있습니다.

미니 카트 미리보기 카트에 제품이 없습니다

"장바구니에 제품이 없습니다" 메시지를 변경하는 이유는 무엇입니까?

이 메시지를 변경하려는 몇 가지 이유가 있을 수 있습니다. 첫째, 텍스트를 사용자 정의하여 고객에게 더 친숙하게 만들 수 있습니다. " 당신의 장바구니가 비어 있습니다! 우리의 추천 제품을 확인하는 것을 고려하십시오! ” 예를 들어 기본 톤보다 따뜻한 톤입니다. 이렇게 하면 방문자가 상점의 다른 페이지를 방문하도록 초대할 수 있습니다. 소수의 온라인 상점에서만 이 작업을 수행하므로 경쟁업체와도 차별화됩니다.

또한 전체 상점을 특정 언어로 번역할 수 있지만 번역 플러그인이 해당 메시지를 제대로 번역하지 못할 수 있습니다. 이 경우 "장바구니에 제품 없음" 메시지를 수동으로 사용자 지정하면 더 나은 제어가 제공됩니다.

많은 사용자 정의 옵션이 있지만 WooCommerce는 기본적으로 이 메시지를 사용자 정의할 수 없습니다. 그러나 이 가이드에서는 "장바구니에 제품이 없습니다" 메시지를 사용자 정의하는 방법을 보여줍니다.

"장바구니에 상품이 없습니다" 메시지를 변경하는 방법

이 메시지를 편집하는 세 가지 주요 방법이 있습니다.

  1. 프로그래밍 방식으로
    1. function.php 파일 편집
    2. mini-cart.php 파일 편집
  2. 플러그인으로

다음 섹션에서는 "장바구니에 제품이 없습니다" 메시지를 변경하기 위해 따라야 하는 모든 단계를 살펴보겠습니다. 이러한 방법에는 WordPress/WooCommerce 파일 구성이 포함되므로 시작하기 전에 전체 백업을 생성하는 것이 좋습니다.

1.1) functions.php 파일을 편집하여 "장바구니에 제품이 없습니다" 메시지를 사용자 정의합니다.

첫 번째 방법으로 우리는 functions.php 파일에서 WooCommerce 후크 를 사용할 것입니다. 이 프로세스는 테마 파일 편집기를 열고 function.php 파일에 몇 줄의 코드를 추가하기만 하면 됩니다.

계속 진행하기 전에 WordPress 하위 테마가 아직 없는 경우 생성하는 것이 좋습니다. 하위 테마는 사용자 정의 후크 및 스크립트를 테마 파일에 추가하는 동시에 변경 사항을 언제든지 되돌릴 수 있도록 하는 좋은 방법입니다. 이러한 변경 사항은 테마 또는 원본 테마 파일을 업데이트하더라도 유지됩니다. 수동으로 생성하지 않으려면 이러한 하위 테마 플러그인을 사용할 수도 있습니다.

WordPress 관리 대시보드 를 열고 모양 > 테마 편집기로 이동하여 시작하겠습니다. 그런 다음 아래와 같이 오른쪽 테마 파일 사이드바에서 functions.php 파일을 클릭합니다.

장바구니에 있는 제품 변경 없음 - 기능 파일

중간에 있는 편집기를 사용하여 functions.php 파일에 다음 스크립트를 추가할 수 있습니다.

 remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'custom_empty_cart_message', 10 );

기능 custom_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '여기에 빈 장바구니 메시지 삽입', 'woocommerce' ) ) );
에코 $html . '</p></div>';
}

[코드 스니펫은 여기에서 가져옵니다.]

이 스니펫은 기본 WooCommerce 빈 장바구니 텍스트를 제거하고 대신 다른 기능을 사용하여 사용자 정의 텍스트를 추가합니다. " 여기에 빈 카트 메시지 삽입 " 을 "장바구니에 제품 없음" 메시지에 사용할 텍스트로 바꾸면 됩니다.

예를 들어 " 현재 장바구니가 비어 있습니다. 추천 제품을 확인하는 것이 좋습니다!"라는 메시지를 표시하려면 다음 코드를 사용할 수 있습니다.

 remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'quadlayers_empty_cart_message', 10 );

함수 quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '카트가 현재 비어 있습니다. 추천 제품을 확인하는 것이 좋습니다!', 'woocommerce' ) ) );
에코 $html . '</p></div>';
}

파일을 업데이트하는 것을 잊지 마세요. 그러면 프런트 엔드에 다음 결과가 표시되어야 합니다.

장바구니에 있는 제품 변경 없음 - 장바구니 텍스트 기능 데모

"장바구니에 제품이 없습니다" 메시지가 미니 카트에도 나타날 수 있음을 확인했습니다. 변경하는 방법을 알아보겠습니다.

1.2) mini-cart.php 파일을 편집하여 "No Products in the Cart" 텍스트 변경

미니 카트 에 표시되는 "장바구니에 제품 없음" 메시지를 사용자 정의하도록 선택할 수도 있습니다. 이를 위한 기능을 사용하는 대신 WooCommerce 템플릿 파일 의 빈 미니 카트 텍스트 를 간단히 교체할 수 있습니다.

이렇게 하려면 WP 관리 대시보드 에서 플러그인 > 플러그인 편집기 로 이동하여 WooCommerce 템플릿 파일을 구성해야 합니다.

그런 다음 편집할 플러그인 선택 옵션을 사용하여 WooCommerce 를 선택하고 선택 을 누릅니다. 그런 다음 플러그인 파일 에서 템플릿 > 장바구니 > mini-cart.php 를 클릭합니다.

장바구니에 담긴 제품 변경 없음 - woocommerce 미니 장바구니 플러그인

기본적으로 장바구니 하단에 다음 코드 줄이 표시되어야 합니다.

 <?php 기타 : ?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( '장바구니에 상품이 없습니다.', '우커머스' ); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_after_mini_cart' ); ?>

" 장바구니에 제품 없음 " 텍스트를 사용자 정의 텍스트로 교체하여 이 코드를 간단히 편집할 수 있습니다. 예를 들어 텍스트를 ' 새 제품 추가를 고려하십시오 '로 변경하려면 다음 코드를 사용해야 합니다.

 <?php 기타 : ?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( '신제품 추가를 고려하세요', '우커머스' ); ?></p>

<?php endif; ?>

<?php do_action( 'woocommerce_after_mini_cart' ); ?>

장바구니에 있는 제품 변경 없음 - 맞춤형 미니 장바구니 텍스트

변경 사항을 저장하면 프런트 엔드에 변경 사항이 표시됩니다.

장바구니에 담긴 제품 변경 없음 - woocommerce 미니 장바구니 텍스트

2. 플러그인으로 "장바구니에 상품이 없습니다" 메시지를 변경하는 방법

이전에 때때로 상점을 특정 언어로 번역하지만 "장바구니에 제품이 없습니다" 메시지는 번역되지 않는다고 언급했습니다. 번역 플러그인을 사용하여 해당 텍스트를 변경하는 방법을 살펴보겠습니다.

사용자 지정 문자열에 대한 번역을 활성화하기 위한 많은 플러그인이 있습니다. 이 데모에서는 Loco Translate 플러그인을 사용합니다. WordPress를 위한 최고의 번역 플러그인 중 하나이며 대시보드에 번역 편집기가 내장되어 있습니다. 이것은 상점에서 "장바구니에 제품 없음" 메시지를 사용자 정의할 때 매우 편리할 수 있습니다.

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

먼저 플러그인 > 새로 추가로 이동하여 플러그인을 설치합니다. 플러그인의 키워드를 입력하고 설치하고 활성화합니다.

또는 수동으로 설치할 수 있습니다. 해당 프로세스에 익숙하지 않은 경우 WordPress 플러그인을 수동으로 설치하는 방법에 대한 가이드를 살펴보세요.

플러그인을 활성화했으면 다음 단계로 넘어갑니다.

2. "현재 장바구니가 비어 있습니다" 메시지 번역

이제 일부 문자열을 번역할 차례입니다. 먼저 WP 관리 대시보드 에서 Loco 번역 > 플러그인 으로 이동합니다. 플러그인 목록에서 WooCommerce 를 클릭하여 번역할 수 있는 모든 문자열을 표시하고 번역할 언어 를 선택하십시오.

여기에서 장바구니 메시지에 필요한 언어를 추가할 수도 있습니다. 새 언어 를 클릭하고 원하는 언어를 추가하기만 하면 됩니다.

장바구니에 제품 변경 없음 - 우커머스 언어 선택 로코 번역

그런 다음 필터 번역 옵션을 사용하여 번역할 올바른 문자열을 검색합니다. "장바구니에 제품 없음" 텍스트를 변경하려면 " 장바구니가 현재 비어 있습니다" 를 입력하기만 하면 됩니다. 그런 다음 검색 결과에서 소스 텍스트 를 클릭하고 사용자 지정 문자열을 번역 섹션에 추가합니다.

예를 들어 테스트 웹사이트에 대한 스페인어 맞춤 번역을 설정해 보겠습니다.

번역이 끝나면 저장을 누릅니다. 이제 프런트 엔드로 이동하여 사이트 언어를 전환하면 새 번역된 메시지가 표시됩니다.

장바구니에 있는 제품 변경 없음 - 사용자 정의 스페인어 번역 텍스트 데모

3. "장바구니에 상품이 없습니다" 메시지 번역

같은 방법을 사용하여 변경하려는 텍스트를 검색하여 모든 문자열을 번역할 수 있습니다. 이 섹션에서는 '장바구니에 제품 없음' 문자열에 중점을 둘 것이지만 미니 카트 텍스트 또는 원하는 메시지에 대한 사용자 정의 번역을 설정할 수 있습니다.

이전에 보았듯이 Loco Translate > Plugins > WooCommerce 로 이동하여 문자열을 번역할 언어 를 선택합니다. 그런 다음 "장바구니에 제품 없음"을 검색하고 문자열을 선택한 다음 원하는 번역을 추가합니다.

변경 사항을 저장하고 프런트 엔드에서 결과를 확인해야 합니다.

사이트 언어 변경에 대한 자세한 내용을 보려면 WordPress 언어 변경 방법에 대한 전체 가이드를 확인하세요.

보너스: Proceed to Checkout 텍스트를 변경하는 방법

"장바구니에 제품 없음" 메시지를 사용자 정의하는 것 외에도 상점에서 고객이 가진 모든 터치포인트를 최대한 활용하기 위해 변경할 수 있는 다른 텍스트가 많이 있습니다. 예를 들어 Proceed to Checkout, Add to Cart 메시지 등과 같은 추가 텍스트를 편집할 수 있습니다. 이 섹션에서는 간단한 WooCommerce 기능을 사용하여 Proceed to Checkout 텍스트를 변경하는 방법에 중점을 둘 것입니다.

참고 : 일부 핵심 파일을 편집할 것이므로 사이트의 전체 백업을 만들고 하위 테마를 사용하는 것이 좋습니다.

Proceed to Checkout 텍스트를 사용자 지정하기 위해 functions.php 파일에 몇 줄의 코드를 추가합니다. 이렇게 하려면 모양 > 테마 편집기 로 이동하고 테마 파일 사이드바에서 functions.php 를 클릭하십시오.

장바구니에 있는 제품 변경 없음 - 기능 파일

이제 사용자 정의 메시지로 " Insert-checkout-text-here " 섹션을 변경하면서 다음 코드를 붙여넣습니다.

 기능 quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="체크아웃 버튼 버튼 alt wc-forward">
<?php esc_html_e( 'Insert-Checkout-Text-Here', '우커머스' ); ?>
</a>
<?php
}

예를 들어, " Please Move to Checkout here "라는 메시지를 표시하려면 다음 스니펫을 사용하십시오.

 기능 quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="체크아웃 버튼 버튼 alt wc-forward">
<?php esc_html_e( '여기로 이동하세요', 'woocommerce' ); ?>
</a>
<?php
}

장바구니에 있는 제품 변경 없음 - 체크아웃 텍스트 기능 변경

그러면 프런트 엔드에서 다음과 같은 결과를 얻을 수 있습니다.

이것은 예이지만 이 텍스트를 사용자 정의하기 위해 더 많은 작업을 수행할 수 있습니다. 자세한 내용 은 Proceed to Checkout 텍스트를 변경하는 방법 에 대한 자습서를 확인하세요. 이 가이드에서는 해당 텍스트를 변경해야 하는 이유와 변경 방법에 대해 설명합니다.

상점에서 수행할 수 있는 더 많은 사용자 정의가 있습니다. 관심 있는 분야라면 WooCommerce 결제 최적화, 한 페이지 결제 생성, WooCommerce 결제 페이지 사용자 정의에 대한 가이드를 살펴보십시오. 마찬가지로 WooCommerce Direct Checkout 및 WooCommerce Checkout Manager와 같은 플러그인을 사용하여 결제 프로세스를 개선할 수 있습니다.

결론

대체로 "장바구니에 제품 없음" 메시지를 사용자 지정하면 고객 여정을 개인화하고 더 나은 쇼핑 경험을 제공할 수 있습니다. 이것은 대부분의 상점 소유자가 종종 간과하므로 경쟁자와 차별화되고 판매를 높이는 데 도움이 될 수 있습니다.

이 가이드에서는 WooCommerce에서 "장바구니에 제품 없음" 메시지를 변경하는 다양한 방법을 보여주었습니다.

  • function.php 파일 사용자 정의
  • mini-cart.php 파일 편집
  • 플러그인으로

이제 메시지를 편집하고 누락된 번역도 조정할 수 있습니다.

"장바구니에 제품 없음" 텍스트를 수정했습니까? 이 가이드를 따르는 데 문제가 있었습니까? 아래 의견에 알려주십시오.

마지막으로 WooCommerce 스토어의 더 많은 요소를 사용자 지정하는 방법에 대해 자세히 알아보려면 다음 문서를 확인하세요.

  • WooCommerce에서 추가 정보 탭을 제거하는 방법
  • WooCommerce 장바구니 페이지를 사용자 정의하는 3가지 방법
  • WooCommerce에서 통화 변경: 전체 가이드
  • WooCommerce Shop 페이지를 사용자 정의하는 방법