Elementor 없이 WooCommerce 체크아웃 페이지를 편집하는 방법은 무엇입니까?

기본 WooCommerce 결제 페이지가 밋밋해 보이고 결제 프로세스도 길어서 마음에 들지 않습니까? 글쎄, 지금이 바로 당신의 페이지를 편집할 적기일 것입니다. 이렇게 하면 고객이 빠르게 주문할 수 있으며, 이는 더 많은 전환을 유도하는 데도 도움이 됩니다.

하지만 WooCommerce 결제 페이지를 정확히 어떻게 사용자 정의합니까? 결과적으로 수동 편집, 플러그인 사용 및 Elementor 페이지 빌더를 포함하여 3가지 효과적인 방법이 있습니다. 그러나 가장 좋은 방법은 작업하기 쉬운 방법에 따라 다릅니다.

이제 더 이상 고민하지 않고 먼저 결제 페이지를 사용자 지정하려는 이유를 알아보겠습니다. 그런 다음 Elementor와 Shopready 를 함께 사용하여 WooCommerce 결제 페이지를 편집하는 방법을 살펴볼 수 있습니다.

WooCommerce 결제 페이지를 수정해야 하는 이유

WooCommerce 결제 페이지는 주문 구매 프로세스에 큰 변화를 줄 수 있습니다. 이 때문에 편집하려는 이유가 너무 많습니다. 여기에는 다음이 포함됩니다.

사용자 경험 향상

모든 기본 WooCommerce의 체크아웃 프로세스는 상당히 깁니다. 따라서 페이지를 편집하고 결제 프로세스를 단축하도록 선택할 수 있습니다. 이렇게 하면 고객이 더 나은 쇼핑 경험을 할 수 있습니다.

안전하게 결제하세요.

고객이 청구 및 개인 정보가 안전하지 않다고 느끼면 구매하지 않고 떠날 것입니다. 따라서 보안 지불 게이트웨이를 포함하도록 결제 페이지 템플릿 을 편집하는 것을 고려해야 합니다.

빠르고 쉬운 구매 허용

WooCommerce 체크아웃 페이지를 사용자 정의 하려는 또 다른 이유는 고객이 빠르게 주문할 수 있도록 돕기 위해서입니다. 예를 들어 세부 정보를 자동으로 채우는 옵션을 포함할 수 있습니다.

브랜딩 개선

귀하의 브랜드가 군중에서 눈에 띄지 않는 것 같습니까? 전문적인 모양과 느낌을 주기 위해 WooCommerce 결제 페이지를 편집할 수 있습니다. 이를 수행하는 한 가지 방법은 디자인과 페이지 템플릿을 변경하는 것입니다.

WooCommerce 체크아웃 페이지 WO Elementor를 편집하는 방법?

WooCommerce 결제 페이지를 편집하는 방법에는 여러 가지가 있습니다. elementor 및 Shopready 조합을 사용하거나 플러그인을 사용하여 수동으로 수행하도록 선택할 수 있습니다. 선택은 당신의 것입니다. 각 방법이 어떻게 작동하는지 논의해 보겠습니다.

방법 1: 수동 편집

이 방법에는 코드를 사용하여 결제 페이지 템플릿 을 편집하는 방법이 포함됩니다. 결과적으로 다른 편집 방법을 사용하는 것과 비교하여 사용자 정의를 더 잘 제어할 수 있습니다. 다음은 이를 수행하는 방법에 대한 간단한 단계입니다.

1단계: 결제 필드 사용자 지정을 위한 필터 선택

결제 필드를 편집하려면 전자상거래 웹사이트 에서 functions.php 파일을 사용합니다. WooCommerce는 체크아웃 필드를 사용자 정의할 수 있는 필터 목록을 제공하기 때문에 이것은 쉬울 것입니다. 예를 들어 다음이 있습니다.

• WooCommerce_shipping_fields
• WooCommerce_after_checkout_form
• WooCommerce_billing_fields
• WooCommerce_checkout_after_terms_and_conditions

2단계: 자리 표시자 텍스트 편집

