How to Create Woo-commerce Single product page extra button WordPress


We want to build this system when users send mail by product name and product image by mail


1. Step
 
Download this plugin's Link name (Direct checkout, Add to cart redirect, Quick purchase button, Buy now button, Quick View button for WooCommerce)  and you can see a single product button now you install this plugin you can see 2 buttons whose name "Buy Now".

But I want another button like send mail to a friend. when someone clicks this button they will show a popup input field like this image but this plugin is not free. its paid.



2. Step


Now we are edit plugin folder. like 


Going to 90 number line functions of add_quick_buy_button

add button name:   

<a class="button pisol_single_buy_now pisol_buy_now_button trigger_popup_fricc">Send Mail</a>


3. Step

add this code for simpe popup:

<div class="hover_bkgr_fricc">
    <span class="helper"></span>
    <div>
        <div class="popupCloseButton">&times;</div>    
        <form method="POST">
          <label for="fname">Email:</label><br>
          <input type="text" id="fname" name="fname"><br>
          <input type="submit" value="Submit">
        </form>    
    </div>
</div>
<style>
    /* Popup box BEGIN */
.hover_bkgr_fricc{
     /*background:rgba(0,0,0,.4);*/
    cursor:pointer;
    display:none;
    height:100%;
    /*position:fixed;*/
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 551px;
    min-height: 100px;
    vertical-align: middle;
    width: 60%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc {
    cursor: pointer;
    font-size: 20px;
    margin: 20px;
    display: inline-block;
    font-weight: bold;
}
/* Popup box BEGIN */
</style>
<script>
    jQuery(window).load(function () {
    jQuery(".trigger_popup_fricc").click(function(){
       jQuery('.hover_bkgr_fricc').show();
    });
    //jQuery('.hover_bkgr_fricc').click(function(){
   //     jQuery('.hover_bkgr_fricc').hide();
  //  });
    jQuery('.popupCloseButton').click(function(){
        jQuery('.hover_bkgr_fricc').hide();
    });
});
</script>


4. Step

Simple add conditions for 

if(!empty($_POST['fname'])){
    echo 'not found';
}else{
echo 'not found';
}


5. Step

Full code of conditions:


<?php
if(!empty($_POST['fname'])){
$template='<!doctype html>
    <html>
        <head>
        <meta name="viewport" content="width=device-width" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Address Update Email</title>
        <style>
            /* -------------------------------------
                GLOBAL RESETS
            ------------------------------------- */
           
            /*All the styling goes here*/
           
            img {
            border: none;
            -ms-interpolation-mode: bicubic;
            max-width: 100%;
            }
   
            body {
            background-color: #f6f6f6;
            font-family: sans-serif;
            -webkit-font-smoothing: antialiased;
            font-size: 14px;
            line-height: 1.4;
            margin: 0;
            padding: 0;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            }
   
            table {
            border-collapse: separate;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
            width: 100%; }
            table td {
                font-family: sans-serif;
                font-size: 14px;
                vertical-align: top;
            }
   
            /* -------------------------------------
                BODY & CONTAINER
            ------------------------------------- */
   
            .body {
            background-color: #f6f6f6;
            width: 100%;
            }
   
            /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
            .container {
            display: block;
            margin: 0 auto !important;
            /* makes it centered */
            max-width: 580px;
            padding: 10px;
            width: 580px;
            }
   
            /* This should also be a block element, so that it will fill 100% of the .container */
            .content {
            box-sizing: border-box;
            display: block;
            margin: 0 auto;
            max-width: 580px;
            padding: 10px;
            }
   
            /* -------------------------------------
                HEADER, FOOTER, MAIN
            ------------------------------------- */
            .main {
            background: #ffffff;
            border-radius: 3px;
            width: 100%;
            }
   
            .wrapper {
            box-sizing: border-box;
            padding: 20px;
            }
   
            .content-block {
            padding-bottom: 10px;
            padding-top: 10px;
            }
   
            .footer {
            clear: both;
            margin-top: 10px;
            text-align: center;
            width: 100%;
            }
            .footer td,
            .footer p,
            .footer span,
            .footer a {
                color: #999999;
                font-size: 12px;
                text-align: center;
            }
   
            /* -------------------------------------
                TYPOGRAPHY
            ------------------------------------- */
            h1,
            h2,
            h3,
            h4 {
            color: #000000;
            font-family: sans-serif;
            font-weight: 400;
            line-height: 1.4;
            margin: 0;
            margin-bottom: 30px;
            }
   
            h1 {
            font-size: 35px;
            font-weight: 300;
            text-align: center;
            text-transform: capitalize;
            }
   
            p,
            ul,
            ol {
            font-family: sans-serif;
            font-size: 14px;
            font-weight: normal;
            margin: 0;
            margin-bottom: 15px;
            }
            p li,
            ul li,
            ol li {
                list-style-position: inside;
                margin-left: 5px;
            }
   
            a {
            color: #3498db;
            text-decoration: underline;
            }
   
            /* -------------------------------------
                BUTTONS
            ------------------------------------- */
            .btn {
            box-sizing: border-box;
            width: 100%; }
            .btn > tbody > tr > td {
                padding-bottom: 15px; }
            .btn table {
                width: auto;
            }
            .btn table td {
                background-color: #ffffff;
                border-radius: 5px;
                text-align: center;
            }
            .btn a {
                background-color: #ffffff;
                border: solid 1px #3498db;
                border-radius: 5px;
                box-sizing: border-box;
                color: #3498db;
                cursor: pointer;
                display: inline-block;
                font-size: 14px;
                font-weight: bold;
                margin: 0;
                padding: 12px 25px;
                text-decoration: none;
                text-transform: capitalize;
            }
   
            .btn-primary table td {
            background-color: #3498db;
            }
   
            .btn-primary a {
            background-color: #3498db;
            border-color: #3498db;
            color: #ffffff;
            }
   
            /* -------------------------------------
                OTHER STYLES THAT MIGHT BE USEFUL
            ------------------------------------- */
            .last {
            margin-bottom: 0;
            }
   
            .first {
            margin-top: 0;
            }
   
            .align-center {
            text-align: center;
            }
   
            .align-right {
            text-align: right;
            }
   
            .align-left {
            text-align: left;
            }
   
            .clear {
            clear: both;
            }
   
            .mt0 {
            margin-top: 0;
            }
   
            .mb0 {
            margin-bottom: 0;
            }
   
            .preheader {
            color: transparent;
            display: none;
            height: 0;
            max-height: 0;
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            mso-hide: all;
            visibility: hidden;
            width: 0;
            }
   
            .powered-by a {
            text-decoration: none;
            }
   
            hr {
            border: 0;
            border-bottom: 1px solid #f6f6f6;
            margin: 20px 0;
            }
   
            /* -------------------------------------
                RESPONSIVE AND MOBILE FRIENDLY STYLES
            ------------------------------------- */
            @media only screen and (max-width: 620px) {
            table[class=body] h1 {
                font-size: 28px !important;
                margin-bottom: 10px !important;
            }
            table[class=body] p,
            table[class=body] ul,
            table[class=body] ol,
            table[class=body] td,
            table[class=body] span,
            table[class=body] a {
                font-size: 16px !important;
            }
            table[class=body] .wrapper,
            table[class=body] .article {
                padding: 10px !important;
            }
            table[class=body] .content {
                padding: 0 !important;
            }
            table[class=body] .container {
                padding: 0 !important;
                width: 100% !important;
            }
            table[class=body] .main {
                border-left-width: 0 !important;
                border-radius: 0 !important;
                border-right-width: 0 !important;
            }
            table[class=body] .btn table {
                width: 100% !important;
            }
            table[class=body] .btn a {
                width: 100% !important;
            }
            table[class=body] .img-responsive {
                height: auto !important;
                max-width: 100% !important;
                width: auto !important;
            }
            }
   
            /* -------------------------------------
                PRESERVE THESE STYLES IN THE HEAD
            ------------------------------------- */
            @media all {
            .ExternalClass {
                width: 100%;
            }
            .ExternalClass,
            .ExternalClass p,
            .ExternalClass span,
            .ExternalClass font,
            .ExternalClass td,
            .ExternalClass div {
                line-height: 100%;
            }
            .apple-link a {
                color: inherit !important;
                font-family: inherit !important;
                font-size: inherit !important;
                font-weight: inherit !important;
                line-height: inherit !important;
                text-decoration: none !important;
            }
            #MessageViewBody a {
                color: inherit;
                text-decoration: none;
                font-size: inherit;
                font-family: inherit;
                font-weight: inherit;
                line-height: inherit;
            }
            .btn-primary table td:hover {
                background-color: #34495e !important;
            }
            .btn-primary a:hover {
                background-color: #34495e !important;
                border-color: #34495e !important;
            }
            }
            .titleR{
            padding: 36px 48px;
            display: block;
            font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
            font-size: 30px;
            font-weight: 300;
            line-height: 150%;
            margin: 0;
            text-align: left;
            color: #ffffff;
            background-color: #96588a;
            }
   
        </style>
        </head>
        <body class="">    
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
            <tr>
            <td>&nbsp;</td>
            <td class="container">
                <div class="content">
   
                <!-- START CENTERED WHITE CONTAINER -->
                <table role="presentation" class="main">
    <p class="titleR">Received A Gift, Give your address</p>
                    <!-- START MAIN CONTENT AREA -->
                    <tr>
                    <td class="wrapper">
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                            <p>Dear Sir, You have received a Gift. Please visit to the link and update gift delivery address.</p>
                            <p>Product Name: '.$product->get_title().'</p>
                            <p>Photo:</p><img src="'.wp_get_attachment_url( $product->get_image_id() ).'" width="50%"/>
                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
                           
                                <tbody>
                                <tr>
                                    <td align="center">
                                    <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                        <tbody>
                                        <tr>
                                            <td> <a href="'.$product->get_permalink().'" id='.$orderNew.'" target="_blank">Click to Update</a> </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                           
                            <p>Good luck! Hope it works.</p>
                           
                            </td>
                        </tr>
                        </table>
                    </td>
                    </tr>
   
                <!-- END MAIN CONTENT AREA -->
                </table>
                <!-- END CENTERED WHITE CONTAINER -->            
   
                </div>
            </td>
            <td>&nbsp;</td>
            </tr>
        </table>
        </body>
    </html>';
   
    //sending mail get order numbar and generate link
    $to = $_POST['fname'];
    $subject = 'You have recived a gift';
    $body = $template;
    $headers = array('Content-Type: text/html; charset=UTF-8');  
    $result = wp_mail( $to, $subject, $body, $headers );
    if($result){
        echo "Mail Sent";
    }else{
        echo "Mail not Sent";
    }
                   

}else{
echo 'not found';
}

