添加一个结帐复选框字段,在 Woocommerce 中启用百分比费用

Posted

技术标签:

【中文标题】添加一个结帐复选框字段,在 Woocommerce 中启用百分比费用【英文标题】:Add a checkout checkbox field that enable a percentage fee in Woocommerce 【发布时间】:2019-08-26 09:35:54 【问题描述】:

在 Woocommerce 结帐页面中,我正在尝试在结帐页面上添加一个复选框并将其称为“分期付款”。

当勾选复选框以添加 3% 总金额时。

例如,如果总金额是100$,它会在总金额前增加一个额外的部分,称为分期付款(3% = $3) 并将该金额加到总数中。

【问题讨论】:

【参考方案1】:

基于“Dynamic shipping fee based on custom radio buttons in Woocommerce”,这是一个轻量级的改动版本,在计费字段后面有一个复选框,选中复选框时将启用 3% 的费用:

// Add a custom checkbox fields after billing fields
add_action( 'woocommerce_after_checkout_billing_form', 'add_custom_checkout_checkbox', 20 );
function add_custom_checkout_checkbox()

    // Add a custom checkbox field
    woocommerce_form_field( 'installment_fee', array(
        'type'  => 'checkbox',
        'label' => __(' Installment 3% fee'),
        'class' => array( 'form-row-wide' ),
    ), '' );


// Remove "(optional)" label on "Installement checkbox" field
add_filter( 'woocommerce_form_field' , 'remove_order_comments_optional_fields_label', 10, 4 );
function remove_order_comments_optional_fields_label( $field, $key, $args, $value ) 
    // Only on checkout page for Order notes field
    if( 'installment_fee' === $key && is_checkout() ) 
        $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
        $field = str_replace( $optional, '', $field );
    
    return $field;


// jQuery - Ajax script
add_action( 'wp_footer', 'checkout_fee_script' );
function checkout_fee_script() 
    // Only on Checkout
    if( is_checkout() && ! is_wc_endpoint_url() ) :

    if( WC()->session->__isset('enable_fee') )
        WC()->session->__unset('enable_fee')
    ?>
    <script type="text/javascript">
    jQuery( function($)
        if (typeof wc_checkout_params === 'undefined') 
            return false;

        $('form.checkout').on('change', 'input[name=installment_fee]', function(e)
            var fee = $(this).prop('checked') === true ? '1' : '';

            $.ajax(
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: 
                    'action': 'enable_fee',
                    'enable_fee': fee,
                ,
                success: function (result) 
                    $('body').trigger('update_checkout');
                ,
            );
        );
    );
    </script>
    <?php
    endif;


// Get Ajax request and saving to WC session
add_action( 'wp_ajax_enable_fee', 'get_enable_fee' );
add_action( 'wp_ajax_nopriv_enable_fee', 'get_enable_fee' );
function get_enable_fee() 
    if ( isset($_POST['enable_fee']) ) 
        WC()->session->set('enable_fee', ($_POST['enable_fee'] ? true : false) );
    
    die();


// Add a custom dynamic 3% fee
add_action( 'woocommerce_cart_calculate_fees', 'custom_percetage_fee', 20, 1 );
function custom_percetage_fee( $cart ) 
    // Only on checkout
    if ( ( is_admin() && ! defined( 'DOING_AJAX' ) ) || ! is_checkout() )
        return;

    $percent = 3;

    if( WC()->session->get('enable_fee') )
        $cart->add_fee( __( 'Installment fee', 'woocommerce')." ($percent%)", ($cart->get_subtotal() * $percent / 100) );

代码进入您的活动子主题(或活动主题)的 function.php 文件中。经过测试并且可以工作。


结算结帐字段后显示的字段:


仅在选中复选框时激活百分比“分期付款”:

【讨论】:

以上是关于添加一个结帐复选框字段,在 Woocommerce 中启用百分比费用的主要内容,如果未能解决你的问题,请参考以下文章

在 Woocommerce 结帐页面中将产品添加到购物车的复选框字段

根据Woocommerce结帐中的复选框自定义字段在项目名称下添加文本

验证 WooCommerce 结帐页面中的附加复选框字段

自定义 woocommerce 结帐表单字段

woocommerce 自定义结帐字段以增加订购 ajax 的费用

在 Woocommerce 结帐页面中显示一个添加费用的复选框