如何编辑 WooCommerce 搜索字段占位符？

Question

正如主题所说，我想将搜索字段占位符从“搜索产品...”更改为“搜索优惠...”。我怎样才能做到这一点？我试图按照 WooCommerce 在 product-searchform.php 上所说的话：

    <?php
/**
 * The template for displaying product search form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/product-searchform.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 2.5.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

?>
<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label class="screen-reader-text" for="woocommerce-product-search-field-<?php echo isset( $index ) ? absint( $index ) : 0; ?>"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
    <input type="search" id="woocommerce-product-search-field-<?php echo isset( $index ) ? absint( $index ) : 0; ?>" class="search-field" placeholder="<?php echo esc_attr__( 'Search products&hellip;', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
    <input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" />
    <input type="hidden" name="post_type" value="product" />
</form>

我编辑自：

class="search-field" placeholder="<?php echo esc_attr__( 'Search products&hellip;', 'woocommerce' ); ?>"

收件人：

class="search-field" placeholder="<?php echo esc_attr__( 'Search Offers&hellip;', 'woocommerce' ); ?>"

什么都没有改变。我也尝试在原始 WooCommerce product-searchform.php 上做同样的事情，同样的结果。

如果有帮助，我检查元素时的代码：

<form role="search" method="get" class="woocommerce-product-search" action="https://mywebsite.com/">
                                        <input class="search-field" placeholder="Search Products…" value="" name="s" title="Search for:" type="search">
                                        <input value="Search" type="submit">
                                        <input name="post_type" value="product" type="hidden">
                                    </form>

CSS：

/****
Search form Header
****/
.header-search {
    float: left;
    position: relative;
    width: 25px;
    height: 25px;
    text-align: center;
}

.header-search-button {
    color: #cbc7c2;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

.header-search:hover .header-search-button {
    color: #fff;
}

.header-search-input {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    padding: 5px;
    background: rgba(26, 26, 26, 0.9);
}

.header-search.header-search-open .header-search-input {
    display: block;
}

.header-search.header-search-open .header-search-button {
    color: #fff;
}

.header-search-input input[type=submit] {
    position: absolute;
    z-index: 9;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 33px;
    border: none;
    background: none;
    text-indent: -9999999px;
}

.header-search-input input[type="search"] {
    width: 100%;
    padding: 10px;
    padding-right: 28px;
    border: none;
    border-radius: 0;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 2px;
}

.header-search-input:after {
    display: inline-block;
    position: absolute;
    z-index: 8;
    top: 5px;
    right: 5px;
    width: 20px;
    width: 33px;
    color: #999;
    font-family: "Glyphicons Halflings";
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    line-height: 33px;
    content: "\e003";
}

好吧，我想我走错了路，你能帮帮我吗？提前致谢。

注意当我编辑位于“woocommerce/templates/product-searchform.php”中的插件“product-searchform.php”时，令人震惊的事情仍然没有发生。我也删除了所有这些代码：

<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label class="screen-reader-text" for="woocommerce-product-search-field-<?php echo isset( $index ) ? absint( $index ) : 0; ?>"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
    <input type="search" id="woocommerce-product-search-field-<?php echo isset( $index ) ? absint( $index ) : 0; ?>" class="search-field" placeholder="<?php echo esc_attr__( 'Search products&hellip;', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
    <input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" />
    <input type="hidden" name="post_type" value="product" />
</form>

网站上什么也没发生！

这怎么可能？ :O

Answer 1

试试这个代码：https://www.speakinginbytes.com/2013/10/gettext-filter-wordpress/ 它使用 wordpress gettext 过滤器，几乎可以用于 wordpress 中的任何内容。

function my_text_strings( $translated_text, $text, $domain ) {
    switch ( $translated_text ) {
        case 'Search products…' :
            $translated_text = __( 'Search Offers…', 'woocommerce' );
            break;
    }
    return $translated_text;
}
add_filter( 'gettext', 'my_text_strings', 20, 3 );

或者

 function my_text_strings( $translated_text, $text, $domain ) {
    switch ( $text ) {
        case 'Search products…' :
            $text = __( 'Search Offers…', 'woocommerce' );
            break;
    }
    return $text;
 }
 add_filter( 'gettext', 'my_text_strings', 20, 3 );

甚至

add_filter('gettext', 'translate_text');
add_filter('ngettext', 'translate_text');

function translate_text($translated) {
$translated = str_ireplace('Search products…', 'Search Offers…', $translated);
return $translated;
}

Answer 2

解决方案是错误的文本域，在我的例子中，它是“shop-isle”（我正在使用的主题）而不是“woocommerce”

然后，不是这样的：

 $translated_text = __( 'Search Offers…', 'woocommerce' );

但是像这样：

 $translated_text = __( 'Search Offers…', 'shop-isle' );

Answer 3

使用 sn-p 或在 function.php 中尝试此代码。

<script>
  document.addEventListener("DOMContentLoaded", function() {
   let search = document.getElementsByClassName('search-field');
   search[0].placeholder='Change this text';
 });
</script>

亲切的问候