WooCommerce 감사 페이지에 대한 모든 것

게시 됨: 2022-09-19

어떤 형태의 비즈니스에서도 고객이 구매를 하면 항상 "감사합니다"라고 말하는 것이 중요합니다. 전자 상거래에서는 감사 페이지를 사용하여 이를 용이하게 합니다.

전자 상거래의 감사 페이지는 고객과 연결할 수 있고 장기적으로 매출 증대에 도움이 될 수 있기 때문에 매우 중요합니다. 구매에 만족한 고객은 향후 해당 매장에서 재구매를 하거나 다른 잠재 고객에게 제품을 추천할 가능성이 높기 때문입니다.

이 기사에서는 WooCommerce 감사 페이지와 페이지를 사용자 정의하는 방법을 살펴보겠습니다.

목차

WooCommerce 감사 페이지란?

기본 WooCommerce 감사 페이지 사용자 정의

  1. 기본 WooCommerce 감사 페이지 사용자 정의의 중요성
  2. WooCommerce 감사 페이지를 사용자 정의하는 방법
    • 플러그인 사용
    • 후크 사용
    • 수동 템플릿 재정의

결론

WooCommerce 감사 페이지란?

WooCommerce 감사 페이지는 웹 사이트 내에서 주문한 직후 고객에게 표시되는 페이지입니다. "구매 확인 페이지" 또는 "주문 접수 페이지"라고도 합니다.

감사 페이지에 액세스하면 URL 형식은 yourdomain/checkout/order-received/2554/?key=wc_order_WCS88FJQkkjI9가 됩니다.

다음은 페이지의 샘플 스크린샷입니다.

위의 스크린샷에서 볼 수 있듯이 감사 페이지에는 다양한 구성 요소가 있습니다. 그 중 일부는 다음과 같습니다.

감사 메시지: 이것은 단순히 상품을 구매한 고객에게 감사를 전하는 메시지입니다. 위의 스크린샷에서 볼 수 있듯이 "감사합니다. 주문이 접수되었습니다."

일반 주문 정보: 이 섹션에는 주로 특정 주문에 대한 일반 세부 정보가 포함되어 있습니다. 이러한 세부 정보에는 주문 번호, 날짜, 총액, 구매에 사용한 이메일 및 지불 방법이 포함됩니다.

주문 세부 정보: 이 섹션에는 주문 세부 정보가 표 형식으로 표시됩니다. 이러한 세부 정보에는 제품 이름, 제품 가격, 소계, 총 가격, 결제 방법, 배송료(활성화된 경우)가 포함됩니다.

주소: 이 섹션에는 고객 주소에 대한 세부 정보가 포함됩니다(사용 가능한 경우 청구지 주소 및 배송 주소).

기본 WooCommerce 감사 페이지 사용자 정의

위에서 설명한 구성 요소에서 감사 페이지는 구매 프로세스에서 매우 중요한 것을 고려하여 여전히 개선의 여지가 있음을 알 수 있습니다.

이 섹션에서는 기본 WooCommerce 감사 페이지 사용자 지정의 중요성과 사용자 지정 방법에 대해 살펴보겠습니다.

기본 WooCommerce 감사 페이지 사용자 정의의 중요성

고객이 제품을 구매하고 감사 페이지에 도착하면 이것이 구매 여정의 마지막 단계로 간주되어서는 안 됩니다. 고객과의 관계를 높이고 자신감을 심어주기 위해 실제로 더 많은 일을 할 수 있습니다.

따라서 페이지는 더 많은 기능을 제공할 수 있습니다. 그 중 일부는 다음과 같습니다.

  1. 훌륭한 온보딩 경험 만들기: 감사 페이지는 해당되는 경우 방금 제품을 구매한 고객에게 온보딩 자료를 공유하는 데 사용할 수 있습니다. 이러한 자료에는 문서, 제품 비디오 및 최종 고객에게 도움이 될 수 있는 기타 자료가 포함될 수 있습니다.
    이 정보를 통해 고객은 제품 사용 방법을 파악하는 데 시간을 거의 들이지 않고도 제품 사용을 자세히 알아볼 수 있습니다.
  2. 훌륭한 판매 후 경험 만들기: 잘 디자인되고 맞춤화된 감사 페이지는 기본 감사 페이지에 비해 고객에게 좋은 인상을 남깁니다. 이는 웹사이트 내에서 훌륭한 고객 경험으로 이어집니다.
  3. 신뢰 생성: 때때로 고객이 특히 새 제품에 대한 구매를 수행하면 제품이 예상대로 작동하는지 의심할 수 있습니다. 그러나 감사 페이지가 긍정적인 리뷰나 평가와 같은 콘텐츠를 포함하도록 사용자 지정되면 이러한 고객에게 확신을 주는 역할을 하여 그러한 의심을 해소할 수 있습니다. 고객은 이를 기반으로 웹사이트 내에서 추가 작업을 수행할 가능성도 있습니다.
  4. 마케팅 전략으로 행동: 예를 들어 고객이 소셜 공유 버튼을 사용하여 감사합니다에 도착하고 그러한 고객이 이미 제품을 신뢰하는 경우 사용 가능한 소셜 사이트 내에서 구매를 공유할 가능성이 높습니다. 이러한 공유는 잠재 고객을 귀하의 웹사이트로 끌어들일 수 있습니다.
    페이지에 제안을 표시하여 현재 보유하고 있는 다른 제품을 마케팅할 수도 있습니다.
  5. 독창성: 잘 디자인된 감사 페이지는 웹사이트를 돋보이게 하여 고객에게 전반적으로 다른 경험을 제공합니다.

