Xin chào tất cả các bạn, cũng được 1 thời gian rồi mình chưa viết blog. Hôm nay mình chia sẻ code tạo buttong messenger và mua ngay

Hướng dẫn tạo button messenger và mua ngay ở footer trong woocommerce (2021) 1

Các bạn copy đoạn code dưới đây vào file function nhé.

function footerfixed(){
    ob_start();?>
    &lt;?php if(wp_is_mobile() &amp;&amp; is_product()){;?>
    &lt;div class="footer-fixed">
        &lt;div class="col1">
            &lt;a href="#linkchatfb">
                &lt;i class="fab fa-facebook-messenger">&lt;/i>
                &lt;span>Tư vấn&lt;/span>
            &lt;/a>
        &lt;/div>
        &lt;div class="col2">
            &lt;a id="addtocart" href="#">
                &lt;i class="fa fa-cart-plus" aria-hidden="true">&lt;/i>
                &lt;span> Mua ngay&lt;/span>
            &lt;/a>
        &lt;/div>
    &lt;/div>
    &lt;?php };?>
    &lt;?php $list_post = ob_get_contents();
    ob_end_clean();
  return $list_post;
}
add_shortcode('footerfixed','footerfixed');

function footerfixed(){

ob_start();?>

<?php if(wp_is_mobile() && is_product()){;?>

</a>

</div>

</a>

</div>

<?php };?>

<?php $list_post = ob_get_contents();

ob_end_clean();

return $list_post;

}

add_shortcode('footerfixed','footerfixed');

Và đoạn script này

function script_menu_footer_pttuan(){;?>
&lt;script>
jQuery(document).ready(function ($) {
var id = $('.single_add_to_cart_button').val();
$('#addtocart').attr("href", "?add-to-cart="+id);
});
&lt;/script>
&lt;?php }
add_action('wp_footer','script_menu_footer_pttuan');

function script_menu_footer_pttuan(){;?>

jQuery(document).ready(function ($) {

var id = $('.single_add_to_cart_button').val();

$('#addtocart').attr("href", "?add-to-cart="+id);

});

</script>

<?php }

add_action('wp_footer','script_menu_footer_pttuan');

Và cuối cùng là css

.footer-fixed {
    display: flex;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 10;
    border-top: 1px solid #e5e5e5;
    text-transform: uppercase;
}
.footer-fixed .col1 {
    background: #ffad00;
}
.footer-fixed div {
    text-align: center;
    width: 50%;
    padding: 10px 0;
}
.footer-fixed .col2 {
    background: #62862b;
}
.footer-fixed div span {
    margin-left: 10px;
}

.footer-fixed {

display: flex;

position: fixed;

width: 100%;

left: 0;

bottom: 0;

z-index: 10;

border-top: 1px solid #e5e5e5;

text-transform: uppercase;

}

.footer-fixed .col1 {

background: #ffad00;

}

.footer-fixed div {

text-align: center;

width: 50%;

padding: 10px 0;

}

.footer-fixed .col2 {

background: #62862b;

}

.footer-fixed div span {

margin-left: 10px;

}

Để có thể sử dụng được thì các bạn copy short code [footerfixed] và dán vào footer của website nhé.

Ở trên đây mình chỉ cho hiển thị ở trang sản phẩm thôi. Các bạn có thể thay link chat fb của mình vào link mặc định mà mình đang sử dụng nhé. Ngoài ra thì icon mình sử dụng thuộc font-awsome nên các bạn phải import vào trước nhé.

Phần này mình ngại viết một số mình coppy trên mạng xã hội.

Còn các bạn muốn tự động vào gian hàng trong woo nó hiện lên giống shoppe, thì liên hệ mình nhé. Mình sẽ lấy giá rẻ cho các bạn

Tin tức

Hướng dẫn tạo button messenger và mua ngay ở footer trong woocommerce (2021)

Trả lời Hủy

LIÊN KẾT NHANH

DỊCH VỤ CỦA CÔNG MINH WEB

THÔNG TIN LIÊN HỆ