Cách thêm mua hàng ở dưới mô tả sản phẩm

Cách thêm mua hàng ở dưới mô tả sản phẩm

* Giới Thiệu

Chắc mọi người đã đọc bài này từ congdongshop.com qua , nhưng bên đó đã trở thành shop thương mại điện tử nên admin đã tách biệt ra một website mới là congdongblog.com.

        Admin sẽ làm lại blog về cách thêm mua hàng ở dưới mô tả sản phẩm nhé!

Cách 1: làm thủ công vào source

* code để thêm vào. 

 + code html 

<!-- code mua hang -->
		<div style="background: #0f7fc1;padding: 5px; color: #fff; margin-bottom: 0px;display: inline-block;">
	Mua sản phẩm
</div>
<div class="themspmota">
    <form enctype="multipart/form-data" method="post" class="cart">
        <?php the_title();  ?> <br/>
	<div class="quantity"><label>Số lượng: </label><input type="number" size="4" class="input-text qty text" title="SL" value="1" name="quantity" min="1" step="1"></div>
	<input type="hidden" value="<?php echo $vnid = the_ID(); ?>" name="add-to-cart">
	<button class="add-cart single_add_to_cart_button alt buynow" type="submit">Them vao gio</button>
</form>
</div>

+ Code css để trong customize hoặc style của theme

/*cart duoi mota*/
.themspmota form.cart {
    border-top: 2px solid #0f7fc1;
    text-align: center;
	font-weight: bold;
    color: #0f7fc1;
}
.text-center .quantity, .quantity label{
	 margin-top: 8px;
	color: red;
}

button.add-cart.single_add_to_cart_button.alt.buynow{
    color: #f1ff1f;
    border-radius: 10px;
}

* Video hướng dẫn Cách thêm mua hàng ở dưới mô tả sản phẩm

Cách 2:  Add function là xong

function add_custom_product(){;
    global $product;?>
    <div class="bottom-order">
        <div class="bottom-order__info">
            <?php echo woocommerce_get_product_thumbnail();?>
            <div class="bottom-order__info__title">
            <?php the_title();?>
            <?php echo $product->get_price_html();?>
            </div>
        </div>
        <div class="bottom-order__buy">
            <?php woocommerce_template_loop_add_to_cart();?>
        </div>
    </div>
<?php }
add_action('woocommerce_after_single_product_summary','add_custom_product');

Thêm css bên dưới vào nhé

.bottom-order {
    padding-bottom: 15px;
    overflow: hidden;
}
.bottom-order__info {
    display: block;
    vertical-align: middle;
    float: left;
    width: 35%;
}
.bottom-order__info img{
    width: 70px;
    height: auto;
    margin: 0 10px 0 0;
}
.bottom-order__info__title{
    display: inline-block;
    width: 180px;
    vertical-align: middle;
}
.bottom-order__buy{
    display: block;
    vertical-align: middle;
    margin: 0;
    float: right;
    width: 64%;
    text-align: right;
}

*Lời kết

– Các bạn có thắc mắc gì thì liên hệ mình nhé thông qua website: congdongshop.com hoặc congdongblog.com của mình nhé,
– Nhớ like và comment trang của mình nhé, cảm ơn các bạn nhìu !
– Shop của mình còn có các sản phẩm có nguồn gốc rõ ràng giá cả rẻ cạnh tranh nên các bạn mua ủng hộ mình luôn nha ! thank you mọi người