Woocommerce, Bài Viết, Tất cả bài viết

Hướng Dẫn CSS Đánh Giá Bài Viết WordPress Cực Đẹp

Đăng vào Tháng 2 26, 2025Tháng 2 26, 2025 bởi admin

admin

26/02/2025

5 Phút đọc

27 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Hướng Dẫn CSS Đánh Giá Bài Viết WordPress Cực Đẹp – Bạn đã bao giờ nhìn thấy phần đánh giá sản phẩm trên website của mình và có cảm giác như nó vừa bước ra từ… năm 2005 chưa? Nếu có, thì xin chúc mừng, bạn đã tìm đúng bài viết rồi đấy! Hôm nay, MUATHEMEWPGIARE sẽ giúp bạn hô biến phần đánh giá từ nhàm chán thành lung linh, chuyên nghiệp và cuốn hút hơn bao giờ hết!

form danh gia bai viet san pham

Vì Sao Cần Chỉnh Sửa CSS Cho Phần Đánh Giá?

Nếu bạn đang bán hàng online hay viết blog review sản phẩm, phần đánh giá là vũ khí bí mật để tăng uy tín. Một thiết kế đẹp sẽ giúp:

Tăng trải nghiệm người dùng: Khách sẽ thích thú hơn khi để lại đánh giá.
Giữ chân khách hàng: Một form đánh giá xịn xò sẽ khiến khách không ngần ngại chia sẻ cảm nhận.
Hỗ trợ SEO: Đánh giá có thể xuất hiện trên kết quả tìm kiếm, giúp website của bạn nổi bật hơn.

CSS Biến Hóa Form Đánh Giá Đẹp Hơn Cả Mẫu Hậu

Thiết Kế Tổng Thể

Hãy bắt đầu bằng việc nâng cấp diện mạo form đánh giá với nền gradient huyền ảo:

//* Tổng thể form đánh giá 
#review_form_wrapper {
    width: 100%;
    max-width: 100%;
    padding: 40px 10%;
    background: linear-gradient(135deg, #050042, #09006a);
    color: #fff;
    font-family: 'Poppins', sans-serif;
}
//* Nội dung form 
.review-form-inner {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

//* Tổng thể form đánh giá

#review_form_wrapper {

width: 100%;

max-width: 100%;

padding: 40px 10%;

background: linear-gradient(135deg, #050042, #09006a);

color: #fff;

font-family: 'Poppins', sans-serif;

}

//* Nội dung form

.review-form-inner {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

padding: 30px;

border-radius: 15px;

border: 2px solid rgba(255, 255, 255, 0.2);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

transition: all 0.3s ease;

}

Đây là cách giúp form đánh giá nổi bật trên trang sản phẩm mà không làm người dùng “lóa mắt”.

Làm Đẹp Phần Tiêu Đề và đánh giá sao

Tiêu đề cần phải đập vào mắt người dùng ngay lập tức:

.comment-reply-title {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}
.comment-reply-title::after {
    content: "";
    width: 80px;
    height: 3px;
    background: #00bfff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
//* Đánh giá sao */
.comment-form-rating label {
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    color: #fff;
}

.stars {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.stars a {
    font-size: 22px;
    color: #888;
    text-decoration: none;
    transition: all 0.3s ease;
}

.stars a:hover,
.stars a.active {
    color: #00bfff;
    transform: scale(1.2);
}

.comment-reply-title {

font-size: 24px;

font-weight: bold;

color: #fff;

text-align: center;

text-transform: uppercase;

margin-bottom: 20px;

position: relative;

padding-bottom: 10px;

}

.comment-reply-title::after {

content: "";

width: 80px;

height: 3px;

background: #00bfff;

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%);

}

//* Đánh giá sao */

.comment-form-rating label {

font-size: 18px;

font-weight: bold;

display: block;

margin-bottom: 10px;

color: #fff;

}

.stars {

display: flex;

justify-content: center;

gap: 10px;

margin-bottom: 15px;

}

.stars a {

font-size: 22px;

color: #888;

text-decoration: none;

transition: all 0.3s ease;

}

.stars a:hover,

.stars a.active {

color: #00bfff;

transform: scale(1.2);

}

Nhờ hiệu ứng hover, mỗi lần rê chuột vào ngôi sao, người dùng sẽ cảm thấy hồi hộp y như bấm nút vote trên show truyền hình!

Nâng Cấp Ô Nhập Nhận Xét

Form nhập bình luận cần phải mềm mại nhưng không yếu đuối.

#comment {
    width: 100%;
    height: 150px;
    padding: 15px;
    font-size: 16px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    outline: none;
    transition: all 0.3s ease-in-out;
}
#comment:focus {
    border-color: #00bfff;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

#comment {

width: 100%;

height: 150px;

padding: 15px;

font-size: 16px;

border-radius: 8px;

border: 2px solid rgba(255, 255, 255, 0.3);

background: rgba(255, 255, 255, 0.1);

color: #fff;

outline: none;

transition: all 0.3s ease-in-out;

}

