5 простих способів показу товарів у Інтернет-магазині WordPress

Показ продуктів в Інтернет-магазині WordPress справді може стати кошмаром для новачка електронної комерції. Коли я починав створювати свій Інтернет-магазин, я думав, що розміщувати свої предмети на домашній сторінці мого веб-сайту було б неважко. Але все завдання було досить важкою боротьбою!

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

Показані товари в Інтернет-магазині

Ян Сентс (власна робота): CC-BY-2.0

Якщо ви створюєте Інтернет-магазин WordPress вперше, вам неодмінно потрібно навчитися створювати загальний веб-сайт за допомогою цієї системи управління вмістом. Вам також потрібно ознайомитися з такими речами, як плагіни для електронної комерції, віджети та шорткоди. Крім того, якщо ви використовуєте WooCommerce, вам потрібно знати про доступні параметри відображення продукту та розуміти загальні налаштування плагіна. Цей простий посібник про те, як створити Інтернет-магазин та виставити предмети (автор Ріккардо Андронако), пояснює все це, і я знайшов це дуже корисним.

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

П’ять способів відображення та впорядкування предметів в Інтернет-магазині WordPress

1. Автоматичний метод
2. Віджети
3. Плагіни
4. Шорткоди
5. Повзунки

1. Використання автоматичного методу

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

Домашня сторінка може вмістити лише певну кількість товарів, а це означає, що якщо у вас велика кількість товарів, деякі з них будуть розміщені на сторінках 2, 3, 4 тощо.

Цей метод ускладнює для ваших клієнтів знання всіх типів товарів у вашому магазині, оскільки він не включає категорії, а деякі предмети приховані на інших сторінках.

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

Товари, що відображаються випадковим чином

Ян Сентс (власна робота): CC-BY-2.0

2. Використання віджетів

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

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

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

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

Товари, що відображаються на бічній панелі за допомогою плагіна

Ян Сентс (власна робота): CC-BY-2.0

3. Використання плагінів

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

Що стосується показу та впорядкування предметів в Інтернет-магазині, існує безліч плагінів, які ви можете використовувати для виконання цього завдання. Але більшість плагінів не є цілком ефективними, тому вам потрібно вибрати ті, які перевірено працюють.

Найбільш рекомендованими плагінами для відображення предметів в Інтернет-магазині WordPress є Ultimate Product Catalog та WooCommerce Sort and Display Product.

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

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

Інший плагін, Ultimate Product Catalog, трохи складний. Після встановлення та активації плагіна вам потрібно додати до нього всі свої продукти та категорії, щоб отримати ідентифікатори, які ви можете використовувати в шорткодах для відображення своїх предметів. Вам також потрібно створити кілька невеликих каталогів для своїх предметів.

Наприклад, наступний шорткод покаже товари в каталозі з ідентифікатором "x".

або

Плагін оснащений такими функціями, як настроювані макети каталогів, ціни продажу, імпорт товару, символ валюти, сухарі, обмін в соціальних мережах, огляд і рейтинг продуктів, інтеграція SEO by Yoast та велика кількість параметрів налаштування.

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

Продукти, що відображаються блочним стилем за допомогою плагіна

Ян Сентс (власна робота): CC-BY-2.0

4. Використання шорткодів

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

- показує перелік категорій.

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

• number = "null" - щоб показати кількість категорій.
• orderby = "name" - щоб показати категорії за впорядкуванням за назвою. Примітка: Значення "name" можна замінити датою, rand (випадковою), зміненою та жодною.
• order = "asc" - для показу категорій при впорядкуванні за зростанням. Примітка: Значення "asc" можна замінити на "desc", щоб замовити у порядку зменшення.
• column = "x" - для відображення "x" стовпців категорії.
• hide_empty = "1" - щоб приховати категорії.
• hide_empty = "0" - для відображення категорій.
• parent = "0" - для відображення категорій верхнього рівня.
• ids = "x" - щоб показати категорію з ідентифікатором "x".
• category = "x" - для відображення категорії "x".

• categories_limit - щоб показати обмежену кількість категорій.
• archive_template - щоб показати конкретний шаблон архіву для певного списку.
• design_scheme - щоб показати певний колір або розмір.
• sort = "0" - щоб вимкнути селектор сортування товару.
• sort = "1" - щоб увімкнути селектор сортування товару.
• = "1" - щоб увімкнути шорткод.
• post_type - щоб показати записи іншого типу повідомлення.
• per_row - щоб показати товари в рядку.
• порожній - щоб показати певний текст, коли немає товарів для відображення.

