Як створити простий товар у магазині WordPress – WooCommerce

Як створити новий товар WooCommerce з нуля

В цьому випадку йдеться про те, що в редакторі товару WooCommerce абсолютно всі дані вносяться наново, в чисті поля та блоки редактора.

Назва товару – заголовок H1

Найперше – ставимо назву товару у вікно заголовка H1:

Втім, тут недоречно поставити аби-що. Оскільки це заголовок H1, найголовніший на сторінці, він має чітко визначати зміст сторінки і для людей (відвідувачів сайту), і для пошуковиків. Він не має бути лаконічним до такої міри, щоб можна було сплутати з іншими подібними, але й не має бути довгим, як полярна ніч: все, що потрібно, але жодного зайвого знака.

*** про всяк випадок – бо трапляються ще любителі подібного… ЖОДНИХ смайликів, емодзі та подібного в заголовку H1 не має бути, так само, як і елементів html розмітки, хіба що вкрай рідко трапляється, коли все ж необхідно поставити знак переносу на кшталт <br>, якщо без цього у фронті заголовок виглядає неоковирно.

В якості приклада розглянемо заголовок:

Тут ми бачимо те, що необхідно, і водночас – достатньо:

• Тип товару – Електротрицикл;
• Бренд – Corso;
• Модель – SIG-8 Pro;
• найважливіші дані, що характеризують модель, і до того ж, для деяких товарів однієї моделі – можуть бути варіативними – 1200W 72V/28Ah – потужність електродвигуна, і напруга та ємність АКБ

Заголовок такої довжини зазвичай вкладається в два рядки у фронті:

Втім, іноді трапляються випадки, коли повноцінну назву товару важко вмістити в подібну кількість знаків, і вона значно довша. В таких випадках все ж не варто завзято обрізати, може бути розумнішим рішенням підправити стилі, а саме розмір шрифту, для заголовка H1 індивідуально для відповідної сторінки – зменшити розмір шрифта, а відтак – візуально скоротити заголовок.

Після того, як заголовок вставлено на місце, доречно (але не обов’язково) одразу опублікувати (зберегти) новий товар, і далі просуватися вже в режимі редагування.

За бажанням, якщо товар створюється в магазині, вже відкритому для відвідувачів, замість публікації можна зберегти як чернетку – кнопка “Зберегти” ліворуч вгорі цього блока. Тоді товар буде збережено, але з фронту, для відвідувачів, він буде невидимим; водночас будь-хто з адмінів, редакторів тощо, хто залогінився в адмінці, зможуть переглядати сторінку товару і з фронту також.

Таким чином, поставивши заголовок H1 (назву товару), і після збереження чи публікації, ми вже маємо нову окрему сторінку товару, котру далі доводимо до ладу, редагуючи вміст.

Після публікації або збереження в блоці з’явиться дата публікації і час, в подальшому за потреби їх можна буде змінювати (редагувати).

Слаг (частина посилання, ярлик)

Слаг (частина посилання, ярлик) – це фінальна частина посилання на сторінку. Наприклад, для цієї сторінки з трициклом, в її посиланні:

https://name.com.ua/product/elektrotrytsykl-corso-sig-8-pro-1200w-72v-28ah/

… слаг виділено червоним. тобто, в посиланні, після власне домену /name.com.ua/, і типу сторінки /product/, зазначено слаг /elektrotrytsykl-corso-sig-8-pro-1200w-72v-28ah/, тобто – та частина посилання, котра належить виключно цій сторінці.

Візуально слаг виглядає:

• Вгорі – адресний рядок браузера;
• Посередині, під заголовком H1- посилання (клікабельне) в редакторі товару; тут можливо слаг редагувати;
• Внизу – в блоці “Частина посилання”, де також можна редагувати слаг.

Редагування хоч в посиланні під заголовком, хоч в блоці “Частина посилання”, дає однаковий результат, змінюються обидва.