#comment:focus {

border-color: #00bfff;

box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);

}

Khách hàng sẽ cảm giác như đang nhập review trên một website cao cấp chứ không phải một giao diện WordPress lỗi thời.

Biến Nút Gửi Thành “Nút Gọi Hồn”

Một nút gửi đơn giản có thể giết chết trải nghiệm người dùng, hãy làm nó động đậy một chút:

.submit {
    background: linear-gradient(135deg, #00bfff, #008cff);
    color: #fff;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 191, 255, 0.3);
}
.submit:hover {
    background: linear-gradient(135deg, #008cff, #00bfff);
    box-shadow: 0 6px 15px rgba(0, 191, 255, 0.5);
    transform: scale(1.05);
}

.submit {

background: linear-gradient(135deg, #00bfff, #008cff);

color: #fff;

padding: 12px 30px;

font-size: 18px;

font-weight: bold;

border: none;

border-radius: 50px;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 10px rgba(0, 191, 255, 0.3);

}

.submit:hover {

background: linear-gradient(135deg, #008cff, #00bfff);

box-shadow: 0 6px 15px rgba(0, 191, 255, 0.5);

transform: scale(1.05);

}

Với hiệu ứng này, nút gửi không còn là một chiếc khối vuông vô tri, mà trở thành lời mời gọi đầy mê hoặc!

Kết Luận

Chỉ với vài dòng CSS, bạn đã biến phần đánh giá sản phẩm từ một chiếc hộp buồn tẻ thành một góc lung linh như cửa hàng Apple. Còn chờ gì nữa? Thử ngay trên website của bạn và đừng quên theo dõi MUATHEMEWPGIARE để cập nhật thêm nhiều mẹo hay ho khác nhé!

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

15 chức năng nâng cao giúp trang giỏ hàng WooCommerce chuyên nghiệp hơn

Dưới đây là 15 chức năng nâng cao giúp trang giỏ hàng WooCommerce trong wordpress của bạn trở nên chuyên nghiệp hơn, bạn cần thực...
Tự Động Tạo Lại Đường Dẫn Bắt Buộc Dựa Theo Tiêu Đề

Khi bạn tạo một bài viết mới trên WordPress, đường dẫn (slug) là một yếu tố quan trọng giúp tối ưu hóa SEO và cải...
20+ chức năng có thể thêm vào trang thanh toán (Checkout) của WordPress

Dưới đây là 20+ chức năng có thể thêm vào trang thanh toán (Checkout) của WordPress (WooCommerce) thông qua file functions.php: Mục LụcVì Sao Cần...
Gỡ CSS và JS Không Cần Thiết Trong WooCommerce Khi Không Phải Trang Cửa Hàng

Khi bạn sử dụng WooCommerce trên WordPress, các tệp CSS và JS của plugin này thường được tải trên mọi trang của website, kể cả...
Hướng Dẫn Lấy Bình Luận Từ Nhiều Bài Viết Trong WordPress

WordPress là một nền tảng tuyệt vời để quản lý nội dung và bài viết, và hệ thống bình luận của nó giúp người dùng...
Hướng Dẫn Đếm Tổng Số Thành Viên Có Bình Luận Trong WordPress

Việc đếm tổng số thành viên có bình luận trong WordPress là một yêu cầu phổ biến khi bạn muốn theo dõi mức độ tương...
Thêm Loại Tiền Tệ Mới Trong WooCommerce Và Quy Đổi Tỷ Giá

Để cải thiện khả năng xử lý và tối ưu hóa hiệu suất của hệ thống tiền tệ trong WooCommerce, chúng ta cần làm cho...
Một số cách đưa toàn bộ JavaScript xuống Footer

Để đưa tất cả mã JavaScript của website WordPress xuống footer (chân trang), bạn cần thực hiện một số điều chỉnh trong mã của theme,...
10+ Chức Năng Hữu Ích Cho WordPress Trong File functions.php (Tăng Tốc, Bảo Mật, Tối Ưu SEO)

Mục LụcVì Sao Cần Chỉnh Sửa CSS Cho Phần Đánh Giá?CSS Biến Hóa Form Đánh Giá Đẹp Hơn Cả Mẫu HậuThiết Kế Tổng ThểLàm Đẹp...
Hướng dẫn cách Chặn Index Subpages Trong WordPress Để Tối Ưu SEO

Trong quá trình làm SEO cho website WordPress, việc để các subpages (trang con của phân trang) bị Google index có thể gây ra vấn...
Hướng dẫn cách vô hiệu hóa WooCommerce Brands để tăng tốc độ

Mục LụcVì Sao Cần Chỉnh Sửa CSS Cho Phần Đánh Giá?CSS Biến Hóa Form Đánh Giá Đẹp Hơn Cả Mẫu HậuThiết Kế Tổng ThểLàm Đẹp...
$Rank Math SEO CSS có ảnh hưởng đến tăng tốc độ load? Cách loại bỏ Rank Math SEO CSS để tăng tốc độ load$

Rank Math SEO CSS có ảnh hưởng đến tăng tốc độ load? Cách loại bỏ Rank Math SEO CSS để tăng tốc độ load

Mục LụcVì Sao Cần Chỉnh Sửa CSS Cho Phần Đánh Giá?CSS Biến Hóa Form Đánh Giá Đẹp Hơn Cả Mẫu HậuThiết Kế Tổng ThểLàm Đẹp...
Hướng dẫn tạo tài khoản Admin WordPress thông qua theme

Vì một lý do nào đó, bạn có thể bị mất quyền truy cập vào tài khoản Admin WordPress của mình. Nếu không am hiểu...
Hướng dẫn redirect(Điều hướng) về trang cũ sau khi đăng nhập trong WooCommerce

Mục LụcVì Sao Cần Chỉnh Sửa CSS Cho Phần Đánh Giá?CSS Biến Hóa Form Đánh Giá Đẹp Hơn Cả Mẫu HậuThiết Kế Tổng ThểLàm Đẹp...
Sharecode Hướng Dẫn Tạo Shortcode Kiểm Tra Đơn Hàng Trong WordPress

Nếu bạn đang sử dụng WooCommerce và muốn khách hàng dễ dàng kiểm tra trạng thái đơn hàng của họ ngay trên website, hãy sử...
Cách SEO tiêu đề hiệu quả năm 2025 – Hướng dẫn tối ưu chuẩn Google

Mục LụcVì Sao Cần Chỉnh Sửa CSS Cho Phần Đánh Giá?CSS Biến Hóa Form Đánh Giá Đẹp Hơn Cả Mẫu HậuThiết Kế Tổng ThểLàm Đẹp...