Cách tạo box khuyến mãi cho sản phẩm website

Hôm này trong bài viết hướng dẫn các bạn Cách tạo box khuyến mãi cho sản phẩm website đẹp như hình thực hiện theo 2 cách các bạn nếu thấy hay bổ ích cho mình 1 like nhé !

Cách 1 : Với theme Flatsome, sử dụng Woocommerce.

Nếu bạn sài theme này thì quá dễ và quen thuộc các bạn vào Trong theme Flatsome, bạn vào Giao diện -Tùy biến – Woocommerce (shop) – Product Page – HTML before Add to cart. Sau đó copy toàn bộ đoạn code HTML dưới đây paste vào

Chèn HTML vào đó

 <div class="khuyen-mai-hb">
        <span class="tieu-de"><i class="icon-gift"></i> Khuyến mãi đặc biệt</span>
        <ul>
            <li>Giảm 30% khi đăng ký hosting 3 năm</li>
            <li>Giảm 10% khi mua khoá học nguyenthaimmo</li>
            <li>Tặng 1 khóa học viết bài chuẩn SEO online</li>
        </ul>
 </div>

<span class="tieu-de"><i class="icon-gift"></i> Khuyến mãi đặc biệt</span>

<ul>

<li>Giảm 30% khi đăng ký hosting 3 năm</li>

<li>Giảm 10% khi mua khoá học nguyenthaimmo</li>

<li>Tặng 1 khóa học viết bài chuẩn SEO online</li>

</ul>

</div>

Sau đó chèn css vào

.khuyen-mai-hb {
	margin-bottom:2px;
	margin-top:2px;
	background:white;
	padding:10px;
	border-radius:5px;
	border:1px solid #ef0b0b;
	font-size:15px;
	width:100%;
}
.khuyen-mai-hb .tieu-de {
	background:#e31616;
	padding:2px 20px;
	margin-top:-24px;
	font-size:15px;
	font-weight:500;
	color:#ffffff;
	display:block;
	max-width:207px;
	border-radius:99px;
}
 
.khuyen-mai-hb ul {
   margin-bottom:4px;
   list-style-image:url(tick.png);	
}

.khuyen-mai-hb {

margin-bottom:2px;

margin-top:2px;

background:white;

padding:10px;

border-radius:5px;

border:1px solid #ef0b0b;

font-size:15px;

width:100%;

}

.khuyen-mai-hb .tieu-de {

background:#e31616;

padding:2px 20px;

margin-top:-24px;

font-size:15px;

font-weight:500;

color:#ffffff;

display:block;

max-width:207px;

border-radius:99px;

}

.khuyen-mai-hb ul {

margin-bottom:4px;

list-style-image:url(tick.png);

}

Cách 2 Không phải theme Flatsome

Các bạn vào giao diện của theme —> Sau đó chọn Theme file Editor —> Chọn file functions.php

add_action('woocommerce_after_add_to_cart_button', 'button_after_addtocart_button');

function button_after_addtocart_button() {
    ?>
    <div class="khuyen-mai-hb">
        <span class="tieu-de"><i class="icon-gift"></i> Khuyến mãi đặc biệt</span>
        <ul>
            <li>Giảm 30% khi đăng ký hosting 3 năm</li>
            <li>Giảm 10% khi mua khoá học nguyenthaimmo</li>
            <li>Tặng 1 khóa học viết bài chuẩn SEO online</li>
        </ul>
    </div>
    <?php
}

add_action('woocommerce_after_add_to_cart_button', 'button_after_addtocart_button');

function button_after_addtocart_button() {