코드로 WooCommerce 감사 페이지를 사용자 정의하는 방법
게시 됨: 2022-09-15성공적인 감사 페이지의 가장 중요한 측면은 사람들이 그것을 볼 수 있도록 하는 것입니다. 화려하거나 복잡한 것은 필요하지 않습니다. 사이트의 나머지 부분에서 눈에 띄어 좋은 첫인상을 주기만 하면 됩니다.
이 기사의 목적은 WooCommerce 감사 페이지를 사용자 정의하거나 코드를 사용하여 수신 페이지를 주문하는 방법에 대한 일반적인 자습서를 제공하는 것입니다.
WooCommerce 감사 페이지를 사용자 정의하는 이유는 무엇입니까?
감사 페이지는 구매 후 고객과 계속 연락할 수 있는 방법을 제공합니다.
온라인 상점에서 주문 확인 또는 감사 페이지의 중요성을 간과할 수 있지만 실제로는 판매 프로세스의 중요한 부분입니다.
기본 WooCommerce 감사 페이지는 고객에게 지루하고 막다른 골목입니다. 고객은 다음 단계에 대해 혼란스러워합니다.
대신 사용자 지정하면 다음을 수행할 수 있습니다.
- 온보딩 지침 추가, 다음 단계…
- 교차 판매 및 상향 판매를 통해 관련 제품 홍보
- 쿠폰을 사용하여 반복 구매 유도
- 고객에게 귀중한 자원 제공
- 사회적 증거, 비디오 등으로 고객 참여
이를 고려하여 코드를 사용하여 사용자 지정 감사 페이지를 쉽게 만들고 사용자 지정할 수 있는 방법을 살펴보겠습니다. 친애하는 개발자 여러분, 여기 모든 눈!
코드로 WooCommerce 감사 페이지 사용자 지정
코드를 사용하여 감사 페이지 또는 주문 수신 페이지를 사용자 정의하는 세 가지 방법이 있습니다.
- 리디렉션 만들기
- 필터 사용
- 템플릿 파일 덮어쓰기
또한 참조를 위해 다른 탭에서 열려 있는 파일에 코드를 안전하게 추가하는 방법에 대해 이 게시물을 유지하세요.
세 가지 방법을 각각 자세히 살펴보겠습니다.
리디렉션을 만들어 감사 페이지 사용자 지정
새 플러그인을 만들거나 functions.php 파일을 열고 파일 끝에 다음 코드를 입력하여 리디렉션하는 것은 간단합니다.
add_action( '템플릿_리디렉션', 'sa_custom_redirect_after_purchase' ); 함수 sa_custom_redirect_after_purchase() { 글로벌 $wp; if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) { wp_redirect( 'https://demo.storeapps.org/woocommerce/thank-you/' ); 출구; } }
주문 후 맞춤 감사 페이지입니다.
리디렉션은 좋은 것 같지만 주문 요약 테이블, 청구 및 배송 세부 정보 및 WooCommerce가 현재 제공하는 기타 중요한 정보와 같은 중요한 정보가 누락되었습니다.
필터를 사용하여 감사 페이지 사용자 정의
감사 페이지를 만드는 대신 페이지 제목을 변경하거나 주문 정보 전에 일부 텍스트를 변경할 수 있습니다. 이러한 경우 필터를 사용할 수 있습니다.
감사 페이지 제목 변경
add_filter( 'the_title', 'sa_title_order_received', 10, 2 ); 함수 sa_title_order_received( $title, $id ) { if ( function_exists( 'is_order_received_page' ) && is_order_received_page() && get_the_ID() === $id ) { $title = "주문해주셔서 감사합니다 :)"; } 반환 $title; }
WooCommerce는 Include/wc-conditional-functions.php 파일에 is_order_received_page()
함수를 제공합니다. 변경된 제목은 다음과 같이 표시됩니다.
감사 페이지 제목 개인화하기
제목이나 기타 항목에 고객의 이름을 포함하도록 할 수 있습니다.
add_filter( 'the_title', 'sa_personalize_order_received_title', 10, 2 ); 기능 sa_personalize_order_received_title( $title, $id ) { if ( is_order_received_page() && get_the_ID() === $id ) { 글로벌 $wp; // 주문을 받습니다. 다음 행은 include/shortcodes/class-wc-shortcode-checkout.php 파일의 order_received()에 있습니다. $order_id = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp->query_vars['order-received'] ) ); $order_key = apply_filters( 'woocommerce_thankyou_order_key', empty( $_GET['key'] ) ? '' : wc_clean( $_GET['key'] ) ); if ( $order_id > 0 ) { $order = wc_get_order( $order_id ); if ( ! $order || ! hash_equals( $order->get_order_key(), $order_key ) ) { $ 주문 = 거짓; } } if ( $order instanceof WC_Order ) { $title = sprintf( "멋져요, %s!", esc_html( $order->get_billing_first_name() ) ); } } 반환 $title; }
이것은 다음과 같이 보일 것입니다:
주문 정보 전에 텍스트 사용자 정의
주문 정보 앞에 표시되는 기본 텍스트는 "감사합니다. 주문이 접수되었습니다."
이 텍스트는 templates/checkout/thankyou.php 파일에서 가져왔습니다. WooCommerce에서 사용할 수 있는 필터인 woocommerce_thankyou_order_received_text
를 사용하여 이 텍스트를 변경할 수 있습니다.
add_filter( 'woocommerce_thankyou_order_received_text', 'sa_update_order_received_text', 10, 2 ); 함수 sa_update_order_received_text( $text, $order ) { $text .= '주문 영수증을 이메일로 보냈습니다.'; 반환 $text; }
이 코드는 "주문 영수증을 이메일로 보냈습니다."라는 텍스트를 추가합니다. 기존 텍스트에.
텍스트를 완전히 덮어쓰려면 $text 변수 연결을 피해야 합니다 .
$text = '구매 영수증을 이메일로 보냈습니다.';
고객이 양식을 다운로드해야 하는 지침을 여기에 추가하려는 경우에도 수행할 수 있습니다.
add_filter( 'woocommerce_thankyou_order_received_text', 'sa_change_order_received_text', 10, 2 ); 함수 sa_change_order_received_text( $text, $order ) { $text = '구매 영수증을 이메일로 보냈습니다. 이벤트에 참석하기 전에 <a href="https://demo.storeapps.org/form.pdf">이 양식을 작성하십시오.'; 반환 $text; }
이것은 다음과 같이 보일 것입니다:
WooCommerce 템플릿 파일을 덮어써 감사 페이지 사용자 지정
WooCommerce는 woocommerce/templates/checkout/ 폴더에 있는 Thankyou.php 템플릿 파일에서 thankyou.php
페이지의 내용을 보여줍니다.
WooCommerce 감사 페이지를 사용자 정의하기 위해 이 방법을 선택하려면 약간의 PHP 지식이 필요합니다.
Thankyou.php 파일을 유사한 폴더 구조의 테마 폴더에 복사하여 고유한 템플릿을 사용할 수 있습니다.
예를 들어, Storefront 테마를 사용하는 경우, Thankyou.php를 다음 위치에 복사해야 합니다.
wp-content/themes/storefront/woocommerce/checkout/
폴더. 'woocommerce'와 'checkout'이라는 두 개의 폴더를 만들어야 합니다.
WooCommerce가 자신의 테마에 동일한 템플릿이 있는 것을 발견하면 테마에 있는 템플릿에 우선순위가 부여됩니다.
예를 들어 보겠습니다. 기본 감사 페이지에서 결제 방법은 시작 부분과 주문 세부정보에 표시됩니다.
고객이 다음 구매를 위해 쿠폰 코드를 제공하고 상단 섹션에서 결제 수단을 제거하려고 합니다.
아래는 Thankyou.php 템플릿입니다.
<?php if ( ! 정의된( 'ABSPATH' ) ) { 출구; } ?> <div class="우커머스 주문"> <?php if ( $order ) : ?> <?php if ( $order->has_status( '실패' ) ) : ?> <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php _e( '유감스럽게도 원래 은행/판매자가 거래를 거부하여 주문을 처리할 수 없습니다. 구매를 시도하십시오. 다시.', '우커머스' ); ?></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="버튼 지불"><?php _e( '지불', '우커머스' ) ?> <?php if ( is_user_logged_in() ) : ?> <a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php _e( '내 계정', '우커머스' ); ?> <?php endif; ?> </p> <?php 기타 : ?> <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( '감사합니다. 주문이 접수되었습니다. 이메일을 보냈습니다. 이 거래에 대한 주문 영수증.', 'woocommerce' ), $order ); ?></p> <ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details"> <li class="woocommerce-order-overview__주문 주문"> <?php _e( '거래 ID:', '우커머스' ); ?> <strong><?php echo $order->get_order_number(); ?></strong> </li> <li class="woocommerce-order-overview__date date"> <?php _e( '날짜:', '우커머스' ); ?> <strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong> </li> <li class="woocommerce-order-overview__total total"> <?php _e( '총계:', '우커머스' ); ?> <strong><?php echo $order->get_formatted_order_total(); ?></strong> </li> </ul> <?php endif; ?> <p>첫 주문을 축하합니다. 다음 주문 시 15% 할인이 제공됩니다. 할인을 받으려면 쿠폰 코드 <strong>WELCOME15</strong>를 사용하세요.</p> <?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?> <?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?> <?php 기타 : ?> <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( '감사합니다. 주문이 접수되었습니다.', '우커머스' ), 없는 ); ?></p> <?php endif; ?> </div>
주문 세부 정보 테이블 및 고객 세부 정보(로그인 시)에 표시된 데이터를 변경할 수 있습니다.
그것들은 다른 파일에서 왔습니다. WooCommerce는 woocommerce_thankyou hook
에 연결된 woocommerce_order_details_table()
함수를 사용합니다.
woocommerce_order_details_table() 함수는 included/wc-template-functions.php 파일에 정의되어 있습니다.
감사 페이지는 네 가지 템플릿 파일의 모음입니다.
- 템플릿/체크아웃/thankyou.php
- 템플릿/주문/주문-세부 사항.php
- 템플릿/주문/주문 세부 정보-item.php
- 템플릿/주문/주문-세부 사항-customer.php
어떤 데이터가 어떤 템플릿에서 오는지 알게 되면 올바른 템플릿을 테마 폴더에 복사하기만 하면 됩니다.
이제 제품 변형에 대한 WooCommerce 감사 페이지를 사용자 정의하는 방법을 살펴보겠습니다.
후크를 사용하여 변형 ID를 기반으로 사용자 정의 감사 페이지로 리디렉션하는 방법은 무엇입니까?
add_action( 'woocommerce_thankyou', 'sa_redirect_product_attribute_based', 10, 1 ); 기능 sa_redirect_product_attribute_based( $order_id ) { $order = wc_get_order( $order_id ); if ( $order instanceof WC_Order ) { foreach( $order->get_items() as $item ) { // 여기에 원하는 변형 ID를 추가하십시오. if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) { // 아래에서 고객을 보낼 URL로 변경합니다. wp_redirect( 'https://demo.storeapps.org/custom-thank-you/' ); } } } }
제품 속성에 따라 감사 페이지에 텍스트 인쇄
위의 예를 확장하면 변형 ID를 기반으로 WooCommerce 감사 페이지에 사용자 정의 텍스트를 표시할 수도 있습니다. 다음은 이에 대한 코드입니다.
add_action( 'woocommerce_thankyou', 'sa_show_custom_text_by_variation_id', 10, 1 ); 기능 sa_show_custom_text_by_variation_id( $order_id ) { $order = wc_get_order( $order_id ); if ( $order instanceof WC_Order ) { foreach( $order->get_items() as $item ) { // 아래에 원하는 변형 ID를 추가합니다. 내 속성은 색상, 크기입니다. if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) { echo '<p>티셔츠를 다른 사이즈로 교환을 원하실 경우 주저하지 마시고 연락주세요.</p>'; } } } }
코드를 추가하면 감사 페이지가 다음과 같이 표시됩니다.
여기에는 상당히 많은 코드 조각이 있습니다. 코딩에 관심이 없고 쉬운 솔루션을 원한다면 아래를 읽고 강력한 플러그인을 찾으십시오.
플러그인을 사용하여 제품 및 사이트 전체에 대한 사용자 정의 감사 페이지를 설정하는 방법은 무엇입니까?
감사 페이지 사용자 정의에는 많은 요소가 포함됩니다. 그렇게 쉬운 일이 아닌 것 같습니다. 코드 조각을 추가하는 동안 작은 실수를 하면 모든 것이 엉망이 됩니다.
따라서 판매 및 마케팅에 더 집중하고 코딩의 번거로움에서 벗어나고 싶다면 WooCommerce 플러그인에 대한 사용자 정의 감사 페이지를 사용하는 것이 좋습니다.
사이트 전체뿐만 아니라 제품별로 사용자 정의 감사 페이지를 설정하는 데 도움이 됩니다. 곧 제품 변형에 대한 지원을 추가할 예정입니다.
이 플러그인으로 최적화된 감사 페이지를 사용하면 상향 판매 (스마트 제안 사용), 이메일 목록 작성, 제안 홍보, 피드백 수집, 비디오 메시지 표시, 쿠폰 및 기타 작업을 수행할 수 있습니다.
기본 WooCommerce 감사 페이지는 다음과 같은 강력한 마케팅 도구로 변환됩니다.
더 많은 플러그인 기능 :
- 전환율이 높은 4가지 기성품 감사 페이지 템플릿으로 시작하는 데 도움이 됩니다.
- 구매/결제 후 사용자를 제휴사 링크, 타사 링크 또는 리소스로 리디렉션합니다.
- 좋아하는 테마, 플러그인 및 페이지 편집기에 따라 감사 페이지를 만들고 원하는 방식으로 페이지를 디자인할 수 있는 기회를 제공합니다.
라이브 데모 사용해 보기
마지막 단어
이 기사가 코드 및 플러그인을 통해 이를 수행하는 방법에 대한 충분한 이해와 함께 사용자 정의 감사 페이지 사용자 정의의 중요성을 이해하는 데 도움이 되었기를 바랍니다.
이 작은 페이지를 사용하면 그것이 우리에게 얼마나 평범하게 보일지 관계없이 판매를 늘릴 수 있는 좋은 기회가 될 수 있습니다.