Tạo thanh menu liên hệ dưới mobile cho website wordpress

Đầu tiên bạn chèn code vào file functions.php nhé !

add_action('wp_footer','bottom_contact');

function bottom_contact(){
     ob_start();
    global $woocommerce;
     $items_count = WC()->cart->get_cart_contents_count();
    ?>
<section id="mobile-bottom-navigation" class="large--hide medium--hide">
    <div class="grid mg-left-0">
            
        <div class="grid__item medium--two-tenths small--two-tenths pd-left0">
            <div class="mobile-nav-item">
                <a href="/cua-hang">
                    <i class="fa fa-tag" aria-hidden="true"></i><br>Hàng mới
                </a>
            </div>
        </div>
            
        <div class="grid__item medium--two-tenths small--two-tenths pd-left0">
            <div class="mobile-nav-item">
                <a href="/cua-hang">
                    <i class="fa fa-gift" aria-hidden="true"></i><br>Khuyến mãi
                </a>
            </div>
        </div>
            
        <div class="grid__item medium--two-tenths small--two-tenths pd-left0">
            <div class="mobile-nav-item">
                <a href="/tai-khoan">
                    <i class="fa fa-user" aria-hidden="true"></i><br>Tài khoản
                </a>
            </div>
        </div>
        
        <div class="grid__item medium--two-tenths small--two-tenths pd-left0">
            <div class="mobile-nav-item">
                <a href="/lien-he ">
                    <i class="fa fa-phone" aria-hidden="true"></i> <br>Liên hệ 
                </a>
            </div>
        </div>

        <div class="grid__item medium--two-tenths small--two-tenths pd-left0">
            <div class="mobile-nav-item">
                <a href="/gio/hang">
                    <i class="fa fa-shopping-cart" aria-hidden="true"></i><br>Giỏ hàng
                    <span class="number">
                        <?php echo $items_count;  ?>
                    </span>
                </a>
            </div>
        </div>
    </div>
</section>
<? }

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

#mobile-bottom-navigation {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99999;
    border-top: 1px solid #e6e6e6;
}
.mg-left-0 {
    margin-left: 0 !important;
}
@media only screen and (max-width: 480px){
    .small--two-tenths {
    width: 20% !important;
}
}
.grid__item {
    box-sizing: border-box;
    float: left;
    vertical-align: middle;
}
.pd-left0 {
    padding-left: 0 !important;
}
#mobile-bottom-navigation .mobile-nav-item {
    display: block;
    text-align: center;
    background: var( --e-global-color-primary );
    padding-top: 13px;
}
#mobile-bottom-navigation .mobile-nav-item > a {
    width: 100%;
    font-size: 12px;
    color: #fff;
}
#mobile-bottom-navigation .mobile-nav-item > a i {
    font-size: 24px;
    color: #fff;
    display: inline-block;
    margin-bottom: 3px;
}
#mobile-bottom-navigation .mobile-nav-item > a span.number {
    position: absolute;
    display: inline-block;
    top: 0px;
    right: 15px;
    height: 20px;
    line-height: 20px;
    width: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 14px;
    color: #0F5532;
    background: #ffffff;
}