Как реализовать прокрутку категорий товаров при нажатии в мобильной версии сайта на WordPress с использованием Woocommerce?

Как сделать так, чтобы при нажатии на категорию в мобильной версии сайта nowal-wear.ru, страница автоматически прокручивалась вниз к товарам, а не оставалась вверху?
Изображение к вопросу
Изображение к вопросу
  • 3 октября 2023 г. 11:28
Ответы на вопрос 2
Для реализации прокрутки категорий товаров при нажатии в мобильной версии сайта на WordPress с использованием Woocommerce, вам понадобится дополнительный JavaScript код.

1. В админ-панели WordPress перейдите в раздел «Внешний вид» (Appearance) -> «Редактор» (Editor).

2. Найдите и откройте файл functions.php вашей темы.

3. Вставьте следующий код в конец файла functions.php:

```javascript
function scroll_to_products() {
    if (wp_is_mobile()) {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('.product-category a').click(function(e){
                    e.preventDefault();
                    $('html, body').animate({
                        scrollTop: $('#content .products').offset().top
                    }, 'slow');
                });
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'scroll_to_products');
```

4. Сохраните изменения.

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

1. Необходимо добавить идентификатор (id) к элементу, до которого нужно прокрутить страницу. Например, можно добавить id к div с товарами следующим образом: 
товары...
. 2. В ссылке на категорию нужно указать якорь с id этого элемента. Например, ссылка будет выглядеть так: Категория. 3. При клике по данной ссылке произойдет прокрутка страницы к соответствующему элементу.
Похожие вопросы