WooCommerce 체크아웃의 라디오 버튼 선택에 따른 동적 수수료
WooCommerce 체크아웃의 라디오 버튼 선택에 따른 동적 수수료를 구현하려면 다음 단계를 권장합니다:
라디오 양식 필드 사용자 정의
woocommerce_form_field_radio 작업을 업데이트하여 라디오 버튼 양식 필드를 수정하세요. 이렇게 하면 라벨이 인라인으로 표시되어 사용자 경험을 향상할 수 있습니다.
<code class="php">add_action( 'woocommerce_form_field_radio', 'custom_form_field_radio', 20, 4 ); function custom_form_field_radio( $field, $key, $args, $value ) { if ( ! empty( $args['options'] ) && is_checkout() ) { $field = str_replace( '</label><input ', '</label><br><input ', $field ); $field = str_replace( '<label ', '<label style="display:inline;margin-left:8px;" ', $field ); } return $field; }
맞춤 포장 수수료 추가
woocommerce_cart_calculate_fees에 연결하여 동적 포장 수수료를 추가하세요. 세션에서 선택한 포장 옵션을 확인하고 적절한 수수료를 적용합니다.
<code class="php">add_action( 'woocommerce_cart_calculate_fees', 'add_packaging_fee', 20, 1 ); function add_packaging_fee( $cart ) { if ( is_admin() && ! defined( 'DOING_AJAX' ) ) return; $packing_fee = WC()->session->get( 'chosen_packing' ); // Dynamic packing fee $fee = $packing_fee === 'box' ? 9.00 : 3.00; $cart->add_fee( __( 'Packaging fee', 'woocommerce' ), $fee ); }</code>
라디오 버튼 필드 추가
woocommerce_review_order_after_shipping에 연결하여 사용자 정의 라디오 버튼 필드를 추가합니다. 패키징 선택용.
<code class="php">add_action( 'woocommerce_review_order_after_shipping', 'checkout_shipping_form_packing_addition', 20 ); function checkout_shipping_form_packing_addition() { $domain = 'woocommerce'; echo '<tr class="packing-select"><th>' . __('Packing options', $domain) . '</th><td>'; $chosen = WC()->session->get('chosen_packing'); $chosen = empty($chosen) ? WC()->checkout->get_value('radio_packing') : $chosen; $chosen = empty($chosen) ? 'bag' : $chosen; // Add a custom checkbox field woocommerce_form_field( 'radio_packing', array( 'type' => 'radio', 'class' => array( 'form-row-wide packing' ), 'options' => array( 'bag' => __('In a bag '.wc_price(3.00), $domain), 'box' => __('In a gift box '.wc_price(9.00), $domain), ), 'default' => $chosen, ), $chosen ); echo '</td></tr>'; }</code>
jQuery 및 Ajax 스크립트
이 스크립트는 라디오 버튼 선택 시 수수료 업데이트를 위한 Ajax 기능을 처리합니다.
<code class="php">add_action( 'wp_footer', 'checkout_shipping_packing_script' ); function checkout_shipping_packing_script() { if ( ! is_checkout() ) return; // Only checkout page ?> <script type="text/javascript"> jQuery( function($){ $('form.checkout').on('change', 'input[name=radio_packing]', function(e){ e.preventDefault(); var p = $(this).val(); $.ajax({ type: 'POST', url: wc_checkout_params.ajax_url, data: { 'action': 'woo_get_ajax_data', 'packing': p, }, success: function (result) { $('body').trigger('update_checkout'); console.log('response: '+result); // just for testing | TO BE REMOVED }, error: function(error){ console.log(error); // just for testing | TO BE REMOVED } }); }); }); </script> <?php }
PHP Ajax 함수
Ajax 요청을 처리하고 선택한 패킹 옵션을 저장하고 반환하는 함수입니다.
<code class="php">add_action( 'wp_ajax_woo_get_ajax_data', 'woo_get_ajax_data' ); add_action( 'wp_ajax_nopriv_woo_get_ajax_data', 'woo_get_ajax_data' ); function woo_get_ajax_data() { if ( isset($_POST['packing']) ){ $packing = sanitize_key( $_POST['packing'] ); WC()->session->set('chosen_packing', $packing ); echo json_encode( $packing ); } die(); // Alway at the end (to avoid server error 500) }</code>
이 솔루션은 jQuery, Ajax, 라디오 버튼 선택에 따라 수수료를 동적으로 업데이트하는 맞춤형 WooCommerce 기능을 통해 결제 시 원활한 사용자 경험을 보장합니다.
위 내용은 WooCommerce Checkout에서 라디오 버튼 선택에 따라 동적 수수료를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!