다음으로 order_comments_fields의 자리 표시자 텍스트를 사용자 지정하여 시작합니다. functions.php 파일에 다음 코드 조각을 추가하기만 하면 됩니다.

3단계: 필드 제거

필드를 제거하려면 functions.php 파일에 아래 코드를 추가하기만 하면 됩니다.

4단계: 필요한 필드 추가

WooCommerce 결제 페이지에 필드를 추가하려면 아래 코드를 function.php 파일에 삽입하기만 하면 됩니다.

코드를 삽입하면 추가 필드가 나타납니다. 하지만 걱정할 것은 없습니다. 데이터 유효성 검사를 위해 다음 코드를 복사하기만 하면 됩니다.

마지막 단계: 데이터 저장

마지막으로 다음 코드를 입력하여 결제 페이지에서 고객이 입력한 모든 세부 정보가 저장되도록 합니다.

방법 2: Elementor Page Builder 사용

결제 페이지를 수동으로 편집하려면 코딩 경험이 있어야 합니다. 다행히 기술에 정통한 사람이 아니라면 최고의 WordPress 페이지 빌더 중 하나인 elementor를 사용할 수 있습니다. 다음은 elementor를 사용하여 편집하는 방법에 대한 단계입니다.

1단계: 결제 페이지 찾기

먼저 WordPress 대시보드로 이동하여 페이지 목록을 찾습니다. 페이지 목록에서 기본 결제 페이지를 찾을 수 있습니다. 편집 버튼을 클릭하기만 하면 WordPress 편집기가 실행됩니다. 다음으로 Edit With Elementor 옵션을 선택하여 Elementor를 활성화한 다음 Elementor의 편집기를 시작합니다.

2단계: Elementor 체크아웃 위젯 추가

다음으로 elementor에서 기본 결제 페이지를 열고 기존 WooCommerce 결제 위젯 또는 단축 코드를 삭제합니다. 그런 다음 Elementor Editor에 체크아웃 위젯을 추가합니다. 결제 페이지의 실시간 미리보기를 볼 수 있어야 합니다.

3단계: 결제 페이지의 콘텐츠 편집

Elementor 사이드바에 있는 콘텐츠 탭에서 일반 설정을 클릭합니다. 설정에서 1열 또는 2열 레이아웃을 선택 하여 콘텐츠를 편집하고 사용자 지정할 수 있습니다 .

또한 청구 및 배송 내역, 추가 정보, 주문, 쿠폰, 결제 내역을 수정할 수 있습니다. 그리고 쿠폰함 추가 도 가능합니다.

4단계: 결제 페이지 스타일 편집

콘텐츠 탭 바로 옆에 있는 스타일 탭을 클릭하여 결제 페이지의 스타일을 추가로 사용자 지정할 수 있습니다. 맞춤 결제 페이지 의 디자인이 매장의 디자인과 일치하는지 확인하려고 합니다.

스타일 탭에서 섹션, 타이포그래피, 양식, 주문 요약 및 구매 버튼을 포함한 다양한 디자인 옵션을 선택할 수 있습니다. 체크아웃 페이지를 돋보이게 하는 스타일을 찾기 위해 다양한 옵션을 조정하고 시도하기만 하면 됩니다.

5단계: 변경 사항 저장

결제 페이지 템플릿 의 스타일을 사용자 지정했으면 모든 변경 사항을 저장합니다. 그런 다음 페이지를 최종적으로 게시하기 전에 변경 사항을 미리 봅니다.

방법 3: 플러그인 사용

WooCommerce 결제 페이지를 편집하는 또 다른 쉽고 빠른 방법은 플러그인을 사용하는 것입니다. 이제 선택할 수 있는 몇 가지 플러그인 옵션이 있습니다. 그러나 이 기사에서는 Elementor와 Shopready의 조합 사용에 중점을 둘 것입니다.

1단계: elementor용 Shopready 애드온 설치

이 플러그인을 설치하기 전에 WordPress에 Elementor 페이지 빌더가 있는지 확인하십시오. Shopready는 단독으로 작동할 수 없기 때문입니다. 그런 다음 WordPress 대시보드에서 플러그인을 클릭하고 새로 추가를 선택합니다. 그런 다음 검색 상자에서 Shopready를 찾아 활성화 버튼을 클릭합니다.