WooCommerce 감사 페이지를 사용자 정의하는 방법

WooCommerce는 감사 페이지에 대한 광범위한 사용자 정의 옵션을 제공하지 않습니다. 그러나 페이지를 사용자 정의하는 방법에는 여러 가지가 있습니다. 이 섹션에서는 감사 페이지를 사용자 정의할 수 있는 몇 가지 방법을 살펴보겠습니다.

플러그인 사용

WooCommerce 감사 페이지를 사용자 정의하는 데 사용할 수 있는 플러그인이 많이 있습니다. 그 중 일부는 다음과 같습니다.

  • 맞춤 감사 페이지 확장 프로그램
  • NextMove Lite – WooCommerce 감사 페이지
  • WooCommerce를 위한 YITH 맞춤 감사 페이지

이 가이드에서는 플러그인 중 하나인 무료 NextMove Lite – WooCommerce 플러그인에 대한 감사 페이지를 살펴보겠습니다.

NextMove Lite 설치 – WooCommerce 감사 페이지

플러그인을 설치하려면 플러그인 > 새로 추가 섹션으로 이동하여 “NextMove Lite – WooCommerce에 대한 감사 페이지”를 검색하십시오.

그런 다음 플러그인 옆에 있는 "지금 설치" 버튼을 클릭합니다.

이 작업이 완료되면 플러그인을 활성화합니다.

기본 NextMove 감사 페이지

NextMove 플러그인을 활성화하면 플러그인은 기본 감사 페이지를 생성합니다. 이것은 WooCommerce > 설정 > NextMove Lite: XLlugins 섹션에서 찾을 수 있습니다.

이 감사 페이지를 원하는 대로 사용자 정의하거나 새 페이지를 추가할 수 있습니다. 새 감사 페이지를 추가하려면 아래 섹션에 설명된 "새로 추가" 버튼을 클릭해야 합니다.

감사 페이지 사용자 정의

감사 페이지 사용자 정의 도구는 아래 스크린샷과 같이 "구성 요소" 링크를 먼저 클릭하여 액세스할 수 있습니다.

그렇게 하면 감사 페이지 사용자 정의 섹션으로 리디렉션됩니다.

위의 스크린샷에서 볼 수 있듯이 커스터마이저에는 4개의 핵심 섹션이 있습니다. 이것들은:

  • 구성 요소 선택: 감사 페이지 내에서 사용할 수 있는 다양한 모듈 또는 구성 요소를 포함합니다. 이 섹션에서 원하는 구성 요소를 선택할 수 있습니다.
  • 구성 요소 편집: 선택한 구성 요소를 사용자 지정할 수 있습니다. 여기에서 제목과 같은 다양한 내용을 변경하고 다른 스타일을 적용할 수도 있습니다.
  • 레이아웃 선택: 이 섹션 내에서 원하는 감사 페이지 레이아웃을 정의할 수 있습니다. 1열 또는 2열 레이아웃을 선택할 수 있습니다.
  • 구성 요소 정렬: 구성 요소 정렬 섹션을 사용하면 감사 페이지에 있는 다양한 구성 요소를 원하는 순서로 끌어다 놓을 수 있습니다.

감사 페이지 사용자 정의

사용자 지정 방법에 대한 예로서 여기에서는 새로운 감사 페이지를 설정하고 여기에 구성 요소를 추가합니다.

시작하려면 "새로 추가" 버튼을 클릭하십시오.

다음 화면에서 감사 페이지의 제목을 지정하고 아래 그림과 같이 페이지 우선 순위도 1로 설정합니다.

이 작업이 완료되면 페이지를 게시합니다. 그러면 감사 페이지 사용자 정의 섹션으로 리디렉션됩니다. 여기에서 페이지에 몇 가지 기본 구성 요소가 추가되었음을 알 수 있습니다.

주문 확인, 고객 세부 정보 및 주문 세부 정보입니다. 이러한 구성 요소의 다양한 측면을 원하는 대로 사용자 지정할 수 있습니다.

각각을 사용자 정의하려면 "구성 요소 정렬" 섹션에서 특정 구성 요소를 클릭해야 합니다. 그런 다음 구성 요소는 다양한 측면을 변경할 수 있는 "구성 요소 편집" 섹션 내에서 렌더링됩니다.