• - відображає елементи "y" категорії "x", що відображаються в стовпцях "z" та розташовані в порядку зменшення залежно від дати їх розміщення.
• - показує перелік товарів.
• - показує назву товару. Примітка: Значення "name" можна замінити іншими значеннями, щоб утворити більше шорткодів. Деякі з цих значень включають: ціну, опис, короткий опис, таблицю атрибутів, артикул, вартість доставки, галерею та відповідні категорії.
• - показує категорії для поточної сторінки з переліком товарів.
• - показує товари для поточної сторінки з переліком товарів.
• - показує сухарі.
• - показує обмежену кількість товарів.
• - показує URL-адресу повернення до товарів, яка вказує на основну сторінку з переліком товарів.
• - показує товари, що зараз продаються.
• - показує товар з ідентифікатором "x".
• - показує товари з ідентифікаторами "x", "y" та "z".
• - показує товар із SKU "xyz"
• - показує товар із SKU "abc", "def" та "ghi".
• - показує ціну та кнопку додавання в кошик для товару з ідентифікатором "x".
• - показує ціну та кнопку додавання в кошик для товару з артикулом "x".
• - відображає максимум елементів "х".
• - відображає товари з певним атрибутом, тобто атрибутом "колір" і кольором "чорний".

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

Примітка. Якщо ви добре кодуєте, ви можете налаштувати ці шорт-коди, щоб досягти кращого відображення та розташування продукту.

Шорт-код, вставлений на сторінку

Ян Сентс (власна робота): CC-BY-2.0

5. Використання повзунків

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

Щоб відображати товари за допомогою повзунків, вам потрібно замінити повідомлення своїми продуктами. Коли справа доходить до створення повзунка продукту, вам потрібен адаптивний плагін повзунка, такий як Soliloguy. Після встановлення та активації плагіна вам потрібно додати новий повзунок, і це можна зробити за допомогою фотографій, посилань та інших необхідних деталей ваших елементів. Наступним кроком є ​​збереження або публікація повзунка для отримання шорткоду та тегу шаблону.

Нарешті, вам потрібно скопіювати та вставити шорт-код на домашню або будь-яку іншу сторінку для відображення продуктів. Тег шаблону може відображати елементи в заголовку розділу вашої теми. Вам просто потрібно скопіювати тег, відкрити header.php і вставити його на закодовану сторінку.

WooCommerce має плагін під назвою Products Slider, призначений для електронної комерції. Він працює як типовий плагін слайдера, але має ще деякі налаштування та параметри. Я закликаю вас перевірити, чи може це допомогти вам з відображенням та розташуванням елементів.

Товари, що відображаються на слайдері

Ян Сентс (власна робота): CC-BY-2.0

Висновок

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

Список літератури

1. Менінг. Р. Як створити Інтернет-магазин за допомогою WordPress та WooCommerce. websitesetup.org . Налаштування веб-сайту. (2017).
2. Андронако Р. Як створити Інтернет-магазин за допомогою WooCommerce та Wordpress: Просте керівництво до ідеального налаштування веб-сайту електронної комерції. (2017).
3. Раставрій Е., веб-дизайн Etoile. Каталог товарів електронної комерції для WordPress. wordpress.org. впровадити. (2017).
4. WooCommerce. Шорткоди, що входять до складу WooCommerce. docs.woocommerce.com . WooCommerce. (2016).
5. Трумен С., Туан Н., Ar3rev Software. Плагін для сортування та відображення продуктів WooCommerce. wordpress.org. Програмне забезпечення Ar3rev. (2013).
6. YiThemes. Yith нескінченний плагін прокрутки. wordpress.org. ІТЕМИ. (2017).
7. Razzak S. Ексклюзивне керівництво для плагіна повзунків продуктів WooCommerce. cloudways.com. Cloudways Ltd. (2016).
8. Балхі С. Як легко створити адаптивний слайдер WordPress за допомогою Soliloquy. wpbeginner.com . WPBeginner. (2014).

© 2017 Januaris Saint Fores