Custom tình trạng hết hàng trong chi tiết sản phẩm

Khi sản phẩm hết hàng thì mặc định sẽ có hiển thị chữ hết hàng nhưng nó không nổi bật, khó nhìn. Hôm nay mình sẽ hướng dẫn các bạn custom hiển thị nút hết hàng đẹp cho wordpress. Hiện tại mình đang sử dụng theme Flatsome.

Chúng ta bắt đầu nhé! Đầu tiên vào chi tiết sản phẩm thì nó sẽ có giao diện như hình bên dưới:

Login vào giao diện điều khiển –> Giao diện –> Tùy biến –> CSS bổ sung

Cập nhật thêm các dòng code này vào:

//Custom nút hết hàng
.out-of-stock {
    text-align: center;
    margin-bottom: 1em;
    font-weight: bold;
    background: #ff5722;
    font-size: 30px;
    outline: none;
    box-shadow: none;
    padding: 10px;
    color: #fff;
    line-height: inherit;
    width: 100%;
    border-radius: 2px;
    height: 50px;
    border: 2px solid #ff5722;
}
.stock {
    text-align: center;
    margin-bottom: 1em;
    font-weight: bold;
    background: #ff5722;
    font-size: 30px;
    outline: none;
    box-shadow: none;
    padding: 10px;
    color: #fff;
    line-height: inherit;
    width: 100%;
    border-radius: 2px;
    height: 50px;
    border: 2px solid #ff5722;
}

Xong chọn đăng

Sau đó ra ngoài trang chủ chọn sản phẩm đã hết hàng đễ kiểm tra kết quả.