从 Woocommerce 3.4+ 的结帐字段中删除“（可选）”文本

Posted 2023-02-22

【中文标题】从 Woocommerce 3.4+ 的结帐字段中删除“（可选）”文本

【英文标题】：Remove "(optional)" text from checkout fields in Woocommerce 3.4+

【发布时间】：2018-11-19 01:13:36

【问题描述】：

我之前使用this answer 根据选择的运输方式隐藏结帐字段，它工作正常，直到更新（3.4.2 当前版本）我想不确定发生了什么变化，但它不再按预期工作。

先前选择了本地拾取器，隐藏了某些字段并使其可选，选择交付时，它将在无需重新加载页面时再次显示这些字段。

Now it shows and hides the fields as required however, when delivery is chosen it is showing the correct fields marked as mandatory but also has the (optional) sign next to it and it makes it optional. 见下图。

这是我修改后的截图：

add_filter('woocommerce_default_address_fields', 'custom_default_checkout_fields', 10, 1 );
function custom_default_checkout_fields( $address_fields ) 
$custom_fields = array( 'country', 'address_1', 'address_2', 'state', 'postcode');
foreach($custom_fields as $field)
    $address_fields[$field]['required'] = false;
return $address_fields;


add_action( 'wp_footer', 'custom_checkout_field_script' );
function custom_checkout_field_script() 

$pickpoint = 'local_pickup:2';
$free_delivery = 'free_shipping:1';
$flat_rate = 'flat_rate:3';

