根据 WooCommerce 中的自定义字段值将文本添加到订单摘要

Posted 2023-05-09

【中文标题】根据 WooCommerce 中的自定义字段值将文本添加到订单摘要

【英文标题】：Add text to order summary based on a custom field value in WooCommerce

【发布时间】：2018-02-04 23:50:51

【问题描述】：

我已成功向我的 WooCommerce 结帐页面添加了一个自定义字段，该字段是客户可以选择从中提取商品的不同商店的选择器。目前它在结帐页面上显示此字段，我正在使用 jQuery 在选择器下方添加信息并相应地更新运费。

接下来我需要在客户的订单电子邮件中添加有关每个取货地点的字段 + 附加信息。因此，例如，如果客户选择位置 1，则订单电子邮件应显示：

送货地点 = 地点 1 地址 = 123 街 信息 = 工作日下午 4 点到 7 点之间的取货订单

我只是不确定如何将“信息”和“地址”字段添加到数组中，然后能够在电子邮件中调用它们。

这是我目前的代码：

add_filter( 'woocommerce_checkout_fields' , 'custom_store_pickup_field');

function custom_store_pickup_field( $fields ) 

  $fields['billing']['store_pickup'] = array(
    'type'     => 'select',
    'options'  => array(
    'option_0'=> 'Please Select a Delivery Option',
    'option_1' => 'Delivery',
    'option_2' => 'Gym1',
    'option_3' => 'Gym2'
    ),
 'label'     => __('Store Pick Up Location (Optional)', 'woocommerce'),
'required'  => true,
'class'     => array('store-pickup form-row-wide'),
'id'        => 'store_pickup_val',
'clear'     => true
 );

 return $fields;


//* Process the checkout
 add_action('woocommerce_checkout_process', 
'wps_select_checkout_field_process');
 function wps_select_checkout_field_process() 
global $woocommerce;
// Check if set, if its not set add an error.
if ($_POST['store_pickup'] == "option_0")
 wc_add_notice( '<strong>Please select a Delivery option</strong>', 'error' 
 );
 


add_action( 'woocommerce_after_checkout_form', 'gym_opening_hours', 6);

function gym_opening_hours() 

 ?>
<script type="text/javascript">
    jQuery('#store_pickup_val').change(function()

        jQuery('body').trigger('update_checkout');


        jQuery( ".gym-collection" ).remove(); 

        if (this.value == 'option_1') 
            jQuery('#shipping_method_0_flat_rate1').prop('checked', true);
        

        if (this.value == 'option_2') 
             jQuery( "<p>Order can be collected between 4pm - 7pm on Tuesdays</p>" ).addClass("gym-collection").insertAfter( "#store_pickup_val" );
             jQuery('#shipping_method_0_local_pickup3').prop('checked', true);  
         
            if (this.value == 'option_3') 
             jQuery( "<p>Order can be collected between 4pm - 7pm on Tuesdays</p>" ).addClass("gym-collection").insertAfter( "#store_pickup_val" );
             jQuery('#shipping_method_0_local_pickup3').prop('checked', true);          
         
        else 

        

    );
</script>
<?php

【参考方案1】：

这是你需要的：

将“提货数据”格式化并保存为订单元数据（用于客户 - 前端） 保存管理员订单编辑页面的“取货地点”（用于后端）。 在管理订单编辑页面（在后端）中显示“取货地点”。 在订单视图和接收页面（前端）中显示“pickup html 格式数据”。 在电子邮件通知中显示“拾取 html 格式的数据”（带有嵌入样式）。

我也轻松地重新访问了您的代码：

add_filter( 'woocommerce_checkout_fields' , 'custom_store_pickup_field');
function custom_store_pickup_field( $fields ) 
    $fields['billing']['store_pickup'] = array(
        'type'     => 'select',
        'id'       => 'store_pickup_val',
        'label'    => __('Store Pick Up Location (Optional)', 'woocommerce'),
        'required' => true,
        'class'    => array('store-pickup form-row-wide'),
        'options'  => array(
            ''=> 'Please Select a Delivery Option',
            'option_1' => 'Delivery',
            'option_2' => 'Gym1',
            'option_3' => 'Gym2'
        ),
        'clear'     => true,
    );
    return $fields;


//* Process the checkout
add_action('woocommerce_checkout_process',  'wps_select_checkout_field_process');
function wps_select_checkout_field_process() 
    // Check if set, if its not set add an error.
    if ( $_POST['store_pickup'] == "option_0" )
        wc_add_notice( '<strong>Please select a Delivery option</strong>', 'error' );



