우커머스 체크아웃 페이지에 입금 은행 선택 박스 추가하기

워드프레스 우커머스 쇼핑몰에서 고객이 결제 방법으로 무통장 입금 방식을 선택하는 체크아웃 페이지에 입금 은행 정보가 표시되고 않고 결제 완료 후에 입금 은행 정보가 표시됩니다. 입금 은행이 2개 이상인 경우 체크아웃 단계에서 입금 은행을 선택할 수 있는 옵션을 제공하는 것을 고려할 수 있습니다.

굳이 입금 은행을 선택하도록 할 필요가 없는 경우 설명 필드에 직접 입금 은행 계좌 정보를 입력하면 결제하기 화면에 입금 은행 정보가 표시됩니다. 아래의 "간단한 방법 - 체크아웃 페이지에 입금은행 정보 표시하기" 섹션을 참고하세요.

우커머스 체크아웃 페이지에 입금 은행 선택 박스 추가하기

네이버 카페에서 주문서를 작성할 때 은행 선택 박스를 추가하는 방법에 대한 문의가 올라와서 우커머스 결제 페이지에 은행 선택 박스를 추가하는 방법에 대하여 생각해 보았습니다.

최종적으로 위의 유튜브 영상과 같이 작동하도록 해보았습니다.

이와 같이 은행선택 필드를 결제 페이지에 추가하려는 경우 Checkout Field Editor (Checkout Manager) for WooCommerce와 같은 플러그인을 사용할 수 있습니다. 플러그인 » Add New Plugin (새 플러그인 추가)에서 검색하여 설치할 수 있습니다.

우커머스 » Checkout Form에서 은행선택 필드를 하나 추가합니다.

이제 테마의 함수 파일(functions.php)에 다음 코드를 추가합니다. 차일드 테마를 만들어서 작업하도록 합니다.

// Adding a bank selection field to the WooCommerce checkout page
// 우커머스 체크아웃 페이지에 은행 선택 필드 추가하기

function add_bank_selection_dropdown() {
    ?>
    <select id="bank-selection" name="bank-selection" onchange="updateBankValue()" style="display: none;">
        <option value="">은행을 선택하세요</option>
        <option value="국민은행: 1234-5678-900000 [예금주: 홍길동]">국민은행: 1234-5678-900000 [예금주: 홍길동]</option>
        <option value="하나은행: 1234-5678-900000 [예금주: 홍길동]">하나은행: 1234-5678-900000 [예금주: 홍길동]</option>
    </select>
    <div id="bank-selection-error" style="display: none; color: red;">입금할 은행을 선택하세요.</div>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        // Function to update the bank value
        function updateBankValue() {
            var selectedBank = $('#bank-selection').val();
            $('#banks').val(selectedBank);
            $('#bank-selection-error').hide();
        }

        // Function to check the display status of the BACS payment box
        function checkPaymentMethodBacsDisplay() {
            return $('.payment_box.payment_method_bacs').css('display') !== 'none';
        }

        // Function to toggle the bank selection display
        function toggleBankSelectionDisplay() {
    var show = checkPaymentMethodBacsDisplay();
    var bankSelection = $('#bank-selection');

    if (show) {
        bankSelection.show().attr('required', 'required');
    } else {
        bankSelection.hide().removeAttr('required');
        bankSelection.val(''); // Clear the selected bank
        $('#banks').val(''); // Also clear the hidden input field if used
        $('#bank-selection-error').hide();
    }
}


        // Attach change event listener to payment method radio buttons
        $('input[name="payment_method"]').on('change', toggleBankSelectionDisplay);

        // Check the initial state and periodically
        setTimeout(toggleBankSelectionDisplay, 1000);
        setInterval(toggleBankSelectionDisplay, 1000);

        // Handle WooCommerce checkout form submission
        $('form.checkout').on('checkout_place_order', function() {
            var bankSelection = $('#bank-selection');
            if (bankSelection.is(':visible') && !bankSelection.val()) {
                $('#bank-selection-error').show();
                return false; // Prevent the form from submitting
            }
        });

        // Update bank value on selection
        $('#bank-selection').on('change', updateBankValue);
    });
</script>

    <?php
}
add_action( 'woocommerce_review_order_before_submit', 'add_bank_selection_dropdown' );


// 땡큐 페이지

/* add_action('woocommerce_before_thankyou', function($order_id) {
    if (!$order_id) {
        return;
    }

    $banks_value = get_post_meta($order_id, 'banks', true); // Ensure 'banks' is the correct meta key
    if (!empty($banks_value)) {
        echo '<div class="custom-bank-info">입금은행: ' . esc_html($banks_value) . '</div>';
    }
});
*/

add_filter('woocommerce_thankyou_order_received_text', function($thankyou_text, $order) {
    if (!is_a($order, 'WC_Order')) {
        return $thankyou_text;
    }

    $order_id = $order->get_id();
    $banks_value = get_post_meta($order_id, 'banks', true); // Ensure 'banks' is the correct meta key

    if (!empty($banks_value)) {
        $thankyou_text .= '<ul class="custom-bank-info woocommerce-order-overview woocommerce-thankyou-order-details order_details"><li class="woocommerce-order-overview__order order">입금은행: ' . esc_html($banks_value) . '</li></ul>';
    }

    return $thankyou_text;
}, 10, 2);

은행계좌 정보는 실제 사용하는 계좌 정보로 변경하시기 바랍니다. 코드 또한 원하는 경우 적절히 수정하시기 바랍니다.

외모 » 사용자 정의하기 » 추가 CSS 또는 테마 폴더 내의 스타일시트 파일(style.css)에 다음과 같은 커스텀 CSS 코드를 추가합니다.

.custom-bank-info {

    color: #0073aa;
}

.woocommerce-order-received section.woocommerce-bacs-bank-details {display:none; }

#banks {
    pointer-events: none; /* Prevents clicking on the field */
    background-color: #eee; /* Makes the field appear inactive */
}

스타일은 적절히 변경합니다.

이제 테스트하면 유튜브 영상에서와 같이 작동할 것입니다. Flatsome 테마에서 테스트했습니다. 다른 테마에서는 테스트하지 않았지만 잘 작동할 것입니다.