Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / eCommerce / Change “Bank Routing Number” fields to “Sort Code”
Duplicate Snippet

Embed Snippet on Your Site

Change “Bank Routing Number” fields to “Sort Code”

Use this code snippet to reformat the form to British banking details. Output: https://snipboard.io/mKSn9g.jpg

Alternatively, you can use Loco Translate if you'd rather avoid custom code:

1. Install and activate the Loco Translate plugin.
2. Go to Plugins > WC Vendors Marketplace > Add New Language.
3. Choose your site's current language (based on WP Dashboard > Settings > General), e.g., English (UK), and set the location to “Custom” (e.g., languages/loco/plugins/wc-vendors-en_GB.po).
4. Click Start Translating.
5. In the “Filter Translation” field, search for "routing".
6. You’ll see all text strings containing “routing”. You can then change it to “sort code”.

WC Vendors Team PRO
<10
Code Preview
Comments
php
<?php
add_action( 'wp_head', 'wcv_bank_fields_2_column_reorder' );
function wcv_bank_fields_2_column_reorder() {
    // Only load on vendor dashboard pages
    if ( ! is_user_logged_in() ) return;
    
    ?>
    <style type="text/css">
    /* Create 2-column layout for bank fields */
    .wcv-payment-tab,
    [class*="payment"] form,
    .wcv-bank-fields-container {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: flex-start;
    }
    
    /* Set width for 2-column layout */
    .control-group:has([id*="bank"]),
    .form-row:has([id*="bank"]),
    .wcv-form-group:has([id*="bank"]),
    [class*="bank_account_number"],
    [class*="routing_number"],
    [class*="bank_name"],
    [class*="iban"],
    [class*="bic_swift"] {
        flex: 0 0 calc(50% - 7.5px);
        box-sizing: border-box;
    }
    
    /* Target specific field containers and set order */
    
    /* Row 1, Column 1: Bank Account */
    .control-group:has(#wcv_bank_account_number),
    .form-row:has(#wcv_bank_account_number),
    [class*="bank_account_number"] {
        order: 1 !important;
    }
    
    /* Row 1, Column 2: Sort Code */
    .control-group:has(#wcv_bank_routing_number),
    .form-row:has(#wcv_bank_routing_number),
    [class*="routing_number"] {
        order: 2 !important;
    }
    
    /* Row 2, Column 1: Bank Name */
    .control-group:has(#wcv_bank_name),
    .form-row:has(#wcv_bank_name),
    [class*="bank_name"]:not([class*="account_name"]) {
        order: 3 !important;
    }
    
    /* Row 2, Column 2: Name on Bank Account */
    .control-group:has(#wcv_bank_account_name),
    .form-row:has(#wcv_bank_account_name),
    [class*="bank_account_name"] {
        order: 4 !important;
    }
    
    /* Row 3, Column 1: IBAN (full width) */
    .control-group:has(#wcv_bank_iban),
    .form-row:has(#wcv_bank_iban),
    [class*="iban"] {
        order: 5 !important;
        flex: 0 0 100%; /* Full width for IBAN */
    }
    
    /* Row 4, Column 1: BIC/SWIFT (full width) */
    .control-group:has(#wcv_bank_bic_swift),
    .form-row:has(#wcv_bank_bic_swift),
    [class*="bic_swift"] {
        order: 6 !important;
        flex: 0 0 100%; /* Full width for BIC/SWIFT */
    }
    
    /* Alternative selectors for inputs directly */
    input[id*="bank_account_number"] { order: 1 !important; }
    input[id*="routing_number"] { order: 2 !important; }
    input[id*="bank_name"]:not([id*="account"]) { order: 3 !important; }
    input[id*="bank_account_name"] { order: 4 !important; }
    input[id*="iban"] { order: 5 !important; }
    input[id*="bic_swift"] { order: 6 !important; }
    
    /* Responsive: Stack on mobile */
    @media (max-width: 768px) {
        .control-group:has([id*="bank"]),
        .form-row:has([id*="bank"]),
        .wcv-form-group:has([id*="bank"]),
        [class*="bank_account_number"],
        [class*="routing_number"],
        [class*="bank_name"],
        [class*="iban"],
        [class*="bic_swift"] {
            flex: 0 0 100% !important;
        }
    }
    
    /* Enhanced styling */
    .wcv-bank-fields-section {
        background: transparent;
        padding: 20px;
        border-radius: 8px;
        margin: 15px 0;
        border: 0px solid #e1e1e1;
    }
    
    .wcv-bank-fields-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #333;
        border-bottom: 2px solid #0073aa;
        padding-bottom: 8px;
    }
    
    /* Input field styling */
    [id*="bank"] {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        transition: border-color 0.3s ease;
    }
    
    [id*="bank"]:focus {
        border-color: #0073aa;
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
    }
    
    /* Label styling */
    label[for*="bank"] {
        font-weight: 500;
        color: #555;
        margin-bottom: 5px;
        display: block;
    }
		div#wcv-bank-payout-fields .wcv-horizontal-gutters .all-50{
    width:100%;
}
div#wcv-bank-payout-fields .wcv-horizontal-gutters .all-50 .wcv-bank-fields-section .wcv-bank-2col-container .wcv-bank-fields-title{
    display:none;
}
		
    </style>
    
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        // JavaScript to create 2-column layout and reorder fields
        function createBankFields2Column() {
            // Find all bank-related fields
            var accountNumber = $('[id*="bank_account_number"]').closest('.control-group, .form-row, .wcv-form-group');
            var routingNumber = $('[id*="routing_number"], [id*="sort_code"]').closest('.control-group, .form-row, .wcv-form-group');
            var bankName = $('[id*="bank_name"]:not([id*="account"])').closest('.control-group, .form-row, .wcv-form-group');
            var accountName = $('[id*="bank_account_name"]').closest('.control-group, .form-row, .wcv-form-group');
            var iban = $('[id*="iban"]').closest('.control-group, .form-row, .wcv-form-group');
            var bicSwift = $('[id*="bic_swift"]').closest('.control-group, .form-row, .wcv-form-group');
            
            // Get the container and create a wrapper
            var container = accountNumber.parent();
            
            if (container.length && accountNumber.length) {
                // Create a wrapper for bank fields if it doesn't exist
                if (!container.find('.wcv-bank-fields-section').length) {
                    container.wrapInner('<div class="wcv-bank-fields-section"></div>');
                    container.find('.wcv-bank-fields-section').prepend('<h4 class="wcv-bank-fields-title">Bank Transfer Details</h4>');
                }
                
                var bankSection = container.find('.wcv-bank-fields-section');
                
                // Detach all bank fields
                var fields = [accountNumber, routingNumber, bankName, accountName, iban, bicSwift];
                fields.forEach(function(field) {
                    if (field.length) field.detach();
                });
                
                // Create 2-column container
                if (!bankSection.find('.wcv-bank-2col-container').length) {
                    bankSection.append('<div class="wcv-bank-2col-container"></div>');
                }
                
                var colContainer = bankSection.find('.wcv-bank-2col-container');
                colContainer.css({
                    'display': 'flex',
                    'flex-wrap': 'wrap',
                    'gap': '15px'
                });
                
                // Append in desired order with proper styling
                if (accountNumber.length) {
                    accountNumber.css('flex', '0 0 calc(50% - 7.5px)');
                    colContainer.append(accountNumber);
                }
                
                if (routingNumber.length) {
                    routingNumber.css('flex', '0 0 calc(50% - 7.5px)');
                    colContainer.append(routingNumber);
                }
                
                if (bankName.length) {
                    bankName.css('flex', '0 0 calc(50% - 7.5px)');
                    colContainer.append(bankName);
                }
                
                if (accountName.length) {
                    accountName.css('flex', '0 0 calc(50% - 7.5px)');
                    colContainer.append(accountName);
                }
                
                if (iban.length) {
                    iban.css('flex', '0 0 100%');
                    colContainer.append(iban);
                }
                
                if (bicSwift.length) {
                    bicSwift.css('flex', '0 0 100%');
                    colContainer.append(bicSwift);
                }
                
                // Add responsive behavior
                function handleResize() {
                    if ($(window).width() <= 768) {
                        fields.forEach(function(field) {
                            if (field.length) field.css('flex', '0 0 100%');
                        });
                    } else {
                        if (accountNumber.length) accountNumber.css('flex', '0 0 calc(50% - 7.5px)');
                        if (routingNumber.length) routingNumber.css('flex', '0 0 calc(50% - 7.5px)');
                        if (bankName.length) bankName.css('flex', '0 0 calc(50% - 7.5px)');
                        if (accountName.length) accountName.css('flex', '0 0 calc(50% - 7.5px)');
                        if (iban.length) iban.css('flex', '0 0 100%');
                        if (bicSwift.length) bicSwift.css('flex', '0 0 100%');
                    }
                }
                
                $(window).resize(handleResize);
                handleResize(); // Initial call
            }
        }
        
        // Run on page load
        setTimeout(createBankFields2Column, 100);
        
        // Also run after any AJAX calls that might reload the form
        $(document).ajaxComplete(function() {
            setTimeout(createBankFields2Column, 200);
        });
        
        // Run when tab is switched (if using tabs)
        $(document).on('click', '[href*="payment"], [data-target*="payment"]', function() {
            setTimeout(createBankFields2Column, 300);
        });
    });
    </script>
    <?php
}
add_filter('gettext', 'change_vendor_string_bank');
function change_vendor_string_bank($translated) {
    $translated = str_ireplace('Bank routing number', 'Sort Code', $translated);
    return $translated;
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet