У цій публікації ми покажемо вам, як поєднати Elementor і WC Product Table, щоб створити більш персоналізований сайт WordPress, а також збільшити продажі вашого магазину WooCommerce.
WordPress спрощує процес створення веб-сайту та швидкого його запуску. WooCommerce — це plugin WordPress, який дозволяє перетворити будь-який веб-сайт WordPress на повноцінний онлайн-магазин. Ви ризикуєте створити копіювальний сайт, однак, якщо ви продовжуєте використовувати параметри та функції за замовчуванням, це може не відповідати потребам вашого бізнесу. Дуже важливо знайти найкращі інструменти для розробки та налаштування веб-сайту, доки він не стане таким, як ви хочете.
Для покращення функціональності вашого магазину доступно багато plugin amp , Elementor є найпростішим інструментом для налаштування сторінки продукту WooCommerce. Незважаючи на те, що це одна з його найважливіших переваг, він також має деякі істотні недоліки. Наприклад plugin WordPress від різних авторів, ви можете зіткнутися з помилками сумісності та іншими ускладненнями amp це не так, якщо використовувати таблицю продуктів WooCommerce і plugin для веб-сайтів WordPress. Ви матимете більше контролю над зовнішнім виглядом і функціональністю свого сайту, використовуючи один із цих plugin , і їх можна використовувати разом, щоб отримати ще чудовіші результати.
- Короткий огляд таблиці продуктів WooCommerce і фреймворків Elementor
- Щоб включити таблицю продуктів WooCommerce у текстовий редактор або віджет короткого коду, виконайте такі дії:
- Гармошки, вкладки та перемикачі можна використовувати для організації кількох таблиць продуктів.
Короткий огляд таблиці продуктів WooCommerce і фреймворків Elementor
Як зазначалося раніше, доступний великий вибір plugin WordPress, які допоможуть вам створити кращий сайт WordPress, персоналізований відповідно до ваших конкретних вимог. Деякі plugin призначені для використання у великому масштабі, тоді як інші призначені для додавання певного аспекту чи функції.
Elementor є amp першого типу програми:
Наш plugin конструктора сторінок пропонує абсолютно новий інтерфейс для створення веб-сторінок і веб-сайту WordPress. Ви отримуєте великий контроль над тим, як ваш веб-сайт зібраний, вибираючи та налаштовуючи велику бібліотеку віджетів, блоків і макетів.
Хоча таблиця продуктів WooCommerce є більш загальним рішенням, вона також більш цільова:
Цей plugin дозволяє створювати динамічні, повністю настроювані таблиці з переліком ваших продуктів і послуг WooCommerce. Однак через їх взаємодію з WooCommerce ці таблиці особливо добре підходять для відображення товарів і послуг у зручній і візуально привабливій формі для онлайн-покупців. plugin Posts Table Pro однаково взаємодіє з Elementor і перераховує будь-який тип вмісту WordPress у таблиці, а не просто продукти WooCommerce (якщо ви хочете відобразити щось окреме від продуктів, як-от публікації, сторінки чи документи), можна використовувати замість нього.
При спільному використанні Elementor і WooCommerce Product Table надають значно різноманітні можливості. Ви можете використати їх, щоб створити дуже значний вплив, який допоможе збільшити кількість продажів у вашому магазині WooCommerce.
Тепер пора братися за справу. У наступних розділах ми розглянемо кілька реальних amp того, як ви можете використовувати таблицю продуктів WooCommerce і Elementor для створення ефектів, подібних до тих, що показані вище.
Коли справа доходить до поєднання цих двох plugin , небо є межею — і це лише деякі з можливостей. Трохи спроб і помилок ви можете зібрати різні сторінки, використовуючи той самий фундаментальний підхід, який ми продемонструємо.
Перш за все, ви захочете переконатися, що обидва plugin правильно встановлено на вашому сайті. Добре, що встановлення Elementor і налаштування таблиці продуктів WooCommerce є безболісним і простим. WooCommerce також має бути встановлено та ввімкнено, перш ніж ви зможете продовжити цей крок. Тоді ви будете готові приступити до роботи над своїм проектом.
Щоб включити таблицю продуктів WooCommerce у текстовий редактор або віджет короткого коду, виконайте такі дії:
Почнемо з найфундаментальнішого та найбільш корисного застосування. Крім того, якщо ви просто хочете використовувати динамічну таблицю продуктів на своєму веб-сайті Elementor, ви можете додати її до віджета, щоб вона відображалася на передній частині веб-сайту.
Переконайтеся, що ви використовуєте редактор Elementor, коли відкриваєте будь-яку сторінку чи публікацію, щоб це зробити. Якщо вам представлено знайомий інтерфейс WordPress, натисніть кнопку «Редагувати за допомогою Elementor», щоб перейти до інтерфейсу Elementor:
Якщо ви вперше працюєте з Elementor, давайте зробимо невелику екскурсію платформою. Праворуч з’явиться велика область, де відображатиметься ваш вміст, і він оновлюватиметься в режимі реального часу, коли ви його додаватимете та змінюватимете. Ліворуч на екрані є список «віджетів», які можна перетягнути у визначену область, а потім реорганізувати та налаштувати за потреби:
Таблицю продуктів можна використовувати з різними віджетами Elementor. Однак якщо ви хочете відобразити на сторінці лише одну таблицю продуктів, це можна зробити, включивши розділ вступного тексту в HTML-код сторінки. Візьміть віджет текстового редактора та перемістіть його на порожнє місце таким чином:
Після цього ви можете клацнути всередині віджета, щоб видалити стандартний текст і замінити його будь-яким вмістом, який ви хочете. Що стосується самої таблиці продуктів, ви можете включити її, вставивши цей простий шорткод:
[таблиця товарів]
Коли ви вставите шорткод на свою сторінку, таблиця з’явиться у вказаному вами місці, що ви можете перевірити, переглянувши її на інтерфейсі:
Якщо ви хочете використовувати лише елемент для самого коду, ви можете скористатися віджетом Shortcode.
Ніколи не забувайте зберегти сторінку, коли ви закінчите розміщувати таблицю, незалежно від того, де ви вирішите її розмістити. Після цього ви, ймовірно, захочете внести деякі зміни у вигляд і функціонування таблиці.
Поверніться на інформаційну панель WordPress і перейдіть на вкладку WooCommerce > Налаштування, щоб виконати це завдання. Таблиці продуктів можна знайти, вибравши Продукти у верхній частині екрана, а потім Таблиці продуктів:
Повний список параметрів для налаштування вашої таблиці продуктів WooCommerce можна знайти прямо тут. Ви маєте повний контроль над інформацією, яка відображається в таблиці, і ви можете налаштувати її, додаючи фільтри та змінні, серед іншого. Ознайомтеся з документацією plugin , щоб дізнатися більше про різні варіанти.
Ви зможете змінювати таблицю продуктів, яку ви щойно створили за допомогою Elementor, не роблячи нічого іншого. Завершивши налаштування таблиці відповідно до ваших вимог, просто збережіть зміни, і ви готові до роботи!
Гармошки, вкладки та перемикачі можна використовувати для організації кількох таблиць продуктів.
Наведене вище рішення добре працює, якщо ви хочете представити одну таблицю з продуктами WooCommerce. Якщо ви збираєтеся створити багато таблиць, кожна з яких має різні категорії об’єктів, це не найкращий варіант.
У Elementor є кілька способів зробити це. Віджет Accordion, amp , можна використовувати для створення того самого ефекту, який ми бачили в останньому прикладі. Починаючи з правої області редагування, перемістіть віджет Accordion до лівої області редагування.
Ви можете створити скільки завгодно окремих вкладок, натиснувши на знаки плюс, і ви можете налаштувати заголовки та текст у кожній. Крім того, ви можете додати таблицю продуктів до однієї або кількох вкладок за допомогою того самого короткого коду, який згадувався раніше.
Звичайно, просте додавання основного короткого коду призведе до появи послідовності подібних таблиць продуктів, що, швидше за все, не те, що ви шукали спочатку. Натомість вам потрібно буде налаштувати кожен шорткод, щоб відображати лише певні продукти – amp , товари з певної категорії – замість усіх продуктів.
Метод, який ви використовуєте, визначатиметься продуктами, які ви бажаєте включити або виключити з кожної відповідної таблиці. Щоб отримати додаткову інформацію, перегляньте повний посібник із налаштування коротких кодів таблиці продуктів WooCommerce.
Варто зазначити, що ви можете досягти подібного ефекту за допомогою деяких інших корисних віджетів Elementor; серед інших компонентів це включає віджет Перемикання та віджет Вкладки. З точки зору представлення кількох таблиць продуктів WooCommerce у привабливій та добре організованій формі, Elementor — ваш улюблений інструмент.
Очистіть свою неохайну розмітку завдяки безкоштовним онлайн-організаторам HTML, CSS і JavaScript!
Якщо ви хочете, щоб ваш бізнес виділявся серед конкурентів, добре подумайте над дизайном веб-сайту електронної комерції. amp , ви захочете визначити найефективніший спосіб демонстрації своїх продуктів, в ідеалі в стилі, який буде зручним для користувача та візуально привабливим для ока.
На щастя, використання plugin WooCommerce Product Table з Elementor робить це завдання простим. Короткий код вашої таблиці продуктів можна використовувати для відображення всього, що може запропонувати ваш сайт (або лише вибору), справді динамічним способом.
