Чтобы настроить фильтр категорий товаров в виджете, сначала создайте свой фасет.
Не забудьте нажать кнопку переиндексации.
Чтобы отобразить фасет в интерфейсе, поместите его в виджет «Пользовательский HTML»:
Выше отображен пример реализации кнопки сброс фильтрации.
Дополнительный CSS для стилизации кнопки «Сбросить фильтры»:
body .facetwp-facet {<br>margin-bottom: 20px;<br>}
.facet-reset {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
color: #555;
background-color: #f7f7f7;
box-shadow: 0 1px 0 #ccc;
font-size: 13px;
font-weight: normal;
text-align: center;
vertical-align: top;
}
.facet-reset:hover,
.facet-reset:focus {
border-color: #999;
color: #23282d;
background-color: #fafafa;
}
Теперь вы можете заметить, что разбиение на страницы по умолчанию продолжает появляться, даже если в этом нет необходимости после нажатия на фильтр (категория продукта).
Чтобы исправить это, добавьте это в functions.php дочерней темы :
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination' );
add_action( 'woocommerce_after_shop_loop', 'custom_woocommerce_pagination' );
/**
* Add FacetWP's pagination on WooCommerce archives.
*/
function custom_woocommerce_pagination() {
echo facetwp_display( 'pager' );
}
Если щелкнуть привязку нумерации страниц, поскольку FacetWP извлекает и отображает следующий набор продуктов с использованием Ajax, обновление страницы не будет. Это означает, что у пользователя высока вероятность того, что он увидит следующий набор продуктов, даже если он загружен вверху над окном просмотра. Чтобы решить эту проблему, мы можем использовать facetwp-loaded событие.
Создайте файл с именем say, wc.js в каталоге дочерней темы, js содержащий следующий код (спасибо Филипу Тигесену за то, что он поделился этим в Genesis Slack):
Замените .page-description на желаемый селектор, где щелчок должен прокрутить пользователя.
Загрузите вышеуказанный js-файл в архивы WooCommerce, добавив следующее в функцию, подключенную к wp_enqueue_scripts:
if ( is_shop() || is_product_taxonomy() ) {
wp_enqueue_script( 'wc', get_stylesheet_directory_uri(). '/js/wc.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
}
Следующий шаг не является обязательным но он помогает вам оформить нумерацию страниц (которая теперь появляется только при необходимости), поэтому она выглядит как нумерация страниц Genesis.
Перед:
После:
( [Рабочая станция Pro][3] является активной темой в этом случае)
Вот как:
add_filter( 'facetwp_pager_html', 'custom_facetwp_pager', 10, 2 );
/**
* Style pagination to look like Genesis.
* @link https://halfelf.org/2017/facetwp-genesis-pagination/
* @param string $output The pager HTML.
* @param array $params Style pagination to look like Genesis.
*/
function custom_facetwp_pager( $output, $params ) {
$output = '</p>
<div class="archive-pagination pagination">
<ul>';
$page = (int) $params['page'];
$total_pages = (int) $params['total_pages'];
// Only show pagination when > 1 page.
if ( 1 <a class="facetwp-page" data-page="' . ( $page - 1 ) . '">« Previous Page</a>
';
}
if ( 3 <a class="facetwp-page first-page" data-page="1">1</a>
';
$output .= ' <span class="dots">…</span> ';
}
for ( $i = 2; $i > 0; $i– ) {
if ( 0 <a class="facetwp-page" data-page="' . ($page - $i) . '">' . ($page – $i) . '</a>
';
}
}
// Current page.
$output .= '</p>
<li class="active" aria-label="Current page"><a class="facetwp-page active" data-page="' . $page . '">' . $page . '</a></li>
<p>';
for ( $i = 1; $i = ( $page + $i ) ) {
$output .= '</p>
<li><a class="facetwp-page" data-page="' . ($page + $i) . '">' . ($page + $i) . '</a></li>
<p>';
}
}
if ( $total_pages > ( $page + 2 ) ) {
$output .= ' <span class="dots">…</span> ';
$output .= '</p>
<li><a class="facetwp-page last-page" data-page="' . $total_pages . '">' . $total_pages . '</a></li>
<p>';
}
if ( $page <a class="facetwp-page" data-page="' . ( $page + 1 ) . '">Next Page »</a>
';
}
}
$output .= '</p>
</ul>
</div>
<p>';
return $output;
}
Источник записи: https://sridharkatakam.com