woocommerce 添加占位符文本以编辑帐户表单 [英] woocommerce add placeholder text to edit account form

问题描述

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

I am customizing my storefront child theme and eventually managed to target all woocommerce forms to show placeholder text only EXCEPT for the fields on form-edit-account that will not change no matter what I have tried (a LOT). I thought of copying that template to my child theme with changes but not sure of the correct method. Any help greatly appreciated - I am a copy-paster not a developer though.

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

Snippet of code used in functions.php file:

    //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.

and so on though each "shipping", "billing" and "account" 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

我测试了直接编辑模板如下(只是为了看看它是否可以工作，它做了)但不确定这是否是编写它的正确方法，如果是这样，它应该放在我的子主题文件夹中吗?代码原样:

I tested editing the template directly as follows (just to see if it would work, which it did) but not sure if that's the correct way to write it, and if so, should it just go in my child theme folder? Code as-is:

    <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 之后的输入类型行中插入了这个，但这是正确的方法吗?

I inserted this on the input type line after id but is this the correct method?

    placeholder="First name"

谢谢！

推荐答案

使用下面的函数复制palceholder中的标签

Use following function to copy label in palceholder

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隐藏所有标签

and then if you want hide all label by using this 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;
}

这篇关于woocommerce 添加占位符文本以编辑帐户表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！