Коли справа доходить до створення онлайн-магазину, WooCommerce – це найпопулярніший plugin . Надзвичайно просто створити інтернет-магазин і почати продавати свої товари, як тільки ви закінчите. Avada надає комплексну підтримку та інтеграцію дизайну для WooCommerce, дозволяючи вам створити магазин вашої мрії, а також гарантувати, що він виглядає саме так, як ви задумали.
Avada надає вам можливість налаштувати зовнішній вигляд вашого веб-сайту, що не відрізняється від інтеграції WooCommerce. Використовуючи нашу популярну мережу розширених опцій, ви можете вибрати з широкого діапазону налаштувань для різноманітних можливостей дизайну, зокрема:
- WooCommerce має власну панель глобальних параметрів Avada, окрему від основної панелі глобальних параметрів Avada.
- Параметри сторінки Avada доступні для кожного продукту.
- Avada Builder дозволяє створювати дизайни сторінок продукту шляхом перетягування елементів.
Щоб створити свій сайт електронної комерції за допомогою Avada.
По-перше, ми повинні встановити wooCommerce в Avada.
- Встановлення WooCommerce – покрокові інструкції
- Як призначити сторінку магазину вашому веб-сайту
- Створення ваших продуктів
- Створення продукту Zoom Effect
- Налаштування параметрів розміру зображення продукту в WooCommerce.
Встановлення WooCommerce – покрокові інструкції
Перейдіть до Avada > Plugin / Додатки та знайдіть plugin , як показано на знімку екрана нижче.
Крок 1 plugin WooCommerce .
Крок 2. У спадному меню виберіть «Встановити».
plugin буде встановлено та активовано автоматично.
Крок 3 – Після цього має відобразитися майстер налаштування WooCommerce. Якщо ви імпортуєте одну з наших демонстрацій Woo, наприклад Modern Shop або Classic Shop, ви можете пропустити цей крок, не ризикуючи втратити свої дані. Щоб перейти вперед, виберіть у спадному меню «Не зараз». Якщо ви не імпортуєте одну з наших демонстраційних версій Woo, перейдіть до наступного кроку, натиснувши «Let's Go!» кнопку, щоб почати процес налаштування.
Крок 4. Дотримуйтеся вказівок на екрані та вказівок, щоб завершити процес і ввести необхідну інформацію про свій магазин. Натиснувши кнопку «Створити свій перший продукт», коли ви закінчите, ви зможете продовжити створення свого першого продукту. Крім того, ви можете повернутися до інформаційної панелі WordPress, натиснувши посилання під вікном налаштування.
Як призначити сторінку магазину вашому веб-сайту
У рамках звичайного процесу інсталяції WooCommerce слід запустити майстер налаштування, який дозволить вам налаштувати свій магазин і призначити клієнтам сторінки вашого магазину. Більше інформації про сторінки, які створює майстер налаштування, можна знайти в цьому документі WooCommerce.
Крім того, якщо майстер налаштування не відображається або якщо ви скасуєте його з будь-якої причини, ви завжди можете повернутися до майстра налаштування, вибравши Майстер налаштування в меню «Довідка» на будь-якій сторінці WooCommerce, яке можна знайти у верхньому лівому куті вікно.
Ви можете вручну налаштувати сторінку магазину, перейшовши на вкладку «Продукти» в налаштуваннях WooCommerce – WooCommerce > Налаштування > Продукти – і вибравши зі спадного меню сторінку, яка буде основною сторінкою магазину. Потім WooCommerce відобразить ваші продукти на цій сторінці в результаті ваших дій.
Решту сторінок можна налаштувати на вкладці «Додатково», яка знаходиться в WooCommerce > Налаштування > Додатково .
Створення ваших продуктів
Крок 1. На бічній панелі адміністратора WordPress перейдіть до вкладки «Продукти» > «Додати продукт».
Крок 2 – у верхній частині сторінки введіть назву свого продукту.
Крок 3. Заповніть поле вмісту публікації текстом з опису продукту. У цьому розділі відображатиметься вся інформація про продукт.
Крок 4. Заповніть поле « Дані про продукт » усією інформацією про продукт. Наприклад amp ціна, артикул і доставка – усі можливі варіанти.
Крок 5. У полі « Короткий опис продукту » введіть стислий опис продукту, який відображатиметься поруч із основними зображеннями.
Крок 6 – Основне представлене зображення слід розмістити під полем « Зображення продукту » праворуч на сторінці; Це необхідно заповнити для кожного продукту.
Крок 7 – Додайте більше зображень у поле « Галерея продуктів », якщо ви хочете використовувати галерею зображень замість одного зображення.
Крок 8. У полі « Категорії продуктів » введіть категорії, які стосуються ваших продуктів. Далі заповніть порожні поля відповідними тегами для вашого продукту в полі « Теги продукту ».
Крок 9. Коли ви введете всю необхідну інформацію, натисніть кнопку « Опублікувати », і товар з’явиться на головній сторінці вашого магазину.
Створення продукту Zoom Effect
Якщо ви використовуєте Avada Layouts, вам потрібно переконатися, що опцію масштабування зображень продуктів WooCommerce увімкнено в Avada > Параметри > WooCommerce > Загальні WooCommerce > Параметр масштабування зображень продуктів WooCommerce або на вкладці Woo Product Images Element General > Масштабування зображень продуктів , якщо ви використовуєте макети WooCommerce.
Ширина зображень продуктів WooCommerce – ширина вашого основного зображення (див. налаштування нижче) і фактичний розмір завантаженого зображення мають бути більшими за налаштування Avada > Параметри > WooCommerce > Загальні WooCommerce > Ширина зображень продуктів WooCommerce або максимальну ширину зображень продуктів. в елементі зображень продуктів Woo. Ширина стовпця контейнера для окремої галереї продуктів визначатиметься вибраними параметрами. Після того як ви зробите необхідні налаштування, ви зможете встановити ширину головного зображення WooCommerce.
Ширина основного зображення WordPress – налаштування ширини основного зображення WooCommerce можна знайти в настроювачі вашого веб-сайту WordPress. На інформаційній панелі WordPress перейдіть до Вигляд > Налаштувати > WooCommerce > Зображення продуктів , де ви знайдете параметр Ширина основного зображення; Це визначить фактичний розмір зображення, що відображається в галереї.
Чим детальнішим буде ваш ефект масштабування, тим більший розмір зображення ви встановили для свого зображення. Щоб уточнити, якщо розмір зображення в налаштуваннях WooCommerce відповідає ширині зображення в глобальних параметрах Avada, масштабування не буде видно, коли миша наведе на зображення на сторінці. Крім того, розмір фактичного зображення, яке ви завантажуєте, має бути таким самим або більшим, ніж налаштування ширини основного зображення на дизайні вашого веб-сайту.
Переконайтеся, що ви відновили свої мініатюри після зміни розмірів зображень WooCommerce; Це застосує нові розміри зображень до будь-яких зображень, які вже завантажено на ваш веб-сайт. Для цього можна використати plugin Regenerate Thumbnails.
Налаштування параметрів розміру зображення продукту в WooCommerce.
WooCommerce містить параметри для налаштування розміру зображень продуктів у розділах «Каталог» і «Зображення окремих продуктів» магазину. Крім того, існують спеціальні налаштування Avada, які працюють у поєднанні з розмірами зображень, які використовує ваш магазин WooCommerce. Налаштовуючи ці параметри розміру зображення, важливо пам’ятати, що також потрібно враховувати параметри глобальних параметрів Avada. Пізніше ми розглянемо кожен із цих варіантів більш детально.
Припустімо, що зображення, які ви завантажуєте для своїх продуктів, у джерелі менші за розміри зображень, указані у ваших налаштуваннях WooCommerce. У цьому випадку ви можете помітити певні візуальні розбіжності в макеті передньої частини сторінок вашого магазину; Це ні в якому разі не помилка. Це просто тому, що ваші зображення були занадто малі, щоб налаштування WooCommerce не вплинули на них. Ви можете розглядати ці налаштування як максимальну ширину та висоту ваших зображень з точки зору розмірів зображення. Усе, що впадає нижче вказаного ліміту, не буде змінено.
Налаштовуючи свій магазин, переконайтеся, що враховуються як налаштування розміру зображення WooCommerce, так і фактичний розмір ваших зображень. Підводячи підсумок, ваші зображення мають бути такого ж розміру, як або більше, ніж налаштування розміру зображення у вашому магазині WooCommerce.
Будь-які зміни в налаштуваннях розміру зображення вимагатимуть повторного створення ескізів, щоб вони застосували зображення, які вже завантажено на ваш сайт. Тому настійно рекомендується використовувати plugin Regenerate Thumbnails. Крім того, розміри зображення можна налаштувати за допомогою наведених нижче кроків.
Крок 1. На бічній панелі адміністратора перейдіть на вкладку « Вигляд », а потім на вкладку « Налаштувати », щоб почати налаштування сайту.
Крок 2. Перейдіть на WooCommerce у верхній частині сторінки.
Крок 3. Зображення продукту у вікні конфігурації .
Крок 4. Коли ви завантажуєте зображення на сторінки окремих продуктів, виберіть параметр ширини основного зображення. Ширина мініатюри – це ширина мініатюр ваших продуктів у каталозі. Заповніть порожні поля бажаним значенням ширини.
Крок 5. Щоб повторно створити мініатюри після того, як ви змінили розміри зображень і зберегли їх, вам знадобиться використовувати plugin , який можна знайти в Plugin . Спочатку встановіть plugin , а потім перейдіть на WP Admin > Tools , де ви можете повторно створити ескізи зображень, створивши зображення нових розмірів.
