itsource

WooCommerce 체크아웃 레이아웃

mycopycode 2023. 9. 14. 23:14
반응형

WooCommerce 체크아웃 레이아웃

WooCommerce 체크아웃 페이지의 레이아웃을 변경하고 싶은데 PHP 페이지가 여러 개인 것 같아 방법을 모르겠습니다.

제가 이루고자 하는 것은 요약 부분과 배송 정보를 상단으로 이동시키고, 이후 배송지 입력 필드를 보여주는 것입니다.

CSS를 사용하여 변경해야 하나요, 아니면 단순히 템플릿의 후크 순서를 변경할 수 있나요?

감사합니다!

"wocommerce/templates/checkout" 폴더에는 "form-checkout.php"라는 파일이 있습니다.해당 파일의 내용을 "yourtheme/wocommerce/checkout/form-checkout.php"에 복사합니다. ~54번 라인에는 다음 코드가 있습니다.

<?php do_action( 'woocommerce_checkout_order_review' ); ?>

바로 아래쪽으로 이동

<form name="checkout" method="post" class="checkout" action="<?php echo esc_url( $get_checkout_url ); ?>">

추가:

<?php
$order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );

echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' );
?>

바로 아래까지

<?php endif; ?>

파일을 저장합니다.그러면 요약과 발송이 입력 필드 위에 표시되지만, 페이지 상단에 "주문하기" 버튼이 계속 표시됩니다."review-order.php"의 내용을 "yourtheme/wocommerce/checkout/review-order.php"에 복사하고 다음을 제거합니다(~169행).

<?php
$order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );

echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '" />' );
?>

위의 내용을 삭제하면 페이지 상단에 있는 "주문하기" 버튼이 제거됩니다.

"wocommerce/templates/checkout/form-checkout.php"에서 "form-check.php" 파일을 편집할 수 있지만, wocommerce를 업데이트할 때 변경 사항이 손실되므로 권장하지 않습니다.파일을 "yourtheme/wocommerce/checkout/form-checkout.php"에 복사하면 파일이 덮어쓰게 되며, wocommerce를 업데이트해도 변경 내용이 손실되지 않습니다.

언급URL : https://stackoverflow.com/questions/26077335/woocommerce-checkout-layout

반응형