Checkout Page Popup Modal Based on Billing Zip Code for WooCommerce

This code activates a popup modal on the checkout page only when a specific post or zip code is entered. In this example, the popup modal only activates when 12000 is entered as the billing zip code.

Here’s the popup modal the code generates when using the Twenty Twenty Four default block theme for WordPress.

The code targets the HTML for the billing zip code field.

If using a different theme, you may need to inspect the zip code field and make sure it matches whats used in the code as different themes may use different HTML based on whether you are using the block checkout or older shortcode method.

function enqueue_modal_popup_script_on_checkout() {
    if (is_checkout()) {
        // Enqueue jQuery (if it's not already loaded)
        wp_enqueue_script('jquery');
        ?>
        <style type="text/css">
            /* Modal Styling */
            .modal {
                display: none; /* Hidden by default */
                position: fixed;
                z-index: 1; /* Sit on top */
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgb(0,0,0); /* Fallback color */
                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            }

            /* Modal Content */
            .modal-content {
                background-color: #fefefe;
                margin: 15% auto;
                padding: 20px;
                border: 1px solid #888;
                width: 80%;
                max-width: 500px;
            }

            /* The Close Button */
            .close {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

            .close:hover,
            .close:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                var modal = $('#postcodeModal');
                var span = $('.close');
                
                $('#billing_postcode').on('blur', function() {
                    var postcode = $(this).val();
                    if (postcode === '12000') {
                        modal.show();
                    }
                });

                span.on('click', function() {
                    modal.hide();
                });

                $(window).on('click', function(event) {
                    if ($(event.target).is(modal)) {
                        modal.hide();
                    }
                });

                $('#closeModal').on('click', function() {
                    modal.hide();
                });
            });
        </script>
        <?php

        // Output modal HTML
        ?>
        <!-- Modal HTML -->
        <div id="postcodeModal" class="modal" style="display:none;">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>Special Offer for Your Postcode!</h2>
                <p>We've got a special deal for customers from postcode 12000. Check it out now!</p>
                <button id="closeModal">Close</button>
            </div>
        </div>

        <!-- Form with Postcode Input -->
        <p class="form-row address-field validate-required validate-postcode form-row-wide woocommerce-validated" id="billing_postcode_field" data-priority="90" data-o_class="form-row form-row-wide address-field validate-required validate-postcode">
            <label for="billing_postcode" class="">ZIP Code&nbsp;<abbr class="required" title="required">*</abbr></label>
            <span class="woocommerce-input-wrapper">
                <input type="text" class="input-text" name="billing_postcode" id="billing_postcode" placeholder="" value="90210" aria-required="true" autocomplete="postal-code">
            </span>
        </p>
        <?php
    }
}
add_action('wp_footer', 'enqueue_modal_popup_script_on_checkout');

Swap out the 12000 in the code to target a specific postal code.

You’ll also need to modify the HTML for the modal to output content based on your own requirements.