WooCommerce: 전환을 위한 결제를 사용자 정의하는 방법
게시 됨: 2020-06-06후원자 트랙에서 나를 호스팅한 WooCommerce 덕분에 WCEU 2020에서 연설할 수 있는 영광을 얻었습니다. 첫 번째 날(금요일)에는 " 전환율 향상을 위한 WooCommerce 체크아웃 사용자 지정 "이라는 짧고 달콤한 번개 토크가 있었고 토요일에는 라이브 코딩 세션이 이어졌습니다.
다음은 번개 이야기의 비디오 녹화와 WooCommerce Checkout을 개선하고 즉시 전환율의 증가를 기대하기 위해 복사/붙여넣기할 수 있는 몇 가지 PHP 및 CSS 스니펫 입니다. 따라서 비디오를 즐기고 아래에서 찾은 스 니펫을 테스트하십시오!
비디오: 전환을 개선하기 위해 WooCommerce Checkout 사용자 정의
WooCommerce Checkout은 웹사이트에서 가장 중요한 페이지입니다. 즉, 최적화해야 합니다.
이 프레젠테이션에서는 성공적인 전자 상거래 B2C 웹 사이트를 살펴보고 그들이 하는 일을 봅니다. 트렌드와 약점을 파악하고 작업에 착수할 수도 있습니다.
자막이 있으니 참고하세요. 비디오 플레이어의 오른쪽 하단 에 있는 "CC" 버튼을 클릭하기 만 하면 됩니다.
10 PHP 및 CSS WooCommerce 체크아웃 전환율 최적화 스니펫
후속 세션에서는 내 화면을 공유하고 라이트닝 토크에서 배운 내용을 라이브 코딩하기 시작했습니다. 간단히 말해서 우리는 다음 사항에 대해 조치를 취하기로 결정했습니다.
- 머리글, 사이드바, 바닥글을 제거하여 방해 요소가 없도록 하고 고객이 유일하게 남은 클릭 유도문안인 "PAY" 버튼에만 완전히 집중할 수 있도록 합니다.
- 주문 요약, 배송 및 결제 방법 선택을 오른쪽으로 이동하여 항상 볼 수 있도록 합니다.
- 청구서, 배송, 주문 메모, 쿠폰 양식 등으로 구성된 긴 레이아웃을 시각적 단계로 분할
- 쿠폰 사기를 피하기 위해 쿠폰 양식을 하단으로 이동
- B2C에서 가장 중요한 섹션이므로 배송 양식을 항상 "열린" 상태로 유지하십시오.
- 청구서 양식을 배송 양식 아래로 이동
- 불필요한 청구/배송 필드를 제거합니다. 필드가 많을수록 전환율이 낮아집니다!
- 기본 레이아웃이 매우 좋지 않기 때문에 배송 방법 선택을 더 눈에 띄게 만드십시오.
- 사용자가 장바구니 페이지로 돌아가 주문을 수정할 수 있도록 "장바구니 수정" 링크 추가
- 고객이 온라인 비즈니스를 신뢰할 수 있도록 보안 배지/전화/FAQ 추가
그러나 코딩하기 전에 도구 스택을 살펴보겠습니다.
테마 : WooCommerce 공식 테마인 Storefront를 사용했습니다. 이것은 이미 체크아웃을 위한 내장 CSS 사용자 정의와 함께 제공됩니다. 내가 좋아하는 또 다른 것은 WooCommerce 속도 및 전환을 위해 구축된 테마인 Shoptimizer일 수 있습니다. 어쨌든 스니펫 중 하나는 체크아웃 페이지에서 머리글과 바닥글을 제거하는 것이므로 Storefront 테마 시각적 후크 가이드를 사용하여 어떤 후크를 사용해야 하는지 알고 있습니다.
후크 : Storefront에 대한 시각적 후크 가이드를 사용하는 것 외에도 모든 WooCommerce Checkout 후크를 알아야 합니다. 체크아웃 페이지용 My WooCommerce Visual Hook Guide는 우리가 필요로 하는 것에 완벽합니다.
문서 : WooCommerce에는 결제 필드를 사용자 정의하는 방법을 설명하는 멋진 문서가 있습니다. 스니펫 중 하나에서 일부 청구/배송 필드를 제거하므로 반드시 알아야 할 참조 사항입니다.
1. PHP Snippet: 헤더, 사이드바, 푸터 제거 @ WooCommerce 체크아웃 페이지
이 스니펫은 Storefront 테마에만 유효합니다. 사용자 정의 테마에 대한 코드를 조정해야 합니다.
/**
* @snippet Storefront Theme Remove Header Footer @ Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 4.1
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'wp', 'bbloomer_unhook_storefront_functions' );
function bbloomer_unhook_storefront_functions() {
if ( is_checkout() ) {
remove_all_actions( 'storefront_header' );
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
remove_action( 'storefront_footer', 'storefront_footer_widgets', 10 );
}
}
Storefront에서 위의 remove_action 호출로 사이드바를 제거하면 레이아웃이 자동으로 전체 너비로 조정되지 않습니다. 사이드바는 사라지지만 "공간"은 그대로 유지되고 결제 양식을 왼쪽으로 밀어줍니다.
즉, 이 문제를 해결하기 위해 약간의 CSS도 필요합니다.
@media (min-width: 768px) {
.woocommerce-checkout.right-sidebar .content-area {
width: 100%;
float: none;
margin-right: 0;
}
}
시각적 증거가 필요하십니까? WooCommerce Checkout 페이지 사용자 정의 "이전" 및 "이후" 스크린샷을 보려면 여기를 클릭하십시오.
2. CSS Snippet: 주문 검토를 WooCommerce 결제 페이지 오른쪽 상단으로 이동
Storefront 테마는 이미 즉시 사용할 수 있습니다! 그래서 전자상거래 트렌드도 연구하고 그게 옳은 선택이라고 판단한 것 같다.
물론 대부분의 테마는 기본적으로 그렇게 하지 않습니다. 영감을 얻기 위해 Storefront의 CSS를 복사해 볼 수 있습니다(일부 선택기를 변경해야 할 수도 있음).
@media (min-width: 768px) {
/* Billing & Shipping @ Left */
.col2-set {
width: 52.9411764706%;
float: left;
margin-right: 5.8823529412%;
}
/* Order Review @ Right */
#order_review_heading, #order_review {
width: 41.1764705882%;
float: right;
margin-right: 0;
clear: right;
}
}
이제 전체 주문 검토를 "고정" 상태로 만들고 싶습니다. 즉, 사용자가 예를 들어 체크아웃 필드를 채우기 위해 아래로 스크롤하면 주문 검토 상자(현재 오른쪽 상단에 있음)가 계속 표시되고 브라우저 상단에 "고정"되어야 합니다.
다음 CSS를 시도했지만 불행히도 작동하지 않는 것 같습니다 (Storefront 테마). 도와줄 수 있니?
#order_review {
position: sticky;
top: 0;
}
시각적 증거가 필요하십니까? WooCommerce Checkout 페이지 사용자 정의 "이전" 및 "이후" 스크린샷을 보려면 여기를 클릭하십시오.
3. PHP Snippet: 쿠폰 양식을 WooCommerce 결제 페이지 하단으로 이동
이를 위해 Visual hook 가이드를 사용할 수 있습니다. 먼저 제거한 다음 맨 아래에서 읽습니다.
/**
* @snippet Move Coupon @ Checkout Bottom
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 4.1
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
시각적 증거가 필요하십니까? WooCommerce Checkout 페이지 사용자 정의 "이전" 및 "이후" 스크린샷을 보려면 여기를 클릭하십시오.
4. PHP 스니펫: 배송 양식을 항상 "열린" 상태로 유지 @ WooCommerce 체크아웃 페이지
고맙게도 form-shipping.php 템플릿 파일을 보면 WooCommerce가 여기에 필터를 제공합니다.
apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 )
즉, 이제 간단한 PHP 스니펫을 코딩하여 해당 동작을 재정의할 수 있습니다.
/**
* @snippet Shipping Always Open @ Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 4.1
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'woocommerce_ship_to_different_address_checked', 'bbloomer_open_shipping_checkout' );
function bbloomer_open_shipping_checkout() {
return 1;
}
시각적 증거가 필요하십니까? WooCommerce Checkout 페이지 사용자 정의 "이전" 및 "이후" 스크린샷을 보려면 여기를 클릭하십시오.
5. CSS Snippet: 청구 양식을 배송 양식 @ WooCommerce Checkout Page 아래로 이동
먼저 Billing and Shipping Form은 전각으로 작성해야 합니다. Storefront 테마는 이미 그렇게 하므로 다른 테마를 사용하는 경우 다음을 시도하십시오.
.col2-set .col-1, .col2-set .col-2 {
float:none;
width: 100%
margin: 0;
}
청구 및 배송이 다른 하나 위에 있으면 이제 배송 양식을 먼저(위), 청구 양식을 뒤에(아래) 표시하려고 합니다. PHP로 이 작업을 수행하는 것이 가능하지만 이를 수행하는 훨씬 깔끔한 방법이 있습니다: CSS flex .
.col2-set {
display: flex;
flex-direction: column;
}
.col2-set > .col-1 {
order: 2;
}
.col2-set > .col-2 {
order: 1;
}
간단히 말해서 고객 세부 정보(청구 및 배송 양식 래퍼)가 "플렉스"로 표시됨을 선언합니다. 이런 식으로 "order" 속성을 사용하고 Billing 및 Shipping div의 수직 순서를 전환할 수 있습니다.
시각적 증거가 필요하십니까? WooCommerce Checkout 페이지 사용자 정의 "이전" 및 "이후" 스크린샷을 보려면 여기를 클릭하십시오.
6. PHP Snippet: 청구, 배송, 주문 검토로 구성된 긴 레이아웃을 시각적 단계로 분할 @ WooCommerce Checkout Page
여기에서 다시 한 번 시각적 후크 가이드를 사용하고 특정 위치(배송 위, 청구 위, 주문 검토 위)에 3개의 새 div를 인쇄합니다.
/**
* @snippet Add Visual Steps @ Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 4.1
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_checkout_shipping', 'bbloomer_checkout_step1' );
function bbloomer_checkout_step1() {
echo '<p class="steps">STEP1</p>';
}
add_action( 'woocommerce_checkout_billing', 'bbloomer_checkout_step2' );
function bbloomer_checkout_step2() {
echo '<p class="steps">STEP2</p>';
}
add_action( 'woocommerce_checkout_before_order_review_heading', 'bbloomer_checkout_step3' );
function bbloomer_checkout_step3() {
echo '<p class="steps">STEP3</p>';
}
물론 CSS도 필요합니다.
.steps {
background: black;
color: white;
display: inline-block;
padding: 0.5em 2em;
}
시각적 증거가 필요하십니까? WooCommerce Checkout 페이지 사용자 정의 "이전" 및 "이후" 스크린샷을 보려면 여기를 클릭하십시오.
7. PHP Snippet: 불필요한 청구/배송 필드 제거 @ WooCommerce Checkout Page
여기에서 위에서 공유한 문서 참조가 도움이 됩니다. " woocommerce_checkout_fields " 필터를 사용하면 필요하지 않은 필드를 "설정 해제"할 수 있습니다.
/**
* @snippet Remove Ship/Bill Fields @ Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 4.1
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
unset(
$fields['order']['order_comments'],
$fields['shipping']['shipping_company'],
$fields['shipping']['shipping_address_2'],
$fields['billing']['billing_company'],
$fields['billing']['billing_address_2'],
$fields['billing']['billing_postcode'],
$fields['billing']['billing_phone']
);
return $fields;
}
시각적 증거가 필요하십니까? WooCommerce Checkout 페이지 사용자 정의 "이전" 및 "이후" 스크린샷을 보려면 여기를 클릭하십시오.
8. PHP Snippet (Idea): 배송 방법 선택을 더욱 돋보이게 하세요 @ WooCommerce Checkout Page
이것은 가장 어려운 스 니펫이며 WooCommerce가 이와 관련하여 실제로 유연하지 않기 때문입니다. 이를 보여주기 위해 먼저 배송 방법 양식이 생성되는 방법을 찾아야 합니다.
체크아웃 "주문 검토" 템플릿에서 다음 PHP를 찾습니다.
<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
<?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
<?php wc_cart_totals_shipping_html(); ?>
<?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
<?php endif; ?>
wc_cart_totals_shipping_html() 함수가 어떻게 작동하는지 연구하여 출력을 사용자 정의할 수 있는 필터가 있는지 확인해야 합니다.
불행히도 그 함수는 wc_get_template() 함수 덕분에 단순히 cart-shipping.php 템플릿 파일을 호출합니다. 불행히도 같은 템플릿이 장바구니 페이지에서도 사용되기 때문에 말합니다.
이제 이것은 나보다 더 복잡해지고 있지만 주문 검토 테이블에서 배송 방법 양식을 가져오려면 기본적으로 사용자 정의 템플릿(예: checkout-shipping.php)을 작성하거나 소유해야 하며 / 하위 테마의 woocommerce 폴더를 찾은 다음 wc_get_template 필터를 사용하여 체크아웃 페이지에서만 대체 템플릿을 로드합니다. 다소 복잡하지만 실행 가능 - 귀하에게 맡기겠습니다.
시각적 증거가 필요하십니까? WooCommerce Checkout 페이지 사용자 정의 "이전" 및 "이후" 스크린샷을 보려면 여기를 클릭하십시오.
9. PHP 스니펫: "장바구니 편집" 링크 추가 @ WooCommerce 체크아웃 페이지
Checkout 페이지에서 모든 링크를 제거했으므로 사용자가 수량을 변경하거나 제품을 제거하려는 경우 Cart 페이지로 돌아갈 수 있는 기회를 제공하는 것이 좋습니다.
WooCommerce Checkout 후크를 선택할 수 있지만 이 경우 "주문" 제목 바로 아래에 있는 "woocommerce_checkout_before_order_review" 후크를 선택했습니다.
/**
* @snippet Add edit cart link @ Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 4.1
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_checkout_before_order_review', 'bbloomer_edit_cart_checkout' );
function bbloomer_edit_cart_checkout() {
echo '<a href="' . wc_get_cart_url() . '">Edit Cart</a>';
}
약간의 CSS를 사용하면 이것을 "Your Order"와 같은 줄에 배치하고 공간을 절약할 수도 있습니다.
시각적 증거가 필요하십니까? WooCommerce Checkout 페이지 사용자 정의 "이전" 및 "이후" 스크린샷을 보려면 여기를 클릭하십시오.
10. PHP Snippet: WooCommerce 결제 페이지에서 전화번호 추가
주로 잠재 고객이 귀하의 비즈니스를 신뢰하는 데 도움이 되는 경우 체크아웃 페이지에 원하는 콘텐츠를 추가할 수 있습니다.
일반적으로 보안 지불 배지, FAQ 또는 연락처 링크를 추가하고 즉시 연락할 수 있는 방법(라이브 채팅 및 전화 번호)을 추가합니다.
그래서, 이것은 체크아웃 페이지의 "PLACE ORDER" 버튼 바로 아래에 전화번호를 추가하는 방법입니다.
/**
* @snippet Phone Number @ Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 4.1
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_review_order_after_submit', 'bloomer_phone_checkout_page' );
function bloomer_phone_checkout_page() {
?>
<p>Need help? Give us a call at <a href="tel:1123456789">+1 123456789</a></p>
<?php
}
시각적 증거가 필요하십니까? WooCommerce Checkout 페이지 사용자 정의 "이전" 및 "이후" 스크린샷을 보려면 여기를 클릭하십시오.
WooCommerce 체크아웃 페이지 사용자 정의: "전" 및 "후" 스크린샷
전에
후에
