如何在Flatsome主题的WordPress站点显示WooCommerce迷你购物车？

嘿，你找对核心文件了！结合Flatsome的UX Builder、WooCommerce的迷你购物车模板，再搭配Product Tables插件，我给你整理了一套落地的实现步骤：

1. 先做好模板备份（关键！） #

别直接修改插件目录里的woocommerce/templates/cart/mini-cart.php——下次WooCommerce更新你的改动就没了。正确姿势是：

• 复制wp-content/plugins/woocommerce/templates/cart/mini-cart.php文件
• 粘贴到Flatsome子主题目录：wp-content/themes/flatsome-child/woocommerce/cart/（没有woocommerce/cart文件夹就手动创建）
• 之后所有对迷你购物车的自定义都在这个子主题文件里操作

2. 通过UX Builder嵌入迷你购物车 #

Flatsome的UX Builder支持两种嵌入方式，推荐用短代码更灵活：

方法A：自定义短代码嵌入 #

在子主题的functions.php里添加这段代码：

add_shortcode('flatsome_custom_mini_cart', function() {
    ob_start(); // 开启输出缓冲避免直接输出
    wc_get_template('cart/mini-cart.php'); // 调用WooCommerce迷你购物车模板
    return ob_get_clean(); // 返回缓冲的内容
});

然后在UX Builder编辑页面时：

• 添加「Shortcode」模块到目标位置
• 输入[flatsome_custom_mini_cart]即可

方法B：直接用自定义代码模块 #

不想搞短代码的话，也可以添加UX Builder的「Custom Code」模块，选择「PHP」类型，输入：

wc_get_template('cart/mini-cart.php');

3. 确保即时增删的AJAX功能正常 #

Flatsome本身集成了WooCommerce的AJAX购物车功能，但要和Product Tables兼容，需注意：

• 检查Product Tables插件设置，确认开启了「AJAX添加到购物车」（这类插件默认一般都开着）
• 如果添加商品后购物车没自动更新，把这段JS加到子主题js/custom.js（没有就新建）或Flatsome主题设置的「自定义JS」里：

jQuery(document).on('added_to_cart removed_from_cart', function() {
    // 触发WooCommerce购物车片段刷新
    jQuery('.widget_shopping_cart').trigger('wc_fragment_refresh');
});

这段代码会监听商品增删事件，强制刷新迷你购物车内容。

4. 自定义样式适配Flatsome（可选） #

默认迷你购物车样式可能和Flatsome风格不搭，可在子主题style.css里加自定义CSS调整，比如：

/* 调整迷你购物车容器宽度 */
.widget_shopping_cart {
    max-width: 350px;
    margin: 0 auto;
}
/* 修改商品项间距与分隔线 */
.widget_shopping_cart .cart_list li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

5. 测试验证 #

最后别忘了做几个核心测试：

• 从Product Tables添加商品，确认迷你购物车即时更新数量和内容
• 在迷你购物车移除商品，验证页面无需刷新就更新状态
• 测试移动端显示，确保样式不混乱

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