$required = esc_attr__( 'required', 'woocommerce' );
?>
<script>
    jQuery(function($)

        var shippingMethod = $('input[name^="shipping_method"]:checked'),
            required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>',
            shippingChecked = $('input#ship-to-different-address-checkbox');

        shippingChecked.change( function()
            console.log('Shipping Checked: '+shippingChecked.prop('checked'));
        );

        function showHide( actionToDo='show', selector='' )
            if( actionToDo == 'show' )
                $(selector).show(function()
                    $(this).addClass("validate-required");
                    $(this).removeClass("woocommerce-validated");
                    $(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
                    if( $(selector+' > label > abbr').html() == undefined )
                        $(selector+' label').append(required);
                );
            else
                $(selector).hide(function()
                    $(this).removeClass("validate-required");
                    $(this).removeClass("woocommerce-validated");
                    $(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
                    if( $(selector+' > label > abbr').html() != undefined )
                        $(selector+' label > .required').remove();
                );
        

        if( shippingMethod.val() == '<?php echo $pickpoint; ?>' )
        
            showHide('show','#billing_country_field' );
            showHide('hide','#billing_address_1_field' );
            showHide('hide','#billing_address_2_field' );
            showHide('hide','#billing_postcode_field' );
            showHide('hide','#billing_state_field' );
        
        else if( shippingMethod.val() == '<?php echo $free_delivery; ?>' || '<?php echo $flat_rate; ?>')
        
            showHide('show','#billing_address_1_field');
            showHide('show','#billing_address_2_field');
            showHide('show','#billing_postcode_field');
            showHide('hide','#billing_state_field');
            showHide('hide','#billing_country_field');
        

        $( 'form.checkout' ).on( 'change', 'input[name^="shipping_method"]', function() 
            var shipMethod = $('input[name^="shipping_method"]:checked');
            if( shipMethod.val() == '<?php echo $pickpoint; ?>' )
            
                showHide('show','#billing_country_field');
                showHide('hide','#billing_address_1_field');
                showHide('hide','#billing_address_2_field');
                showHide('hide','#billing_postcode_field');
                showHide('hide','#billing_state_field');
            
            else if( shipMethod.val() == '<?php echo $free_delivery; ?>' || '<?php echo $flat_rate; ?>')
            
                showHide('show','#billing_address_1_field');
                showHide('show','#billing_address_2_field');
               showHide('show','#billing_postcode_field');
                showHide('hide','#billing_state_field');
                showHide('hide','#billing_country_field');
            
            else
            
                showHide('show','#billing_address_1_field');
                showHide('show','#billing_address_2_field');
                showHide('show','#billing_postcode_field');
                showHide('show','#billing_state_field');
                showHide('show','#billing_country_field');
            
        );

        $( 'input#ship-to-different-address-checkbox' ).click( function() 
            var shipMethod = $('input[name^="shipping_method"]:checked');
            if( shipMethod.val() == '<?php echo $pickpoint; ?>' && shippingChecked.prop('checked') == true )
            
                showHide('show','#billing_country_field');
                showHide('hide','#billing_address_1_field');
                showHide('hide','#billing_address_2_field');
                showHide('hide','#billing_postcode_field');
                showHide('hide','#billing_state_field');

                showHide('show','#shipping_country_field');
                showHide('hide','#shipping_address_1_field');
                showHide('hide','#shipping_address_2_field');
                showHide('hide','#shipping_postcode_field');
                showHide('hide','#shipping_state_field');
            
            else if( shipMethod.val() == '<?php echo $free_delivery; ?>' || '<?php echo $flat_rate; ?>' && shippingChecked.prop('checked') == true )
            
                showHide('show','#billing_address_1_field');
                showHide('show','#billing_address_2_field');
                showHide('show','#billing_postcode_field');
                showHide('hide','#billing_state_field');
                showHide('hide','#billing_country_field');

                showHide('show','#shipping_address_1_field');
                showHide('show','#shipping_address_2_field');
                showHide('show','#shipping_postcode_field');
                showHide('hide','#shipping_state_field');
                showHide('hide','#shipping_country_field');
            
            else if( shippingChecked.prop('checked') == false )
            
                showHide('show','#shipping_address_1_field');
                showHide('show','#shipping_address_2_field');
                showHide('hide','#shipping_state_field');
                showHide('hide','#shipping_country_field');
            
        );
    );
</script>
<?php

任何指针将不胜感激！

【参考方案1】：

更好的解决方案：

/**
 * Remove optional label
 * https://elextensions.com/knowledge-base/remove-optional-text-woocommerce-checkout-fields/
 */
add_filter( 'woocommerce_form_field' , 'elex_remove_checkout_optional_text', 10, 4 );
function elex_remove_checkout_optional_text( $field, $key, $args, $value ) 
    if( is_checkout() && ! is_wc_endpoint_url() ) 
        $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
        $field = str_replace( $optional, '', $field );
    
    return $field;

【参考方案2】：

你可以在这个中轻松使用 css

.woocommerce form .form-row .required
    display: none ;


.woocommerce form .form-row .optional
    display: none ;

【讨论】：

在我看来，使用 CSS 永久删除元素并不是一个很好的解决方案……但比公认答案中的 JS 解决方案要好

这对我很有用！我很好奇为什么@GDY 指出使用 CSS 不是一个好的解决方案。只是想确保我使用的是最好的方法。

@jord8on：这是一种糟糕的风格，如果你想删除一些东西，那就真的删除它，不要让它变得不可见。你可以想到“打扫你的房间”，然后把东西放在你的床下：D……但在这样的环境中，它通常是最方便和可行的解决方案，所以绝对有用。但如果可以的话，我总是更愿意真正删除这些元素。

@gdy：非常有见地！感谢分享。我总是想知道为什么！

@GDY 对于这种情况，在我看来，用 CSS 隐藏文本“可选”很好。非常小的开销，可以很容易地逆转。在很多情况下，我会同意；最好完全删除某些东西，特别是如果它首先要消耗大量资源来创建。

【参考方案3】：

更新 2

要从 Woocommerce 3.4 版引入的结帐字段标签中删除 “（可选）” 文本，就像以前一样，您需要添加以下代码：

// PHP: Remove "(optional)" from our non required fields
add_filter( 'woocommerce_form_field' , 'remove_checkout_optional_fields_label', 10, 4 );
function remove_checkout_optional_fields_label( $field, $key, $args, $value ) 
    // Only on checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) 
        $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
        $field = str_replace( $optional, '', $field );
    
    return $field;


// JQuery: Needed for checkout fields to Remove "(optional)" from our non required fields
add_filter( 'wp_footer' , 'remove_checkout_optional_fields_label_script' );
function remove_checkout_optional_fields_label_script() 
    // Only on checkout page
    if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;

    $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
    ?>
    <script>
    jQuery(function($)
        // On "update" checkout form event
        $(document.body).on('update_checkout', function()
            $('#billing_country_field label > .optional').remove();
            $('#billing_address_1_field label > .optional').remove();
            $('#billing_postcode_field label > .optional').remove();
            $('#billing_state_field label > .optional').remove();
            $('#shipping_country_field label > .optional').remove();
            $('#shipping_address_1_field label > .optional').remove();
            $('#shipping_postcode_field label > .optional').remove();
            $('#shipping_state_field label > .optional').remove();
        );
    );
    </script>
    <?php

代码进入您的活动子主题（或活动主题）的 function.php 文件中。在 Woocommerce 3.4+ 版本中测试并运行。

您可以将包含的 jQuery 代码与您现有的 jQuery 代码合并...

【讨论】：

@LoicTheAztec 感谢您更新它，因为它使字段成为可选字段，而实际上没有隐藏任何字段。无论选择哪种方法。包括交付在内的任何选项都使这些字段成为可选字段。

@AbuNooh 抱歉，这很复杂，结帐页面真是一场噩梦。但最后我找到了正确的组合让它发挥作用。

Loic，无需道歉，感谢您抽出宝贵时间查看。它可以工作，但有一个小问题，它删除了可选标签但仍将这些字段视为可选字段，因此无需填写地址、邮政编码和状态字段即可通过验证。我不完全确定如何再次使它们成为必需品。我认为$address_fields[$field]['required'] = false; 需要以某种方式撤消。再次感谢！

我回来了 Loic，为什么会这样？ imgur.com/a/UbuCu2m 即使这些字段存在并标记为必填项？它发生在你身上吗？

当hide shipping methods until an address is entered 选项被选中时，有什么办法可以使这个工作，因为shipping checked: false 出于某种原因禁用了AJAX。