You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改WooCommerce购物车优惠券输入框占位符文本?

Fixing WooCommerce Coupon Input Placeholder Text

Hey there, let's get that coupon placeholder text sorted out—your CSS approach didn't work for a couple of reasons, and digging through template files isn't the best way here anyway. Here's what you need to do:

1. Why Your CSS Failed

First off, your selector might not match the actual HTML structure of the coupon input, and placeholder styles need vendor prefixes for broader browser support. Let's fix that:

  • WooCommerce's coupon input usually has the ID coupon_code, but the input-value class might not be present (double-check using your browser's dev tools to confirm the exact classes/IDs).
  • Placeholder styles require vendor prefixes to work across older browsers.

Here's the corrected CSS code you can use:

/* Target the coupon input placeholder with full browser support */
input#coupon_code::-webkit-input-placeholder {
    content: 'Enter Code here';
}

input#coupon_code::-moz-placeholder {
    content: 'Enter Code here';
}

input#coupon_code:-ms-input-placeholder {
    content: 'Enter Code here';
}

input#coupon_code::placeholder {
    content: 'Enter Code here';
}

Add this code to your WordPress site via:

  • Appearance > Customize > Additional CSS (the easiest, safest way)
  • Your child theme's style.css file (if you're using a child theme to preserve changes through updates)

2. A More Reliable PHP Hook Method

If CSS still doesn't stick (sometimes theme styles override it), using WooCommerce's built-in filters is a future-proof, supported approach—no need to mess with template files at all:

Add this code to your child theme's functions.php file, or use a code snippet plugin (like Code Snippets) to avoid editing theme files directly:

// Update coupon placeholder on cart page
add_filter( 'woocommerce_cart_coupon_input_field_args', 'custom_coupon_placeholder_text' );
// Update coupon placeholder on checkout page
add_filter( 'woocommerce_checkout_coupon_input_field_args', 'custom_coupon_placeholder_text' );

function custom_coupon_placeholder_text( $args ) {
    $args['placeholder'] = 'Enter Code here';
    return $args;
}

Why Digging Through cart.php/coupon.php Didn't Help

WooCommerce doesn't hardcode the coupon input directly into those template files anymore. The input is generated via dynamic PHP functions that use hooks and filters, which is why hunting through the template files won't lead you to the right spot. Using the filter above is the official, maintainable way to make this change.

内容的提问来源于stack exchange,提问作者bart

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.15 04:21:48