2단계: Shopready 결제 페이지의 콘텐츠 사용자 지정

WordPress 대시보드에서 Shopready를 열도록 선택합니다. Shopready의 대시보드로 이동합니다. 대시보드 아래에는 페이지를 사용자 정의하는 데 도움이 되는 위젯, 모듈 및 템플릿 옵션이 있습니다. 원하는 옵션을 선택 하여 콘텐츠를 편집하고 사용자 지정할 수 있습니다 .

3단계: 위젯 활성화

위젯 옵션을 클릭하고 모두 활성화 탭을 선택합니다. 그런 다음 변경 사항 저장을 선택합니다. 그러나 모든 필드를 활성화하지 않으려면 원하는 옵션을 선택하고 변경 사항을 저장하기만 하면 됩니다.

4단계: 모듈 활성화

그런 다음 모듈 옵션을 선택하고 모두 활성화를 클릭합니다. 모두 비활성화 옵션을 선택하거나 일부만 선택적으로 활성화할 수도 있습니다. 완료한 후 변경 사항 저장 버튼을 클릭합니다.

5단계: 템플릿 활성화

이 섹션에서 쇼핑, 결제 페이지, 장바구니, 제품 세부 정보 페이지 등과 같은 옵션을 찾을 수 있습니다. 원하는 템플릿 옵션에서 사용 탭을 클릭한 다음 저장을 클릭합니다.

6단계: 통화 API 활성화

API 탭을 클릭하고 제공된 빈 필드에 통화 API 키를 입력합니다. 그런 다음 변경 사항 저장 옵션을 선택하여 프로세스를 완료합니다.

Shopready를 사용하여 WooCommerce 결제 페이지를 편집하는 이유

ShopReady는 단순히 Elementor용 애드온입니다. QuomodoSoft에서 개발한 이 플러그인은 WooCommerce 사용자 정의 체크아웃 페이지 를 편집하는 데 사용할 때 많은 이점을 제공합니다. 여기에는 다음이 포함됩니다.

다양한 위젯

이 플러그인은 Elementor 페이지에 쉽게 추가할 수 있는 100개 이상의 쇼핑 페이지 위젯을 제공합니다. 따라서 필요에 따라 WooCommerce 체크아웃 페이지를 빠르게 사용자 정의 할 수 있습니다.

사전 제작된 템플릿

새로운 WooCommerce 사용자인 경우 Shopready를 사용하여 결제 페이지를 편집하는 것을 고려해야 합니다. 플러그인에는 쉽게 사용자 정의할 수 있도록 미리 설계된 템플릿이 포함되어 있기 때문입니다.

고객 지향 기능

WooCommerce 페이지를 편집하기 위해 이 플러그인을 사용해야 하는 또 다른 이유는 고객 지향 기능 때문입니다. 이들 중 일부는 감사 페이지, 쿠폰 상자 옵션 추가 및 제품 비교를 포함합니다.

모바일 친화적

이 플러그인을 사용하면 결제 페이지를 편집하고 모바일 친화적으로 만들 수 있습니다. 결과적으로 고객은 사용하는 장치에 관계없이 우수한 쇼핑 경험을 할 수 있습니다.

결론

전반적으로 WooCommerce 결제 페이지를 편집하려는 이유는 매우 많습니다. 고객의 사용자 경험을 개선하거나, 페이지를 안전하게 보호하거나, 브랜딩을 개선할 수 있습니다. 어떤 경우이든 플러그인, 요소 또는 수동으로 편집하도록 선택할 수 있습니다.

물론 플러그인을 사용하거나 elementor와 Shopready를 조합 하여 사용하는 것이 가장 쉬운 방법입니다. Shopready는 선택할 수 있는 다양한 위젯을 제공하기 때문입니다. 따라서 결제 페이지를 편집하고 원하는 대로 개인화할 수 있습니다. 그러나 코딩에 익숙하다면 언제든지 수동으로 페이지를 편집할 수 있습니다.

WooCommerce W/O 플러그인에 위시리스트를 추가하는 방법