?>



6. Finali it work fine

See the whole code below:

<?php
/**
 * functionality of the plugin.
 */
if ( ! defined( 'WPINC' ) ) {
    die;
}
class Pi_WooCommerce_Quick_Buy_Auto_Add {

    /**
     * Class Constructor
     */
    public function __construct() {
        $this->show_on_product = $this->showOnProduct();
        $this->show_on_archive = $this->showOnArchive();
        $this->label_product = 'Buy Now';
        $this->label_loop = 'Buy Now';

        $this->product_position = 'after_button';
        $this->loop_position = 'after_button';

        $this->product_redirect  = 'checkout';
        $this->loop_redirect  = 'checkout';

        $this->setup_single_product_quick_buy();
        $this->setup_shop_loop_quick_buy();
    }

    function showOnProduct(){
        $setting = get_option('pi_dcw_enable_buy_now_button',0);
        $return = $setting == 0 || $setting == "" ? false : true;
        return $return;
    }

    function showOnArchive(){
        $setting = get_option('pi_dcw_enable_buy_now_button_loop',0);
        $return = $setting == 0 || $setting == "" ? false : true;
        return $return;
    }

    public function setup_single_product_quick_buy() {
        $single_pos  = $this->product_position;

        if ( $this->show_on_product == true ) {
            if ( ! empty( $single_pos ) && ! $single_pos == null ) {
                $pos = '';
                if ( $single_pos == 'before_form' ) {
                    $pos = 'woocommerce_before_add_to_cart_button';
                }
                if ( $single_pos == 'after_form' ) {
                    $pos = 'woocommerce_after_add_to_cart_button';
                }
                if ( $single_pos == 'after_button' ) {
                    $pos = 'woocommerce_after_add_to_cart_button';
                }
                if ( $single_pos == 'before_button' ) {
                    $pos = 'woocommerce_before_add_to_cart_button';
                }
                add_action( $pos, array( $this, 'add_quick_buy_button' ), 99 );
            }
        }
    }

