Перелічіть товари в Elementor за допомогою таблиці товарів WooCommerce

У цій публікації ми покажемо вам, як поєднати таблицю товарів Elementor та WC, щоб створити більш налаштований сайт WordPress, одночасно збільшивши продажі вашого магазину WooCommerce.

WordPress спрощує процес створення веб-сайту та швидкого запуску його роботи. WooCommerce - це plugin WordPress, який дозволяє перетворити будь-який веб-сайт WordPress на повністю працюючий інтернет-магазин. Ви ризикуєте створити сайт для копіювання, однак, якщо продовжувати використовувати параметри та функції за замовчуванням, це може не відповідати вашим комерційним потребам. Дуже важливо знайти найкращі інструменти для проектування та налаштування веб-сайту, поки це не буде тим, що ви хочете.

Багато WordPress і WooCommerce plugin s доступні для розширення функціональності вашого магазину - Факір, екс amp ля, є найпростішим інструментом для настройки сторінки продукту WooCommerce. Хоча це одна з найважливіших його переваг, вона також має деякі суттєві недоліки. Для екс amp ля, коли ви поєднуєте WordPress plugin s від різних авторів, ви біжите шанс зустрічаючи помилку сумісності та інші ускладнення; це не так при використанні таблиці продуктів WooCommerce та plugin Elementor для веб-сайтів WordPress. Ви будете мати більший контроль над зовнішнім виглядом та функціональністю вашого веб-сайту, використовуючи будь-який із цих plugin , і їх можна використовувати спільно, щоб отримати ще кращі результати.

Короткий огляд таблиць продуктів WooCommerce та елементів Elementor

Як уже зазначалося, існує великий вибір plugin WordPress, які допоможуть вам створити кращий сайт WordPress, який буде персоналізований відповідно до ваших конкретних вимог. Деякі plugin розроблені для широкого використання, тоді як інші призначені для додавання певного аспекту чи функції.

Факір колишніх 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. Віджет "Акордеон", наприклад, amp , можна використовувати для отримання того самого ефекту, який ми бачили в останньому дослідженні. Починаючи з правої області редагування, перемістіть віджет "Акордеон" у ліву область редагування.

Ви можете створити скільки завгодно окремих вкладок, натиснувши на знаки плюс, і ви можете налаштувати заголовки та текст у кожній. Крім того, ви можете додати таблицю товарів на одну або кілька вкладок, використовуючи той самий шорткод, що і раніше.

Звичайно, просто додавання основного шорткоду призведе до послідовності подібних таблиць продуктів, що, швидше за все, зовсім не те, що ви шукали. Замість цього вам потрібно налаштувати кожен шорткод відображати тільки певні продукти - для екс amp ля, елементи з певної категорії - замість продуктів.

Метод, який ви використовуєте, визначатиметься продуктами, які ви хочете включити, та опускатиметься з кожної таблиці, про яку йдеться. Для отримання додаткової інформації, будь ласка, дивіться повний посібник із налаштування коротких кодів таблиці продуктів WooCommerce.

Варто відзначити, що ви можете досягти подібного ефекту за допомогою деяких інших корисних віджетів Elementor; це включає віджет Toggle і віджет Tabs, серед інших компонентів. З точки зору представлення кількох таблиць продуктів WooCommerce у привабливій та добре організованій формі, Elementor — це ваш інструмент.

Очистіть свою недбалу розмітку завдяки безкоштовним онлайн-організаторам HTML, CSS та JavaScript!

Якщо ви хочете, щоб ваш бізнес вирізнявся серед конкурентів, подумайте над дизайном веб-сайту про електронну комерцію. Для попереднього amp ви хочете визначити найбільш ефективний спосіб демонстрації своєї продукції, в ідеалі в стилі, зручному для користувача та візуально привабливому для ока.

До щастя, з допомогою WooCommerce Таблиця продукту plugin з Факір робить це простим завданням. Шорткод вашої таблиці продуктів може бути використаний для відображення всього, що може запропонувати ваш сайт (або просто вибір), по-справжньому динамічно.

Залиште коментар

Ваша електронна адреса не буде опублікована. Обов'язкові поля позначені *