add_action( 'woocommerce_after_checkout_form', 'gym_opening_hours', 6 );
function gym_opening_hours() 
     ?>
    <script type="text/javascript">
        (function($)
            $('#store_pickup_val').change( function()
                $( ".gym-collection" ).remove();
                if (this.value == 'option_1') 
                    $('#shipping_method_0_flat_rate1').prop('checked', true);
                 else if (this.value == 'option_2') 
                     $( "<p>Order can be collected between 4pm - 7pm on Tuesdays</p>" ).addClass("gym-collection").insertAfter( "#store_pickup_val" );
                     $('#shipping_method_0_local_pickup3').prop('checked', true);
                 else if (this.value == 'option_3') 
                    $( "<p>Order can be collected between 4pm - 7pm on Tuesdays</p>" ).addClass("gym-collection").insertAfter( "#store_pickup_val" );
                    $('#shipping_method_0_local_pickup3').prop('checked', true);
                
                $('body').trigger('update_checkout');
            );
        )(jQuery);
    </script>
<?php

现在你需要完成这个过程的代码：

// Save the delivery location data to the order meta
add_action( 'woocommerce_checkout_update_order_meta', 'store_pickup_field_update_order_meta', 10, 1 );
function store_pickup_field_update_order_meta( $order_id ) 

    // BELOW update the data
    if ( $_POST['store_pickup'] == 'option_2' )
        $data = array( 
            'location' => 'Location 1', 
            'address' => '123 Beverly street<br> 90001 Los Angeles' 
        );
    elseif ( $_POST['store_pickup'] == 'option_3' )
        $data = array( 
        'location' => 'Location 2', 
        'address' => '456 Trumpet street<br> 90056 Los Angeles' 
    );

    $collect_info = 'Order can be collected between 4pm - 7pm on Tuesdays';

    if ( $_POST['store_pickup'] == 'option_2' || $_POST['store_pickup'] == 'option_3' )
        // HTML
        $store_pickup = "<h3>Pickup Information</h3>
        <table class='pickup td' cellspacing='0' cellpadding='6'>
            <tr>
                <th>Location:</th>
                <td>".$data['location']."</td>
            </tr>
            <tr>
                <th><strong>Adress:</strong></th>
                <td>".$data['address']."</td>
            </tr>
            <tr>
                <th><strong>Info:</strong></th>
                <td>".$collect_info."</td>
            </tr>
        </table>";

        // Save pickup html data (front end)
        update_post_meta( $order_id, '_store_pickup_data', $store_pickup );
        // Save pickup location (backend)
        update_post_meta( $order_id, '_store_pickup_location', $data['location'] );
    


// Display 'pickup location' on the order edit page (backend)
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'display_store_pickup_location_on_order_edit_pages', 10, 1 );
function display_store_pickup_location_on_order_edit_pages( $order )
    $pickup_location = get_post_meta( $order->get_id(), '_store_pickup_location', true );
    if( ! empty( $pickup_location ) )
        echo '<p><strong>Store pickup location: </strong> ' . $pickup_location . '</p>';


// Display 'pickup html data' in "Order received" and "Order view" pages (frontend)
add_action( 'woocommerce_order_details_after_order_table', 'display_store_pickup_data_in_orders', 10 );
function display_store_pickup_data_in_orders( $order ) 
    $pickup_data = get_post_meta( $order->get_id(), '_store_pickup_data', true );
    if( ! empty( $pickup_data ) )
        echo $pickup_data;


// Display 'pickup html data' in Email notifications (frontend)
add_action( 'woocommerce_email_order_meta', 'display_store_pickup_data_in_emails', 10 );
function display_store_pickup_data_in_emails( $order ) 
    $pickup_data = get_post_meta( $order->get_id(), '_store_pickup_data', true );
    if( ! empty( $pickup_data ) )
        // Email CSS style rules
        echo '<style>
        table.pickupwidth: 100%; font-family: \'Helvetica Neue\', Helvetica, Roboto, Arial, sans-serif;
            color: #737373; border: 1px solid #e4e4e4;
        table.pickup th, table.pickup tdtext-align: left; border-top-width: 4px;
            color: #737373; border: 1px solid #e4e4e4; padding: 12px;
        table.pickup tdtext-align: left; border-top-width: 4px; color: #737373; border: 1px solid #e4e4e4; padding: 12px;
        </style>';
        // Html data
        echo $pickup_data;
    

代码进入您的活动子主题（或主题）的 function.php 文件或任何插件文件中。

在 WooCommerce 3+ 上测试并运行。所以你会得到这个：

在管理员编辑订单页面：

在订单视图和订单接收页面中：

在电子邮件通知中：

【讨论】：

哦，伙计，这正是我正在寻找的 - 使用 PHP 中的条件 - 我最终解决了使用使用 Jquery 条件语句填充的第二个字段，但我认为你的更清洁。当我有时间我会重新做插件。谢谢大家！