如何在WordPress的functions.php中让WooCommerce钩子输出的图片居中

方案1：直接添加内联样式（无需额外修改CSS，操作最简单） #

直接修改你现有的functions.php代码，给img标签补充居中样式即可，修改后完整代码如下：

add_action('woocommerce_after_add_to_cart_button', 'add_content_on_add_to_cart_button');

function add_content_on_add_to_cart_button() {
    echo "<img src='image.png' style='width:70%;display:block;margin:10px auto 0;' alt='自定义展示图'>"; 
}

样式参数说明： #

• display:block：将图片转为块级元素，是触发margin自动居中的前提
• margin:10px auto 0：设置图片顶部和加购按钮预留10px间距，左右边距自动实现水平居中，底部无额外间距，你可以根据需求调整数值
• 补充了alt属性，符合站点SEO优化规范，可自行修改内容

方案2：使用自定义类控制样式（便于后续多端适配、样式迭代） #

如果后续需要针对移动端调整宽度、间距等参数，更推荐给图片加自定义类，统一用CSS管理样式：

1. 先修改functions.php中的输出代码：

add_action('woocommerce_after_add_to_cart_button', 'add_content_on_add_to_cart_button');

function add_content_on_add_to_cart_button() {
    echo "<img src='image.png' class='custom_after_atc_img' alt='自定义展示图'>"; 
}

2. 再将以下CSS代码添加到WordPress后台「外观-自定义-额外CSS」中即可生效：

.custom_after_atc_img {
    width: 70%;
    display: block;
    margin: 10px auto 0;
}
/* 可以针对移动端单独调整参数 */
@media (max-width: 768px) {
    .custom_after_atc_img {
        width: 90%;
    }
}

异常排查 #

如果修改后图片仍未居中，大概率是主题原有样式优先级更高，可在margin属性后加!important临时验证：margin:10px auto 0 !important;，确认是样式冲突后可调整CSS选择器优先级解决。

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