woocommerce 添加占位符文本以编辑帐户表单答案

【问题标题】：woocommerce add placeholder text to edit account formwoocommerce 添加占位符文本以编辑帐户表单
【发布时间】：2018-04-08 12:58:02
【问题描述】：

我正在自定义我的店面子主题，并最终设法将所有 woocommerce 表单定位为仅显示占位符文本，除了 form-edit-account 上的字段，无论我尝试什么都不会改变（很多）。我想将该模板复制到我的子主题并进行更改，但不确定正确的方法。任何帮助都非常感谢 - 虽然我是复制粘贴者而不是开发人员。

functions.php 文件中使用的代码片段：

    //placeholder text
    add_filter( 'woocommerce_form_field_args', 'custom_form_field_args',      10, 3 );
    function custom_form_field_args( $args, $key, $value ) { 
       if ( $args['id'] == 'billing_first_name' ) {
          $args['placeholder'] = 'FIRST NAME';
       } elseif ( $args['id'] == 'billing_last_name' ) {
           $args['placeholder'] = 'LAST NAME';
       } elseif ( $args['id'] == 'shipping_state' ) {
           $args['placeholder'] = 'State';
       } elseif ( $args['id'] == 'account_first_name' ) {
           $args['placeholder'] = 'FIRST NAME';
       } elseif ( $args['id'] == 'account_last_name' ) {
           $args['placeholder'] = 'LAST NAME';
       } elseif ( $args['id'] == 'account_email' ) {
           $args['placeholder'] = 'email';  
       } elseif ( $args['id'] == 'account_password_current' ) {
           $args['placeholder'] = 'password':
       } elseif ( $args['id'] == 'account_password_1' ) {
           $args['placeholder'] = 'new password';   
       } elseif ( $args['id'] == 'account_password_2' ) {
           $args['placeholder'] = 'confirm password';
       }

       return $args;
    };

等等，尽管每个“运输”、“账单”和“帐户”ID。

用于隐藏标签的 css

    .woocommerce form .form-row label {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
clip: rect(0,0,0,0);
border: 0;

}

模板可以在这里找到https://github.com/woocommerce/woocommerce/blob/master/templates/myaccount/form-edit-account.php

我测试了如下直接编辑模板（只是为了看看它是否会起作用，它确实起作用了）但不确定这是否是正确的编写方法，如果是，它应该放在我的子主题文件夹中吗？代码原样：

    <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
    <label for="account_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_first_name" id="account_first_name" value="<?php echo esc_attr( $user->first_name ); ?>" />
</p>

我在 id 之后的输入类型行中插入了这个，但这是正确的方法吗？

    placeholder="First name"

谢谢！

【问题讨论】：

我实际上正在寻找相同的解决方案。除了“帐户详细信息”页面之外，我已经设法在任何地方找到占位符。我似乎找不到合适的钩子。

标签： php wordpress woocommerce

【解决方案1】：

使用以下函数复制占位符中的标签

function custom_form_field_args( $args, $key, $value ) {
        $args['placeholder'] = $args['label'];
        return $args;
    };
    add_filter( 'woocommerce_form_field_args', 'custom_form_field_args',      10, 3 );

然后如果你想使用这个 css 隐藏所有标签

.woocommerce form .form-row label {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
    clip: rect(0,0,0,0);
border: 0;
}

【讨论】：

这正是我一直在寻找的。帐户页面中的许多字段不包含占位符（我相信是出于地址区域设置的原因），但这非常适合创建它们

【解决方案2】：

你有一个语法错误，冒号而不是分号：

$args['placeholder'] = 'password':

应该是：

$args['placeholder'] = 'password';

我不确定这是否会有所帮助...

另外，如果您有这么多不同的可能性，请考虑使用switch 而不是if 循环，它更具可读性：

<?php

switch( $args['id']) {

  case 'billing_first_name':
    $args['placeholder'] = 'FIRST NAME';
    break;

  case 'billing_last_name':
    $args['placeholder'] = 'LAST NAME';
    break;

  // ...
}

很抱歉没有提供帮助，我实际上是在寻找类似的答案（在 WooCommerce 评论表单字段中设置占位符）。

【讨论】：