Добавляем отзывы на сайт магазин Woocommerce

В то место, где должны быть отзывы ставим код - <?php comments_template();?>.

Теперь стилизуем его под стилилистику магазина.

Пример

/*СТИЛИ ДЛЯ ОТЗЫВОВ*/
.woocommerce-Reviews {
	font-family: Verdana;}
.woocommerce-Reviews a {
	color: #be0005!important;}
.woocommerce-Reviews textarea {
	padding: 10px;
    border: 2px solid #a2000d;
    border-radius: 5px;
    width: 100%;
    font-size: 15px;
    font-family: Verdana;}
.woocommerce-Reviews input.submit {
text-decoration: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Verdana;
    font-size: 17px;
    line-height: 1.3;
    border: 2px solid #a2000d;
    background-color: #a2000d!important;
    color: #ffffff!important;
    transition: 0.5s;}
.woocommerce-Reviews input.submit:hover {
    box-shadow: 0 0 15px 6px #0000001f!important;
    transition: 0.5s;}
.woocommerce-Reviews h2.woocommerce-Reviews-title {
	font-size: 20px;
    font-weight: 700;}
.woocommerce-Reviews .commentlist {
	padding: 0;}
.woocommerce-Reviews .comment-text {
	margin: 0!important;}
.woocommerce .star-rating span::before {
	color: #be0005;}
.woocommerce-Reviews .description {
	font-size: 14px;}

Добавим стили если нужно для полей незарегистрированных пользователей - "имя" и "почта".

CSS

.woocommerce-Reviews #author {
	padding: 10px;
    border: 2px solid #a2000d;
    border-radius: 5px;
    width: 100%;
    font-size: 15px;
    font-family: Verdana;}
.woocommerce-Reviews #email {
	padding: 10px;
    border: 2px solid #a2000d;
    border-radius: 5px;
    width: 100%;
    font-size: 15px;
    font-family: Verdana;}

Написание скрипта валидации формы отзывов

Так как у WooCommerce изначальная валидация кривая, напишем свою, которая не будет перебрасывать на другое окно при неправильном заполнении каждый раз, а будет выводить информацию об ошибках в этом же окне.

JQuery

<script>
jQuery(function($) {
	$('#commentform').on('submit', function(event) {
		if ( validateForm() ) {
			event.preventDefault();
		}
	});
  
	function validateForm() {    
		var el_l = $("#comment");
		if ( el_l.val().length < 5 ) {
			var validation = true;
			$('#comment').after('<p class="submit_comment_error">Заполните пожалуйста Ваш отзыв. Не менее 5 символов</p>');
			setTimeout(function(){
				$('p.submit_comment_error').remove();
			}, 3000);
		} 
		
		if ($('#author').length) {
			var el_l = $("#author");
			if ( el_l.val().length < 1 ) {
				var validation = true;
				$('#comment').after('<p class="submit_comment_error">Заполните пожалуйста Имя.</p>');
				setTimeout(function(){
					$('p.submit_comment_error').remove();
				}, 3000);
			} 
		}
		
		if ($('#email').length) {
			var el_l = $("#email");
			if ( el_l.val().length < 1 ) {
				var validation = true;
				$('#comment').after('<p class="submit_comment_error">Заполните пожалуйста Email.</p>');
				setTimeout(function(){
					$('p.submit_comment_error').remove();
				}, 3000);
			} 
		}

		return ( validation );
	}
});
</script>

И добавим стили для сообщения ошибка.

CSS

.submit_comment_error {
	font-family: Verdana;
    color: red;
    font-weight: 700;
    font-size: 14px;}