Водночас слаг – це частина посилання, що має бути написана зрозумілим для людини чином. Тобто тут, попри трансліт латиною, слаг легко читається людиною, з усвідомленням змісту написаного. Єдиний нюанс: в посиланнях доречні літери (в нижньому регістрі, втім тут ВордПресс сама виправляє регістр), цифри, вкрай небажані пробіли, доречні дефіси “-“, припустимі нижні підкреслювання “_”, і не проходять будь-які інші знаки, відтак з цього фрагменту назви “…1200W 72V/28Ah…” дефісами замінені не лише пробіли, а й слеш “/”.

Щодо кирилиці в посиланнях, зокрема в слагу. Вона не заборонена. До того ж – не можна з певністю стверджувати, що за кирилицю в посиланнях пошуковики якось помітно “карають” в індексації відповідні сторінки та сайти. Відтак, слаг виду:

https://name.com.ua/product/електротрицикл-corso-sig-8-pro-1200вт-72в-28аг/

… цілком має право на існування, і в деяких випадках може бути цілком доречним – задля зручності читання тими відвідувачами, в котрих з читанням латини туго. Втім, імхо, для магазину, а надто для такого, котрий пропонує імпортний товар, дані котрого все одно – суцільна латина, навряд чи доцільно вживати в посиланнях кирилицю, головним чином через те, що посилання, що містять кирилицю, в сніппетах пошуковиків, месенджерів тощо (це коли посилання вставляється, наприклад, в допис в месенджері, в імейл та в інших подібних випадках) виглядають вкрай неоковирно – кирилиця там заміняється довжелезними рядками абракадабри, тобто знаками, зрозумілими лише роботам, типу “%D0%BF%D0%BE%D0%B3%D0%BE%D0%B2%D0%BE%D1%80%D0%B8%D0%BC-%D0%BE-%D”.

Для коректної транслітерації української в латину радив би перевірені безплатні онлайн-сервіси, зокрема https://www.grafiati.com/uk/transliteration/ Там єдина незручність – пробіли та слеші заміняти дефісами доведеться вручну. Натомість сама транслітерація абсолютно коректна.

Категорично не радимо використовувати старий плагін Rus-to-Lat. По-перше, правила трансліту з російської інші, ніж з української. По-друге, у автора плагіна, схоже, і з російською не дуже – там купа помилок трансліту з ру на лат. Ну, і цей старий плагін вже не підтримується, відтак – може просто викликати аварію на сайті через несумісність з чимось.

Можливо, теж доволі старий плагін Cyr-To-Lat, про котрий йдеться на https://embo-studio.ua/blog/obzor-rustolat-pravilnaya-nastrojka-chpu-v-wordpress/ – не має вад, втім те треба перевіряти. Також там стверджується, що сучасні Cyr3Lat або Cyrylica to Latin – нормальні – варто перевірити. Але як на мене – надійніше руками, щоб бачити результат.

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

Додаємо слаг

Для початку, готуємо трансліт. На цьому ж прикладі, з використанням https://www.grafiati.com/uk/transliteration/ :

Копіпастимо назву товару “Електротрицикл Corso SIG-8 Pro 1200W 72V/28Ah” до транслітератора, в поле української, отримуємо:

Бачимо, що трансліт містить пробіли та слеш, це неприйнятно. Тож на полі ліворуч руками заміняємо їх дефісами (тут це робити зручніше, аніж в готовому трансліті, й на порядок менша ймовірність припуститися помилки), отримуємо:

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

Коли буде потрібно, можемо скопіювати готовий трансліт або через виділення, як в тексті, або кнопкою копіювання до буферу обміну, котра в формі праворуч знизу.

Звертаємо увагу: коли при створенні нового товару ми ще не поставили на своє місце заголовок H1, під ним ніякого посилання, включно зі слагом, немає:

Коли ми поставимо заголовок на місце, посилання з’явиться само, не одразу, іноді через доволі довгий час (якщо ми не використовували кнопку опублікувати/оновити), АЛЕ!!! – вся кирилиця, котра була в заголовку – буде і в слагу. Пробіли та слеши, інші недозволені знаки, які трапляться, Вордпресс повикидає сама, замінить дефісами, але кирилицю транслітувати – не буде. В такому випадку можна відредагувати прямо в посиланні, де для цього є кнопка “редагувати”, втім це не дуже зручно через малесеньке віконце редагування, до того ж – ще й чекати, поки те посилання з’явиться…

Імхо, зручніше просто поставити копіпастом трансліт у блок “Частина посилання”, і за першого ж збереження редакції сторінки, слаг скрізь буде такий, як треба, в цьому випадку так:

І в результаті отримаємо саме це, скрізь.

• Вгорі – адресний рядок браузера;
• Посередині, під заголовком H1- посилання (клікабельне) в редакторі товару; тут можливо слаг редагувати (зелена стрілка);
• Внизу – в блоці “Частина посилання”, де також можна редагувати слаг.

Редагування хоч в посиланні під заголовком, хоч в блоці “Частина посилання”, дає однаковий результат, змінюються обидва.

Тож раджу, бо так простіше, ставити внизу, в “Частина посилання”. Якщо там немає цього блока – увімкніть його вгорі, як саме – зазначено у статті, в розділі “Елементи редактора товару WooCommerce – де, що, навіщо, як”, підрозділ “Налаштування редактора товарів“.

Короткий опис товару

Короткий опис товару має в декількох словах доповнити заголовок, щоб відвідувач краще зрозумів, що саме за товар на сторінці, без заглиблення в подробний опис. Саме так і є на скріні:

Контент цього блоку у фронті зазвичай знаходиться під ціною товару, вище варіацій (якщо такі є).

В редакторі блок “Короткий опис товару” знаходиться з самого низу, нижче можуть бути (за наявності) лише поля плагінів, наприклад SEO, або інших.

Взагалі-то, редактор цього поля дозволяє написати там багато, наставити зображень, відео тощо. Втім, велика кількість контенту в цьому блоці потребуватиме місця в макеті (з фронту), тож почне витискати всі елементи, котрі нижче нього, донизу. При тому, завширшки залишатиметься, як є. Отже, велика кількість контенту, призведе до того, що блок з фронту перетвориться на потворний височенний стовпчик праворуч, котрий стирчатиме з масиву іншого контенту, запханого глибоко донизу. Відтак – лаконічність, і ще раз лаконічність. Єдине, що може бути доцільним – поставити, приміром, невеличкого розміру лого виробника товару, або щось таке, десь біля тексту.

Отже: формулюємо короткий опис, котрий може й містити заголовок (назву товара) 1:1, і додаємо ще декілька слів, котрі пояснятимуть читачеві, про який товар йдеться. На скрінах вище бачемо все в комплекті – короткий опис бекенд і з фронту, і всі інші елементи поряд з фронту.

За потреби, тест може форматуватися – якісь частини тексту отримувати інший колір, виділятися жирним чи курсивом, можна прикрутити посилання тощо – все в шапці редактора.

Також редактор дозволяє вставляти код – якщо це комусь край як потрібно. Як на мене, така потреба – то геть унікальні випадки.

Бренди

Оскільки, проставивши короткий опис товару, ми все одно вже в нижній частині редактора, звертаємо увагу праворуч, і бачимо блок “Бренди”, тобто – торгові марки виробників.

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

Закріплення за брендом робитьбся дуже просто – ставимо “галочку” там, де треба, та й по всьому.

Вкладка “Часто використовувані” може бути корисною, якщо перелік брендів великий – тоді на цій вкладці можна з меншого числа обрати розповсюджений.

В нижній частині є опція “+ Додати новий бренд” – його, за відсутності, можна додати просто тут, і він буде закріплений не лише за цим товаром, а з’явиться в переліку цього блока скрізь, відтак його можна буде призначати іншим товарам; також він з’явиться на відповідній сторінці адмінпанелі. Якщо бренд кириличний – не забуваємо потім для нього зробити трансліт слагу.

Позначки товарів

“Позначки товарів” – те саме, що й “Мітки”, або “Теги”. Знаходиться в консолі праворуч, над Бренди.

Дозволяє прикріпити/відкріпити товар до/від певної мітки (тегу) товару – у віконці можна вбити перші літери, система пошукає, за наявності – відобразить відповідну мітку, її залишиться клікнути для закріплення.

Закріплення за мітками (тегами) корисно для пошуку або фільтрування за мітками, відображення каталогу за міткою окремо від загального асортименту магазина, а також дозволяє відбирати за мітками товари для відображення у віджетах товарів на окремих сторінках, наприклад – на головній сторінці (“вітрині”) магазину тощо.

