우커머스 결제하기 페이지에 '주문 수정하기' 버튼 추가하기

워드프레스 우커머스 쇼핑몰에 Direct Checkout과 같은 플러그인을 설치하여 '바로 구매' 버튼을 추가하는 경우 고객이 '바로 구매' 버튼을 클릭하여 장바구니 페이지를 거치지 않고 곧바로 결제하기 페이지로 이동할 수 있습니다. 하지만 이 경우 결제 페이지에서 고객이 장바구니 항목을 수정하고 싶어도 곧바로 수정할 수 없게 됩니다. 이런 상황에서 체크아웃 페이지의 '주문 확정' 버튼 아래에 '주문 수정하기' 버튼을 추가하는 것을 생각할 수 있습니다.

우커머스 결제하기 페이지에 '주문 수정하기' 버튼을 추가하는 방법

우커머스 쇼핑몰에서 고객이 상품을 장바구니 담은 다음, 장바구니 페이지에서 결제하기 버튼을 눌러 결제를 진행합니다. Direct Checkout for WooCommerce 플러그인을 사용하거나 직접 코딩을 통해 '바로 구매' 버튼을 추가하면 고객이 '바로 구매' 버튼을 클릭하여 곧바로 체크아웃 페이지로 이동하도록 할 수 있습니다.

결제 페이지에서 장바구니 항목을 수정하고 싶어도 수정할 수 없기 때문에 상품을 제거하거나 수량을 변경하려는 경우 장바구니 페이지로 이동해야 합니다.

체크아웃 페이지에서 직접 상품 항목을 제거하거나 수량을 조정하도록 코딩하는 것을 고려할 수 있지만, 간단한 방법으로 주문 확정 버튼 버튼 아래에 주문 수정하기 버튼을 추가하는 것도 생각할 수 있습니다.

위의 그림은 베스트셀링 테마인 아마다(Avada) 테마의 클래식 샵(Classic Shop) 데모에 '주문 수정하기' 버튼을 추가한 예시를 보여줍니다.

주문 수정 버튼을 클릭하면 장바구니 페이지로 이동하면서 주문을 수정할 수 있게 됩니다.

우커머스 결제 페이지의 '주문 확정' 버튼 아래에 '주문 수정하기' 버튼을 추가하려면 다음과 같은 코드를 사용할 수 있습니다.

add_action( 'woocommerce_review_order_after_submit', 'cc_add_back_to_cart_button_under_place_order', 10 );

/**
 * 출력 위치: Place Order 버튼 바로 아래 (WooCommerce 훅)
 * 왜 anchor인가: form submit을 막지 않고, 기본 버튼 스타일을 그대로 재사용하기 위함.
 */
function cc_add_back_to_cart_button_under_place_order() {
	if ( ! function_exists( 'wc_get_cart_url' ) || ! is_checkout() ) {
		return;
	}

	$cart_url = wc_get_cart_url();

	// 래퍼는 간단한 간격 확보 목적(테마에 따라 스타일 제거 가능)
	echo '<div class="cc-back-to-cart-wrap" style="margin-top: .75rem;">';
	printf(
		'<a href="%1$s" class="button alt cc-back-to-cart" id="back_to_cart" aria-label="%2$s">%3$s</a>',
		esc_url( $cart_url ),
		esc_attr__( '장바구니로 이동하여 주문을 수정합니다', 'cc-back-to-cart' ),
		esc_html__( '주문 수정하기', 'cc-back-to-cart' )
	);
	echo '</div>';
}

👉상기 PHP 코드는 차일드 테마의 함수 파일에 추가할 수 있습니다. 차일드 테마를 만들지 않고 곧바로 테마의 함수 파일에 추가할 경우 추후 테마가 업데이트되면 수정 사항이 사라지므로 차일드 테마(자식 테마)를 만들어서 작업하시기 바랍니다.

버튼 스타일은 사이트에 따라 CSS 코드를 사용하여 원하는 스타일로 꾸밀 수 있습니다.

아래는 GeneratePress 테마와 엘리멘터(Elementor)로 만든 우커머스 쇼핑몰에서 '주문 수정하기' 버튼의 스타일을 '주문 확정' 버튼과 비슷하게 변경한 예시입니다.

CSS에 대한 기본적인 사항을 이해하면 색상, 모양 등을 어느 정도 자유롭게 커스텀하는 것이 가능합니다. 요즘은 챗GPT를 활용하여 원하는 스타일을 보다 수월하게 구현할 수 있을 것입니다. 챗GPT의 도움을 받아 스타일을 조정하려는 경우 CSS에 대한 기본적인 이해가 있어야 가능합니다.

👉 워드프레스나 웹호스팅 관련 문제로 해결에 어려움을 겪거나 시간이 많이 소요되지 않는 커스터마이징 작업을 원하는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

마치며

이상으로 워드프레스 우커머스 쇼핑몰의 체크아웃 페이지에 '주문 수정하기' 버튼을 추가하는 방법을 살펴보았습니다. '바로 구매'하기 버튼을 추가하여 고객이 곧바로 결제하기 페이지로 이동하도록 하는 상황에서 상기의 방법으로 주문 수정하기 버튼을 추가하는 것을 고려할 수 있을 것입니다.

참고로 워드프레스 우커머스를 사용하여 인터넷 강의 사이트를 만들려는 경우 Eduma와 같은 LMS(학습 관리 시스템) 테마를 사용할 수 있지만, LMS 테마에서는 커스터마이징하는 것이 쉽지 않을 수 있습니다. 대안으로 LearnDash나 Tutor LMS와 같은 LMS 플러그인을 사용하는 방법이 있습니다. Tutor LMS가 할로윈 데이를 맞이하여 한시적으로 할인 행사를 진행하고 있습니다. 인강 사이트 구축이나 콘텐츠 유료화 기능을 구현하려는 경우 활용할 수 있습니다.

• 워드프레스 LMS 인강 플러그인 Tutor LMS 할인

참고

• 우커머스 간편 주문 페이지 - YITH Easy Order Page for WooCommerce
• 워드프레스에서 멤버십을 정기 결제 방식으로 판매하는 방법
• 워드프레스 블록 에디터 vs 엘리멘터, 어떤 것을 선택해야 할까?