Home / Lập Trình / 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

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

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

About admin

congdongblog.com và congdongshop.com là một nhé mọi người, trang website đều do admin là Nguyễn Trung Thông sở hữu và quản lý, với đam mê CNTT , trang này dùng để chia sẽ kinh nghiệm những gì mình có, những gì mình làm được lên đây cho mọi người cùng học nhé, có gì sai sót mọi người bỏ qua nhé

Bạn Chưa biết ?

Code Thêm Alt Và Title Hình Ảnh Sản Phẩm

Code Thêm Alt Và Title Hình Ảnh Sản Phẩm

Code Thêm Alt Và Title Hình Ảnh Sản Phẩm Chào các bạn, mình hôm nay …

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đánh giá facebook