WoodMart 促销弹窗、Header Banner 与优惠券设置-WP独立站学院

生成摘要

AI 生成，仅供参考

一、制作 Header Banner（顶部促销条）

Header Banner 是显示在页面最顶部、主菜单上方的一条横向促销条。常见用途：全场免邮公告、限时折扣倒计时、节日活动提示、物流延迟通知等。它的好处是全站可见、不抢主视觉、用户可一键关闭。

🚪 1.1 进入 Header Banner 设置

登录 WordPress 后台
在左侧菜单找到 WoodMart，点击进入主题设置面板（Theme Settings）
展开左侧设置树，找到 General（通用设置）→ Header banner（顶部促销条）

💡 Header banner 和 Header Builder 是两套独立的东西。Header banner 是一条独立的促销条，显示在 Header（页眉）之上；Header Builder 里搭建的是主菜单区域。不要混淆两者。

✍️ 1.2 开启并填写 Banner 文字

进入 Header banner 设置区域后，你会看到以下核心选项：

找到 Enable header banner（启用顶部促销条）开关，将其打开
在 Banner content（促销条内容）文本框中填写你要显示的文字。这里支持纯文本和基础 HTML 标签，例如：🎉 Black Friday 全场 8 折，满 $99 免邮！
如果需要加链接，可以包一个 <a> 标签，例如：<a href="/sale">Black Friday 专区</a>

⚠️ Banner 内容不要写太长。Header banner 的高度有限（通常一行文字），超过一定字符数在手机端会被截断或换行导致布局错位。建议控制在 60 个英文字符或 30 个中文字符以内。

🎨 1.3 设置背景色与文字颜色

找到 Banner background color（促销条背景色），点击颜色选择器，选择一个与你的品牌色搭配但足够醒目的颜色。常见选择：品牌主色、红色（促销感强）、黑色（高端感）
找到 Banner text color（促销条文字颜色），选择与背景色对比度足够的颜色。深色背景用白色文字，浅色背景用深色文字
如果你的 Banner 包含链接，找到 Banner link color（链接颜色），确保链接颜色和文字颜色有区分度（例如文字白色、链接浅黄色）

💡 对比度不够会导致可访问性（Accessibility）问题，也对 SEO 不友好。简单判断标准：在手机屏幕上户外阳光下能看清字就行。

✖️ 1.4 配置关闭按钮

找到 Show close button（显示关闭按钮）选项，建议开启。用户看到促销信息后如果当前不需要，可以点关闭按钮收起 Banner，不会一直被遮挡
关闭按钮的样式（颜色、位置）通常跟随文字颜色自动适配，不需要单独设置
用户点击关闭后，主题会通过浏览器 Cookie 记住这个选择（woodmart_tb_banner_*），之后访问不再显示；用户清除浏览器数据后 Banner 会重新出现

✅ 1.5 保存并前台验证

点击主题设置面板的 Save（保存）按钮
打开你的网站前台任意页面，检查 Header banner 是否显示在页面最顶部、菜单之上
在手机端也检查一遍：文字是否完整显示、关闭按钮是否可点击、背景色是否覆盖全宽

⚠️ 如果你用了缓存插件（如 WP Rocket、LiteSpeed Cache），保存后可能需要清除缓存才能在前台看到变化。另外，部分 CDN 配置也会缓存 CSS，如果颜色没变，清除一下 CDN 缓存。

二、制作促销弹窗内容

WoodMart 的促销弹窗（Promo Popup）内容有两种制作方式：直接用内置文本编辑器写简单内容，或者用一个 HTML Block 做复杂设计。收集邮箱、放海报图、展示优惠码这类需求，推荐用 HTML Block——可以用 Elementor 或 WPBakery 可视化设计，做好后在弹窗设置里指定它即可。

🧱 2.1 创建弹窗用 HTML Block

在 WordPress 后台左侧菜单找到 WoodMart → HTML Blocks
点击 Add New（新建），进入 HTML Block 编辑界面
在标题栏填写一个便于识别的名称，例如 Black Friday 促销弹窗
直接开始设计内容即可——HTML Block 不需要设置特殊类型，做好后在 Promo popup 设置中选择它（第三步详述）