Нижче віконця відображуються вже прикріплені до товару мітки (за наявності), а також можуть відображатися найчастіше використовувані мітки для прямого вибору. Якщо ж потрібна мітка ще не створена, її можна просто вписати повністю до віконця, й натиснути “Додати” – вона прикріпиться до товару, і водночас з’явиться на сторінці міток товару в консолі адмінки. Можна також проставити до віконця декілька міток, розділивши їх комами (з пробілом після коми, перед наступною міткою), і додати групою. Додані тут мітки з’являться на відповідній сторінці міток у адмінці, на котрій зможемо зробити зокрема й трансліт ярликів (слагів) для кириличних міток.

Як приклад, саме для цього товару, можна використати мітки на кшталт “Трицикл”, “Вантажний”, “Електричний трицикл”, і все, що вважатиметься за доцільне. Але не варто використовувати довгі словосполучення, тим більше – цілі речення.

Якщо до певного часу мітки не актуальні – можна їх і не проставляти, це – не обов’язкове поле.

Категорії товарів

Знаходиться в консолі праворуч.

Шляхом проставлення галочок дозволяє прикріпляємо товар до певної(них) категорії(й) товару; на скріні чудово видно, про що саме йдеться.

Закріплення за категорією для магазину з чисельним різноплановим товаром обов’язкове не лише тому, що відображається у фронті (втім – не завжди, залежить від теми, та налаштувань), а головним чином тому, що дозволяє пошук або фільтрування за категорією, відображення каталогу категорії окремо від загального асортименту магазина, а також дозволяє відбирати за категорією товари для відображення у віджетах товарів на окремих сторінках, наприклад – на головній сторінці (“вітрині”) магазину.

Вкладка “Часто використовувані” може бути корисною, якщо перелік категорій великий – тоді на цій вкладці можна з меншого числа обрати розповсюджений.

В нижній частині є опція “+ Додати нову категорію” – її можна додати просто тут, і вона буде закріплена не лише за цим товаром, а з’явиться в переліку цього блока скрізь, відтак за потреби її можна буде призначати іншим товарам; також вона з’явиться на відповідній сторінці адмінпанелі.

Отже, закріплення товару до категорії – дуже просте. Але є ще корисна можливість: товар може бути закріплений за декількома категоріями водночас. Іноді це доцільно. Якщо суто за класифікацією товарів, то товар “електровелоскутер”, наприклад, може бути закріплений і в категорії “Електровелосипеди”, і в категорії “Електроскутери”. Втім, можуть бути і якісь категорії іншого роду. Наприклад, можна створити категорію “Сезонний розпродаж”, і потрібні товари, окрім “рідних” категорій, закріпити і за цією специфічною також. Відповідні товари будуть відображатися і у своїх звичайних категоріях, і в такій додатковій.

Якщо товар закріплений за двома або більшою кількістю категорій, котрась з них буде “головною” (це зокрема потрібно для SEO). Якщо ми бачимо, що головною є не та, що треба, категорія – використовуємо “зробити основним”, як на скріні. Звісно, в подальшому можна міняти закріплення за категоріями, і статус головної з них для окремого товару.

Зображення товару

Перш, ніж завантажувати будь-які зображення (фото) товару, чи взагалі будь-які зображення на сайт, будь-куди, варто зазначити головне правило:

НЕ СТАВИТИ ФОТО “ЯК Є”

Тобто:

• Не ставити фото довільних розмірів, занадто маленьких, або, тим більше, занадто великих;
• Не ставити (бажано) для товара фото різних розмірів, що відрізняються занато сильно;
• Не ставити (категорично) фото різних пропорцій, наприклад – квадратні, а між ними – прямокутні, де одна сторона дуже відрізняється розміром від суміжної – бо тоді фото на сторінці товара (при зміні) будуть стрибати;
• Не ставити (категорично) фото важких форматів, типу PNG, окрім випадків, коли це необхідно з якихось раціональних міркувань;
• Не ставити фото, розмір котрого менший за відображення у фронті – його розтягне, але й розмаже;
• Не ставити фото з абстрактиним чи кривими назвами файлів, на кшталт “image759030jf nghcf8496kyg8fj5.jpg” – таке бачимо на кожному кроці, і це – вкрай некорисно…

