Добавляем просмотр всех товаров на одной странице в WooCommerce

Недавно мы работали над проектом, в рамках которого потребовалось вывести все товары в определенной категории без разбивания их на страницы, что обычно называется «пагинацией». Пагинацию всё же нужно было оставить какой она есть по-умолчанию, однако дополнительно требовалось вывести и все товары. На многих сайта это реализовано проставлением ссылки «Смотреть всё» рядом с цифровым блоком пагинации. Мы решили сделать так же.

Проект использовал WooCommerce для своего обширного каталога товаров и мы не смогли найти настроек либо способа без добавления кода для отключения пагинации. Поэтому, кодим. Кодить будем в 4 шага.

Шаг 1. Копируем файл шаблона пагинации WooCommerce в текущую тему

WooCommerce позволяет вам перезаписать свои файлы шаблона путем копирования их в папку вашей текущей темы в подпапку с названием “woocommerce”. Давайте посмотрим как это работает в действии. Нам необходимо скопировать файл:
из

“/wp-content/plugins/woocommerce/templates/loop/pagination.php”

в

“/wp-content/themes/[theme]/woocommerce/loop/pagination.php”

Копирование файла шаблона из папки плагина WooCommerce в вашу текущую тему позволяет вам модифицировать эти файлы и безболезненно обновлять WooCommerce без потери этих изменений.

Шаг 2. Модифицируем файл шаблона пагинации для добавления туда опции «Смотреть всё»

Теперь нам нужно добавить ссылку «Смотреть всё» в наш список страниц. Он должен появляться в одной строке вместе с блоком пагинации, поэтому ссылка должна быть обернута в тег “<nav>”, предоставляемый нам плагином WooCommerce. Следующий код HTML добавляем к ссылке «Смотреть всё»:

<?php if (is_paged()) : ?> 
  <div style="float: right"><a href="../../?view=all">Смотреть всё</a></div>
<?php else: ?>
  <div style="float: right"><a href="?view=all">Смотреть всё</a></div>
<?php endif; ?>

Таким образом, подытожив вышесказанное, полный кусочек кода с тегами <nav> после модификации:

<nav class="woocommerce-pagination">
  <?php
    echo paginate_links( apply_filters( 'woocommerce_pagination_args', array(
      'base' 		=> str_replace( 999999999, '%#%', get_pagenum_link( 999999999 ) ),
      'format'		=> '',
      'current'		=> max( 1, get_query_var('paged') ),
      'total'		=> $wp_query->max_num_pages,
      'prev_text	=> '←',
      'next_text	=> '→',
      'type'		=> 'list',
      'end_size		=> 3,
      'mid_size		=> 3
    ) ) );
  ?>

  <?php if (is_paged()) : ?> 
    <div style="float: right"><a href="../../?view=all">Смотреть всё</a></div>
  <?php else: ?>
    <div style="float: right"><a href="?view=all">Смотреть всё</a></div>
  <?php endif; ?>
</nav>

Шаг 3. Выводим все товары по нажатию на «Смотреть всё»

Теперь, когда у нас появилась ссылка Смотреть всё в списке товаров, нам необходимо чтобы по клику на нее выводились все товары.

Достичь это можно путем добавления кода либо в файл function.php темы либо же вынести его в отдельный плагин. Лучше конечно вынести в плагин, ведь вы не захотите терять этот функционал при смене темы или же если возникнет необходимость использовать его в других проектах. Однако, в виду того, что эта модификация предполагает изменения и в других файлах темы, мы не сможем локализировать все проделанные изменения в отдельном плагине. Поэтому, в файл function.php вашей темы мы добавляем следующий код:

//Количество товаров для вывода на странице магазина
add_filter('loop_shop_per_page', 'wg_view_all_products');

function wg_view_all_products(){
	if($_GET['view'] === 'all'){
		return '9999';
	}
}

Этот код, собственно, сообщает функции пагинации, чтобы та выводила 9999 товаров на страницу. Поэтому, если у вас более 9999 товаров в магазине, то добавьте еще один знак, или даже два к этому значению, чтобы быть уверенным, что все товары выведутся на одной странице, однако такая страница может очень долго загружаться.

Вот и все! Теперь у вас будет ссылка «Смотреть всё» в вашей пагинации, которая будет перезагружать страницу, отображая все товары на одной.

Шаг 4. Дополнительный: Добавляем ссылку, чтобы вернуть пагинацию при просмотре всех товаров.

После того, как посетитель кликнул на «Смотреть всё», он может использовать кнопку браузера Назад, чтобы вернуться к постраничному отображению товаров. Однако, будет полезней добавить ссылку для возврата на предыдущий вариант просмотра для тех, кто решил посмотреть все товары сразу, с помощью ссылки или закладки, например. Для этого нам необходимо добавить небольшой код в наш файл pagination.php, который мы уже открыли. Сразу над нашим кодом навигации HTML в шаге 2 есть условие, которое требует следующего кода сразу после него:

if( $_GET['view'] === 'all' ) { ?>
  <div style="float: right"><a href=".">Смотреть постранично</a></div>
<?php }

Для совмещения этого кода с другим, мы модифицируем код Шага №2, который в итоге будет выглядеть так:

global $wp_query;

if( $_GET['view'] === 'all' ) { ?>
  <div id="wg-view-all"><a href=".">Смотреть постранично</a></div>
<?php }

if ( $wp_query->max_num_pages <= 1 )
  return;
?>
<nav class="woocommerce-pagination">

Теперь у нас есть ссылка «Смотреть постранично» при просмотре всех товаров на одной странице, которая вернет нас к предыдущему режиму просмотра.

Надеемся, что эта статья помогла вам добавить просмотр всех товаров на одной странице в WooCommerce.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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