Как изменить лэйаут страницы продукта в Woocommerce на мобильном

Сегодня столкнулась с такой проблемой — нужно было поменять местами картинку и название на странице продукта Woocommerce для мобильных устройств. 

В шаблоны самого Woocommerce  лезть не очень хотелось. поэтому я пошла более простым способом 🙂 

Этот код вставляем в footer перед закрывающим тегом </body>

<script type='text/javascript'>
jQuery( function($) {

  mobile = $(window).width();
  if ( mobile <= 480 ){
    jQuery( ".product_title.entry-title" ).insertBefore( ".woocommerce-product-gallery" );
  }

} );
</script>

А чтобы все хорошо отображалось, ставим код ниже в style.css в дочернюю тему. 

@media (max-width:480px){
  .summary.entry-summary {
    margin-top: 10px !important;
  }
  .product_title.entry-title {
    margin-bottom: 15px;
  }
}

Короткая гифка все покажет 🙂