WooCommerce添加WPBakery自定义页脚到商品详情页及购物车空白修复

你可以通过短码调用+钩子挂载的方式实现，操作步骤如下：

• 第一步：进入WP后台的「WPBakery模板库」，找到你已经做好的自定义页脚模板，复制模板对应的短码，格式通常为[vc_template id="xxx"]，xxx为你的模板数字ID。
• 第二步：将以下代码添加到你站点子主题的functions.php文件中（不要直接修改父主题文件，避免主题更新后代码丢失）：

// 挂载自定义页脚到WooCommerce单商品页
add_action('woocommerce_after_single_product', 'insert_custom_footer_to_product_page', 99);
function insert_custom_footer_to_product_page() {
    // 下方短码替换为你自己的WPBakery页脚模板短码
    echo do_shortcode('[vc_template id="替换为你的页脚模板ID"]');
}

• 如果需要调整页脚在单商品页的显示位置，可以修改add_action的第三个参数（优先级数值越小，加载位置越靠前），或者替换woocommerce_after_single_product为其他WooCommerce单页对应位置的钩子。

该问题通常是因为空白购物车页内容高度不足，或对应页面容器存在多余的边距导致，可通过添加自定义CSS修复：

• 进入WP后台的「外观-自定义-额外CSS」，将以下代码粘贴到输入框保存即可：

/* 修复空白购物车页面底部空白 */
.woocommerce-cart .site-main {
    /* 把代码中的头部高度、页脚高度替换为你站点实际的像素值 */
    min-height: calc(100vh - 80px - 320px);
}
/* 清除页脚多余边距 */
.woocommerce-cart .site-footer {
    margin: 0 !important;
    padding: 0 !important;
}

• 如果修改后仍有空白，可通过浏览器F12审查元素功能，选中页脚下方的空白区域，定位到产生边距的元素，针对性添加CSS清除对应边距即可。

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