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

woocommerce-view-all[1]

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

Проект использовал 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	=> '&larr;',
      'next_text	=> '&rarr;',
      '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.

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

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

VN:F [1.9.22_1171]
Rating: 5.0/5 (4 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Дмитрий

    Здравствуйте, а ка можно реализовать пагинацию а статистических страницах?
    Допустим я не хочу использовать товарные категории от woocommerce, а просто с помощью шорт коды вывожу товары определенной категории на статистической странице, но у меня не как не получается решить вопрос с пагинацией, т.е. показывает к примеру 10 товаров из 100 , помогите решить вопрос

    • Михаил

      У меня такая же самая проблема.

  • AkylaShark

    Не хватает поделиться ВКонтакте под статьей.

  • Denis Kuzmin

    Доброго времени суток.

    Могу ли я из внешних систем манипулировать корзиной пользователя?

    Пользователь из формы не связанной с ВуКомерц делает заказ а заказ отображается у него в корзине ?

    • ADv

      Не уверен, но попробуйте посмотреть в сторону WooCommerce REST API

  • Алексей

    Здравствуйте! Кнопки выводятся, но при нажатии кнопки «Смотреть все» выводятся так же 12 товаров

  • Кирилл

    Добрый день. У меня немного другая проблема, сделал сайт, постраничная навигация есть, но при нажатии на какую-нибудь страницу, у меня обновляется список товаров в этой же странице, к адресной строке не добавляется номер страницы. Может вы знаете как это исправить?
    Код в файле pagination.php немного отличается от того, что написано у вас, но при замене на ваш код, у меня пагинация пропадает вовсе.

    Код pagination.php:

    max_num_pages

    esc_url_raw( str_replace( 999999999, ‘%#%’, remove_query_arg( ‘add-to-cart’, get_pagenum_link( 999999999, false ) ) ) ),
    ‘format’ => »,
    ‘add_args’ => false,
    ‘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
    ) ) );
    ?>

    Заранее большое спасибо!

Scroll To Top