Тобто, фото, перш ніж потрапити на сторінку товару, і взагалі на будь-яку сторінку сайту, має бути підготовленим. Детально про це можна дізнатися у “Як підготувати зображення для сайту”; в цій статті ми це пропускаємо.

Головне зображення товару

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

… і саме це фото буде відображуватися в сніппетах пошукових систем.

Це “Зображення товару” виглядатиме саме так, як на скріні велике зображення вгорі. Всі інші зображення з “Галереї товару” виглядатимуть, як нижче між червоними стрілками, і лише за кліком в будь-яке з них, відповідне зображення відобразиться у верхньому великорозмірному блоку. Водночас і головне зображення також буде в цій каруселі – на скріні воно перше ліворуч. Наведена рамка означає, що саме це зображення наразі демонструється вище у великому розмірі.

Блок “Зображення товару”, в котрий ставиться головне зображення, знаходиться в консолі праворуч. На скріні – блок, в котрому ще не поставлено нічого.

Якщо блок порожній – тиснемо на “Встановити зображення товару”. Після цього у спливаючому вікні з’явиться медіа-бібліотека в котрій можна обрати зображення для цього блоку:

Якщо потрібне зображення вже присутнє у бібліотеці – робимо в нього клік, воно виділяється рамкою та галкою, потому тиснемо кнопку “Встановити зображення товару” праворуч знизу. Якщо зображення ще не завантажувалося, але вже є, належним чином підготовлене, на вашому ПК = тиснемо “Завантажити файли” вгорі ліворуч, файл завантажується у звичайний спосіб, і після завантаження одразу буде виділений для закріплення в блоці.

В результаті маємо закріплення обраного фото у блоці, з візуалізацією, як на скріні.

Якщо потрібно видалити наявне зображення – маємо клікабельне посилання “Видалити зображення товару.

Якщо потрібно замінити наявне зображення – не потрібно спершу видаляти наявне. В такому випадку робимо клік просто в саме зображення. Так само відкриється спливаюче вікно медіа бібліотеки, в котрому наявне зображення одразу буде виділене. Тоді – просто зробити клік в інше зображення, котре потрібне на заміну, й так само – натиснути кнопку “Встановити зображення товару” – заміна відбудеться.

*** Зауваження: якщо наявне зображення ставилося давно, а медіа бібліотека має велику кількість фото, більшість з котрих завантажувалися значно пізніше, то за кліком в старе зображення в блоці “Зображення товару”, спливаюче вікно медіа бібліотеки, швидше за все, відкриється таким чином, що наявне зображення буде десь за нижньою межею екрану, і ми його не побачимо одразу. Та й не треба, якщо наша мета – поставити нове. Отже – клікаємо в потрібне, або завантажуємо його, й зберігаємо кнопкою “Встановити зображення товару”.

Саме це зображення відкриється у великому розмірі на сторінці товару одразу, а також буде у сніппетах пошуковиків.

Галерея товару

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

Порожній блок “Галерея товарів” виглядає таким чином. Для того, щоб додати фото до галереї, тиснемо на “Додати зображення галереї товарів”. Так само відкриється медіа бібліотека, де можна буде обирати зображення для додавання до гаререї. Зображення сюди додаються по одному.

Тож додаємо потрібні зображення по одному, або вибираючи з наявних у медіа бібліотеці, або водночас завантажуючи зображення до неї. По мірі додавання, додані зображення почнуть відображуватися в блоці, як на скріні.

За потреби видалення якогось з зображень, наводимо на нього курсор – у правому верхньому кутку з’являється хрестик, як на середньому зображенні верхнього ряду на скріні. Тиснемо на хрестик, і зображення (лише це одне) видаляється.

В цьому блоці можна міняти послідовність зображеннь перетягуванням; так само буде мінятися послідовність відображення в каруселі у фронт-енд. Для цього також наводимо курсор на потрібне фото, окрім хрестика в куті, посередині з’являється помітний (бо не малий за розміром) знак перетягування. Затискаємо лівою кнопкою миші, й тягнемо, куди вважаємо за потрібне. Де відпустили миша – там зображення і залишиться.

