WooCommerce에서 장바구니에 추가 버튼을 사용자 정의하는 방법

 add_action( 'woocommerce_single_product_summary', 'QL_add_text_above_add_to_cart', 20 );
기능 'QL_add_text_above_add_to_cart'() {
  echo '14일 환불 보장';
}

반면 에 장바구니에 추가 버튼 아래에 텍스트를 추가 할 수도 있습니다. 이는 예를 들어 대량 구매에 대한 할인이 있을 수 있음을 쇼핑객에게 알리는 데 유용할 수 있습니다. 장바구니에 추가 버튼 아래에 텍스트를 추가하려면 다음 코드 스니펫을 사용할 수 있습니다.

 add_action( 'woocommerce_after_add_to_cart_button', 'QL_add_text_under_add_to_cart' );
기능 QL_add_text_under_add_to_cart() {
  echo '대량구매 문의';
} 

보시다시피 전환율을 즉시 높이기 위해 할 수 있는 매우 쉬운 변경 사항입니다.

3) 장바구니에 담기 버튼 색상 변경

이제 색상을 변경하여 장바구니에 추가 버튼을 편집하는 방법을 살펴보겠습니다. 대부분의 WordPress 및 WooCommerce 테마에는 버튼의 기본 색상이 제공되지만 상점 스타일과 일치하는지 확인해야 합니다.

WooCommerce에서 장바구니에 추가 버튼의 색상을 사용자 지정하려면 style.css 파일에 CSS 코드 스니펫을 추가해야 합니다. Appearance > Customize > Additional CSS 로 이동하여 FTP 클라이언트 또는 WordPress 대시보드에서 액세스할 수 있습니다. 여기에는 두 가지 옵션이 있습니다.

1. 단일 제품의 장바구니에 추가 버튼 색상 변경
2. 아카이브 페이지의 장바구니에 추가 버튼 색상 변경

3.1) 단일 제품의 색상 변경

이 코드를 style.css 파일에 붙여넣고 색상을 원하는 색상으로 변경합니다. 이 경우 빨간색 배경과 은색 텍스트가 있습니다.

 .single-product .product .single_add_to_cart_button.button {
배경색: #FF0000;
색상: #C0C0C0;
}

3.2) 아카이브 페이지에서 장바구니에 추가 버튼 색상 변경

장바구니에 추가 버튼을 사용자 정의하고 WooCommerce 아카이브 페이지에서 색상을 변경하려면 이 코드를 사용하고 16진수 코드를 상점에 적합한 것으로 변경하십시오.

 .woocommerce .product .add_to_cart_button.button {
배경색: #FF0000;
색상: #C0C0C0;
} 

4) 장바구니에 담기 버튼을 제거하고 쇼핑 페이지에 직접 구매 버튼을 추가합니다.

이제 더 고급 옵션을 살펴보겠습니다. 여러 단계의 구매 프로세스가 있으면 각 단계에서 쇼핑객이 이탈할 가능성이 높아집니다. 그렇기 때문에 유입경로를 줄이는 것이 결제를 최적화하고 전환율을 높이는 좋은 방법입니다.

이 섹션에서는 장바구니에 추가 버튼을 제거하고 WooCommerce용 Direct Checkout을 사용하여 직접 구매 버튼으로 교체하는 방법을 보여줍니다. 이 플러그인은 무료 버전과 프리미엄 버전이 모두 있으며 결제를 단순화하는 데 도움이 되는 많은 기능이 함께 제공됩니다. 또한 장바구니 페이지를 건너뛰고 사용자를 직접 결제 페이지로 리디렉션 하여 구매 프로세스를 단축할 수 있습니다. 그럼 장바구니 담기 버튼을 완전히 없애고 직접구매 버튼으로 교체하는 방법을 알아보겠습니다.

장바구니에 담기 버튼 기능 변경

먼저 Direct Checkout을 설치하고 활성화해야 합니다. 이 링크에서 무료 버전 을 다운로드하거나 19 USD(일회성 결제)부터 시작하는 프리미엄 플랜 중 하나를 살펴볼 수 있습니다.

플러그인을 활성화한 후 WordPress 대시보드 에서 WooCommerce > 직접 결제 > 일반 으로 이동하여 다음과 같이 옵션을 입력합니다.

WooCommerce 쇼핑 페이지를 사용자 정의하는 방법에 대한 자세한 내용은 이 전체 가이드를 참조하십시오.

장바구니에 추가 버튼 텍스트 변경

일반 탭에서 옵션을 설정한 후 장바구니에 추가 버튼을 누르면 사용자가 결제 페이지로 리디렉션됩니다. 그러나 기능을 변경한 버튼의 텍스트도 편집해야 합니다. 버튼은 더 이상 제품을 장바구니에 추가하지 않으므로 예를 들어 지금 구매와 같은 것으로 변경하는 것이 좋습니다. 이렇게 하려면 아카이브 탭으로 이동하여 다음과 같이 옵션을 입력합니다. 여기에서 특정 제품 유형에 대한 버튼 텍스트를 변경할 수 있습니다. 해당 필드에서 모든 제품을 선택하여 모든 유형의 제품에 변경 사항을 적용합니다. 그 다음은 프론트 엔드를 확인할 차례입니다.

보시다시피 WooCommerce 스토어의 장바구니에 추가 버튼을 사용자 정의하고 장바구니에 추가 버튼을 지금 구매 버튼으로 교체하여 고객을 쇼핑 페이지에서 바로 체크아웃 페이지로 안내합니다. 게다가 우리는 상점에서 장바구니 기능을 완전히 제거했습니다.

