WooCommerce 支払いページに「注文を編集する」ボタンを追加する

2

WordPress WooCommerce ショッピングモールにDirect Checkoutなどのプラグインをインストールすることで、今すぐ購入「ボタンを追加すると、顧客は」今すぐ購入'ボタンをクリックすると、ショッピングカートのページを通過せずにすぐに支払いページに移動できます。ただし、この場合、支払いページで顧客がショッピングカートのアイテムを編集したい場合でも、すぐに編集できなくなります。このような状況では、チェックアウトページの「注文確定「ボタンの下に」注文を編集する'ボタンを追加することを考えることができます。

WooCommerce 支払いページに「注文を編集する」ボタンを追加する

WooCommerce 支払いページに「注文を編集する」ボタンを追加する方法

WooCommerce ショッピングモールで顧客が商品を買い物かごに入れてから、買い物かごのページで決済ボタンを押して決済を進めます。 Direct Checkout for WooCommerceプラグインを使用するか、直接コーディングを介して「すぐに購入」ボタンを追加すると、顧客が「すぐに購入」ボタンをクリックしてすぐにチェックアウトページに移動できるようになります。

支払いページでショッピングカートのアイテムを編集したい場合は編集できないため、商品を削除したり数量を変更したい場合は、ショッピングカートページに移動する必要があります。

WooCommerce ショッピングモールの支払いページ

チェックアウトページから直接商品アイテムを削除するか、数量を調整するようにコーディングすることを検討できますが、簡単な方法で注文 確定ボタン ボタンの下に 注文を編集する ボタンを追加することも考えられます。

WooCommerce 支払いページに「注文を編集する」ボタンを追加する方法

上の写真はベストセリングテーマです アマダ（Avada）テーマのクラシックショップデモに「注文を修正する」ボタンを追加した例を示します。

注文を編集 ボタンをクリックすると、ショッピングカートページに移動しながら注文を編集できます。

WooCommerce カートページ

WooCommerce お支払いページの「注文確定「ボタンの下に」注文を編集する'ボタンを追加するには、次のコードを使用できます。

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)で作られた WooCommerce ショッピングモールで注文を編集する「ボタンのスタイル」注文確定'ボタンと同様に変更した例です。

WooCommerce ショッピングモールのチェックアウトページに注文を編集するボタンを追加する

CSSの基本的なことを理解すれば、色、形などをある程度自由にカスタマイズすることが可能です。最近では、チャットGPTを活用して、好きなスタイルをより簡単に実装できます。チャットGPTの助けを借りてスタイルを調整したい場合は、CSSの基本的な理解が必要です。

👉 WordPressウェブホスティング関連の問題で解決に苦労したり、時間がかからないカスタマイジング作業をしたい場合 ここでサービス（有料）をご依頼することができます。

最後に、

以上で WordPress WooCommerce モールのチェックアウトページに「注文を編集する」ボタンを追加する方法を見てみました。 「購入」ボタンを追加して顧客がすぐに支払いページに移動するようにする場合は、上記の方法で注文を編集するボタンを追加することを検討することができます。

参考までに WordPress WooCommerceを使用してインターネットレッスンサイトを作成する場合は、Edumaなどの学習管理システム（LMS）テーマを使用できますが、LMSテーマではカスタマイズするのは簡単ではありません。あるいは、LearnDashやTutor LMSなどのLMSプラグインを使用する方法があります。 Tutor LMSがハロウィンデーを迎え、一時的に割引イベントを行っています。人工サイトの構築やコンテンツ有料化機能を実装したい場合に活用できます。

参照

2のコメント

コメントを残す

  1. すぐに購入と注文修正機能の実務のヒントが詳しく扱われて読んで共感しました。今後もこのような有用な情報をたくさん共有してください。

    返信