    public function setup_shop_loop_quick_buy() {
        $single_pos  = $this->loop_position;

        if ( $this->show_on_archive == true ) {
            if ( ! empty( $single_pos ) && ! $single_pos == null ) {
                $pos = 'woocommerce_after_shop_loop_item';
                $p   = 5;
                if ( $single_pos == 'after_button' ) {
                    $p = 11;
                }
                if ( $single_pos == 'before_button' ) {
                    $p = 9;
                }
                add_action( $pos, array( $this, 'add_shop_quick_buy_button' ), $p );
            }
        }
    }

    public function add_quick_buy_button() {
        global $product;
        $product_id = $product->get_id();
        $class = 'pisol_type_'.$product->get_type();
       
        if ( $product->get_type() == 'variable'){
            echo '<input class="button pisol_single_buy_now pisol_buy_now_button '.$class.'" type="submit" name="pi_quick_checkout" value="'.esc_attr($this->label_loop).'">';
        }else{
            echo '<button class="button pisol_single_buy_now pisol_buy_now_button '.$class.'" type="submit" name="add-to-cart" value="'.esc_attr($product_id).'">'.$this->label_loop.'</button>';
           
            echo '<button class="button pisol_single_buy_now pisol_buy_now_button '.$class.'" type="submit" name="add-to-cart" value="'.esc_attr($product_id).'">Send Gift</button>';
               
?>

<img src="<?php //echo wp_get_attachment_url( $product->get_image_id() ); ?>" />
<a class="button pisol_single_buy_now pisol_buy_now_button trigger_popup_fricc">Send Mail</a>
<?php
//var_dump($_POST['fname']);
            if(!empty($_POST['fname'])){

        //Remove "Wordpress" when receiving email
                    function remove_from_wordpress($email){
                    $wpfrom = get_option('blogname');
                    return $wpfrom;
                    }
                    add_filter('wp_mail_from_name', 'remove_from_wordpress');
               
                $template='<!doctype html>
                    <html>
                      <head>
                        <meta name="viewport" content="width=device-width" />
                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                        <title>Address Update Email</title>
                        <style>
                          /* -------------------------------------
                              GLOBAL RESETS
                          ------------------------------------- */
                         
                          /*All the styling goes here*/
                         
                          img {
                            border: none;
                            -ms-interpolation-mode: bicubic;
                            max-width: 100%;
                          }
                   
                          body {
                            background-color: #f6f6f6;
                            font-family: sans-serif;
                            -webkit-font-smoothing: antialiased;
                            font-size: 14px;
                            line-height: 1.4;
                            margin: 0;
                            padding: 0;
                            -ms-text-size-adjust: 100%;
                            -webkit-text-size-adjust: 100%;
                          }
                   
                          table {
                            border-collapse: separate;
                            mso-table-lspace: 0pt;
                            mso-table-rspace: 0pt;
                            width: 100%; }
                            table td {
                              font-family: sans-serif;
                              font-size: 14px;
                              vertical-align: top;
                          }
                   
                          /* -------------------------------------
                              BODY & CONTAINER
                          ------------------------------------- */
                   
                          .body {
                            background-color: #f6f6f6;
                            width: 100%;
                          }
                   
                          /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
                          .container {
                            display: block;
                            margin: 0 auto !important;
                            /* makes it centered */
                            max-width: 580px;
                            padding: 10px;
                            width: 580px;
                          }
                   
                          /* This should also be a block element, so that it will fill 100% of the .container */
                          .content {
                            box-sizing: border-box;
                            display: block;
                            margin: 0 auto;
                            max-width: 580px;
                            padding: 10px;
                          }
                   
                          /* -------------------------------------
                              HEADER, FOOTER, MAIN
                          ------------------------------------- */
                          .main {
                            background: #ffffff;
                            border-radius: 3px;
                            width: 100%;
                          }
                   
                          .wrapper {
                            box-sizing: border-box;
                            padding: 20px;
                          }
                   
                          .content-block {
                            padding-bottom: 10px;
                            padding-top: 10px;
                          }
                   
                          .footer {
                            clear: both;
                            margin-top: 10px;
                            text-align: center;
                            width: 100%;
                          }
                            .footer td,
                            .footer p,
                            .footer span,
                            .footer a {
                              color: #999999;
                              font-size: 12px;
                              text-align: center;
                          }
                   
                          /* -------------------------------------
                              TYPOGRAPHY
                          ------------------------------------- */
                          h1,
                          h2,
                          h3,
                          h4 {
                            color: #000000;
                            font-family: sans-serif;
                            font-weight: 400;
                            line-height: 1.4;
                            margin: 0;
                            margin-bottom: 30px;
                          }
                   
                          h1 {
                            font-size: 35px;
                            font-weight: 300;
                            text-align: center;
                            text-transform: capitalize;
                          }
                   
                          p,
                          ul,
                          ol {
                            font-family: sans-serif;
                            font-size: 14px;
                            font-weight: normal;
                            margin: 0;
                            margin-bottom: 15px;
                          }
                            p li,
                            ul li,
                            ol li {
                              list-style-position: inside;
                              margin-left: 5px;
                          }
                   
                          a {
                            color: #3498db;
                            text-decoration: underline;
                          }
                   
                          /* -------------------------------------
                              BUTTONS
                          ------------------------------------- */
                          .btn {
                            box-sizing: border-box;
                            width: 100%; }
                            .btn > tbody > tr > td {
                              padding-bottom: 15px; }
                            .btn table {
                              width: auto;
                          }
                            .btn table td {
                              background-color: #ffffff;
                              border-radius: 5px;
                              text-align: center;
                          }
                            .btn a {
                              background-color: #ffffff;
                              border: solid 1px #3498db;
                              border-radius: 5px;
                              box-sizing: border-box;
                              color: #3498db;
                              cursor: pointer;
                              display: inline-block;
                              font-size: 14px;
                              font-weight: bold;
                              margin: 0;
                              padding: 12px 25px;
                              text-decoration: none;
                              text-transform: capitalize;
                          }
                   
                          .btn-primary table td {
                            background-color: #3498db;
                          }
                   
                          .btn-primary a {
                            background-color: #3498db;
                            border-color: #3498db;
                            color: #ffffff;
                          }
                   
                          /* -------------------------------------
                              OTHER STYLES THAT MIGHT BE USEFUL
                          ------------------------------------- */
                          .last {
                            margin-bottom: 0;
                          }
                   
                          .first {
                            margin-top: 0;
                          }
                   
                          .align-center {
                            text-align: center;
                          }
                   
                          .align-right {
                            text-align: right;
                          }
                   
                          .align-left {
                            text-align: left;
                          }
                   
                          .clear {
                            clear: both;
                          }
                   
                          .mt0 {
                            margin-top: 0;
                          }
                   
                          .mb0 {
                            margin-bottom: 0;
                          }
                   
                          .preheader {
                            color: transparent;
                            display: none;
                            height: 0;
                            max-height: 0;
                            max-width: 0;
                            opacity: 0;
                            overflow: hidden;
                            mso-hide: all;
                            visibility: hidden;
                            width: 0;
                          }
                   
                          .powered-by a {
                            text-decoration: none;
                          }
                   
                          hr {
                            border: 0;
                            border-bottom: 1px solid #f6f6f6;
                            margin: 20px 0;
                          }
                   
                          /* -------------------------------------
                              RESPONSIVE AND MOBILE FRIENDLY STYLES
                          ------------------------------------- */
                          @media only screen and (max-width: 620px) {
                            table[class=body] h1 {
                              font-size: 28px !important;
                              margin-bottom: 10px !important;
                            }
                            table[class=body] p,
                            table[class=body] ul,
                            table[class=body] ol,
                            table[class=body] td,
                            table[class=body] span,
                            table[class=body] a {
                              font-size: 16px !important;
                            }
                            table[class=body] .wrapper,
                            table[class=body] .article {
                              padding: 10px !important;
                            }
                            table[class=body] .content {
                              padding: 0 !important;
                            }
                            table[class=body] .container {
                              padding: 0 !important;
                              width: 100% !important;
                            }
                            table[class=body] .main {
                              border-left-width: 0 !important;
                              border-radius: 0 !important;
                              border-right-width: 0 !important;
                            }
                            table[class=body] .btn table {
                              width: 100% !important;
                            }
                            table[class=body] .btn a {
                              width: 100% !important;
                            }
                            table[class=body] .img-responsive {
                              height: auto !important;
                              max-width: 100% !important;
                              width: auto !important;
                            }
                          }
                   
                          /* -------------------------------------
                              PRESERVE THESE STYLES IN THE HEAD
                          ------------------------------------- */
                          @media all {
                            .ExternalClass {
                              width: 100%;
                            }
                            .ExternalClass,
                            .ExternalClass p,
                            .ExternalClass span,
                            .ExternalClass font,
                            .ExternalClass td,
                            .ExternalClass div {
                              line-height: 100%;
                            }
                            .apple-link a {
                              color: inherit !important;
                              font-family: inherit !important;
                              font-size: inherit !important;
                              font-weight: inherit !important;
                              line-height: inherit !important;
                              text-decoration: none !important;
                            }
                            #MessageViewBody a {
                              color: inherit;
                              text-decoration: none;
                              font-size: inherit;
                              font-family: inherit;
                              font-weight: inherit;
                              line-height: inherit;
                            }
                            .btn-primary table td:hover {
                              background-color: #34495e !important;
                            }
                            .btn-primary a:hover {
                              background-color: #34495e !important;
                              border-color: #34495e !important;
                            }
                          }
                          .titleR{
                            padding: 36px 48px;
                            display: block;
                            font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
                            font-size: 30px;
                            font-weight: 300;
                            line-height: 150%;
                            margin: 0;
                            text-align: left;
                            color: #ffffff;
                            background-color: #96588a;
                          }
                   
                        </style>
                      </head>
                      <body class="">    
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
                          <tr>
                            <td>&nbsp;</td>
                            <td class="container">
                              <div class="content">
                   
                                <!-- START CENTERED WHITE CONTAINER -->
                                <table role="presentation" class="main">
                    <p class="titleR">Received A Gift, Give your address</p>
                                  <!-- START MAIN CONTENT AREA -->
                                  <tr>
                                    <td class="wrapper">
                                      <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                        <tr>
                                          <td>
                                            <p>Dear Sir, You have received a Gift. Please visit to the link and update gift delivery address.</p>
                                            <p>Product Name: '.$product->get_title().'</p>
                                            <p>Photo:</p><img src="'.wp_get_attachment_url( $product->get_image_id() ).'" width="50%"/>
                                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
                                           
                                              <tbody>
                                                <tr>
                                                  <td align="center">
                                                    <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                                      <tbody>
                                                        <tr>
                                                          <td> <a href="'.$product->get_permalink().'" id='.$orderNew.'" target="_blank">Click to Update</a> </td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                  </td>
                                                </tr>
                                              </tbody>
                                            </table>
                                           
                                            <p>Good luck! Hope it works.</p>
                                           
                                          </td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                   
                                <!-- END MAIN CONTENT AREA -->
                                </table>
                                <!-- END CENTERED WHITE CONTAINER -->            
                   
                              </div>
                            </td>
                            <td>&nbsp;</td>
                          </tr>
                        </table>
                      </body>
                    </html>';
                   
                    //sending mail get order numbar and generate link
                    $to = $_POST['fname'];
                    $subject = 'You have recived a gift';
                    $body = $template;
                    $headers = array('Content-Type: text/html; charset=UTF-8');  
                   $result = wp_mail( $to, $subject, $body, $headers );
                    if($result){
                        echo "Mail Sent";
                    }else{
                        echo "Mail not Sent";
                    }
                                   
               
            }else{
                echo 'not found';
            }
           
?>
<div class="hover_bkgr_fricc">
    <span class="helper"></span>
    <div>
        <div class="popupCloseButton">&times;</div>    
        <form method="POST">
          <label for="fname">Email:</label><br>
          <input type="text" id="fname" name="fname"><br>
          <input type="submit" value="Submit">
        </form>    
    </div>
</div>
<style>
    /* Popup box BEGIN */
.hover_bkgr_fricc{
     /*background:rgba(0,0,0,.4);*/
    cursor:pointer;
    display:none;
    height:100%;
    /*position:fixed;*/
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    max-width: 551px;
    min-height: 100px;
    vertical-align: middle;
    width: 60%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc {
    cursor: pointer;
    font-size: 20px;
    margin: 20px;
    display: inline-block;
    font-weight: bold;
}
/* Popup box BEGIN */
</style>
<script>
    jQuery(window).load(function () {
    jQuery(".trigger_popup_fricc").click(function(){
       jQuery('.hover_bkgr_fricc').show();
    });
    //jQuery('.hover_bkgr_fricc').click(function(){
   //     jQuery('.hover_bkgr_fricc').hide();
  //  });
    jQuery('.popupCloseButton').click(function(){
        jQuery('.hover_bkgr_fricc').hide();
    });
});
    </script>
<?php
            //------------------------------
           
        }  
    }  
   