장바구니에 추가 버튼을 제거하는 방법에 대한 자세한 내용은 이 단계별 가이드를 확인하세요.

5) 장바구니에 담기 버튼 사용자 지정 및 제품 페이지에 직접 구매 버튼 추가

마지막으로 유사한 작업을 수행 하고 장바구니에 추가 버튼을 사용자 지정하여 사용자를 제품 페이지에서 체크아웃으로 리디렉션할 수 있습니다 .

이런 식으로 쇼핑 및 제품 페이지 모두 에서 WooCommerce의 맞춤형 장바구니에 추가 버튼을 쉽게 만들 수 있습니다. 그리고 가장 좋은 점은 각 페이지에 다른 버튼을 가질 수 있다는 것입니다.

장바구니에 담기 메시지를 사용자 정의하는 방법

버튼을 사용자 정의하는 것 외에도 장바구니에 추가 메시지를 편집할 수도 있습니다. 가장 쉬운 방법은 다음 스크립트를 functions.php 파일에 붙여넣어 메시지를 변경하는 것입니다.

 add_filter( 'wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message' );
기능 quadlayers_custom_add_to_cart_message() {
   $message = '상품이 장바구니에 추가되었습니다. 함께 쇼핑해주셔서 감사합니다!' ;
   $ 메시지 반환;
}

이 경우 귀하의 제품이 장바구니에 추가되었습니다.라는 메시지가 변경되었습니다. 저희와 함께 쇼핑해주셔서 감사합니다!

좀 더 개인화하기 위해 다음과 같이 고객이 장바구니에 추가한 제품의 이름을 표시할 수 있습니다.

 add_filter( 'wc_add_to_cart_message', 'quadlayers_custom_wc_add_to_cart_message', 10, 2 ); 
 
기능 quadlayers_custom_wc_add_to_cart_message( $message, $product_id ) { 
    $message = sprintf(esc_html__('%s이(가) 장바구니에 추가되었습니다. 쇼핑해주셔서 감사합니다!','tm-organik'), get_the_title( $product_id ) ); 
    $ 메시지 반환; 
} 

이는 몇 가지 예에 불과하지만 메시지에 링크와 버튼을 추가하고 수행할 수 있는 작업이 훨씬 더 많습니다. 이에 대한 자세한 내용은 WooCommerce 장바구니에 담기 메시지를 변경하는 방법에 대한 가이드를 확인하세요.

보너스: 다른 카테고리에 대한 장바구니에 추가 버튼 텍스트 변경

이제 다른 제품 카테고리가 있고 각 카테고리에 대해 사용자 정의 장바구니에 추가 버튼을 갖고 싶다고 가정해 보겠습니다. 예를 들어, 제품 카테고리 1에 대해 "지금 구매"라고 표시된 버튼을 갖고 카테고리 2에 대해 "다운로드" 텍스트를 표시할 수 있습니다.

이렇게 하려면 1번 항목에서 사용한 것과 동일한 기능을 사용해야 합니다. add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

각 제품의 범주를 가져온 다음 조건을 사용하여 다음과 같이 분류에 따라 텍스트를 변경해야 합니다.

if($category=='category 1'){
return __('Buy Now', 'woocommerce');
}elseif($category=='category 2'){
return __('Download', 'woocommerce');
}else{
return __('Default text', 'woocommerce');
}

내 장바구니에 추가 버튼이 작동하지 않습니다. 어떡해?

장바구니에 추가 버튼이 작동하지 않는 데에는 여러 가지 이유가 있을 수 있습니다. 가장 일반적인 것은 다음과 같습니다.

• 플러그인/테마 비호환성
• 정보가 불완전한 제품
• 캐시 문제
• 체크아웃 엔드포인트
• 퍼머링크
• ModSecurity 문제
• 그리고 더

이러한 각 문제를 해결하는 방법을 알아보려면 장바구니에 추가 버튼을 수정하는 방법에 대한 가이드를 확인하세요.

노트

• 플러그인 옵션 패널의 아카이브 섹션에 저장한 설정은 기본 상점 및 제품 카테고리 페이지에 적용되는 반면 제품 섹션의 설정은 제품 페이지에만 적용됩니다.
• 이 데모에서는 Storefront 테마를 사용했지만 WooCommerce와 호환되는 모든 테마를 사용할 수 있습니다.
• 대부분의 테마는 문제 없이 통합되지만 일부 테마는 기본 WooCommerce 기능을 변경할 수 있으며 Direct Checkout을 사용할 때 문제를 일으킬 수 있습니다.
• Direct Checkout의 몇 가지 기본 기능을 살펴보았습니다. 더 많은 고급 기능을 보려면 매장을 한 단계 업그레이드하는 데 도움이 되는 프리미엄 플랜을 확인하세요.

결론

대체로 장바구니에 추가 버튼을 사용자 지정하면 비즈니스에 큰 영향을 줄 수 있습니다. 그렇기 때문에 매장의 요구 사항에 맞게 조정하는 것이 좋습니다. 이 가이드에서는 프로그래밍 방식과 플러그인을 사용하여 장바구니에 추가 버튼을 사용자 지정하는 다양한 방법을 배웠습니다.

• 장바구니에 추가 버튼의 텍스트 변경
• 장바구니에 추가 버튼 위 또는 아래에 텍스트 추가
• 장바구니에 추가 버튼 색상 변경
• 장바구니에 담기 버튼을 제거하고 쇼핑 페이지에서 직접 구매 버튼을 추가하세요.
• 장바구니에 추가 버튼 사용자 지정 및 제품 페이지에 직접 구매 버튼 추가