WooCommerce 결제 페이지 편집 방법(코드 + 플러그인)

게시 됨: 2023-02-11

목차 숨기기

1. WooCommerce 결제 페이지에서 무엇을 사용자 정의해야 합니까?

2. 코드를 사용하여 WooCommerce 체크아웃 페이지를 편집하는 방법은 무엇입니까?

2.1. 테마를 통한 커스터마이징(체크아웃 템플릿)

2.2. CSS를 통한 커스터마이징

2.3. WooCommerce 결제 후크를 사용하여 사용자 지정

2.4. 맞춤 코드

2.4.1. 청구 전화번호 필드 제거

2.4.2. 배송 전화번호 입력란 추가

2.4.3. 필드 자리 표시자 변경

3. 플러그인을 사용하여 WooCommerce 체크아웃 페이지를 사용자 지정하는 방법은 무엇입니까?

4. 와인딩

기본 WooCommerce 결제 페이지는 좋지만 전환에 최적화되어 있지 않습니다.

시각적으로 매력적이며 최소한의 필수 필드가 있는 체크아웃 페이지는 더 많은 방문자가 구매하도록 유도할 것입니다.

더 많은 판매를 위해 WooCommerce 결제 페이지를 편집하는 방법은 무엇입니까?

체크아웃 페이지를 사용자 지정하기 위해 코드와 일부 인기 있는 플러그인을 살펴보겠습니다.

WooCommerce 체크아웃 페이지에서 무엇을 사용자 정의해야 합니까?

기본 WooCommerce 체크아웃 페이지는 고객에게 그다지 성가시지 않을 수 있지만 자체 단점이 있습니다. 결제 페이지에서 맞춤설정할 수 있는 항목은 다음과 같습니다.

브랜드에 맞게 기본 WooCommerce 글꼴, 색상, 로고, 스타일을 교체하세요.
원페이지 체크아웃을 활성화하여 프로세스 속도 향상
관련 사용자 정의 결제 필드를 추가하거나 일부 추가 정보를 제거하십시오.
관련 제품을 홍보하기 위해 주문 범프 추가
배송 옵션 수정
결제 시 세금 옵션 및 쿠폰 추가
결제 게이트웨이 활성화 또는 비활성화
CTA 버튼 텍스트 및 사전 설정 필드 텍스트 편집

그리고 좀 더…

다음은 Cashier 플러그인을 사용하는 한 페이지 결제의 예입니다.

코드를 사용하여 WooCommerce 결제 페이지를 편집하는 방법은 무엇입니까?

WooCommerce 체크아웃 페이지를 무료로, 즉 일부 코드로 편집하는 방법을 살펴보겠습니다.

코딩에서 다음과 같은 방법으로 사용자 정의할 수 있습니다.

테마를 통해
CSS 사용
후크(액션 및 필터)
맞춤 코드

테마를 통한 커스터마이징(체크아웃 템플릿)

후크를 사용하여 대부분의 사용자 정의를 수행할 수 있지만 체크아웃 페이지에서 마크업을 편집하기 위해 테마에서도 수행할 수 있습니다.

이제 WooCommerce 문서에 따라 체크아웃 템플릿을 다음과 같은 폴더 구조로 테마에 복사합니다. woocommerce/checkout/form-checkout.php .

그런 다음 원하는 대로 form-checkout.php를 사용자 정의할 수 있으며 기본 템플릿 대신 로드됩니다.

CSS를 통한 커스터마이징

CSS 클래스는 테마나 플러그인에 따라 변경될 수 있지만 일반적으로 기본 클래스를 사용할 수 있습니다.

하위 테마 또는 사용자 정의 프로그램에서 사용자 정의 CSS를 사용하여 이러한 클래스를 사용자 정의할 수 있습니다. 다음은 사용할 수 있는 클래스 및 ID가 있는 기본 고급 태그입니다.

<바디 클래스="woocommerce-checkout">
<사업부 클래스="우커머스">
<form class="woocommerce-checkout"> <사업부 id="customer_details" class="col2-set">
<div class="woocommerce-청구 필드">
<p class="양식-행">
<div class="woocommerce-배송-필드">
<p class="양식-행">
<div class="woocommerce-추가 필드">
<div id="order_review" class="woocommerce-checkout-review-order"><table class="woocommerce-checkout-review-order-table">
<div id="결제"> <ul class="wc_payment_methods payment_methods 방법"><div class="form-row place-order">

예를 들어:

form.woocommerce-checkout 입력[유형="텍스트"] {
    테두리 반경: 3px;
    배경색: #ccc;
    색상: #444;
}

WooCommerce 결제 후크를 사용하여 사용자 지정

결제 페이지에서 요소를 추가하거나 제거하는 데 사용할 수 있는 28개의 작업 후크가 있습니다.

woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_billing
woocommerce_before_checkout_billing_form
woocommerce_after_checkout_billing_form
woocommerce_before_checkout_registration_form
woocommerce_after_checkout_registration_form
woocommerce_checkout_shipping
woocommerce_before_checkout_shipping_form
woocommerce_after_checkout_shipping_form
woocommerce_before_order_notes
woocommerce_after_order_notes
woocommerce_checkout_after_customer_details
woocommerce_checkout_before_order_review_heading
woocommerce_checkout_order_review
woocommerce_checkout_before_order_review
woocommerce_review_order_before_cart_contents
woocommerce_review_order_after_cart_contents
woocommerce_review_order_before_shipping
woocommerce_review_order_after_shipping
woocommerce_review_order_before_order_total
woocommerce_review_order_after_order_total
woocommerce_review_order_before_payment
woocommerce_review_order_before_submit
woocommerce_review_order_after_submit
woocommerce_review_order_after_payment
woocommerce_checkout_after_order_review
woocommerce_after_checkout_form

예를 들어 결제 페이지의 결제 세부정보 뒤에 양식이나 필드를 추가 하려면 다음 후크를 사용할 수 있습니다.

add_action( 'woocommerce_after_checkout_billing_form', 'storeapps_after_checkout_billing_form', 10 );
함수 storeapps_after_checkout_billing_form() {
	echo '<h2>woocommerce_after_checkout_billing_form</h2>';
	// 여기에 양식 또는 필드를 추가합니다.
}

각 후크를 사용하는 방법에 대한 자세한 내용은 WooCommerce 체크아웃 후크 가이드를 참조하세요.

맞춤 코드

이것은 더 까다롭지만 개발자인 경우 수행 방법은 다음과 같습니다.

WooCommerce에는 woocommerce_checkout_fields , woocommerce_billing_fields 및 woocommerce_shipping_fields 포함하여 결제 필드를 편집하는 데 사용할 수 있는 여러 필터가 있습니다.

'woocommerce_checkout_fields' 필터를 사용하여 모든 결제 필드를 조작할 수 있습니다.

청구 전화번호 필드 제거

add_filter( 'woocommerce_checkout_fields' , 'storeapps_modify_checkout_fields' );
기능 storeapps_modify_checkout_fields( $fields ) {
	unset($fields['billing']['billing_phone']);
	반환 $fields;
}

배송 전화번호 입력란 추가

add_filter( 'woocommerce_checkout_fields' , 'storeapps_modify_checkout_fields' );
기능 storeapps_modify_checkout_fields( $fields ) {
	$fields['shipping']['shipping_phone'] = 배열(
		'레이블' => __('전화', '우커머스'),
		'자리 표시자' => _x('전화', '자리 표시자', '우커머스'),
		'필수' => 거짓,
		'클래스' => array('form-row-wide'),
		'클리어' => 참
	);
	반환 $fields;
}

/**
 * 주문 편집 페이지에 필드 값을 표시하기 위해
 */
add_action( 'woocommerce_admin_order_data_after_shipping_address', 
'storeapps_custom_checkout_field_display_admin_order_meta' );
function storeapps_custom_checkout_field_display_admin_order_meta( $주문 ){
	글로벌 $post_id;
	$order = wc_get_order( $post_id );
	echo '<p><strong>'.__('필드 값', 'woocommerce').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}

필드를 편집하려면 필드 속성에 액세스할 수 있습니다. 예를 들어 우편 번호 자리 표시자를 우편 번호로 변경해 보겠습니다.

필드 자리 표시자 변경

add_filter( 'woocommerce_checkout_fields', 'storeapps_modify_checkout_fields' );
기능 storeapps_modify_checkout_fields( $fields ) {
	$fields['billing']['billing_postcode']['placeholder'] = __( '우편번호', 'woocommerce' );
	반환 $fields;
}

안전한 코드 스니펫 추가에 대한 블로그를 참조하는 것이 좋습니다.

플러그인을 사용하여 WooCommerce 결제 페이지를 사용자 정의하는 방법은 무엇입니까?

코딩 번거로움에 빠지고 싶지 않다면 결제 필드 편집기 플러그인을 사용하는 것이 가장 좋고 쉬운 옵션입니다.

그리고 Cashier for WooCommerce는 필요한 플러그인입니다.

계산원은 핵심 WooCommerce 필드를 편집/추가/제거하고 청구, 배송 및 추가의 세 섹션에서 최적화된 체크아웃을 위한 사용자 지정 필드를 추가할 수 있는 간단한 UI를 제공합니다.

기본 체크아웃 필드를 편집, 활성화, 비활성화 및 제거할 수 있습니다. 재정렬, 유효성 검사, 레이블 변경, 기본값으로 재설정 및 사용자 정의 CSS 클래스 추가 …이 모든 것이 쉽고 사용자 친화적인 인터페이스로 이루어집니다.

WooCommerce 체크아웃 페이지에 새 필드를 추가하여 쇼핑객으로부터 필요한 정보를 얻으십시오.

계산대 필드 편집기뿐만 아니라 Cashier는 다음과 같은 기능도 제공합니다. 원페이지 결제, 지금구매 버튼을 이용한 다이렉트 결제, 사이드카트, 자주 함께 구매 및 기타 개선 사항.

마무리

이 기사가 WooCommerce 결제 페이지를 쉽게 사용자 지정하는 데 도움이 되었기를 바랍니다.

질문이나 제안이 있으시면 아래에 의견을 남겨주세요.