WooCommerce产品页浮动“添加到购物车（Add to cart）”按钮

当用户访问到产品页时，会滑动到下方查看商品的详情，这时就需要一个浮动的按钮，用来做个锚点或是直接点击购买。让用户随时能点击到一个购买按钮，提高用户转化率。

我是这样做的，应该是适应绝大多数的主题：

<?php

/**
 * Plugin Name:       手机端底部悬浮按钮
 * Description:       在手机端的底部悬浮加入购物车、立即购买的按钮。
 */
function pbb_product_buy_button()
{
?>

    <style>
#add-buy-sexindoll {
    position: fixed;
    z-index: 2;
    bottom: 10px;
    left:10px
}
    </style>
    <div id="add-buy-sexindoll" style="display: none;">
    <button onclick="add_to_cart_button()" class="single_add_to_cart_button button alt">加入购物车</button>
    </div>
    <script>
        window.onscroll = function() {
            //为了保证兼容性，这里取两个值，哪个有值取哪一个
            //scrollTop就是触发滚轮事件时滚轮的高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // var single_add_to_cart_button_top = document.getElementById('sticky-scroll').getBoundingClientRect().top;
            var single_add_to_cart_button_top =document.getElementsByClassName("single_add_to_cart_button")[0].getBoundingClientRect().top;

            var t = document.getElementById('add-buy-sexindoll');//选取id为test的元素
            if (single_add_to_cart_button_top < 60 || document.documentElement.clientHeight < single_add_to_cart_button_top) {
                console.log("距离顶部" + single_add_to_cart_button_top);
                    t.style.display = 'block'; // 以块级样式显示
            }else{
                t.style.display = 'none'; // 隐藏选择的元素
            }
            //   console.log("滚动距离" + scrollTop);

        }
        function add_to_cart_button() {//模拟点击
            document.getElementsByClassName("single_add_to_cart_button")[0].click();
        }
        
    </script>
<?php
}
add_action("woocommerce_after_single_product_summary", "pbb_product_buy_button");