如何为WordPress&WooCommerce商店页面标题添加背景图

因为你的Shop页面无法用Elementor编辑，推荐用以下两种方法实现：

方法一：自定义CSS（最简单，无需修改代码文件） #

1. 登录WordPress后台，依次进入「外观」→「自定义」→「额外CSS」
2. 插入下方CSS代码，记得把你的背景图URL替换成你上传到媒体库的背景图链接，可根据需求调整参数：

/* 定位Shop页面的标题元素 */
.page-header .page-title {
    background-image: url('你的背景图URL');
    background-size: cover; /* 背景图覆盖整个文字区域，用contain可保持图片完整 */
    background-position: center center; /* 居中显示背景图 */
    color: #ffffff; /* 若背景图较深，调整文字颜色保证可读性 */
    padding: 12px 24px; /* 增加内边距，让背景图和文字更协调 */
    display: inline-block; /* 让背景仅包裹文字，而非整行 */
}

如果上述选择器不生效，打开浏览器开发者工具（F12），右键点击“Shop”文字选择「检查」，找到对应的元素类名替换.page-header .page-title即可。

方法二：修改主题模板文件（适合有开发基础的用户） #

Shop页面是WooCommerce的产品归档页，通常对应主题里的archive-product.php或page-header.php文件：

1. 先创建并激活子主题（避免主题更新丢失修改）
2. 在子主题中找到并复制对应模板文件
3. 找到输出页面标题的代码段，类似：

<h1 class="page-title"><?php woocommerce_page_title(); ?></h1>

4. 修改为带内联样式的代码，替换背景图URL：

<h1 class="page-title" style="background-image: url('你的背景图URL'); background-size: cover; background-position: center; padding: 12px 24px; color: #fff;">
    <?php woocommerce_page_title(); ?>
</h1>

内容的提问来源于stack exchange，提问作者Mal