Порада: розташування додаткових фото в галереї доцільне в логічній послідовності, наприклад – спершу товар в цілому, у різних ракурсах, а потім зображення, що крупним планом відображують якісь фрагменти товару.

Дані товару

Тут маємо проставити всі дані товару – ціну, наявність, доставку, за потреби – прив’язати супутні товари, проставити атрибути (наприклад – для фільтрів) тощо. Блок знаходиться між полями повного та короткого опису товару, або, за наявності додаткових полів знизу – над ними.

Тип товару

Для початку – маємо обрати тип товару. За замовчуванням для створення нового товару там відображується “Простий товар”. Простий – це саме те й означає. В нього немає варіацій з розмірами, кольорами тощо; він не належить до згрупованих, що пропонуються комплектами; і це – свій товар, а не партнерський.

Це вікно за кліком дає випадний список, де зазначені всі доступні варіанти. Тож, якщо у нас дійсно простий товар – те й залишаємо, просто не чіпаємо нічого. Так само, як і не чіпаємо праворуч від цього вікна галочки “Віртуальний”, та “Завантажуваний” – це не для фізичних товарів:

Загальне

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

тут (в будь-якому випадку) маємо поставити звичайну ціну. вона і буде відображатися на сторінці товару.

Якщо поставити також “Ціна зі знижкою” (вона має бути меншою за “звичайну), то у фронті “Звичайна ціна” у нас буде перекресленою, а “Ціна зі знижкою” – виглядатиме актуальною.

Тут скріни демонструють, як наявність акційної ціни відображена в редакторі товару, і у фронт-енд.

Варто прибрати цифру з “Ціна зі знижкою” – і у фронті буде відображена звичайна ціна, як зазвичай.

Планувальник знижок тут не розглядаємо, бо наразі викладаємо основи.

Наявність

Цей розділ містить дані про артикули, штрих-коди або інші ідентифікатори товару, вимикач відстеження запасів окремого товару, статус наявності, і вимикач обмеження продажу одним екземпляром в одному замовленні:

Артикул – це або довільний код товару, котрий продавець впроваджує самостійно, в тому вигляді, котрий для нього зручний; або, якщо товар надходить від постачальника з артикулом останнього, і його зручно використовувати, то проставляється він.

GTIN, UPC, EAN або ISBN – ідентифікатори товару, зручні для виставлення товару на інших майданчиках, як от на маркетплейсах тощо. За відсутності такої потреби – поле просто залишаємо порожнім.

Керування запасами: якщо у продавця налагоджений складський облік, є інтеграція інтернет-магазина з софтом складу та/чи бухгалтерії, можна ввімкнути (поставити галочку) в чек-бокс, і тоді буде відбуватися взаємодія інтернет-магазину зі складом, зокрема – своєчасно з’являтиметься інформація про закінчення запасів товару.

Статус запасів: перемикач, котрий визначає статус наявності для відвідувачів магазину (у фронт-енд), а саме – “В наявності”, або “Немає в наявності”, або “На замовлення”.

Продавати індивідуально (Обмеження покупок до 1 товару на замовлення): це може бути зручно, коли йдеться про продаж специфічних товарів, кількість котрих обмежена, як то витвори мистецтва, хенд-мейд товари тощо.

Доставка

Тут за потреби проставляємо дані, актуальні для доставки товару:

Якщо це має значення (наприклад, для інформування покупця) – проставляємо вагу та габаритні розміри товару.

Також обираємо клас доставки (за наявності і за потреби). Клас доставки створюється і налаштовується у налаштуваннях WooCommerce, тут ці налаштування не розглядаємо.

Супутні товари

Тут можна проставити товари, котрі продавець вважає за потрібне просувати:

Пропозиція товарів: це пропозиція товарів, котрі продавець вважає за потрібне просувати ЗАМІСТЬ поточного товару, наприклад – вигідніший за маржею.

