Plugin Directory

Changeset 1522500


Ignore:
Timestamp:
10/26/2016 02:02:08 PM (9 years ago)
Author:
stuartobrien
Message:

Change the Send Email interface from a simple prompt to a popup modal which is less rigid and more versatile

Location:
send-emails-for-woocommerce/trunk
Files:
18 added
4 edited

Legend:

Unmodified
Added
Removed
  • send-emails-for-woocommerce/trunk/assets/css/send-emails-back-end.css

    r1513149 r1522500  
    8686.cx-loading-graphic { background: url(loading.gif) no-repeat 50% 50%; width: 38px; height: 38px; margin:auto; background-color: white; border-radius:200px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);}
    8787
     88
     89
     90
     91
     92
     93
     94/* RE-USABLE COMPONENTS */
     95
     96   
     97    /* MODAL CONTENT (FORM). RE-USABLE */
     98    .cxsemls-create-modal {background: #ffffff;padding: 0;border-radius: 2px;box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3), 0 0 120px rgba(0, 0, 0, 0.25);width: 420px;color: #3d4246;font-weight: normal;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;line-height: 18px;box-sizing: border-box;position: relative;/* top: -50px; */font-weight: normal;}
     99    .cxsemls-create-modal .cxsemls-create-modal-title {font-weight: 700;font-size: 14px;line-height: 19px;padding: 12px 30px 13px 16px;border-bottom: 1px solid rgba(0,0,0,0.07);margin: 0;/* background: rgb(255, 255, 255); */}
     100    .cxsemls-create-modal .cxsemls-create-modal-content-inner {padding: 9px 30px 22px;position: relative;background: #fbfbfb;border-radius: 0 0 3px 3px;}
     101    .cxsemls-create-modal .cxsemls-create-modal-row {padding: 12px 0 0;margin: 0;}
     102    .cxsemls-create-modal a { font-weight: normal; }
     103   
     104        /* FORM ELEMENTS */
     105        .form-table .cxsemls-create-modal p,
     106        .cxsemls-create-modal p {margin: 0.5em 0;}
     107        .cxsemls-create-modal label {padding: 0 0 3px;font-size: 13px;display: block;color: #777;}
     108        .cxsemls-create-modal input[type=text],
     109        .cxsemls-create-modal select { width: 100%; }
     110        .cxsemls-create-modal input:not([type=checkbox]):not([type=radio]) { background: rgb(255, 255, 255); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; border: 1px solid rgba(0, 0, 0, 0.2); padding: 5px 7px; color: #51565a !important; border-radius: 2px; line-height: 20px; height: auto; box-sizing: border-box; }
     111        .cxsemls-create-modal select { background: rgb(255, 255, 255); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; border: 1px solid rgba(0, 0, 0, 0.2); padding: 5px 17px 5px 7px; color: #51565a !important; border-radius: 2px; line-height: 22px; height: auto; box-sizing: border-box; }
     112        .cxsemls-modal-description { font-size: 13px; color: #a2a2a2; font-style: italic; }
     113       
     114        /* FORM ERRORS */
     115        .cxsemls-create-modal .notice,
     116        .cxsemls-create-modal div.updated,
     117        .cxsemls-create-modal div.error {margin: 3px 0 8px;border-radius: 2px;}
     118
     119    .cxsemls-create-modal .cxsemls-settings-icon {position: absolute;right: 25px;top: 12px;color: #b7b7b7;font-size: 15px;line-height: 19px;border-radius: 100px;width: 20px;transition: .2s;}
     120    .cxsemls-create-modal .cxsemls-settings-icon:hover {color: #3d3d3d;}
     121   
     122    .cxsemls-create-modal input[type=checkbox] { width: auto !important; }
     123    .cxsemls-create-modal .create-customer-checkbox-row { padding: 15px 0 3px; }
     124
     125    #order_data .order_data_column .cxsemls-create-modal p.create-customer-checkbox-row,
     126    .form-table p.create-customer-checkbox-row {margin: 1.2em 0;}
     127    #order_data .order_data_column .cxsemls-create-modal .create-customer-checkbox-row label,
     128    .create-customer-checkbox-row label{ display: inline-block; padding: 0; margin: 0 0 0 0px; }
     129   
     130    .user-capability-restricted{ color: #BBB; font-style: italic; }
     131    .required-field { color: red; }
     132   
     133    p.cxsemls-create-modal-buttons-row { margin-top: 0; }
     134    .cxsemls-create-modal-buttons-row .button { margin: .5em 0; }
     135   
     136    .button.cxsemls-send-email-form-cancel {}
     137    .button.cxsemls-send-email-form-submit {float: right;}
     138
     139
     140    /* MODAL COMPONENT */
     141    .cxsemls-component-modal-cover {width: 100%;height: 100%;background: rgba(0,0,0,0.7);position: fixed;left: 0;top: 0;z-index: 100000;transition: all 0s, opacity .2s;opacity: 0;}
     142    .cxsemls-component-modal-popup {transform: scale(.97) translate(0,0);opacity: 0;transition: all 0s, opacity .15s, transform .15s;transition-timing-function: cubic-bezier(.55,0,.1,1) !important;}
     143       
     144        /* NEW (FROM MAGNIFIC) */
     145        .cxsemls-component-modal-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: .8; }
     146        .cxsemls-component-modal-wrap {top: 0;left: 0;width: 100%;height: 100%;z-index: 100000;position: fixed;outline: none !important;overflow-x: hidden;overflow-y: auto;}
     147        .cxsemls-component-modal-container {text-align: center;position: absolute;width: 100%;height: 100%;left: 0;top: 0;padding: 15px 15px;/* padding: 0; */-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
     148        .cxsemls-component-modal-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
     149        .cxsemls-component-modal-content {position: relative;display: inline-block;vertical-align: middle;margin: 0 auto;text-align: left;z-index: 1045;box-sizing: border-box;padding: 0;}
     150           
     151            .cxsemls-cross {line-height: 22px;width: 22px;height: 22px;text-align: center;border-radius: 100px;color: #2a2c31;font-size: 14px;cursor: pointer;/* float: right; */font-weight: normal;transition: .1s;top: 11px;right: 10px;position: absolute;}
     152            .cxsemls-cross:hover {background: rgb(41, 41, 41);color: rgb(255, 255, 255);/* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.1); */}
     153            .cxsemls-cross:active { background: rgba(0,0,0,0.75); color: white; }
     154            .cxsemls-cross:active {box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;transform: translate( 0px, 1px );transition: 0s;}
     155           
     156            /* PLAY-IN ANIMATIONS */
     157            .cxsemls-component-modal-cover.cxsemls-modal-play-in { opacity: 1; }
     158            .cxsemls-component-modal-popup.cxsemls-modal-play-in { opacity: 1; transform: scale(1) translate(0); }
     159           
     160            /* HARD HIDES */
     161            .cxsemls-component-modal-cover.cxsemls-component-modal-hard-hide,
     162            .cxsemls-component-modal-popup.cxsemls-component-modal-hard-hide { left: 0; top: -200%; }
     163            .cxsemls-component-modal-content-hard-hide { left: 0; top: -200% !important; position: fixed !important; }
     164
     165            /* MODAL POSITIONS */
     166            .cxsemls-component-modal-popup.cxsemls-modal-position-top-right { top: 70px;right: 60px; left: auto; margin: 0 !important;}
     167            .cxsemls-component-modal-popup.cxsemls-modal-position-top-center { top: 70px; margin-top: 0 !important; transition: all 0s 0s, opacity .2s, transform .2s; }
     168           
     169            /* RESPONSIVE */
     170            @media all and (max-width: 600px) {
     171               
     172                /*.cxsemls-component-modal-popup {max-width: none;width: calc( 100% - 30px );margin: 0;position: absolute;left: 15px;right: auto;top: 180px;bottom: auto;border: 0;}*/
     173            }
  • send-emails-for-woocommerce/trunk/assets/js/send-emails-back-end.js

    r1513149 r1522500  
    6767        });
    6868       
     69        // Open 'Send Email' Modal.
    6970        $('#send-email').click(function(event) {
    70            
     71
     72            // Remove all form errors (to avoid duplicates).
     73            $('.cxsemls-create-customer-form-error').remove();
     74           
     75            // prefill the email input with the billing email address.
     76            var val_billing_email = $("#_billing_email").val();
     77            if ( ! $("#cxsemls_send_email_address").val() ) {
     78                $("#cxsemls_send_email_address").val( val_billing_email );
     79            }
     80           
     81            // Open Modal.
     82            open_modal(
     83                '.cxsemls-create-modal',
     84                { position: 'center', close_button: true, close_click_outside: false }
     85            );
     86
     87            return false;
     88        });
     89       
     90        // Cancel 'Send Email' Modal.
     91        $(".button.cxsemls-send-email-form-cancel").click(function() {
     92            close_modal();
     93            return false;
     94        });
     95       
     96        // 'Send Email' button.
     97        $('.cxsemls-send-email-form-submit.button').click(function(event) {
     98           
     99            // Remove all form errors (to avoid duplicates).
     100            $('.cxsemls-create-customer-form-error').remove();
     101           
     102            // Get email type.
    71103            var val_email_type;
    72104            if ( $("select#cxsemls_order_action" ).val() != "" )
     
    82114           
    83115            var val_email_order = $( "#post_ID" ).val();
    84             var val_billing_email = $("#_billing_email").val();
    85            
    86             var email_prompt = prompt( "Send a '" + val_email_type_name + "' Email to:", val_billing_email );
     116           
     117            // Old Method.
     118            /*var email_prompt = prompt( "Send a '" + val_email_type_name + "' Email to:", val_billing_email );
    87119            if (email_prompt != null)
    88120                val_billing_email = email_prompt;
    89121            else
    90                 return; // Bail if no email address.
     122                return; // Bail if no email address.*/
     123           
     124            // New Method.
     125            val_billing_email = $("#cxsemls_send_email_address").val();
     126            if ( ! val_billing_email ) {
     127                $el = $( '<div class="inline error cxsemls-create-customer-form-error"><p><strong>'+ woocommerce_send_emails.msg_error +'</strong>: '+ woocommerce_send_emails.msg_email_empty +'.</p></div>' );
     128                $el.insertBefore( $("#cxsemls_send_email_address") );
     129                return false;
     130            }
     131           
     132            // Close Modal.
     133            close_modal();
    91134           
    92135            // Display loading text.
    93             cxsemls_loading({ text: "Sending Email" });
     136            cxsemls_loading({ text: woocommerce_send_emails.msg_email_sending_busy });
    94137           
    95138            jQuery.ajax({
     
    108151                    if ( 'incorrect-email-format' == data.status ) {
    109152                        cxsemls_loading_end();
    110                         cxsemls_notify( "The email address you provided is not vaild.", { id: "second-thing" } );
     153                        cxsemls_notify( woocommerce_send_emails.msg_invalid_email, { id: "send-email" } );
    111154                        return false;
    112155                    }
    113156                   
    114157                    cxsemls_loading_end();
    115                     cxsemls_notify( "Email Sent!", { id: "second-thing" } );
     158                    cxsemls_notify( woocommerce_send_emails.msg_email_sent, { id: "send-email" } );
    116159                },
    117160                error: function(xhr, status, error) {
    118161                    cxsemls_loading_end();
    119                     cxsemls_notify( "Email sending failed!", { id: "second-thing" } );
     162                    cxsemls_notify( woocommerce_send_emails.msg_email_sending_failed, { id: "send-email" } );
    120163                }
    121164            });
     
    204247    });
    205248   
     249   
     250   
     251    /**
     252     * RE-USABLE COMPONENTS.
     253     */
     254       
     255    // Helper function to check if we are in responsive/mobile.
     256    function is_mobile() {
     257        return ( $( window ).width() < 610 );
     258    }
     259   
     260    /**
     261     * Modal Popups.
     262     */
     263   
     264    function init_modal( $close_button ) {
     265       
     266        // Add the required elements if they not in the page yet.
     267        if ( ! $('.cxsemls-component-modal-popup').length ) {
     268           
     269            // Add the required elements to the dom.
     270            $('body').append( '<div class="cxsemls-component-modal-temp cxsemls-component-modal-hard-hide"></div>' );
     271            $('body').append( '<div class="cxsemls-component-modal-cover cxsemls-component-modal-hard-hide"></div>' );
     272           
     273            $popup_html = '';
     274            $popup_html += '<div class="cxsemls-component-modal-wrap cxsemls-component-modal-popup cxsemls-component-modal-hard-hide">';
     275            $popup_html += '    <div class="cxsemls-component-modal-container">';
     276            $popup_html += '        <div class="cxsemls-component-modal-content">';
     277            $popup_html += '        </div>';
     278            $popup_html += '    </div>';
     279            $popup_html += '</div>';
     280            $('body').append( $popup_html );
     281           
     282            // Enable the close_click_outside
     283            $('html').click(function(event) {
     284                if (
     285                        0 === $('.cxsemls-component-modal-popup.cxsemls-component-modal-hard-hide').length &&
     286                        0 !== $('.cxsemls-close-click-outside').length &&
     287                        0 === $(event.target).parents('.cxsemls-component-modal-content').length
     288                    ) {
     289                    close_modal();
     290                    return false;
     291                }
     292            });
     293        }
     294    }
     295   
     296    function open_modal( $selector, $settings ) {
     297       
     298        // Set defaults
     299        $defaults = {
     300            position            : 'center',
     301            cover               : true,
     302            close_button        : true,
     303            close_click_outside : true,
     304        };
     305        $settings = $.extend( true, $defaults, $settings );
     306       
     307        // Init modal - incase this is first run.
     308        init_modal( $settings.close_button );
     309       
     310        // Move any elements that may already be in the modal out, to the temp holder, as well as the close cross.
     311        $('.cxsemls-component-modal-content').find('.cxsemls-cross').remove();
     312        $('.cxsemls-component-modal-temp').append( $('.cxsemls-component-modal-content').children() );
     313       
     314        // Get content to load in modal.
     315        $content = $( $selector );
     316       
     317        // If content to load doesn't exist then rather close the whole modal and bail.
     318        if ( ! $content.length ) {
     319            close_modal();
     320            console.log( 'Content to load into modal does not exists.' );
     321            return;
     322        }
     323       
     324        // Enable whether to close when clicked outside the modal.
     325        if ( $settings.close_click_outside )
     326            $('.cxsemls-component-modal-popup' ).addClass('cxsemls-close-click-outside');
     327        else
     328            $('.cxsemls-component-modal-popup' ).removeClass('cxsemls-close-click-outside');
     329       
     330        // Show the close button, or remove it if not.
     331        if ( $settings.close_button )
     332            $('.cxsemls-component-modal-content').append('<span class="cxsemls-cross cxsemls-top-bar-cross cxsemls-icon-cancel"></span>');
     333       
     334        // Add the intended content into the modal.
     335        $('.cxsemls-component-modal-content').prepend( $content );
     336       
     337        // Remove the class that's hiding the modal.
     338        $content.removeClass( 'cxsemls-component-modal-content-hard-hide' );
     339       
     340        // Apply positioning.
     341        // $( '.cxsemls-component-modal-popup' )
     342        //  .removeClass( 'cxsemls-modal-position-center cxsemls-modal-position-top-right cxsemls-modal-position-top-center' )
     343        //  .addClass( 'cxsemls-modal-position-' + $settings.position );
     344       
     345        // Move to top of page if Mobile.
     346        // if ( is_mobile() ) {
     347        //  $('.cxsemls-component-modal-popup').css({ top: $(document).scrollTop() + 80 });
     348        //  console.log( $(document).scrollTop() );
     349        // }
     350       
     351        // Control the overflow of long page content.
     352        $('html').css({ 'margin-right': '17px', 'overflow': 'hidden' });
     353       
     354        // Set a tiny defer timeout so that CSS fade-ins happen correctly.
     355        setTimeout(function() {
     356           
     357            // Move elements into the viewport by removing hard-hide, then fade in the elements.
     358            $('.cxsemls-component-modal-popup').removeClass( 'cxsemls-component-modal-hard-hide' );
     359            $('.cxsemls-component-modal-popup').addClass( 'cxsemls-modal-play-in' );
     360        }, 1 );
     361       
     362        // Optionally show the back cover. (not when in mobile)
     363        if ( $settings.cover ) {
     364            $('.cxsemls-component-modal-cover').removeClass( 'cxsemls-component-modal-hard-hide' );
     365            $('.cxsemls-component-modal-cover').addClass( 'cxsemls-modal-play-in' );
     366        }
     367        else {
     368            // If not showing then make sure to fade it out.
     369            $('.cxsemls-component-modal-cover').removeClass( 'cxsemls-modal-play-in' );
     370            setTimeout(function() {
     371                $('.cxsemls-component-modal-cover').addClass( 'cxsemls-component-modal-hard-hide' );
     372            }, 200 );
     373        }
     374    }
     375    function close_modal() {
     376       
     377        // Close the select 2 lip when clicking outside the modal to close.
     378        $('#cxsemls-select2-user-search').select2('close');
     379       
     380        // Fade out the elements.
     381        $('.cxsemls-component-modal-cover, .cxsemls-component-modal-popup').removeClass( 'cxsemls-modal-play-in' );
     382       
     383        // Move elements out the viewport by adding hard-hide.
     384        setTimeout(function() {
     385            $('.cxsemls-component-modal-cover, .cxsemls-component-modal-popup').addClass( 'cxsemls-component-modal-hard-hide' );
     386           
     387            // Remove specific positioning.
     388            $('.cxsemls-component-modal-popup')
     389                .removeClass( 'cxsemls-modal-position-center cxsemls-modal-position-top-right cxsemls-modal-position-top-center' )
     390                .css({ top : '' });
     391           
     392            // Control the overflow of long page content.
     393            $('html').css({ 'margin-right': '', 'overflow': '' });
     394           
     395        }, 200 );
     396    }
     397    function resize_modal( $to_height ) {
     398       
     399        // Init modal - incase this is first run.
     400        init_modal();
     401       
     402        // Cache elements.
     403        $modal_popup = $('.cxsemls-component-modal-popup');
     404       
     405        // Get the intended heights.
     406        var $to_height = ( $to_height ) ? $to_height : $modal_popup.outerHeight();
     407        var $margin_top = ( $to_height / 2 );
     408       
     409        // Temporarily enable margin-top transition, do the height-ing/margin-ing, then remove the transtion.
     410        $modal_popup.css({ height: $to_height, marginTop: -$margin_top, transitionDelay: '0s', transition: 'margin .3s' });
     411        setTimeout( function(){
     412            $modal_popup.css({ height: '', transitionDelay: '', transition: '' });
     413        }, 1000 );
     414    }
     415
     416    // Handle close button.
     417    $( document ).on( 'click', '.cxsemls-cross', function() {
     418        close_modal();
     419        return false;
     420    });
     421   
     422   
    206423})( jQuery );
    207424
  • send-emails-for-woocommerce/trunk/index.php

    r1513165 r1522500  
    44Plugin URI: http://www.calyxagency.com/#plugins
    55Description: WooCommerce Send Emails allows you to preview and send any of the WooCommerce transactional emails.
    6 Version: 1.0.0
     6Version: 1.1.0
    77Contributors: stuartobrien, cxthemes
    88Author URI: http://www.calyxagency.com/#plugins
     
    1717 * Define Constants
    1818 */
    19 define( 'CX_WC_SEND_EMAILS_VERSION', '1.0.0' );
     19define( 'CX_WC_SEND_EMAILS_VERSION', '1.1.0' );
    2020define( 'CX_WC_SEND_EMAILS_REQUIRED_WOOCOMMERCE_VERSION', 2.3 );
    2121define( 'CX_WC_SEND_EMAILS_DIR', untrailingslashit( plugin_dir_path( __FILE__ ) ) );
     
    214214            wp_enqueue_script( 'cxsemls-admin' );
    215215            wp_localize_script( 'cxsemls-admin', 'woocommerce_send_emails', array(
    216                 'home_url'         => get_home_url(),
    217                 'admin_url'        => admin_url(),
    218                 'ajaxurl'          => admin_url( 'admin-ajax.php' ),
    219                 'send_email_nonce' => wp_create_nonce( 'send_email_nonce' ),
     216                'home_url'                 => get_home_url(),
     217                'admin_url'                => admin_url(),
     218                'ajaxurl'                  => admin_url( 'admin-ajax.php' ),
     219                'send_email_nonce'         => wp_create_nonce( 'send_email_nonce' ),
     220                'msg_error'                => __( 'Error', 'woocommerce-send-emails'),
     221                'msg_email_empty'          => __( 'Please enter an email address', 'woocommerce-send-emails'),
     222                'msg_invalid_email'        => __( 'The email address you provided is not vaild', 'woocommerce-send-emails'),
     223                'msg_email_sent'           => __( 'Email Sent!', 'woocommerce-send-emails'),
     224                'msg_email_sending_failed' => __( 'Email sending failed!', 'woocommerce-send-emails'),
     225                'msg_email_sending_busy'   => __( 'Sending Email', 'woocommerce-send-emails'),
    220226            ));
     227           
     228            add_action( 'in_admin_footer', array( $this, 'render_send_email_ui' ) );
     229           
     230            // Fontello.
     231            wp_enqueue_style(
     232                'cxsemls-icon-font',
     233                CX_WC_SEND_EMAILS_URI . '/assets/fontello/css/cxsemls-icon-font.css',
     234                array(),
     235                CX_WC_SEND_EMAILS_VERSION
     236            );
    221237        }
    222238       
     
    620636        return $message;
    621637    }
     638   
     639   
     640   
     641    /**
     642     * Add Send Email form to Order Page.
     643     */
     644    public function render_send_email_ui() {
     645        ?>
     646        <div class="cxsemls-create-modal cxsemls-component-modal-content-hard-hide cxsemls-component-modal-content-hard-hide">
     647       
     648            <div class="cxsemls-create-modal-title">
     649                <?php _e( 'Send Email', 'woocommerce-send-emails' ); ?>
     650            </div>
     651           
     652            <div class="cxsemls-create-modal-content-inner">
     653               
     654                <div class="cxsemls-create-modal-row">
     655                    <label for="cxsemls_send_email_address">
     656                        <?php _e( 'Send To Email Address', 'woocommerce-send-emails' ); ?>
     657                    </label>
     658                    <input type="text" name="cxsemls_send_email_address" id="cxsemls_send_email_address" value="" />
     659                    <p class="cxsemls-modal-description">
     660                        <?php echo sprintf( __( 'If you\'d like to cutomize these emails then have a look at our plugin <a href="%s" target="_blank">Email Customizer for WooCommerce</a>', 'woocommerce-send-emails' ), esc_url( 'https://codecanyon.net/item/email-customizer-for-woocommerce/8654473?ref=Sob508' ) ); ?>
     661                    </p>
     662                </div>
     663               
     664                <div class="cxsemls-create-modal-row cxsemls-create-modal-buttons-row">
     665                    <button class="button cxsemls-send-email-form-cancel">
     666                        <?php _e( 'Cancel', 'woocommerce-send-emails' ); ?>
     667                    </button>
     668                    <button class="button button-primary cxsemls-send-email-form-submit">
     669                        <?php _e( 'Send Email', 'woocommerce-send-emails' ); ?>
     670                    </button>
     671                </div>
     672           
     673            </div>
     674           
     675        </div>
     676        <?php
     677    }
     678   
    622679   
    623680    /**
  • send-emails-for-woocommerce/trunk/readme.txt

    r1513922 r1522500  
    44Requires at least: 3
    55Tested up to: 4.6
    6 Stable tag: 1.0.0
     6Stable tag: 1.1.0
    77
    88WooCommerce Send Emails allows you to preview and send any of the WooCommerce transactional emails.
     
    1414The plugin adds a new 'Send Emails' meta box to your WooCommerce order-edit page that you can use to either "Send" or "Preview" any email. These are both very useful for Shop Admins, to see what the Customer will see, or Designers/Developers, to see what the email looks like. When you send the email you will be given the choice of sending it to the order recipient, or to any email address that you chose.
    1515
    16 It's worth mentioning that this feature used to be part of our popular plugin **[Email Customizer for WooCommerce](https://codecanyon.net/item/email-customizer-for-woocommerce/8654473)**. We decided to remove the feature as the plugin had evolved from an "Email Previewing" plugin into a more advanced "Email Customizing" plugin and the ability to send emails from the order page was no longer something that was required or that we could feasibly maintain at a premium level for our customers. We discovered that there was still some demand for this feature so we've decided to release it as a free standalone plugin for the community.
     16It's worth mentioning that this feature used to be part of our popular plugin **[Email Customizer for WooCommerce](https://codecanyon.net/item/email-customizer-for-woocommerce/8654473?ref=Sob508)**. We decided to remove the feature as the plugin had evolved from an "Email Previewing" plugin into a more advanced "Email Customizing" plugin and the ability to send emails from the order page was no longer something that was required or that we could feasibly maintain at a premium level for our customers. We discovered that there was still some demand for this feature so we've decided to release it as a free standalone plugin for the community.
    1717
    1818Happy Conversions!
     
    32321. Chose a transactional email type to "Send" or "Preview".
    33331. "Preview" your email before sending.
    34 1. Specify an email address and click "Send" (this will be pre-populated with the billing address of the order).
     341. Specify an email address and click "Send Email" (this will be pre-populated with the billing address of the order).
    3535
    3636== Changelog ==
    3737
     38= 1.1.0 =
     39* Change the Send Email interface from a simple prompt to a popup modal which is less rigid and more versatile.
     40
    3841= 1.0.0 =
    3942* Initial release.
Note: See TracChangeset for help on using the changeset viewer.