Add pop up and a custom message based on country in Woocommerce checkout

Question

I am using the below code which works well to add a message to the woocommerce checkout when customers choose a country. But i also want to add a pop up using this shortcode

echo do_shortcode('[sg_popup id=3839] ');

But when i add it below the text message the pop up always shows, ie if i add the following

`echo '<div class="shipping-notice woocommerce-info"   style="display:none">Please allow 5-10 business days for delivery after order processing.'; echo do_shortcode('[sg_popup id=3839] '); echo '</div>'

I imagine its because it is only hiding the code so it is actually running the shortcode? But what other options do I have?

Any help is appreciated.

add_action( 'woocommerce_before_checkout_billing_form', 'display_shipping_notice' );
function display_shipping_notice() {
    echo '<div class="shipping-notice woocommerce-info" style="display:none">Please allow 5-10 business days for delivery after order processing.</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_hide_shipping_notice' );
function show_hide_shipping_notice(){
    ?>
    <script>
        jQuery(document).ready(function($){
            // Set the country code (That will display the message)
            var countryCode = 'FR';

            $('select#billing_country').change(function(){
                selectedCountry = $('select#billing_country').val();

                if( selectedCountry == countryCode ){
                    $('.shipping-notice').hide();
                }
                else {
                    $('.shipping-notice').show();
                }
            });
        });
    </script>
    <?php
}

Answer 1

The following code will show or hide a custom shipping notice depending on the chosen country (the code handle both billing and shipping country)…

To replace your shortcode, you can use instead a popup like using Sweet Alert 2 (a lightbox) :

// Displaying a custom shipping notice
add_action( 'woocommerce_checkout_before_customer_details',  'checkout_country_shipping_notice' );
function checkout_country_shipping_notice() {
    ?>
    <style>.shipping-notice.hidden{display:none;}</style>
    <?php
    $country = WC()->customer->get_shipping_country();
    $country = empty($country) ? WC()->customer->get_billing_country() : $country;

    $text  = __("Please allow 5-10 business days for delivery after order processing.", "woocommerce" );
    $class = 'woocommerce-info shipping-notice';

    // Hidden if France or empty
    if( empty($country) || $country == 'FR' )
        $class .= ' hidden';

    echo '<div class="'.$class.'">'.$text.'</div>';
}

// The jQuery code to show / hide the custom shipping notice
add_action( 'wp_footer', 'checkout_country_script' );
function checkout_country_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script src="https://unpkg.com/sweetalert2@8.8.1/dist/sweetalert2.all.min.js"></script>
    <script src="https://unpkg.com/promise-polyfill@8.1.0/dist/polyfill.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
        var fc  = 'form.checkout',              sn = '.shipping-notice',
            bc  = 'select#billing_country',     sc = 'select#shipping_country',
            sda = 'input#ship-to-different-address-checkbox';

        // Function that show hide the shipping notice
        function showHideNotice(t){
            if( $(t).val() == 'FR' || $(t).val() == undefined ){
                $(sn).hide( function(){
                    $(this).removeClass('hidden');
                });
            } else {
                $(sn).hide( 'fast', function(){
                    if( ! $(this).hasClass('hidden') )
                        $(this).addClass('hidden');
                    $(sn).show();

                    // Add a Sweet alert 2 popup
                    swal({
                        title:  '<?php _e("Custom popup title", "woocommerce"); ?>',
                        text:   '<?php _e("This is the text for my popup", "woocommerce"); ?>',
                        type:   'info' // can be: warning, error, success, info or question
                    });
                });
            }
        }

        // Billing and shipping country change
        $(bc+','+sc).change(function(){
            if($(sda).prop('checked'))
                showHideNotice(sc);
            else
                showHideNotice(bc);
        });
    });
    </script>
    <?php
    endif;
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.