Перехресні продажі: йдеться про пропозицію додаткових товарів у “кошику”, таких, що пов’язані з поточним товаром. Наприклад, до мототехніки – тут може бути зазначений шолом мотоцикліста тощо.

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

Атрибути

Атрибути потрібні для забезпечення декількох функціональних можливостей, зокрема:

• Створення варіативних товарів (за кольором, розміром тощо);
• Для забезпечення роботи фільтрів за певними ознаками, такими, наприклад, як потужність двигуна, чи напруга живлення;
• Для виведення у поле вкладки “Додаткова інформація” (поряд з детальним описом) переліку даних, притаманних товару тощо.

Вкладка атрибутів дозволяє вибрати з наявних атрибутів, або створити новий:

Увага: ГЛОБАЛЬНІ (типові,розповсюджені у магазині) атрибути треба створювати не в цій вкладці, а на сторінці адмінпанелі Товари–>Атрибути – там робиться один раз, і може використовуватися будь-яким товаром. Тут може бути доцільним створити ЛОКАЛЬНИЙ (індивідуальний) атрибут, якщо він “екзотичний”, і притаманний виключно цьому товару.

Створення нових атрибутів в цій статті не розглядається, тут лише дивимося на вибір з числа вже наявних атрибутів. Для вибору тиснемо на “Add global” (наразі український переклад Вукоммерце ще не отримав перекладу цього елементу).

Натискання відкриває випадний список, в котрому представлені наявні (створені раніше) глобальні атрибути. Якщо атрибутів багато, і вони всі не вміщуються у видиму частину випадного списку, можна набрати у віконці над ними декілька літер назви потрібного атрибуту – він відобразиться вгорі списку, і його можна буде обрати.

Тиснемо на потрібний атрибут для вибору.

Обраний атрибут відобразився в блоку. Далі маємо вибрати параметри цього атрибута, котрі потрібні для цього товару, в цьому випадку – потрібні кольори з наявних.

Якщо потрібні всі наявні – тиснемо “Вибрати все”. Якщо більшість наявних – так само, бо простіше потім видалити зайві, аніж додавати по одному.

Можна також створити новий параметр (значення) просто тут, але зручніше на сторінці атрибутів.

Якщо клікнути у віконці “Виберіть значення”, з’явиться випадний список наявних значень атрибута, і можна (по одному) додавати їх, додані будуть відображені у віконці.

Також можна у віконце вставляти декілька літер значення, наприклад – “жов” – вгорі списку опиняться ті значення, що містять таку комбінацію літер.

На кожному доданому атрибуті (у віконці) буде хрестик видалення.

Навпроти назви атрибуту праворуч бачимо клікабельне “Видалити”, трикутник згортання атрибуту (зручно, коли їх декілька – щоб тримати розкритим лише той, що потрібно), і між ними – три рисочки перетягування, котрим можна міняти порядок відображення атрибутів.

Отже, значення атрибута (тут – кольори) вибрані.

Якщо потрібно відображення обраних атрибутів на сторінці товару у вкладці “Додаткова інформація” – залишаємо галочку на “Видимість на сторінці товарів. Якщо ні – знімаємо.

Після цього – не забуваємо натиснути кнопку “Зберегти атрибути”.

Аналогічним чином можна додати інші атрибути та вибрати для них актуальні значення – кількість атрибутів для товару не обмежується.

Додатково

В цій вкладці передбачена можливість додати нотатку до покупки для покупця; власне впорядкування позицій; вимикач відгуків окремо для одного товару; вимикач POS:

Нотатка до покупки: якась нотатка, котра відправляється покупцю після покупки. Тут занадто широке поле для творчості… Скажімо – “…прати при температурі, не вищій за 40 градусів…”. В межах потреб та фантазії продавця.

Порядок меню: ця штука в певних випадках (але далеко не завжди) впорядковує послідовність відображення товарів у фронті. Це доволі раритетне налаштування, і з огляду на купу альтернатив, та вибірковість його дієвості – ліпше ігнорувати це поле.

Увімкнути відгуки: мотиви вимкнення відгуків для окремого товару можуть бути які завгодно. Отже: зняли галку – вимкнули. І навпаки.

