WooCommerce 결제 페이지에서 장바구니 세부 정보를 수정하는 방법

WooCommerce는 고객이 결제 페이지에서 장바구니를 업데이트하는 것을 허용하지 않는다는 것을 알고 계실 것입니다. 즉, 결제 페이지에서 수량을 변경하거나 제품을 삭제할 수 없습니다. 고객은 장바구니 페이지로 돌아가 장바구니를 업데이트한 다음 결제 페이지로 다시 이동해야 합니다. 이로 인해 고객은 필요한 모든 정보를 다시 입력해야 합니다. 이것은 고객, 특히 게스트 사용자(대부분)에게 약간 실망스럽습니다 .

이번 포스트에서는 WooCommerce의 결제 페이지에서 장바구니를 업데이트하는 방법에 대해 설명합니다. 저는 사무실에서 열리는 Fun Friday 이벤트에서 이 기능을 개발했습니다. Fun Fridays 에 우리는 하루 종일 그 사람의 핵심 업무 활동과 관련이 없는 일을 하려고 노력합니다.

먼저 WooCommerce Checkout 페이지의 장바구니 세부정보 표를 살펴보겠습니다.

여기서 고객은 상품의 수량을 수정하거나 삭제할 수 없습니다. 따라서 고객이 Checkout 페이지를 떠나지 않고 수량 변경 및 제품 삭제 기능을 제공하고자 합니다.

의 시작하자

이 설명을 건너뛰고 대신 상점에서 기능을 구현하려는 경우 내가 만든 플러그인을 다운로드할 수 있습니다.

1. 결제 페이지의 장바구니 섹션에서 UI 변경

"주문" 테이블의 "제품" 열을 수정해야 합니다. 장바구니의 각 항목에 대해 "삭제" 아이콘과 "수량 선택기"를 추가해야 합니다.

이를 달성하기 위해 WooCommerce는 각 장바구니 항목의 제품 이름 행을 수정할 수 있는 필터를 제공했습니다: woocommerce_cart_item_name .

주문 테이블에 표시된 선택한 수량은 다른 WooCommerce 필터인 woocommerce_checkout_cart_item_quantity 를 사용하여 수정할 수도 있습니다.

두 필터를 모두 사용하고 고객이 결제 페이지에서 장바구니 세부정보를 수정할 수 있도록 합니다. 새 플러그인을 생성하여 아래 변경 사항을 구현할 수 있습니다.

첫째, 주문 테이블의 각 항목에 대해 표시된 수량은 필요하지 않습니다. 따라서 필터를 사용하고 WooCommerce 데이터를 덮어쓰도록 빈 문자열을 반환합니다.

그런 다음 woocommerce_cart_item_name 필터를 사용하여 제품 이름 행을 수정하고 수량 필드 및 삭제 아이콘을 추가합니다.

여기서 is_checkout() 함수를 사용하여 체크아웃 페이지에만 변경 사항을 적용하고 있는지 확인합니다. 위의 코드 스니펫에서 언급한 대로 3단계로 분할했습니다.

1단계: 삭제 아이콘 추가
여기 이 단계에서 장바구니의 각 항목에 대해 삭제 아이콘을 추가합니다. WooCommerce 장바구니에 사용된 것과 동일한 아이콘입니다.

여기에서는 WooCommerce 함수 get_remove_url() 을 사용했습니다. 각 장바구니 항목에 대해 $cart_key를 전달해야 합니다. 따라서 get_remove_url() 함수는 각 장바구니 항목을 삭제하는 고유한 URL을 반환합니다.

2단계: 제품 이름 추가
제품 이름 행을 수정하는 동안 새 필드와 함께 행에 제품 이름도 추가해야 합니다. 첫 번째 인수로 전달되는 필터 자체에서 제품 이름을 가져옵니다. 우리의 경우 $product_title입니다.

WooCommerce 스토어 매출 증대

"WooCommerce Abandoned Cart Pro가 고가 제품에 대한 매출을 얼마나 증가시켰는지 보는 것은 흥미롭습니다. 저는 플러그인이 고객이 구매(예: 식품) 여부를 신경 쓰지 않는 저가 제품에 대한 매출을 증가시킬 것으로 예상했지만, 그렇게 큰 구매 결정이 필요한 제품의 차이를 보고 더 놀랐습니다." - Katie Keith, Barn2 Media 운영 이사

3단계: 수량 선택기 추가
마지막으로 수량 선택기를 추가합니다. 여기서는 WooCommerce 함수 woocommerce_quantity_input() 을 사용합니다.