🖌️ 2.2 用 Elementor 设计弹窗内容

点击 Edit with Elementor（用 Elementor 编辑）按钮，进入 Elementor 编辑器
弹窗的设计思路和落地页类似，但空间更小，建议采用”单屏布局”——所有内容在弹窗可视区域内一屏展示完，不需要滚动
典型的促销弹窗结构：
顶部：活动主视觉图片（如 Black Friday 海报），用 Image 组件或背景图
中间：活动标题 + 副标题文案，用 Heading 组件，字号要大、颜色要醒目
中下：折扣码展示区或邮箱订阅表单
底部：CTA 按钮（Call to Action，行动号召），如 立即抢购 或 领取优惠

⚠️ 弹窗内容的宽度不需要你在 HTML Block 里纠结——弹窗的最终宽度在 Promo popup 设置中统一控制（400–1000px 可调，见 3.3）。设计时按常规宽度排版，注意别堆太多内容。

📮 2.3 在弹窗中放置邮箱订阅表单

促销弹窗最常见用途之一是收集邮箱。你可以搭配 Mailchimp、Klaviyo 等邮件营销工具使用：

在 Elementor 中拖入一个 Mailchimp 组件（WoodMart 内置了 Mailchimp 表单组件），或使用你安装的邮件营销插件提供的表单 shortcode（短代码）
配置表单字段：通常只需要一个邮箱输入框和一个提交按钮
提交按钮文案建议用有行动感的短语，如 领取 10% 优惠码 而不是干巴巴的 提交
表单提交后的行为：可以设置为显示成功提示信息，或跳转到优惠活动页面

💡 如果你用的是 Klaviyo 而不是 Mailchimp，可以用 Klaviyo 提供的嵌入表单代码，通过 Elementor 的 HTML 组件粘贴进去。原理一样——弹窗只是一个容器，里面放什么表单都可以。

🎟️ 2.4 在弹窗中展示优惠码

如果你的促销活动不需要收集邮箱，直接发优惠码，可以在弹窗中放一个显眼的优惠码展示区：

用 Elementor 的 Heading 组件或 Text Editor 组件，写上优惠码，例如 BLACKFRIDAY20
优惠码的字号要大（建议 24px 以上），用等宽字体或全大写字母，方便用户复制
可以在优惠码下方加一句简短的使用说明，如 结账时输入此码享受 8 折优惠
建议在优惠码旁边放一个 复制 按钮（用 Button 组件 + 复制功能的 HTML 实现），降低用户操作成本

⚠️ 优惠码弹窗和邮箱订阅弹窗是两种不同的策略。前者追求即时转化（用户看到码就去下单），后者追求长期留存（收集邮箱后通过邮件序列慢慢培育）。根据你的活动目标选择，不要两个都塞进一个弹窗——信息太多反而降低转化率。

💾 2.5 保存并发布 HTML Block

在 Elementor 编辑器中点击左下角的 Update（更新）按钮保存设计
退出 Elementor 编辑器，回到 HTML Block 列表页，确认这个 Block 的状态为 Published（已发布）

三、设置促销弹窗（Promo Popup）

弹窗内容做好了，接下来配置它”长什么样、什么时候弹”。WoodMart 内置的 Promo popup 功能提供了内容来源、样式和触发条件的完整配置。

📌 官方说明：Promo popup 是 WoodMart 的早期功能（legacy），满足常规促销弹窗需求没问题。如果你需要退出意图触发、按页面设置显示范围等高级能力，请使用新版 Popup Builder（见 3.8）。

🚪 3.1 进入 Promo popup 设置

进入 WoodMart → 主题设置面板（Theme Settings）
在左侧设置树中找到 General（通用设置）→ Promo popup（促销弹窗）
打开 Enable promo popup（启用促销弹窗）总开关

💡 如果你在 General 下找不到 Promo popup，可以在主题设置顶部的搜索框输入 promo popup 直接定位。

📄 3.2 选择弹窗内容来源

找到 Promo popup content（弹窗内容）选项，二选一：

Text：用内置可视化编辑器写简单内容，支持文字格式、链接、图片和短代码，适合纯文字公告类弹窗
HTML Block（推荐）：选择你在第二步创建的 HTML Block（如 Black Friday 促销弹窗），适合有海报图、表单、多栏布局的复杂设计