Доступно для POS: призначений для ввімкнення та вимкнення комунікації з системою точки продажу. Детальніше – не тут.

Опис товару

Цей редактор призначений для опрацювання повнорозмірного детального опису товару, котре відображується у вкладці “Опис”, нижче фото та блока заголовку, ціни та іншого. Він є стандартним “класичним” редактором WordPress:

Не будемо тут детально розбирати “класичний редактор WordPress” – це для окремої публікації. Зауважимо лише, що цей редактор дозволяє форматувати текст, вставляти посилання, медіа (зображення та відео), код (не взагалі будь-який, але в широких межах), а також працювати як в режимі візуального редактора, так і безпосередньо з кодом.

Також зауважимо: тут (скрін вище) – бачимо дефолтний набір інструментів редактора, котрий є скрізь в таких редакторах. Але декотрі теми (шаблони) додають сюди ще й свої, додаткові, інструменти, наприклад – інструмент налаштувань шрифту за розмірами, сімействами шрифтів тощо.

Тут можна себе не обмежувати в обсязі тексту та його оформленні, кількості медіа тощо. Втім, умовні 20 млн. знаків + 300 величезних фото, й ще десяток-другий відео – і сторінка стане такою ж швидкою, як асфальтовий каток, котрий забули завести))

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

Тож, якщо претензії на дизайн помірні – ставимо бажане (тексти, медіа тощо) тут, як можемо, і почиваємо на лаврах.

Якщо ж хочеться зробити поле “Опис” не лише змістовним, а й з певним рівнем дизайну, а також використовувати шаблони (щоб кожного разу не ставити все вручну, або не тягати копіпастом з інших сторінок), та ще й використовувати купу цікавих віджетів, тоді можна використовувати для цього поля той білдер, котрий є на сайті, в цьому випадку – на сайті присутній Elementor.

Тоді – тиснемо на синю кнопку “Редагувати в Elementor”, і починаємо створювати контент опису там. Як саме – то вже інша історія.

Якщо у нас йдеться про редагування товару, в котрому вже є поле опису в Elementor, всі інструменти класичного редактора зникнуть, натомість синя кнопка переміститься на місце цього редактора:

Зауваження: Класичний редактор та Elementor – суміжники, але не можуть в одному і тому ж контенті перебувати разом водночас. тобто: або те, або друге. саме тому після створення контенту в Elementor зникають всі елементи класичного редактора.

І тут попередження!!! – обережно з кнопкою “Повернутися до редактора WordPress” – це може зламати верстку Elementor непоправно, і якщо що – контент опису доведеться відтворювати з самого початку, наче його й не було.

Публікація – Збереження

Допоки новий товар в редакторі жодного разу не збережений в той. чи інший спосіб – бачимо кнопку “Опублікувати”. Якщо ми скористаємося нею, і, відповідно, товар стане доступним публічно у фронт-енд – кнопка перейменується на “Оновити”.

Втім не завжди доречно публікувати одразу, наприклад, якщо сторінка не готова, і з нею ще треба працювати. Тоді доречніше скористатися кнопкою “Зберегти” – поточна редакція буде збережена, але статус сторінки буде “Чернетка”, відтак з фронту її сторонні не побачать. І кнопка “Опублікувати” такою і залишиться.

Зауважимо: не варто очікувати, поки сторінка буде готова вся – заповнили якийь блок, чи пару – зберігаємо, бо мало що може трапитися… Відтак, не хочемо передчасно публікувати – зберігаємо як чернетку.

Втім, є ще й варіант відкладеної публікації: у рядку “Оприлюднити негайно Редагувати” – можна виставити дату публікації та її час. До того ж – можна скористатися опціями “Видимість в каталозі:…”, зокрема – обрати “Прихований”, або “Тільки результати пошуку”, чи “Видимість”, обравши “Особисте” – тоді на сторінках магазину сторонні товар не побачать. Ці три опції інтуїтивно зрозумілі, і навряд чи потребують детальних пояснень. Так само, як і “Статус”.

Отже, ми пройшлися по всіх кроках заповнення сторінки простого товару “з нуля”.

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

Саме це ми і розглянемо в наступній статті “Як створити новий товар WooCommerce клонуванням“.