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

Метод 1: медиа-запросы CSS
Один из эффективных способов изменить количество продуктов, отображаемых в строке на мобильных устройствах, — использовать медиа-запросы CSS. Медиа-запросы позволяют применять различные стили CSS в зависимости от размера экрана устройства. Настроив определённую ширину экрана, вы можете настроить макет для размещения на экранах меньшего размера. Вот пример:

/* Target mobile screens */
@media screen and (max-width: 767px) {
  .products li.product {
    width: 50%;
  }
}

Метод 2: хуки WooCommerce
WooCommerce предоставляет хуки, которые позволяют вам изменять поведение вашего магазина по умолчанию. Используя крючки, вы можете настроить количество товаров в строке на мобильном устройстве. Вот пример того, как этого можно добиться с помощью хука loop_shop_columns:

// Change number of products per row on mobile
function custom_mobile_products_per_row($columns) {
  if (wp_is_mobile()) {
    $columns = 2; // Set the desired number of products per row
  }
  return $columns;
}
add_filter('loop_shop_columns', 'custom_mobile_products_per_row');

Метод 3: собственный JavaScript
Если вы предпочитаете более динамичный подход, вы можете использовать JavaScript для изменения количества продуктов в строке в зависимости от размера экрана устройства. Вот пример использования jQuery:

// Change number of products per row on mobile
function adjustProductsPerRow() {
  if ($(window).width() < 768) {
    $('.products li.product').css('width', '50%');
  } else {
    $('.products li.product').css('width', ''); // Reset to default width
  }
}
// Call the function on window resize
$(window).on('resize', adjustProductsPerRow);

Настраивая количество товаров в строке на мобильных устройствах в WooCommerce, вы можете улучшить качество мобильных покупок на своем веб-сайте. Независимо от того, решите ли вы использовать медиа-запросы CSS, перехватчики WooCommerce или собственный JavaScript, не забудьте протестировать изменения на различных устройствах, чтобы обеспечить адаптивный и удобный дизайн.