如何实现粘性加入WooCommerce 购物车按钮并进行优化

在电商网站中，结账流程的顺畅程度直接影响转化率。粘性加入购物车按钮是一种用户界面元素，当你在页面上滚动浏览时，这个按钮会始终保持在屏幕的可见区域，通常是固定在页面顶部或底部。无论用户浏览到页面的哪个部分，他们都可以随时点击这个按钮，将商品添加到购物车中，而不需要返回到页面的顶部或底部去寻找购物车按钮。

安装 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 代码 手动实现。合理设置按钮的 显示位置、风格、自定义文本，可使其更符合网站的整体设计风格，提高订单转化。