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

Posted 2021-05-05

正如主题所说，我想将搜索字段占位符从“搜索产品...”更改为“搜索商品...”。我怎样才能做到这一点？我试着按照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

答案

尝试以下代码：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;
}

另一答案

解决方案是在错误的文本域，在我的情况下，它是'shop-isle'（主题我正在使用）而不是'woocommerce'

然后，它不是这样的：

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

但是像这样：

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