⚠️ 如果 HTML Block 下拉列表为空或找不到你的区块，回到 HTML Blocks 列表确认该 Block 已发布（Published）。

🎨 3.3 配置弹窗样式

在 Style（样式）区域：

Popup background（弹窗背景）：设置背景图和/或背景色，可配重复方式、尺寸（cover/contain/auto）和位置
Popup text color（文字颜色方案）：选 Dark（深色字，配浅色背景）或 Light（浅色字，配深色背景）
Popup width（弹窗宽度）：400–1000px 之间调整，常规促销弹窗建议 500–700px
Popup padding（内边距）：可分别为桌面、平板、手机设置

💡 如果你的 HTML Block 内部已经留了间距，把 Popup padding 设为 0，避免双重留白。

⏱️ 3.4 触发方式一：页面加载后延迟弹出

找到 Show popup after（触发方式），选择 Some time（延迟时间）
在 Popup delay（延迟时间）中填入数值——单位是毫秒，1000ms = 1 秒。例如填 5000 表示用户进入页面 5 秒后弹窗
建议值：3000–15000（3–15 秒）。太短用户还没看清页面内容就被打断，太长用户可能已经划走

💡 5 秒（5000ms）是一个比较平衡的值。邮箱订阅类弹窗可以设到 10–15 秒，让用户先看到产品内容再引导订阅。

📜 3.5 触发方式二：用户滚动页面时

将 Show popup after 选择为 User scroll（用户滚动）
在 Show after user scroll down the page 中填入像素值，例如 600 表示用户向下滚动 600px 后弹出
这种触发方式适合内容较长的页面（如博客文章、产品列表页），用户愿意往下滚动说明对内容有兴趣，此时弹窗的转化率通常比定时弹出更高

📑 3.6 触发方式三：用户浏览 X 个页面后

找到 Show after number of pages visited（浏览页数触发）
填入页面数：0 表示首次访问的第一个页面就弹出，3 表示浏览了 3 个页面后才触发
这种规则的目的是过滤掉”随手点进来就走的”流量，只对有一定浏览深度的用户展示弹窗，这些用户的购买意向通常更高

💡 这个规则常用于邮箱订阅弹窗——浏览了 3 个页面说明用户对你的产品有兴趣，此时引导订阅的接受度最高。建议值：2–3 个页面。

🍪 3.7 关闭记忆与版本号机制

Promo popup 的”防骚扰”机制是 Cookie + 版本号，理解它才能控制好弹窗频率：

用户点击关闭弹窗后，主题会在浏览器写入一个 Cookie（含当前弹窗版本号），Cookie 默认 7 天过期——期间用户不会再看到弹窗，7 天后会再次出现
如果你中途更新了活动内容（换了优惠、改了设计），想让之前关闭过弹窗的老访客重新看到：把 Popup version（弹窗版本号）的数字加 1。版本号变了，旧 Cookie 失效，弹窗会对所有人重新展示
Hide on mobile devices（移动端隐藏）：如果你的弹窗设计没做小屏优化或包含复杂表单，可开启此项，弹窗只在桌面端显示

⚠️ 版本号机制要谨慎使用——频繁加版本号等于反复骚扰已经拒绝过你的用户。只有活动内容发生实质变化时才更新版本。

🧩 3.8 需要更高级触发时：Popup Builder

以下需求 Promo popup 做不到，需要用 WoodMart 的 Popup Builder（弹窗构建器）实现：

退出意图触发（Exit-Intent）：用户鼠标移向浏览器关闭按钮时弹出，适合”等等！带走你的专属 9 折码再走”这类挽回场景
按页面设置显示范围：只在首页/商店页/指定页面弹出，或排除结账页（Checkout）避免干扰支付
更多触发条件：无操作超时、点击触发、按设备/登录状态等条件组合

Popup Builder 在后台有独立入口，用 Elementor 设计内容后，在弹窗设置中配置触发器（Triggers）和显示条件（Conditions）即可。

💡 常规促销活动（黑五公告、新人优惠码、订阅引导）用 Promo popup 就够了，配置简单、稳定可靠。只有当你明确需要退出意图或精细的页面定向时，才值得切换到 Popup Builder。

