Тенденції покупок змінюються швидкими темпами, і люди частіше, ніж будь-коли, купують онлайн.
Ось чому зростає потреба в магазині електронної комерції, щоб задовольнити звички онлайн-покупок, оскільки людям зручніше купувати онлайн, а не ходити за покупками.
Ви також можете відразу відкрити свій магазин електронної комерції, використовуючи правильні інструменти та налаштування. І ви помітите значне збільшення продажів за рекордний період часу.
Якщо ви плануєте відкрити магазин електронної комерції та шукаєте експерта з 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 > Додати новий > увійдіть у конструктор сторінок Elementor > натисніть установити та активуйте.
- Для Elementor Pro:
Придбайте версію Pro на Elementor.com, потім завантажте файл zip, а потім натисніть «Установити та активувати».
Створіть сторінку продукту Elementor WooCommerce крок за кроком
Стандартна сторінка продукту WooCommerce виглядає як будь-яка базова сторінка продукту WooCommerce без жодної чіткості.
Однак, якщо ви хочете додати голос свого бренду, вам доведеться налаштувати його унікальним чином.
Крок 1. Перейдіть до розділу «Шаблон» у меню панелі інструментів і натисніть «Додати новий».
Тепер у випадаючому меню виберіть пункт «Один продукт»
Найприємніше те, що Elementor постачається з деякими готовими шаблонами сторінок продукту, тому, якщо ви хочете швидко почати, виберіть будь-який із варіантів, який виглядає найближче до бажаного.
Набагато простіше створити сторінку продукту на основі готового шаблону, ніж створювати її з нуля. Тому змінюйте будь-який існуючий шаблон і заощаджуйте час і зусилля.
Ми вибрали цей шаблон для нашої сторінки продукту.
Коли ви виберете свій улюблений шаблон, ви перейдете до редактора Elementor, де ви зможете налаштувати шаблон на свій смак.
Тут ви можете побачити різні блоки в лівому меню. Перетягніть блок, з яким вам подобається працювати.
Натисніть кнопку «+» Додати та виберіть розмір стовпця, який ви хочете додати.
Ми вибрали два розміри стовпців для нашого шаблону продукту.
Тепер додайте віджет назви продукту в правий стовпець і додайте до нього назву свого продукту.
Після того як ви додали назву продукту, наступним кроком буде додати над нею «Woo breadcrumbs».
Тепер додайте зображення продукту в лівий стовпець і перетягніть віджет із зображенням продукту з лівого стовпця.
Ви можете додати відступ до обох стовпців, щоб вони були трохи віддалені один від одного.
Після додавання зображення та налаштування відступу відповідно до необхідних розмірів додайте віджет оцінки продукту під назвою продукту.
Додайте короткий опис віджета продукту під блоком огляду товару. ви також можете регулювати простір між двома блоками.
Коли ви закінчите з описом продукту та всіма деталями, нашим наступним кроком буде додавання ціни продукту, і для цього вам потрібно буде перетягнути віджет ціни під опис продукту.
Після додавання вкладки ціни під описом продукту ви можете налаштувати віджет ціни, вибравши параметри в меню ліворуч. Ви можете збільшити значок, змінити стиль шрифту, а також колір шрифту з чорного на будь-який інший колір на ваш вибір.
Тепер додайте віджет «додати в кошик» і налаштуйте його колір, шрифт або стиль у меню, якщо хочете.
Тепер додайте мета продукту під віджет ціни, який відображатиме категорію продукту та серійний номер продукту.
Крок 2: додайте додаткову інформацію про продукт у наступному розділі.
Створіть новий розділ із двома стовпцями, а потім додайте вкладки з даними про продукт, включаючи опис, додаткову інформацію та відгуки. У правій частині стовпця додайте розділ пов’язаних продуктів.
Щоб зберегти однаковий формат кожного стовпця, ви можете клацнути лівий кут кожного стовпця та скопіювати та вставити формат стовпця для кожного стовпця.
Крок 3: додайте ще один розділ «розділ дорожчих продажів».
Ось як виглядатиме ваш розділ із розпродажами після додавання. Додайте відступ, щоб вирівняти розділ.
І, нарешті, ви закінчили з дизайном сторінки продукту. Тепер останній крок: де ви хочете опублікувати свій продукт? Ви можете натиснути «Опублікувати» або перейти до розділу «Око» в нижньому куті меню зліва та натиснути «Налаштування», щоб вибрати категорію продукту.
Клацніть меню «Додати умови», виберіть категорію свого продукту та натисніть «Опублікувати».
Мобільна оптимізація сторінки продукту WooCommerce
Оскільки багато трафіку проходитиме через смартфони, вам доведеться оптимізувати свій магазин для перегляду на смартфоні, інакше ви можете втратити продажі.
Незважаючи на те, що WooCommerce вже оптимізовано для мобільних пристроїв, виконайте процедуру, щоб переконатися, що ваші шаблони сторінок продукту абсолютно добре виглядають на екрані мобільного пристрою.
У нижньому лівому куті інтерфейсу Elementor ви знайдете опцію Responsive Mode.
Коли ви натискаєте опцію «Адаптивність для мобільних пристроїв», ви можете перемикатися між параметрами перегляду на мобільних пристроях, робочому столі та вкладках.
Клацніть будь-який із варіантів, які вам подобаються, і налаштуйте дизайн, якщо ви виявите будь-які ускладнення.
Тепер збережіть і продовжуйте публікувати сторінку продукту.
Ціни Elementor Pro
Базова версія Elementor доступна безкоштовно, а професійна версія постачається з трьома ліцензіями. Якщо ви шукаєте свій особистий блог або окремий сайт, тоді вам найбільше підходить особиста ліцензія, де ви можете отримати конструктор WooCommerce разом із 90+ професійними віджетами.
Ліцензії плюс і експерт підходять для розвиненого бізнесу або агентств із підтримкою 3 сайтів і 1000 сайтів відповідно.
Підведення підсумків
Єдина мета конструктора сторінок Elementor — дати користувачам можливість розкрити свій творчий потенціал, не покладаючись на кодування. Elementor поставляється з різноманітними віджетами, які дозволяють створювати будь-які сторінки продуктів на основі привабливих макетів. Базових елементів WooCommerce понад 10, які дозволяють користувачам налаштовувати кожен згин і вигин сторінки магазину. І якщо ви не знайшли потрібний елемент у меню Elementor, не хвилюйтеся! Є багато інших розширених налаштувань, які можуть покращити ваш арсенал і додати декілька елементів до вашої бібліотеки. Одним із них є Essential Add-ons , який постачається зі спеціальними елементами лише для WooCommerce.
