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

Автор: Рина Левит

Share on facebook
Share on vk
Share on telegram
Share on twitter
Share on whatsapp
Как-изменить-лэйаут-страницы-продукта-в-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;
  }
}

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

Вам может быть интересно также

Понравилась статья? Поделись с другом :)

Share on facebook
Share on vk
Share on telegram
Share on twitter
Share on whatsapp

Рада вашему комментарию ⬇

Пролистать наверх