Как изменить лэйаут страницы продукта в 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;
}
}
Короткая гифка все покажет 🙂