Chào mừng các bạn đã đến với trang mua sắm cogihomnay.com!
Hôm nay mình sẽ hướng dẫn custom nút mua sắm và nút thêm vào giỏ hàng trong chi tiết sản phẩm siêu đẹp. Thường mặc định thì các nút này có màu xanh nhạt và không rộng lớn.
Click phải kiểm tra phần tử thì thấy nút THÊM VÀO GIỎ nằm trong class buy_now_button. Còn nút mua ngay nằm trong class .button.alt:not(.is-outline), .single_add_to_cart_button.
Vào giao diện điều khiển của WordPress –> Giao diện –> Tùy biến –>CSS bổ sung.
Thêm dòng code sau vào trong rồi chọn Đăng
/*Custom nút mua ngay full 100% */
.buy_now_button {
width: 100%;
height: 60px;
background-color: #fb6e2e;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* Custom nút thêm vào full 100%*/
.button.alt:not(.is-outline), .single_add_to_cart_button {
background-color: #2f80ed;
width: 100%;
height: 60px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 10px;
}
Vào trang sản phẩm chi tiết xem kết quả
Chúc các bạn thành công với tut này :))