ligisayan

Ошибку

google is not defined

исключил, когда убрал в скрипте гугл карты async а оставил только defer

В моем случае сработало задание стилей

.owl-stage {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
}

Решение

Решил вот так:

У меня сайт на wordpress, поэтому подключение и работа ajax только таким образом, который описан в статье Ajax в WordPress

<?php
//add_action('admin_print_scripts', 'my_action_javascript'); // такое подключение будет работать не всегда
add_action('admin_print_footer_scripts', 'my_action_javascript', 99);
function my_action_javascript() {
	?>
	<script>
	jQuery(document).ready(function($) {
		var data = {
			action: 'my_action',
			whatever: 1234
		};

		// с версии 2.8 'ajaxurl' всегда определен в админке
		jQuery.post( ajaxurl, data, function(response) {
			alert('Получено с сервера: ' + response);
		});
	});
	</script>
	<?php
}
?>

Решение в том, что нужно было добавить еще кусочек кода

<div class="bsnav-mobile">
    <div class="bsnav-mobile-overlay"></div>
    <div class="navbar"></div>
  </div>

и стили для него

На основе мысле EvgenyMorozov нашел решение, может быть кому-нить тоже пригодится (привожу вкратце)

1. делаем такую обертку - добавляем в каркас классы grid-row и grid-col, которые будут иммитировать bootstrap сетку.

<div class="slider grid-row" >
while ( $loop->have_posts() ): $loop->the_post(); ?>
  <div class="grid-col">
    <div class="img-wrapper">
       <?php if ( has_post_thumbnail()) {
             the_post_thumbnail('full','class=img-fluid');
        } ?>
    </div> 
   <?php endwhile; wp_reset_postdata(); ?>
</div>

2. Устанавливаем у слайдера параметры для мобильных разрешений, чтобы на них не инициализировался

{
          breakpoint: 480,
          settings: "unslick"
        }

3. Прописываем классы иммитируюшие bootstrap сетку

@media (max-width: 480px) {
	.product-row {    
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    margin-right: -15px;
	    margin-left: -15px;
	}
	.product-col-6 {
	    -webkit-box-flex: 0;
	    -ms-flex: 0 0 50%;
	    flex: 0 0 50%;
	    max-width: 50%;
	    position: relative;
	    width: 100%;
	    min-height: 1px;
	    padding-right: 15px;
	    padding-left: 15px;
	}	
}

4. Вуаля! все работает и без кривостей и костылей

Это ответ на мой вопрос

Павел спасибо! Вот этот вариант Сработал. Статья помогла

/* Internet Explorer 10+, Microsoft Edge Browser */

_:-ms-lang(x),   .my-auto {
   margin-top:100px !important;
  }

Пришел самостоятельно к такому итоговому решению, может быть кому-либо пригодится тоже.

<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet"/>
<form method="POST" name="f" id="form" action="" onsubmit="return false;">
  <p><input type="text" placeholder="Name" name="name" oninput="InputName(this.value)"><i class="fas fa-check-circle" id="circle-ok-1"></i></p>
  <p><input type="email" placeholder="Email" name="email" oninput="InputEmail(this.value)"><i class="fas fa-check-circle" id="circle-ok-2"></i></p>
  <p><input type="tel" placeholder="Phone" name="phone" oninput="InputPhone(this.value)"><i class="fas fa-check-circle" id="circle-ok-3"></i></p>
  <p><textarea placeholder="Message" name="message" id="form-control" rows="3" oninput="Textarea(this.value)"></textarea><i class="fas fa-check-circle" id="circle-ok-4"></i></p>
  <label id="sending">Sending...</label>
  <input type="submit" value="Send Message" onclick="sendForm(); return false;" />
</form>

function InputName(value) {
  if (value != '') {
    document.getElementById("circle-ok-1").style.display = "block";
  } else {
    document.getElementById("circle-ok-1").style.display = "none";
  }
}

function InputEmail(value) {
  let email = value;
  if (email.length > 0 && (email.match(/.+?\@.+/g) || []).length !== 1) {
    document.getElementById("circle-ok-2").style.display = "none";
  } else {
    document.getElementById("circle-ok-2").style.display = "block";
  }
}

function InputPhone(value) {
  let regExp = /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/g;
  var phone = value.match(regExp);
  if (phone) {
    document.getElementById("circle-ok-3").style.display = "block";
  } else {
    document.getElementById("circle-ok-3").style.display = "none";
  }
}

function Textarea(value) {
  if (value != '') {
    document.getElementById("circle-ok-4").style.display = "block";
  } else {
    document.getElementById("circle-ok-4").style.display = "none";
  }
}

function sendForm() {
  document.getElementById("sending").style.opacity = 1;
}

form {
  width: 1100px;
  max-width: 100%;
}

form input,
form textarea {
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  border: 1px solid #8e908f;
  padding: 10px;
  font-size: 20px;
}

form p {
  position: relative;
}

form p i.fas {
  position: absolute;
  right: 15px;
  top: 15px;
  display: none;
}

form p .fa-check-circle:before {
  color: green;
}

form textarea {
  height: 100px;
}

form input:focus,
form textarea:focus {
  outline-color: #ffc300;
}

form input {
  height: 50px;
}

form input[type="submit"] {
  border: none;
  background-color: #bb9300;
  color: #000;
  text-transform: uppercase;
  font-weight: bold;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

form input[type="submit"]:hover {
  background-color: #ffc300;
  cursor: pointer;
  -webkit-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
}

form ::placeholder {
  color: #8e908f;
}

#sending {
  display: block;
  text-align: center;
  padding: 15px;
  font-size: 16px;
  color: #8e908f;
  opacity: 0;
}

var tabs = document.querySelectorAll("#new-tab .carousel-indicators > *")

все гораздо проще - в файле cart.php нужно было подправить строчку - дописать в action .'#mycart'

<form action="<?php echo esc_url( WC()->cart->get_cart_url() ).'#mycart'; ?>" method="post">

Нашел решение! Вся фишка в том, что если на одной странице расположены шорткоды корзины и оформления, то при пустой корзине (если переходить на страницу оформления срабатывает редирект), таким образом получается циклический редирект. Исправляется в функции wc_template_redirect(), который расположен в
\woocommerce\includes\wc-template-functions.php
удаляется вот этот кусок

// When on the checkout with an empty cart, redirect to cart page
   elseif ( is_page( wc_get_page_id( 'checkout' ) ) && sizeof( WC()->cart->get_cart() ) == 0 && empty( $wp->query_vars['order-pay'] ) && ! isset( $wp->query_vars['order-received'] ) ) {
     wp_redirect( get_permalink( wc_get_page_id( 'cart' ) ) );
     exit;
   }

подробно объясняется с решением на форуме тут

Есть на самом деле самое правильное и крутое решение - нужно указать в настройках карусели center:true; и тогда с помощью стилей все легко решается!
фидл

С помощью сервиса рисуем нужный нам маршрут карты, затем сохраняем его в формате .gpx и уже импортируем в созданную нашу карту гугл

нашел плагин Enjoy Plugin for Instagram для wordpress
Единственное, что пока не могу разобраться, как зациклить карусель