تغیر استایل ویجت نظرات المنتور

تغیر استایل ویجت نظرات المنتور

در این ویدیو با استفاده از این تیکه کد سی اس اس خیلی راحت می تونید اون استایل ساده نظرات رو به ی استایل استاندارد تبدیل بکنید

کد استایل

زبان: CSS
/* =============================
   استایل کامل و حرفه‌ای نظرات ووکامرس
   ============================= 
   ----elementorico.ir----
   */

/* فاصله کلی ویجت نظرات */
.elementor-widget-woocommerce-product-rating,
.woocommerce-Reviews {
    margin: 20px 0;
}

/* تیتر نظرات */
.woocommerce-Reviews-title {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* لیست نظرات */
.woocommerce-Reviews .commentlist {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* کارت هر نظر */
.woocommerce-Reviews .commentlist li {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.woocommerce ol.commentlist li .comment-text {
    border: none !important;
    border-bottom: 1px solid #f1f1f1 !important;
    
}


/* آواتار */
.woocommerce-Reviews .commentlist li .avatar {
    float: left;
    margin-right: 15px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid #eee;
}

/* متا اطلاعات (نام و تاریخ) */
.woocommerce-Reviews .commentlist li .meta {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.woocommerce-Reviews .commentlist li .comment-author {
    font-weight: 700;
    color: #333;
    margin-right: 10px;
}

.woocommerce-Reviews .commentlist li .comment-meta .woocommerce-review-date {
    font-size: 12px;
    color: #999;
}

/* ستاره‌ها */
.woocommerce-Reviews .commentlist li .star-rating span::before {
    color: #ffc107;
    font-size: 16px;
}

/* متن نظر */
.woocommerce-Reviews .commentlist li .description {
    color: #444;
    line-height: 1.6;
    font-size: 15px;
    margin-top: 10px;
}

/* پاسخ‌ها (children) */
.woocommerce-Reviews .commentlist li .children li {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-left: 30px;
    padding: 15px;
    margin-top: 10px;
}

/* پاسخ مدیر */
.woocommerce-Reviews .commentlist li.admin-response {
    border-left: 3px solid #ffc107;
    padding-left: 15px;
}

/* فرم ارسال نظر */
.woocommerce-Reviews .comment-form {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    margin-top: 30px;
    background: #f7f7f7;
}

/* لیبل‌ها */
.woocommerce-Reviews .comment-form label {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    color: #333;
}

/* فیلدها */
.woocommerce-Reviews .comment-form input[type="text"],
.woocommerce-Reviews .comment-form input[type="email"],
.woocommerce-Reviews .comment-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce-Reviews .comment-form input[type="text"]:focus,
.woocommerce-Reviews .comment-form input[type="email"]:focus,
.woocommerce-Reviews .comment-form textarea:focus {
    border-color: #ffc107;
    outline: none;
}

/* ارتفاع textarea */
.woocommerce-Reviews .comment-form textarea {
    height: 120px;
    resize: vertical;
}

/* دکمه ارسال */
.woocommerce-Reviews .comment-form .submit {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.woocommerce-Reviews .comment-form .submit{
    background: #00a529 !important;
    color: #fff !important;
    padding: 15px 30px !important;
}

.woocommerce-Reviews .comment-form .submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255,126,95,0.3);
}

/* ستاره‌ها در فرم */
.woocommerce-Reviews .comment-form .stars {
    margin-bottom: 15px;
    font-size: 25px;
        color: #ffc107 !important;

}

.woocommerce-Reviews .comment-form .stars a {
    color: #ddd;
    font-size: 25px;
    text-decoration: none;
        color: #ffc107 !important;

}

.woocommerce-Reviews .comment-form .stars a:hover,
.woocommerce-Reviews .comment-form .stars a.active {
    color: #ffc107;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .woocommerce-Reviews {
        padding: 20px;
    }

    .woocommerce-Reviews .commentlist li,
    .woocommerce-Reviews .commentlist li .children li,
    .woocommerce-Reviews .comment-form {
        padding: 15px;
        margin-left: 0 !important;
    }

    .woocommerce-Reviews .commentlist li .avatar {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
}