✅ 3.9 保存并测试弹窗

点击 Save 保存所有设置
打开无痕/隐私窗口（避免已有 Cookie 干扰），访问你的网站前台
按你设置的触发方式验证：设了 5 秒延迟就等 5 秒；设了滚动 600px 就往下滚动
关闭弹窗后刷新页面，验证关闭记忆是否生效（7 天内不应再次弹出）

⚠️ 测试时务必用无痕窗口。普通窗口中你之前关闭弹窗的 Cookie 可能还在，导致弹窗不再显示，你会误以为配置没生效。

四、配置 WooCommerce 优惠券

优惠券（Coupon）是 WooCommerce 核心自带的功能，不需要额外插件。用户在结账页输入优惠码后，系统自动按规则计算折扣。配合前面的弹窗和 Banner，你可以把优惠码放在弹窗里让用户领取，也可以直接在 Header Banner 里写出来让用户结账时输入。

🚪 4.1 进入优惠券管理界面

在 WordPress 后台左侧菜单找到 WooCommerce → 营销（Marketing）→ 优惠券（Coupons）
如果你使用的是较新版本的 WooCommerce，入口也可能是 Marketing → Coupons
点击 Add new coupon（添加新优惠券），进入优惠券编辑页面

💡 WooCommerce 8.x 版本将营销功能整合到了独立的 Marketing 菜单中。如果你的菜单结构略有不同，在后台搜索框输入 coupons 也能快速定位。

✏️ 4.2 设置优惠码基本信息

在顶部的标题栏填写优惠码本身，这就是用户结账时输入的字符串。建议用全大写字母 + 数字组合，方便记忆和输入，例如 WELCOME10、BF2025、FREESHIP
在下方的 Description（描述）字段填写内部备注，比如 黑五全场 8 折，限 11/25–11/30。这个描述只对管理员可见，用户看不到

⚠️ 优惠码不要太复杂。BLACKFRIDAY2025SAVE20 这种长串用户很容易输错导致报错。简短、有意义、全大写是最好的选择。

💰 4.3 配置折扣类型与金额

在 General（常规）选项卡中设置折扣的核心参数：

Discount type（折扣类型）下拉菜单提供三种主要选项：
Percentage discount（百分比折扣）：按订单金额的百分比打折，例如设为 20 表示打 8 折（减 20%）
Fixed cart discount（固定购物车折扣）：整个购物车减去固定金额，例如设为 15 表示减 \$15
Fixed product discount（固定产品折扣）：购物车中每个符合条件的产品各减固定金额，适合特定产品促销
Coupon amount（优惠券金额）：根据折扣类型填写对应数值。百分比折扣填数字（如 20），固定金额折扣填货币金额（如 15）
Allow free shipping（允许免费配送）：勾选后，使用此优惠码的订单将免除运费。这等同于第四种折扣类型——包邮（Free Shipping）

💡 百分比折扣和固定金额折扣的选择逻辑：如果你的客单价波动大（用户可能买 \$10 也可能买 \$200），用百分比折扣更灵活；如果你的客单价相对稳定（大部分订单在 \$50 左右），用固定金额折扣更容易控制成本。

🎯 4.4 设置使用条件

在 Usage restriction（使用限制）选项卡中设置优惠券的使用门槛和范围：

Minimum spend（最低消费）：设置订单需达到的最低金额才能使用此优惠码。例如设为 50 表示订单满 \$50 才可用。常用于”满 \$50 减 \$10″这类活动
Maximum spend（最高消费）：设置使用此优惠码的订单金额上限。通常不需要设置，但如果你想限制大额订单使用折扣可以填
Individual use only（仅限单独使用）：勾选后，此优惠码不能与其他优惠码同时使用。如果用户购物车里已经有别的优惠码，再输入这个会被拒绝
Exclude sale items（排除促销商品）：勾选后，正在打折的商品不参与此优惠券的折扣计算。防止”折上折”导致亏本
Products（限定产品）：选择此优惠码仅对哪些产品生效。留空表示全站通用
Exclude products（排除产品）：选择不参与此优惠码的产品
Product categories（限定分类）和 Exclude categories（排除分类）：按产品分类限定或排除

