根据所选付款方式显示隐藏自定义 Woocommerce 结帐字段
Posted
技术标签:
【中文标题】根据所选付款方式显示隐藏自定义 Woocommerce 结帐字段【英文标题】:Show hide custom Woocommerce checkout field based on selected payment method 【发布时间】:2019-07-22 11:59:55 【问题描述】:您好,我使用下面的代码在结算表单中添加了自定义字段。
add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields($fields)
$fields['billing_options'] = array(
'label' => __('If you pay by Invoice. Please add Your Invoice Number Here ', 'woocommerce'), // Add custom field label
'placeholder' => _x('Invoice Number', 'placeholder', 'woocommerce'), // Add custom field placeholder
'required' => false, // if field is required or not
'clear' => false, // add clear or not
'type' => 'text', // add field type
'class' => array('my-css') // add class name
);
return $fields;
我有两种付款方式 1. 货到付款 2.Realex Payments HPP – 信用卡。
是否可以只显示自定义字段 1. 选择货到付款作为付款方式。
谢谢
【问题讨论】:
【参考方案1】:以下代码将隐藏billing_options
custom可选结帐字段当所选付款方式是现金交货(“COD”) EM>:
// Conditional Show hide checkout fields based on chosen payment methods
add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field()
// Only on checkout page
if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script>
jQuery(function($)
var a = 'input[name="payment_method"]',
b = a + ':checked',
c = '#billing_options_field'; // The checkout field <p> container selector
// Function that shows or hide checkout fields
function showHide( selector = '', action = 'show' )
if( action == 'show' )
$(selector).show( 200, function()
$(this).addClass("validate-required");
);
else
$(selector).hide( 200, function()
$(this).removeClass("validate-required");
);
$(selector).removeClass("woocommerce-validated");
$(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
// Initialising: Hide if choosen payment method is "cod"
if( $(b).val() !== 'cod' )
showHide( c, 'hide' );
else
showHide( c );
// Live event (When payment method is changed): Show or Hide based on "cod"
$( 'form.checkout' ).on( 'change', a, function()
if( $(b).val() !== 'cod' )
showHide( c, 'hide' );
else
showHide( c );
);
);
</script>
<?php
endif;
代码进入您的活动子主题(或活动主题)的 function.php 文件中。经过测试并且有效。
【讨论】:
以上是关于根据所选付款方式显示隐藏自定义 Woocommerce 结帐字段的主要内容,如果未能解决你的问题,请参考以下文章
根据 WooCommerce 中的付款方式提高购物车商品价格
Magento - OnePage Checkout - 根据送货方式隐藏付款方式