Тенденції покупок змінюються швидкими темпами, і люди, як правило, купують онлайн більше, ніж будь-коли.
Ось чому їхня потреба в магазині електронної комерції зростає, щоб задовольнити звички в Інтернет-магазинах, оскільки людям зручніше купувати Інтернет, а не виходити на покупки.
Ви також можете запустити свій магазин електронної комерції відразу, використовуючи потрібні інструменти та налаштування. І ви помітите різке зростання продажів протягом рекордного періоду часу.
Якщо ви планували запустити магазин електронної комерції і шукаєте експерта WordPress, який би зробив цю роботу за вас, дозвольте сказати, вам це не потрібно.
Так! Ви можете зробити це самостійно, оскільки вам не потрібно бути розробником WordPress або експертом з кодування, і ви можете це зробити, не маючи жодних знань щодо кодування за допомогою правильних інструментів та налаштувань.
Просто дотримуйтесь покрокового посібника зі створення сторінки магазину WooCommerce за допомогою конструктора сторінок Elementor.
Давайте викопаємо глибше, щоб дійти до суті!
- Що вам знадобиться для створення сторінки продукту за допомогою Elementor?
- Як встановити конструктор сторінки Elementor?
- Створіть сторінку продукту Elementor WooCommerce поетапно
- Мобільна оптимізація вашої сторінки продуктів WooCommerce
- Ціноутворення Elementor Pro
- Підведенню
Що вам знадобиться для створення сторінки продукту за допомогою Elementor?
plugin WooCommerce на свій сайт WordPress із репозитарію WordPress.org, а на додаток до цього вам потрібно буде встановити конструктор сторінок Elementor . Безкоштовну версію можна завантажити з WordPress.org, проте безкоштовна версія має обмежені можливості налаштування. Тому, якщо ви хочете отримати безмежні можливості налаштування, виберіть професійний Elementor і завантажте його з офіційного Elementor.org.
Як встановити конструктор сторінки Elementor?
- Для Elementor безкоштовна версія:
Перейдіть до Plugin s> Додати новий> увійдіть у конструктор сторінок Elementor> натисніть встановити та активувати.
- Для Elementor Pro:
Придбайте версію Pro у Elementor.com, а потім завантажте поштовий файл, а потім натисніть на встановити та активувати.
Створіть сторінку продукту Elementor WooCommerce поетапно
Стандартна сторінка продукту WooCommerce виглядає як будь-яка основна сторінка продукту WooCommerce без чіткості.
Однак якщо ви хочете додати голос свого бренду, ніж вам доведеться його однозначно налаштувати.
Крок 1: Перейдіть до розділу Шаблон у меню інформаційної панелі та натисніть «Додати новий».
Тепер у спадному меню виберіть пункт "Один продукт"
Найкраще, що це те, що Elementor має декілька заздалегідь виготовлених шаблонів сторінок продуктів, тому, якщо вам подобається швидкий початок, виберіть когось із варіантів, які виглядають найближче до потрібного.
Набагато простіше створити сторінку продукту із заздалегідь виготовленого шаблону, ніж створювати з нуля. Тому змініть будь-який існуючий шаблон і заощадите свій час і сили.
Ми обрали цей шаблон для нашої сторінки продуктів.
Після того, як ви вибрали свій улюблений шаблон, він переведе вас до редактора Elementor, де ви зможете налаштувати шаблон за своїм смаком.
Тут ви можете побачити різні блоки в меню зліва. Перетягніть блок, з яким ви хочете працювати.
Натисніть кнопку "+" Додати та виберіть розмір стовпця, який ви хочете додати.
Для шаблону нашого продукту ми вибрали два розміри стовпців.
Тепер додайте віджет заголовка продукту у правій колонці та додайте на ньому заголовок свого продукту.
Після додавання заголовка продукту наступним кроком є додавання над ним «Woo панірувальних сухарів».
Тепер додайте зображення продукту в лівий стовпчик і перетягніть віджет зображення виробу з лівого стовпця.
Ви можете додати оббивки до обох стовпців, щоб вони трохи відставали один від одного.
Після додавання зображення та коригування прокладки відповідно до необхідних розмірів додайте віджет рейтингу продукту під назвою продукту.
Додайте короткий опис віджета продукту під блоком огляду продукту. Ви також можете налаштувати простір між двома блоками.
Після того, як ви закінчите опис продукту та всі деталі, наш наступний крок - додати ціну товару, і для цього вам доведеться перетягнути віджет ціни під опис товару.
Після додавання вкладки ціни під описом товару ви можете налаштувати віджет ціни, вибравши параметри в меню ліворуч. Ви можете збільшити піктограму, змінити стиль шрифту, а також колір шрифту з чорного на будь-який інший колір на ваш вибір.
Тепер додайте віджет "додати в кошик" і налаштуйте його колір, шрифт або стиль з меню, якщо вам це подобається.
Тепер додайте мета-продукт у віджет цін, який відображатиме категорію продукту та серійний номер продукту.
Крок 2: додайте додаткову інформацію про товар у наступному розділі.
Створіть новий розділ двох стовпців, а потім додайте вкладки даних про продукт, включаючи опис, додаткову інформацію та огляди. А в правій частині стовпця додайте відповідний розділ продукту.
Щоб зберегти однаковий формат кожного стовпця, ви можете натиснути лівий кут кожного стовпця та скопіювати та вставити формат стовпців для кожного стовпця.
Крок 3: додайте ще один розділ додавання "розділ до продажу".
Ось як виглядатиме роздрібний розділ після додавання. Додайте трохи підкладки для вирівнювання розділу.
І нарешті, ви закінчили з розробкою сторінки вашої продукції. Тепер останнім кроком є те, де ви хочете опублікувати свій продукт? ви можете натиснути на публікацію або перейти до розділу очей у нижньому нижньому куті лівого меню та натиснути налаштування, щоб вибрати категорію продукту.
Клацніть на меню "Додати умову", а потім виберіть категорію свого продукту та натисніть "Опублікувати".
Мобільна оптимізація вашої сторінки продуктів WooCommerce
Оскільки багато трафіку збирається через смартфон, тож вам доведеться оптимізувати свій магазин для перегляду смартфонів, інакше ви можете втратити свої продажі.
Хоча WooCommerce вже оптимізований для мобільних пристроїв, але все ж можна запевнити, що шаблони сторінок вашого продукту виглядають абсолютно добре на екрані мобільних телефонів, дотримуйтесь процедури
У нижньому лівому куті інтерфейсу Elementor ви знайдете опцію «Чуйний режим».
Якщо натиснути на опцію мобільного реагування, ви можете перемикатися між параметрами перегляду мобільних пристроїв, настільних ПК та вкладок.
Клацніть на будь-який із варіантів, які ви хочете переглянути та налаштувати дизайн, якщо ви виявите будь-які ускладнення.
Тепер збережіть і продовжуйте публікувати сторінку свого продукту.
Ціноутворення Elementor Pro
Базова версія Elementor доступна безкоштовно, тоді як про-версія має три ліцензії. Якщо ви шукаєте свій особистий блог або окремий сайт, тоді вам найбільше підходить особиста ліцензія, де ви можете отримати конструктор WooCommerce разом із 90 віджетами про.
Тоді як ліцензії плюс та експертні підходять для дорослого бізнесу чи агентств з підтримкою 3 сайтів та 1000 сайтів відповідно.
Підведенню
Єдина мета конструктора сторінок Elementor — дати користувачам можливість розкрити свою творчість, не покладаючись на кодування. Elementor поставляється з різноманітними віджетами, які дозволяють створювати будь-які сторінки продуктів на основі привабливих макетів. Основних елементів WooCommerce понад 10, які дозволяють користувачам налаштувати кожен згин і вигин сторінки магазину. І якщо ви не знайшли потрібний елемент в меню Elementor, не хвилюйтеся! Є багато інших розширених налаштувань, які можуть оновити ваш арсенал і додати кілька елементів до вашої бібліотеки. Одним з них є Essential Add-ons , який постачається зі спеціальними елементами лише для WooCommerce.
