Thanh liên hệ mobile đẹp cho website wordpress

Đầu tiên chèn code vào file functions.php

function thanh_ho_tro_mobile_nhatdev(){
    global $product;
    global $woocommerce;
        ?>
    <style>
        .bottom-cart-total{
            position:relative;
        }
        .bottom-cart-total .tt-cart{
            position: absolute;
            background: #fff;
            color: #333;
            font-size: 10px;
            height: 15px;
            width: 15px;
            line-height: 15px;
            border-radius: 50%;
            top: -9px;
        }
    </style>
    <ul class="bottom-contact">
        <li>
        <a id="giohang-bt" href="https://myphamvietmy.webdocla.com/cua-hang/">
        <i class="fas fa-tag"></i>
        <br>
        <span>Sản phẩm</span>
        </a>
        </li>
        <li>
        <a id="goidien" href="https://myphamvietmy.webdocla.com/danh-muc/khuyen-mai/">
        <i class="fas fa-gift"></i>
        <br>
        <span>Khuyến mãi</span>
        </a>
        </li>
        <li>
        <a id="nhantin" href="https://myphamvietmy.webdocla.com/lien-he/">
        <i class="fas fa-phone"></i>
        <br>
        <span>Liên hệ</span>
        </a>
        </li>
        <li>
            
        <a id="chatzalo" href="https://myphamvietmy.webdocla.com/gio-hang/">
        <i class="fas fa-shopping-cart bottom-cart-total"><span class="tt-cart"><?php echo $woocommerce->cart->cart_contents_count ?></span></i>
        <br>
        <span>Giỏ hàng</span>
        </a>
        </li>
    </ul>
<? }
add_action( 'wp_footer', 'thanh_ho_tro_mobile_nhatdev' );

<!----------------------------------------------------------CSS----------------------------------------

Sau đó thêm CSS vào file style.css của bạn

.bottom-contact{display:none}
    @media  (max-width: 767px) {

    .bottom-contact{
        display: block;
        position: fixed;
        bottom: 0;
        background: #fbc531;
        padding:5px 0;
        width: 100%;
        z-index: 99;
        border-top: 1px solid #eaeaea;
    }
    .bottom-contact{
        display:flex;
        justify-content:space-evenly;
        align-items: center;
        margin-bottom: 0;
    }
    .bottom-contact li{
        width: 20%;
        list-style: none;
        text-align: center;
         font-size:13.5px;
    }

    .bottom-contact li span, .bottom-contact li i{
        color:#fff
    }
    .bottom-contact li i

    .bottom-contact li i{
        width: 35px;
        margin-top: 10px;
        margin-bottom: 0px;
       }

    }