    public function add_shop_quick_buy_button() {
        global $product;
        if ( $product->get_type() == 'simple' ) {
            $link  = $this->get_product_addtocartLink($product, 1, $this->loop_redirect);
            if($link !== false && $product->is_in_stock()){
                echo $this->buttonHtml($link, $this->label_loop);
            }
        }
    }

    function buttonHtml($link, $label){
        return '<a class="pisol_buy_now_button" href="'.esc_url($link).'">'.$label.'</a>';
    }

    public function get_product_addtocartLink( $product, $qty = 1 , $page= 'checkout') {
        if ( $product->get_type() == 'simple' ) {
            if($page == 'checkout'){
                $checkout = wc_get_checkout_url();
            }else{
                $checkout = wc_get_cart_url();
            }
            $link = $checkout.'?pi_quick_checkout=1&add-to-cart='.$product->get_id();
            return $link;
        }
        return false;
    }

    static function get_redirect_url(){
        $loop_redirect = 'checkout';
        if($loop_redirect == 'checkout'){
            $checkout = wc_get_checkout_url();
        }else{
            $checkout = wc_get_cart_url();
        }
        $link = $checkout;
        return $link;
    }

}
new Pi_WooCommerce_Quick_Buy_Auto_Add();



How to Create Woo-commerce Single product page extra button WordPress How to Create Woo-commerce Single product page extra button WordPress Reviewed by Md Shahinur Islam on July 11, 2021 Rating: 5

No comments:

Powered by Blogger.