여기의 경우 주문 확인을 위해 글꼴 크기, 제목 및 부제목의 색상을 사용자 정의하고 부제목을 변경합니다.

고객 세부 정보 구성 요소의 경우 아래와 같이 테두리와 배경을 변경합니다.

주문 세부 정보 섹션과 관련하여 아래와 같이 제목과 레이아웃을 사용자 정의합니다.

위의 구성 요소 외에도 두 개의 추가 구성 요소를 추가합니다.

i) 이미지 텍스트

이 구성 요소의 경우 고객이 다른 제품을 구매하도록 유도하기 위해 이미지와 일부 홍보 문구를 추가합니다.

구성 요소 내에서 아래 스크린샷과 같이 "쇼핑 계속" 버튼의 표시도 활성화합니다.

ii) 비디오

페이지 내에는 매장 제품에 대한 추가 정보를 제공하는 비디오도 포함됩니다. 비디오 소스 섹션에 Youtube 또는 Vimeo 비디오를 포함할 수 있습니다.

위의 작업이 수행되면 레이아웃을 변경하고 "2열 레이아웃"을 선택할 수 있습니다. 그런 다음 두 열 내에서 구성 요소를 원하는 대로 그룹화할 수 있습니다.

그런 다음 변경 사항이 적용되는지 확인하기 위해 감사 페이지를 미리 볼 수 있습니다. 다음은 위에서 수행한 변경 사항의 샘플 보기입니다.

후크 사용

감사 페이지를 사용자 정의하는 데 사용할 수 있는 WooCommerce 후크가 많이 있습니다. 다음은 이러한 후크의 전체 목록입니다. Action 및 Filter Hook Reference .

이러한 코드 사용자 정의는 하위 테마 내의 functions.php 파일에 추가해야 합니다.

예를 들어 주문 수신 메시지를 변경하려면 다음 코드를 추가할 수 있습니다.

 add_filter('woocommerce_thankyou_order_received_text', 'alter_order_received_text', 10, 2 ); function alter_order_received_text( $newstr, $neworder ) { $new_text = 'Thank You For Your Order. We are glad to have you as our customer.'; return $new_text; }

다음은 샘플 출력 그림입니다.

수동 템플릿 재정의

WooCommerce 감사 페이지는 하위 테마 내에서 템플릿 재정의를 통해 사용자 지정할 수도 있습니다.

이를 달성하려면 다음이 필요합니다.

i) woocommerce > 템플릿 > 체크아웃 디렉토리로 이동하여 Thankyou.php 파일을 복사합니다.

ii) 하위 테마 내의 파일을 woocommerce > checkout 디렉토리 경로에 붙여넣습니다. 다음은 이에 대한 예시입니다.

이 작업이 완료되면 원하는 대로 Thankyou.php 코드를 사용자 정의할 수 있습니다.

예를 들어 Thank You 페이지에 주문 날짜를 포함하려면 Thankyou.php 파일에 다음 코드를 추가해야 합니다.

 <p class="woocommerce-order-date"> <?php _e( 'Order Date:', 'woocommerce' ); ?> <strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong> </p>

따라서 파일 내의 전체 코드는 예를 들어 다음과 같이 읽힙니다.

 <?php /** * Thankyou page * * This template can be overridden by copying it to yourtheme/woocommerce/checkout/thankyou.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 3.7.0 */ defined( 'ABSPATH' ) || exit; ?> <div class="woocommerce-order"> <?php if ( $order ) : do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?> <?php if ( $order->has_status( 'failed' ) ) : ?> <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php esc_html_e( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.', 'woocommerce' ); ?></p> <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions"> <a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php esc_html_e( 'Pay', 'woocommerce' ); ?></a> <?php if ( is_user_logged_in() ) : ?> <a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php esc_html_e( 'My account', 'woocommerce' ); ?></a> <?php endif; ?> </p> <?php else : ?> <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received now.', 'woocommerce' ), $order ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> <p class="woocommerce-order-date"> <?php _e( 'Order Date:', 'woocommerce' ); ?> <strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong> </p> <?php endif; ?> <?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?> <?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?> <?php else : ?> <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received now.', 'woocommerce' ), null ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> <?php endif; ?> </div>

결론

제품을 구매한 후 고객에게 "감사합니다"라는 말을 하면 전반적으로 좋은 고객 경험이 향상됩니다. WooCommerce는 감사 페이지를 제공하여 이를 가능하게 합니다. 그러나 거기에 많은 세부 사항이 포함되어 있지 않습니다.

이 가이드에서는 기본 WooCommerce 감사 페이지를 사용자 정의하는 방법을 살펴보았습니다. 감사 페이지를 사용자 정의하는 빠르고 쉬운 방법을 위해 플러그인 접근 방식을 사용할 수 있습니다. 반면에 코드가 두렵지 않다면 다른 두 가지 접근 방식 중 하나를 사용할 수 있습니다.

질문이나 기여 사항이 있는 경우 아래의 의견 섹션에서 자유롭게 공유하십시오.