Dịch vụ tăng tốc độ website
Dịch vụ xoá virus mã độc
Dịch Vụ Thiết Kế Website
Sửa lỗi và nâng cấp website
Dịch vụ bảo mật website
Dịch vụ web hostingChia sẻ CSS chỉnh cụm nút mua hàng trang chi tiết sản phẩm WooCommerce / Flatsome
Khi làm website bán hàng bằng WordPress, đặc biệt là các website dùng Flatsome hoặc các mẫu theme WP bán hàng, phần trang chi tiết sản phẩm là khu vực rất quan trọng. Đây là nơi khách hàng xem thông tin sản phẩm, giá bán, chọn màu sắc, chọn số lượng và quyết định bấm “Mua ngay” hoặc “Thêm vào giỏ hàng”.
Tuy nhiên, giao diện mặc định của nhiều theme đôi khi chưa thật sự đẹp. Cụm số lượng, nút mua ngay và nút thêm vào giỏ có thể bị lệch hàng, khoảng cách chưa đều, màu sắc chưa đồng bộ với giao diện tổng thể. Nhìn qua thì chỉ là chi tiết nhỏ, nhưng khi tối ưu lại sẽ giúp trang sản phẩm gọn gàng, chuyên nghiệp và dễ thao tác hơn rất nhiều.
Hôm nay mình chia sẻ một đoạn CSS dùng để chỉnh lại cụm mua hàng trong trang chi tiết sản phẩm. Đoạn CSS này phù hợp cho những bạn đang làm theme mới, custom theme WP, hoặc tối ưu các mẫu theme WP giá rẻ để giao diện nhìn chỉn chu và đẹp hơn.
Sau khi thêm CSS, bố cục sẽ được sắp xếp lại theo dạng:
Số lượng → Mua ngay → Thêm vào giỏ hàng
Trong đó:
- Phần số lượng có thêm chữ “Số lượng:” rõ ràng
- Nút cộng trừ được bo góc nhẹ, nền xám nhạt dễ nhìn
- Nút “Mua ngay” dùng màu nâu cam nổi bật
- Nút “Thêm vào giỏ hàng” dùng nền sáng, viền nâu cam
- Khi hover nút sẽ đổi màu mượt hơn
- Trên mobile tự xuống dòng để không bị vỡ giao diện
/* Form sản phẩm */
.single-product form.cart,
.single-product form.variations_form {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 14px !important;
}
/* Bảng màu sắc */
.single-product table.variations {
width: 100% !important;
margin-bottom: 8px !important;
}
.single-product table.variations tr {
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
.single-product table.variations th,
.single-product table.variations td {
display: flex !important;
align-items: center !important;
padding: 0 !important;
border: none !important;
}
.single-product table.variations label {
margin: 0 !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #222 !important;
}
/* Khu số lượng + nút */
.single-product .single_variation_wrap,
.single-product .woocommerce-variation-add-to-cart {
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
/* Số lượng */
.single-product .quantity,
.single-product .quantity.buttons_added {
order: 1 !important;
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* Chữ Số lượng */
.single-product .quantity::before {
content: "Số lượng:";
font-size: 15px !important;
font-weight: 700 !important;
color: #333333 !important;
margin-right: 10px !important;
white-space: nowrap !important;
}
/* Ô số lượng */
.single-product .quantity .minus,
.single-product .quantity .plus,
.single-product .quantity input.qty {
height: 40px !important;
border: none !important;
background: #f3f3f3 !important;
color: #333333 !important;
box-shadow: none !important;
font-size: 15px !important;
}
.single-product .quantity .minus {
width: 34px !important;
border-radius: 8px 0 0 8px !important;
}
.single-product .quantity input.qty {
width: 38px !important;
min-width: 38px !important;
text-align: center !important;
padding: 0 !important;
font-weight: 500 !important;
}
.single-product .quantity .plus {
width: 34px !important;
border-radius: 0 8px 8px 0 !important;
}
.single-product .quantity .minus:hover,
.single-product .quantity .plus:hover {
background: #e8e8e8 !important;
color: #000000 !important;
}
/* Nút Mua ngay mặc định Flatsome */
.single-product .ux-buy-now-button {
order: 2 !important;
min-width: 135px !important;
height: 40px !important;
padding: 0 22px !important;
border-radius: 999px !important;
background: #c98a43 !important;
border: 2px solid #c98a43 !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 36px !important;
text-align: center !important;
margin: 0 !important;
box-shadow: none !important;
flex-shrink: 0 !important;
transition: all 0.25s ease !important;
}
/* Nút Thêm vào giỏ */
.single-product .single_add_to_cart_button {
order: 3 !important;
min-width: 185px !important;
height: 40px !important;
padding: 0 22px !important;
border-radius: 999px !important;
background: #fff8f1 !important;
border: 2px solid #c98a43 !important;
color: #c98a43 !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 36px !important;
text-align: center !important;
margin: 0 !important;
box-shadow: none !important;
flex-shrink: 0 !important;
transition: all 0.25s ease !important;
}
/* Hover Mua ngay */
.single-product .ux-buy-now-button:hover {
background: #b97835 !important;
border-color: #b97835 !important;
color: #ffffff !important;
}
/* Hover Thêm vào giỏ */
.single-product .single_add_to_cart_button:hover {
background: #c98a43 !important;
border-color: #c98a43 !important;
color: #ffffff !important;
}
/* Mobile: cho xuống dòng đẹp hơn */
@media (max-width: 549px) {
.single-product .single_variation_wrap,
.single-product .woocommerce-variation-add-to-cart {
flex-wrap: wrap !important;
gap: 10px !important;
}
.single-product .quantity {
width: 100% !important;
}
.single-product .ux-buy-now-button,
.single-product .single_add_to_cart_button {
min-width: calc(50% - 5px) !important;
flex: 1 1 calc(50% - 5px) !important;
}
}
Cách dùng rất đơn giản:
Vào WordPress → Giao diện → Tùy biến → CSS bổ sung, sau đó dán đoạn CSS trên vào cuối cùng và bấm Xuất bản. Nếu website có cache thì nhớ xóa cache hoặc bấm Ctrl + F5 để kiểm tra lại giao diện mới.
Đoạn CSS này đặc biệt phù hợp với các website bán hàng dùng Flatsome, WooCommerce, theme WP bán hàng, theme mới hoặc các mẫu theme WP giá rẻ cần chỉnh lại giao diện để nhìn đẹp và chuyên nghiệp hơn.
Chỉ cần chỉnh một cụm nút nhỏ thôi nhưng hiệu quả khá rõ: trang sản phẩm nhìn gọn hơn, nút mua hàng nổi bật hơn, thao tác mua hàng dễ hơn và tổng thể website cũng chỉn chu hơn.
Ai đang làm web bán hàng bằng WordPress thì lưu lại dùng khi cần nhé!
