logo标签列表

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

phpjquerywordpresswoocommerce
14

我之前使用这篇答案来根据所选的送货方式隐藏结账字段，它在更新之前（3.4.2当前版本）是有效的。我认为不确定有什么变化，但现在它不能按照预期工作。

以前选择当地自取时，会隐藏一些字段并使其成为可选项，选择送货时会再次显示这些字段，而且全部都是在不重新加载页面的情况下实现的。

现在它可以根据需求显示和隐藏字段，但是当选择送货时，它会显示标记为必填的正确字段，但也会显示“（可选）”符号，从而使其成为可选项。请参见下面的图片。

输入图像描述

以下是我修改后的片段：

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
}

非常感谢任何指导！

3个回答
13

你可以轻松地在这里使用 CSS。

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

.woocommerce form .form-row .optional{
    display: none ;
}
1
在我看来，使用CSS永久删除元素并不是一个非常好的解决方案...但比起被接受的答案中的JS解决方案要好。 - GDY
这对我非常有效！我很好奇为什么@GDY指出使用CSS不是一个好的解决方案。只是想确保我正在使用最佳方法。 - jord8on
4
如果你想删除某些内容，只是将其隐藏起来而不是真正删除它是不好的风格。你可以想象一下“清理你的房间”，然后只是把东西放在床底下: D ...但在这样的环境中，这往往是最方便和可行的解决方案，所以绝对可以使用。但如果有可能，我总是更喜欢真正地删除这样的元素。 - GDY
@gdy：观点独到！感谢分享。我总是喜欢知道为什么！ - jord8on
2
对于这种情况，使用CSS隐藏文本“Optional”是可以的，这对我来说很好。开销非常小，而且可以轻松地撤消。在许多情况下，我会同意；最好完全删除某些东西，特别是如果它是在创建时消耗大量资源的东西。 - MQuiggGeorgia
@MQuiggGeorgia 是的，就像之前提到的那样，这样做很好 :). 特别是在像 WC 这样的系统中，挂钩比类更经常更改，这可能会使其更加强大并且更易于维护，因为如果发生任何更改，您无需深入了解系统架构...只需调整类即可。另一方面，这可能会导致废弃的样式和其他一些问题...特别是如果您像这样进行大量调整。在这种特定情况下，我可能也更喜欢基于类的方法。我只是想指出，这不是最清洁的做法 ;) - GDY
12

更新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 谢谢您的更新，如此一来，它使得字段变为可选，而不会隐藏任何字段。无论选择哪种方法，任何选项包括交付都使得这些字段变为可选。 - Abu Nooh
@AbuNooh 抱歉，这个问题相当复杂，在结账页面上真是一场噩梦。但最终我找到了正确的组合使其正常工作。 - LoicTheAztec
Loic，不需要道歉，感谢你抽出时间来查看。它可以工作，但有一个小问题，即它删除了可选标签，但仍将这些字段视为可选字段，因此可以通过验证而不填写地址、邮政编码和州/省字段。我不确定如何使它们再次成为必填项。我认为 $address_fields[$field]['required'] = false; 需要以某种方式撤消。再次感谢！ - Abu Nooh
我回来了，Loic，为什么会这样？https://imgur.com/a/UbuCu2m 即使字段存在并标记为必填项，为什么还是会出现这种情况？你也遇到了吗？ - Abu Nooh
有没有办法在选项“输入地址前隐藏运输方式”被勾选时使其工作，因为“shipping checked: false”由于某种原因禁用了AJAX。 - Abu Nooh
7
更好的解决方案：
/**
 * 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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接