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 Product Sort and Display.

Плагин сортировки и отображения лучше работает с другим плагином под названием Endless Scroll, который позволяет отображать большое количество товаров на странице вашего магазина. После установки и активации двух плагинов вам нужно перейти к категориям продуктов и перетащить категории, чтобы добиться правильного отображения. Затем вы можете установить количество продуктов для отображения в каждой категории со ссылками для просмотра всех.

Что касается сортировки, плагин по умолчанию имеет сортировку и сортировку по популярности, новизне, цене (от низкой к высокой и наоборот), по продаже и по избранным. Некоторые из этих функций поставляются с премиум-версией плагина, поэтому рекомендуется использовать эту версию.

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

Например, следующий шорткод покажет продукты в каталоге с идентификатором «x».

или

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

Стили каталога продуктов, включенные в плагин, включают: минималистичный, блочный, наведение и макет с вкладками. Некоторые из этих стилей, а также некоторые из функций, описанных выше, доступны в премиум-версии плагина.

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

Автор Ян Сэйнтс (собственная работа): CC-BY-2.0

4. Использование шорткодов

Если вы используете WooCommerce для своего интернет-магазина, вы можете найти шорткоды, которые будут самым простым способом отображения продуктов на странице вашего магазина. Шорткоды работают с идентификаторами продуктов и категорий и артикулами, и их можно просто скопировать и вставить на страницу магазина для отображения товаров. См. Шорткоды ниже.

- показывает список категорий.

- показывает определенное количество категорий, и это хорошо работает со следующими аргументами. Примечание: эти аргументы также могут работать с этим шорткодом..

• number = "null" - показать количество категорий.
• orderby = "name" - показывать категории по названию. Примечание. Значение «name» можно заменить на date, rand (random), modified и none.
• order = "asc" - показывать категории в порядке возрастания. Примечание. Значение «asc» можно заменить на «desc» в порядке убывания.
• columns = "x" - показать "x" столбцов категории.
• hide_empty = "1" - скрыть категории.
• hide_empty = "0" - показать категории.
• parent = "0" - для отображения категорий верхнего уровня.
• ids = "x" - показать категорию с идентификатором "x".
• category = "x" - показать категорию "x".

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

• - отображает «y» элементов категории «x», отображаемых в столбцах «z» и расположенных в порядке убывания в зависимости от даты их публикации.
• - показывает список товаров.
• - показывает название продукта. Примечание. Значение «имя» можно заменить другими значениями, чтобы сформировать больше шорткодов. Некоторые из этих значений включают: цену, описание, краткое описание, таблицу атрибутов, артикул, доставку, галерею и связанные категории.
• - показывает категории для текущей страницы со списком товаров.
• - показывает товары для текущей страницы с перечнем товаров.
• - показывает панировочные сухари.
• - показывает ограниченное количество товаров.
• - показывает обратный URL-адрес продуктов, который указывает на главную страницу со списком продуктов.
• - показывает товары в продаже.
• - показывает товар с идентификатором "x".
• - показывает товары с идентификаторами «x», «y» и «z».
• - показывает товар с артикул "xyz"
• - показывает товар с артикулами «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. Mening. R. Как создать интернет-магазин с WordPress и WooCommerce. websitesetup.org . Настройка веб-сайта. (2017).
2. Андронако Р. Как создать интернет-магазин с помощью WooCommerce и Wordpress: простое руководство по идеальной настройке веб-сайта электронной коммерции. (2017).
3. Растауриус Э., Etoile Web Design. Каталог продуктов электронной коммерции для WordPress. wordpress.org. реализовать код. (2017).
4. WooCommerce. Шорткоды включены в WooCommerce. docs.woocommerce.com . WooCommerce. (2016).
5. Трумэн С., Туан Н., Ar3rev Software. Плагин WooCommerce Product Sort and Display. wordpress.org. Программное обеспечение Ar3rev. (2013).
6. YiThemes. Плагин Yith Infinite Scrolling. wordpress.org. ИФЕМ. (2017).
7. Раззак С. Эксклюзивное руководство по плагину для слайдера продуктов WooCommerce. cloudways.com. Cloudways Ltd. (2016).
8. Балхи С. Как легко создать отзывчивый слайдер WordPress с помощью Soliloquy. wpbeginner.com . WPBeginner. (2014).

© 2017 Januaris Saint Fores