javascript - 如何编辑 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;
}