"input_name", "input_value", "max_value", "min_value" 함수에 대해 4개의 매개변수를 제공해야 합니다.

• input_name: 'cart'라는 이름의 배열을 포함합니다. 여기에 장바구니 항목 키와 수량을 전달해야 합니다.
• input_value: 선택한 제품 수량을 포함합니다.
• max_value: 제품의 최대 재고 수입니다.
• min_value: 수량 선택기의 최소값이 됩니다.

위의 모든 단계가 완료되면 이제 결제 페이지의 주문 테이블에 삭제 버튼과 수량 선택기가 표시됩니다.

여기에서는 if ( is_checkout() ) { condition이 하나 있습니다. 아래에 언급된 이유로 필요합니다.

제품 이름 열 값(woocommerce_cart_item_name)을 수정하는 데 사용한 필터는 상점의 장바구니 페이지에서도 호출됩니다. 따라서 우리가 작성한 코드가 장바구니 페이지의 기능을 손상시키지 않도록 변경 사항이 체크아웃 페이지에만 적용되도록 했습니다.

2. Ajax 호출을 통한 카트 업데이트

이만큼 추가해도 작동하지 않으므로 고객이 수량을 변경할 때 장바구니 합계에 반영되는지 확인해야 합니다.

수량 변경

장바구니 합계를 변경하려면 Ajax 호출이 필요합니다. 따라서 고객이 수량을 변경하면 조치를 취하고 장바구니 합계를 변경해야 합니다.

이제 웹 사이트 바닥글에 "add_quantity.js" 파일을 추가하고 결제 페이지에 있을 때 포함되어 있는지 확인합니다.

이제 장바구니 합계를 변경하기 위해 ajax를 호출하는 Javascript 파일에 함수를 추가해야 합니다.

위의 자바스크립트는 수정된 체크아웃 양식의 데이터를 전달할 ajax를 호출합니다. 그러나 수량 아이콘을 클릭하면 호출됩니다. 따라서 수량의 수정된 값이 포함됩니다.

이제 수정된 수량에 따라 장바구니 합계를 변경하는 ajax용 함수를 추가해야 합니다.

결제 페이지에서 수량을 수정하면 위의 함수가 호출되고 장바구니 합계가 변경됩니다. 우리는 우리의 기능에서 WooCommerce 기능을 사용했습니다.

장바구니 합계를 수정하고 체크아웃 페이지의 주문 테이블에 표시하기 위해 "set_quantity()", "calculate_totals()", "woocommerce_cart_totals()" 함수를 사용했습니다.

set_quantity() : 이 함수는 수정된 수량을 장바구니에 설정합니다.

수정된 수량 값을 가질 자바스크립트 함수에서 데이터를 보냈으므로 수정된 값을 사용하여 장바구니에 설정할 것입니다.

compute_totals() : 이 함수를 사용하여 장바구니의 합계를 다시 계산하도록 지시합니다.

woocommerce_cart_totals() : 이 함수는 수정된 장바구니를 표시하는 데 사용됩니다.

위의 모든 계산이 완료되면 ajax 함수를 호출한 자바스크립트로 다시 돌아갑니다. 해당 기능에 대한 응답으로 'update_checkout' 기능을 '트리거' 하고 장바구니를 수정하여 사용자에게 표시합니다.

주문 테이블의 "삭제" 버튼에 대한 CSS가 필요합니다. 따라서 WooCommerce 장바구니 삭제 버튼처럼 보일 것입니다. 따라서 CSS를 추가해야 합니다. 웹사이트 바닥글에 CSS를 추가할 수 있습니다.

추가되면 CSS 파일의 삭제 버튼에 CSS를 제공해야 합니다. CSS는 아래에 표시되었습니다.

그래서 WooCommerce의 결제 페이지에서 수량을 수정할 수 있는 기능을 준비했습니다.

위의 사항을 구현한 후 결제 페이지의 주문 테이블은 다음과 같이 표시됩니다.

그것은 체크 아웃 페이지의 주문 테이블의 각 항목에 대한 수량 선택기와 삭제 아이콘을 추가합니다.

저는 이것을 2016년 9월에 출시된 Change Quantity on Checkout for WooCommerce라는 플러그인으로 만들었습니다. 400개 이상의 WooCommerce 매장에서 사용됩니다. WooCommerce 스토어에서 이미 이 플러그인을 사용하고 있다면 시간을 내어 플러그인을 검토해 주시면 감사하겠습니다.

피드백이 있는 경우 아래 의견에 알려주거나 플러그인의 지원 포럼에 게시할 수 있습니다.