Огляд WoodMart 7.1. Як в Інтернет-магазині підглядати за таємними бажаннями покупців?
13 лютого 2023 року вийшло крупне оновлення преміум-теми WoodMart 7.1. Пропоную вашій увазі огляд українською мовою нових можливостей цієї функціональної теми.
WoodMart – це популярна тема WordPress для створення сучасного, функціонального та зручного Інтернет-магазину.
Ось що пишуть самі розробники про новую версію:
Ми не зупиняємося і продовжуємо працювати над новими функціями та вдосконаленнями, які роблять WoodMart найпотужнішим універсальним рішенням для Інтернет-магазинів на базі WordPress. Ми приділяємо все більше уваги функціям, пов'язаним з конверсією і витрачаємо тижні і місяці на дослідження і розробку дизайну нових готових макетів, які відповідають всім сучасним стандартам і тенденціям в ніші електронної комерції. Це допоможе вам створити свій магазин всього за кілька кліків і налаштувати його відповідно до ваших потреб.
Оновлення WoodMart 7.1 включає готовий новий демо-макет Mega electronics з сучасним дизайном і новими важливими функціями, такими як вдосконалена система відгуків, відеогалерея товарів, нові макети для сторінок магазину, товарів і оформлення замовлення, нова таблиця атрибутів, вертикальна навігація та багато іншого. Всі ці функції підвищать довіру до вашого сайту і, що дійсно важливо, зменшать кількість необхідних плагінів, роблячи сайт легшим і швидшим.
Огляд нової версії
Зміст:
00:00 Вступ.
2:01 – Нове демо Mega Electronics, нова форма пошуку та меню.
06:54 Прикріплене бокове меню категорій.
08:29 Відгуки клієнтів: критерії, сортування, вподобайки та фільтри.
18:15 Вставка відео серед зображень галереї окремого товару.
19:24 Поява навігації по зображенням галереї товарів на сторінках категорій (цикл).
22:43 Управління елементами кошика на сторінці Оформлення.
23:49 Нові макети для сторінок Магазин та Товар. Що таке Макети?
29:14 Управління стилями іконок теми.
31:44 Запитання щодо іконок та мега-меню.
37:13 Нова форма бейджів на товарах, нова форма для відображення залишків товарів на складі. Накладення темного фону при наведенні на пункти меню.
39:28 Мега-меню: управління висотою та шириною випадаючого вікна мега-меню.
43:56 WPBakery: можливість розтягування рядка та розділу.
44:26 Новий стиль форми пошуку.
45:27 Можливість задати кількість фото, що одночасно будуть відображатися в галереї на сторінці товару.
46:52 Таблиця атрибутів товару: групування характеристик по розділам.
52:57 Налаштування фону для сітки товарів на сторінці категорій та блоку Схожі товари.
54:02 Новий віджет для конструкторів – Таблиця.
55:26 Новий віджет для конструкторів – Open street map. Можливість додавання на мапу декількох маркерів.
56:43 Для віджету “Promo banner” додали можливість приховувати таймер зворотнього відліку після його завершення.
57:54 Можливість доступу до окремих сторінок сайту під час увімкнення режиму технічного обслуговування.
59:23 Пресети налаштувань: логічні умови згідно ролей користувачів.
1:01:18 Як підглядати за таємними бажаннями покупців? Список бажань покупців.
1:05:23 Стилізація адмінки сайту за допомогою CSS.
1:07:00 Відображення уведених паролей в формі авторизації.
1:08:20 Підтримка темой WoodMart різних плагінів.
1:10:31 Інші нові можливості, виправлення та оновлення в темі WoodMart.
1:12:22 Нові хуки в темі WoodMart. Що таке хуки? Приклад використання хуків.
1:19:00 Питання-відповіді: відгуки, плани на майбутнє, підтримка в темі WoodMart Gutenberg як конструктора.
➤ Підпишіться на Youtube-канал InwebPress!
Нові хуки для веб-розробників
Хуки в WordPress – це механізм, який дозволяє розширювати функціональність WordPress-сайту без зміни вихідного коду.
Хуки WordPress дозволяють вам вставляти та виконувати свій власний код у визначені моменти виконання рідних функцій WP, теми або плагінів. Таким чином, ви можете модифікувати та змінювати роботу вбудованих функцій, або додавати нові функції, що розширюють функціональність сайту.
Існує два типи хуків у WordPress – фільтри та дії. Фільтри використовуються для обробки та зміни даних, які проходять через WordPress, а дії виконуються в певні моменти, наприклад, при завантаженні сторінки або при додаванні нового запису до бази даних.
Приклади використання хуків WooCommerce є тут та тут.
Хук woodmart_shipping_progress_bar_amount
В темі WoodMart в минулих версіях розробники додали функціонал виведення панелі прогресу для отримання безкоштовної доставки. Ця панель демонструє покупцеві якою має бути кінцева підсумкова сума в кошику, щоб отримати безкоштовну доставку. Спрацьовує дана функція в декількох місцях на вашому сайті.
Так ось, завдяки хуку до цієї основної функції відображення панелі прогресу ми можемо прив'язати нашу довільну функцію, яка спрацює навіть без функціонуючої панелі прогресу для безкоштовної доставки.
Приклад функції:
add_action('woodmart_shipping_progress_bar_amount', 'wspba_inwebpress', 10);
function wspba_inwebpress() {
//Тут ваш код
}Функція виведе ваш код в наступних місцях на сайті:
- Сторінка окремого товару
- Міні-кошик в нижній області там де загальна ціна
- Сторінка Кошик, над таблицею товарів
- Сторінка Оформлення після підсумків
Хук woodmart_show_required_in_search_form
В шапці інтернет-магазину зазвичай, додають форму пошуку. В темі WoodMart пошук може шукати товари, записи, сторінки, або взагалі все. Це задається в налаштуваннях пошуку. А саму форму налаштувати та вивести в шапці можна за допомогою Конструктору шапки.
Поле для введення пошукових запитів виводиться за допомогою HTML-тегу Input.
<input type="text" class="s" placeholder="Search for products" value="" name="s" aria-label="Search" title="Search for products" required="">Тег input є одним з найбільш поширених тегів у HTML, використовується для створення різних форм на веб-сторінках, які дозволяють користувачам вводити інформацію. Тег input можна використовувати для створення текстових полів, кнопок, чекбоксів, радіокнопок, списків випадаючого вибору та інших елементів форм.
На момент останнього оновлення стандарту HTML5 (2014 рік), було визначено близько 20 атрибутів для тегу input. Не всі атрибути є застосовними для всіх типів полів введення, тому вибір конкретного атрибуту буде залежати від того, який саме тип поля введення використовується.
Хук woodmart_show_required_in_search_form дозволяє додавати для тегу Input додаткові атрибути і функції. Це розширить можливості форми пошуку та надасть додаткові параметри для кастомізації.
Приклад функції:
add_action('woodmart_show_required_in_search_form', 'wsrisf_inwebpress', 10);
function wsrisf_inwebpress() {
echo 'minlength="3" maxlength="10"';
}Вивід:
<input type="text" class="s wd-search-inited" placeholder="Search for products" value="" name="s" aria-label="Search" title="Search for products" minlength="3" maxlength="10" autocomplete="off">В цьому прикладі ми задаємо для поля мінімальну та максимальну кількість символів для введенння, відповідно від 3 до 10.
Усі ці зміни покращують функціональність та зручність користування магазину на основі теми WoodMart. Вони дозволяють створити більш привабливий та зручний магазин для ваших користувачів.
Якщо ви шукаєте преміум-тему для свого інтернет-магазину на WordPress, WoodMart може стати ідеальним вибором.
Читайте також
