产品分类页添加横幅广告的实用方法

很多人用 WooCommerce 搭建商城时，都会重点优化产品详情页和首页，而忽略了一个非常有价值的页面——产品分类页。这个页面其实是用户浏览商品的主要入口之一，访问频率非常高。

这篇文章将教你如何在产品分类页面中加入横幅广告，适用于大多数 WordPress + WooCommerce 网站，不需要写代码，几分钟就能搞定。

准备好你的横幅素材

在开始操作之前，先准备好一张横幅图片。建议：

尺寸宽度控制在 1200px 以内，高度 300px 左右

格式为 JPG 或 WebP，体积尽量小

图片内容突出你要推广的活动，比如“限时特价”“新品上市”“爆款推荐”等

可添加文字按钮，如“立即查看”“进入专区”等，引导点击

判断你的网站分类页面使用了哪种模板结构

不同主题对分类页面的控制方式不一样，一般分三种情况：

• 使用主题自带的分类模板（多数高级主题如 WoodMart、Flatsome）
• 使用 Elementor Pro 的 Theme Builder 自定义分类页
• 使用 WooCommerce 默认模板，没有页面编辑权限

如果你不确定，进入后台 > 页面，看看是否能找到与你的分类页匹配的模板页面，或者使用浏览器右键“查看页面源代码”，查找是否引用了 Elementor 或主题构建器。

用 Elementor 插入横幅广告（推荐方法）

如果你使用的是 Elementor Pro，可以按照以下步骤操作：

• 后台进入 Templates > Theme Builder
• 找到 Product Archive（产品归档）模板，点击编辑

• 在列表顶部区域，插入一个新“Section”，将其置于产品网格上方

• 拖入“Image”组件，上传你的横幅图

• 为图片添加链接地址或按钮，链接到促销页或指定商品

• 可设置为仅显示在特定分类，比如使用条件显示：产品分类等于“夏季新品”

• 保存并更新模板

这种方式灵活且可视化，适合希望精细控制布局的用户。

使用主题设置插入横幅模块（适用于 WoodMart、Flatsome 等主题）

以 WoodMart 为例：

• 进入后台 > 产品 > 分类

• 点击某个分类进入编辑页
• 向下找到“描述”输入框或“自定义分类顶部内容”字段
• 切换到文本/HTML模式，插入横幅图片代码
  例如： <a href="/special-sale"> <img src="/wp-content/uploads/2025/06/sale-banner.jpg" alt="促销横幅" /> </a>

• 保存后刷新分类页面即可看到横幅显示在产品列表上方

部分主题还支持“顶部广告”或“自定义区块”字段，这些也是添加横幅的好位置。

用插件控制横幅显示（适合不使用页面构建器的情况）

如果你的网站没有自定义分类模板的功能，可以借助插件实现，比如：

• WPCode 插件（原 Insert Headers and Footers）
  可以为特定页面或分类页注入 HTML 横幅
• Advanced Ads 插件
  专为插入广告设计，支持按分类、标签、设备、登录状态显示广告
• Shortcode 插件配合区块编辑器
  你可以创建一个广告块，用短代码插入到分类描述或顶部位置

这种方式适合不使用 Elementor Pro、但又希望分类页具有动态广告能力的网站。

测试横幅显示效果和跳转链接

添加完成后，请务必检查以下几点：

• 图片是否加载正常，是否自适应移动端
• 链接是否正确跳转到目标页
• 横幅是否只出现在指定分类，而不会干扰其他页面
• 页面加载速度是否受影响，图片大小是否合理

你可以用无痕浏览器或手机进行多端测试，确保访客体验顺畅。

总结

产品分类页面的曝光量其实非常高，而横幅广告模块就是把流量导向促销、活动、专题的好方式。你可以用 Elementor 可视化插入，也可以通过主题自带的设置或插件辅助添加。无论用哪种方式，核心就是让横幅位置清晰、内容吸引、链接准确。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息