在电商网站中，结账流程的顺畅程度直接影响转化率。粘性加入购物车按钮是一种用户界面元素，当你在页面上滚动浏览时，这个按钮会始终保持在屏幕的可见区域，通常是固定在页面顶部或底部。无论用户浏览到页面的哪个部分，他们都可以随时点击这个按钮，将商品添加到购物车中，而不需要返回到页面的顶部或底部去寻找购物车按钮。
安装 WooCommerce 与 WowStore
要实现 粘性加入 WooCommerce 购物车 功能，需要安装 WooCommerce 和 WowStore。WowStore在 WooCommerce 的基础上增加了额外的功能，使得添加粘性购物车按钮更加便捷。
安装 WowStore插件
进入 WordPress 后台 > 插件 > 添加新插件。
搜索 WowStore并点击 安装。
安装完成后，点击 激活。
确保 WooCommerce 也已安装并激活。
启用 Sticky Add to Cart 功能
在 WowStore插件中，可以直接开启 粘性加入 WooCommerce 购物车 功能，使购物车按钮始终可见。
操作步骤：
进入 WordPress 后台 > WowStore。
下滑找到 Checkout and Cart 选项。
启用 Sticky Add to Cart 选项。
保存设置。
提示：WowStore其他附加功能的开启方式相同，进入相应选项后勾选即可。
Sticky Add to Cart 适用的产品类型
WooCommerce 中的商品类型包括：
简单产品：单个实体商品，例如一本书、一台手机。
虚拟产品：不涉及物流的商品，例如软件订阅、电子书。
可变产品：拥有多个不同属性的商品，例如不同尺码和颜色的 T 恤。
外部产品：非自有商品，可通过链接跳转到原商家页面，常见于联盟营销。
组合产品：一组相关商品的集合，例如多件套装。
移动端显示控制
在 WooCommerce 主题中，可以根据需求决定是否在移动端隐藏 粘性加入 WooCommerce 购物车 按钮。
隐藏 Sticky Add to Cart 按钮（可选）
进入 WowStore> Checkout and Cart。
勾选 隐藏移动端 Sticky Add to Cart 选项。
保存设置。
这样，在移动端访问时，该按钮不会显示。
Sticky Add to Cart 按钮样式设计
WowStore 提供多种自定义选项，可调整 粘性加入 WooCommerce 购物车 按钮的外观。
可修改的设计选项
常规样式（General Style）控制按钮的整体风格。
产品详情样式（Product Details Style）设定产品信息在 Sticky Add to Cart 区域的显示方式。
按钮与价格样式（Button/Price Style）自定义按钮的背景颜色、字体、边框等。
操作步骤：
进入 WowStore> Sticky Add to Cart > Design Settings。
修改相应的样式：标题字体加粗。
按钮背景颜色调整为蓝色。
修改按钮的边框圆角（Button Border Radius）。
保存设置并返回前台查看效果。
使用自定义代码启用 Sticky Add to Cart
如果不希望安装插件，可以使用代码手动添加 粘性加入 WooCommerce 购物车 按钮。
添加 PHP 代码
在 WordPress 主题的 functions.php 文件 中添加以下代码：
function add_sticky_add_to_cart() {
if ( is_product() ) {
global $product;
?>
<div class=”sticky-add-to-cart”>
<div class=”sticky-add-to-cart-inner”>
<a href=”<?php echo esc_url( $product->add_to_cart_url() ); ?>” class=”button alt add_to_cart_button ajax_add_to_cart” data-product_id=”<?php echo esc_attr( $product->get_id() ); ?>” data-product_sku=”<?php echo esc_attr( $product->get_sku() ); ?>” aria-label=”<?php echo esc_attr( $product->add_to_cart_text() ); ?>”>
<?php echo esc_html( $product->add_to_cart_text() ); ?>
</a>
</div>
</div>
<?php
}
}
add_action( ‘wp_footer’, ‘add_sticky_add_to_cart’ );
添加 CSS 样式
在 WordPress > 外观 > 自定义 > 额外 CSS 中添加：
.sticky-add-to-cart {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: 9999;
padding: 15px;
display: none; /* 默认隐藏 */
align-items: center;
justify-content: center;
}
.sticky-add-to-cart-inner {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.sticky-add-to-cart .button {
background-color: #0071a1;
color: #fff;
padding: 10px 30px;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
transition: background-color 0.3s ease;
}
.sticky-add-to-cart .button:hover {
background-color: #005f8a;
}
body.single-product .sticky-add-to-cart {
display: flex; /* 仅在单个产品页面显示 */
}
总结
粘性加入 WooCommerce 购物车 按钮能够增强 WooCommerce 购物体验，使用户在滚动页面时始终可以快速添加商品。可以通过 WowStore插件 直接启用该功能，并进行样式调整，也可以使用 PHP 和 CSS 代码 手动实现。合理设置按钮的 显示位置、风格、自定义文本，可使其更符合网站的整体设计风格，提高订单转化。