⚠️ 设置最低消费时要考虑你的产品定价和运费成本。如果最低消费设得太高，用户为了凑单反而可能放弃；设得太低，你可能在运费上亏钱。建议根据你的平均客单价（Average Order Value, AOV）来定，通常设为客单价的 1.2–1.5 倍。

🔢 4.5 设置使用次数限制

在 Usage limits（使用次数限制）选项卡中控制优惠券的总使用量：

Usage limit per coupon（每个优惠码总使用次数限制）：设置此优惠码总共可以被使用多少次。例如设为 100 表示前 100 个订单可用，用完后优惠码自动失效。常用于”前 100 名专享”活动
Limit usage to X items（每个订单限用次数）：通常保持默认（不限制）。这个选项指的是一个优惠码在一个订单中可以应用到几个产品上，对百分比和固定购物车折扣一般不适用
Usage limit per user（每个用户使用次数限制）：设置每个用户可以使用此优惠码多少次。设为 1 表示每人只能用一次，常用于新人优惠

💡 Usage limit per user 是防止薅羊毛的关键设置。如果你做的是”新人 9 折”活动，一定要把这个值设为 1。注意，WooCommerce 对”同一用户”的判断方式是：已登录用户按用户 ID 统计，未登录访客按账单邮箱统计——不是完全可靠的防刷机制（换邮箱即可绕过），但对绝大多数场景够用。

📅 4.6 设置有效期

在优惠券编辑页面的 General 选项卡中，找到 Coupon expiry date（优惠券到期日期）
点击日期选择器，选择优惠码失效的日期。到期后用户输入优惠码会提示已过期
也可以同时设置到期时间（小时:分钟），精确控制活动结束时间

⚠️ 设置到期时间时注意时区。WooCommerce 使用你在 设置 → 常规 → 时区 中配置的时区。如果你的服务器时区和你的目标市场时区不一致（比如服务器在 UTC，你的客户在美国东部 EST），优惠券到期时间会按时区设置来计算，确认一下时区配置是否正确。

🧪 4.7 发布优惠券并测试

点击 Publish（发布）按钮，优惠券生效
打开前台，将一个符合条件的产品加入购物车
进入购物车页面或结账页，找到 Apply coupon（应用优惠码）输入框
输入你设置的优惠码，点击 Apply coupon
验证折扣是否正确应用：检查购物车总计中的折扣金额是否符合预期
测试完成后，可以继续保留优惠券上线，或设为草稿状态暂停使用

💡 如果输入优惠码后提示 Coupon code does not exist（优惠码不存在），检查：优惠码拼写是否完全一致（区分大小写）、优惠券状态是否为 Published、到期日期是否已过、使用次数限制是否已用完。

五、促销链路联动与检查

Header Banner、促销弹窗、优惠券三者不是孤立的功能，而是一条促销链路的三个环节。Banner 做全站告知，弹窗做精准触达，优惠券做实际转化。三者联动才能把促销效果最大化。

🔗 5.1 规划促销链路

一个典型的促销活动联动方案：

Header Banner：写上活动总信息，如 🎉 Black Friday 全场 8 折，满 $99 免邮！使用码 BF2025。全站可见，告知所有访客
Promo Popup：设计一个黑五主题弹窗，里面放优惠码 BF2025 和活动链接，设置延迟 5 秒触发。用户关闭后 7 天内不再弹出，活动改版时用版本号机制重新触达
优惠券：在 WooCommerce 中创建优惠码 BF2025，折扣类型选百分比折扣 20%，最低消费设为 \$99（配合免邮门槛），使用次数限制按你的预算设置

🧭 5.2 优惠码与弹窗的配合策略

根据活动目标选择不同的配合方式：

即时转化型：弹窗直接展示优惠码 + 立即购物 按钮，用户看到码就去下单。适合短期大促（黑五、网一）
邮件留存型：弹窗放邮箱订阅表单，用户填邮箱后通过邮件发送优惠码。适合长期活动和新客获取，同时积累邮件列表
弃单挽回型：用 Popup Builder 做退出意图弹窗，配一个较高力度的优惠码（如 15% 折扣），文案写 等等！带走你的专属 9 折码。适合挽回犹豫中的用户