На многих сайтах устанавливаются формы обратной связи, чтобы пользователи могли оставить сообщение администратору не покидая сайт. Самым популярным, качественным и удобным в настройке и использовании является плагин Contact Form 7 — с его помощью можно создать любые контактные формы и не только. Поскольку плагин имеет большое количество различных форм и полей, то его можно использовать для многих задач. Я, например, использовал его для создания анкеты работодателя и соискателя на рекрутинговом сайте, для создания формы заказа товара на сайте по продаже только одной линии продукта, использовал этот плагин для создания сложной и объемной расчетной формы для строительного сайта, для самых различных форм обратной связи и прочих форм. Но речь не об этом, а о том, как же сделать, чтобы форма связи появлялась во всплывающем окне, чтобы можно было сделать кнопку вызова контактной формы на каждой странице, а не только на странице «Контакты»?
Все на самом деле не сложно, но понадобится еще один плагин с эффектом FancyBox, мне лично нравятся эти два плагина: Easy FancyBox или FancyBox for WordPress, есть различные похожие плагины, но любой из этих подходит отлично и еще позволяет открывать в popup изображения.
В общем, установлены два плагина: Contact Form 7 и Easy FancyBox, создана контактная форма, осталось добавить код в шаблон.
од вставляется в шаблон сайта в файлы .php!
Код с всплывающей контактной формой, установленный в коде файла шаблона:
Duplicator — резервное копирование файлов и бд сайта
WP-Optimize — оптимизация бд
iThemes Security
Советы по безопасности в целом
Первые мои советы коснуться вопросу работы с паролями. Это основа основ, фундамент! Не ленитесь следовать изложенным ниже правилам:
используйте пароль длинной не менее 8 символов с буквами в разном регистре, числами и по возможности другими символами;
старайтесь обновлять его раз в пол года;
никогда не используйте в качестве пароля слово из словаря или сочетание таких слов;
никогда не сохраняйте пароли в браузере и ftp клиентах;
используйте разные пароли для почты, панели администратора WP, хостинга и так далее;
1. Обязательно своевременно устанавливайте обновления WordPress и всех активных плагинов.
2. Не забывайте делать резервные копии (backup) базы данных и файлов блога.
3. Удалите сторонние ссылки из темы WordPress.
4. Скройте используемую версию WP от глаз посторонних. Для этого откройте на редактирование шаблон header.php и удалите мета тег примерно следующего содержания:
Default Blacklist- добавить в черный список ссылки, пути с которых происходит частый взлом сайтов
Enable local brute force protection — Защита от перебора паролей
Max Login Attempts Per Host— количество попыток входа
Max Login Attempts Per User – количество попыток входа на одного пользователя
MinutestoRememberBadLogin (checkperiod) – количество минут ожидания, после неудачной попытки входа
Hide Backend – скрыть стандартную ссылку на форму входа в админки
Login Slug – изменить ссылку входа в админку
Enable Theme Compatibility – включить совместимость с темой, в случае если в теме возникнут ошибки из-за изменения пути входа в админку
System Files — Защита системных файлов
Directory Browsing — Отключить просмотр каталогов, Запрещает пользователям видеть список файлов в каталоге
Long URL Strings — Ограничивает количество символов, которое можно послать в URL. Хакеры часто используют длинные URL-адреса, чтобы попытаться добавить запись в базу данных
Uploads — Отключить выполнение PHP в папке для закачанных файлов. Это позволит предотвратить загрузку вредоносных скриптов во время добавления.
Comment Spam — Уменьшить спам в комментариях
FileEditor — Отключение редактор файлов для плагинов и тем, требующих, чтобы пользователи имели доступ к файловой системе, чтобы изменять файлы.После активации вам нужно будет вручную отредактировать тему и другие файлы, используя инструмент, кроме WordPress.
Login Error Messages — Отключить сообщения об ошибках Войти. Предотвращает сообщения об ошибках отображается для пользователя при неудачной попытке входа в систему
Форум на сайте нужен для обсуждения между посетителями форума различных тем, путём размещения сообщений внутри этих тем. Пользователи форума могут комментировать темы, задавать вопросы и получать на них ответы, а также сами отвечать на вопросы других пользователей.
Форум может быть узкоспециализированным, а может быть и без специализации. Обычно тематика форума зависит от тематики сайта, и может быть очень разнообразной, охватывая все сферы жизни.
Установка плагина bbPress
Создавать форум в WordPress будем с помощью одного из самых популярных плагинов для создания форума — bbPress. И так, приступим!
2. Вставляем на страницу шорткод [bbp-forum-index]
Если Вы увидели на форуме вопрос, на который знаете ответ или можете что-то порекомендовать — не поленитесь и поделитесь знаниями! Давайте помогать друг другу!
и нажимаем кнопку «Опубликовать».
Готово! Теперь на странице «Форум» будут отображаться все созданные форумы.
В результате мы получим красивый и функциональный форум:
В этом уроке мы с Вами провели базовую настройкой форума, которой достаточно для полноценной работы у Вас на сайте.
Также замечу, что в форуме созданном с помощью плагина bbPress есть и другие полезные шорткоды, ознакомится с которыми Вы можете на сайте плагина.
Как защитить информацию от копирования на сайте WordPress
Многие владельцы сайтов сталкиваются с проблемой воровства их контента. Часто можно заметить, как текст над которым сидел не один час появляется у конкурентов на сайте. Если Ваш сайт наWordPress — защититься от «копипастеров» можно очень просто.
Защита от копирования информации с сайта WordPress
2. Готово. После активации плагин не требует настроек и сразу начинает работать.
Что именно делает плагин?
Отключает клик правой кнопкой мышки.
Отключает выделения текста.
Отключает возможность перетаскивать, выделять и сохранять изображения.
Отключает возможность копировать и выделять текст с помощью клавиатуры (Ctrl A, C, X) — только для Windows.
Отключает возможность печатать и сохранять страницу.
Отключает просмотр кода с помощью клавиши F12
Нет отрицательных побочных эффектов в SEO (поисковые системы могут прочитать содержание)
Как видите, все очень-очень просто. Плагин простой, не ресурсоемкий и не требующий каких-то настроек. Просто установите и активируйте.
Стоит упомянуть, что у плагина также есть премиум версия. Узнать о ее возможностях можно перейдя в Настройки -> WP Content Copy Protection (YOOPlugins).
С помощью этого плагина можно сделать мультиязычными страницы, записи, рубрики, виджеты, название и описание сайта и т.п.
Сразу хочу сказать, что из достаточно огромного количества плагинов для создания нескольких языковых версий сайта, именно WPGlobus мне понравился больше всех, в связи с чем, я Вам его и рекомендую!
Как создать несколько языковых версий сайта WordPress
2. После активации плагина переходим в WPGlobus -> Языки.
3. На этой странице настроек нужно указать, какие языки Вы хотите использовать на сайте. По умолчанию, сразу после установки плагина у Вас будет 3 языка: английский , русский и немецкий.
Также можно добавить любой другой язык. Сделать это очень просто, нужно всего лишь выбрать из списка «Выберите язык» новый язык, после чего нажать кнопку «Сохранить изменения».
4. Для того, чтобы указать какой язык на сайте будет главным, нужно поместить его вверх списка, передвинув мышкой соответствующую иконку с языком.
Если же Вы хотите убрать какой-то язык — просто снимите флажок c языка который хотите убрать, и нажмите кнопку «Сохранить изменения».
5. Теперь нужно выбрать способ показа переключателей языков в навигационном меню. Для этого в выпадающем списке «Способ показа переключателей» выбираем подходящий Вам вариант.
6. Далее указываем меню, в котором будет отображаться переключатель языковых версий сайта. Для этого в выпадающем списке выбираем нужное меню. Обычно меню на сайте одно, так что сложностей в выборе быть не должно
Не забудьте нажать кнопку «Сохранить изменения». После этого можно считать, что настройка плагина завершена.
7. После такой простой и быстрой настройки плагина, можно смело приступить к переводунаполнения сайта на другие языки. Что для этого нужно сделать?
Перейдите на любую станицу, запись или рубрику которую хотите перевести на другой язык. В самом верху страницы вы увидите вкладки, каждая из которых отвечает за свой язык. Перейдите на вкладку любого языка, и сделайте перевод выбранной страницы.
По аналогии делается перевод и остальных записей, рубрик и виджетов сайта.
Вот таким образом выглядит переключатель языков в меню:
Также с помощью виджета «WPGlobus виджет» можно установить переключатель языков на сайдбар.
Замечу, что для плагина WPGlobus есть несколько полезных бесплатных и платных дополнений, но это уже совсем другая история.
Как добавить водяной знак на изображения в WordPress
Во первых, водяные знаки — одна из самых популярных технологий защиты авторских прав на мультимедийный файлах. Во вторых, применение водяных знаков отлично подходит для защиты изображений от копирования и дальнейшего их несанкционированного использования.
Думаю Вы согласитесь, что мало кто захочет выставлять у себя на сайте изображения с чужим логотипом или ссылкой на другой сайт
Как поставить водяные знаки на картинки (фото) в WordPress
Добавлять водяные знаки на изображения мы будем с помощью плагина Easy Watermark.
2. После установки и активации плагина переходим в Настройки -> Easy Watermark.
3. Настройки плагина разделены на 3 вкладки: Общие, Изображение, Текст. Давайте поговорим более подробно о самых важных настройках каждой из этих вкладок.
Общие настройки
На этой вкладке находятся общие настройки плагина. Обо всех настройках этой вкладки говорить не вижу смысла, так как плагин почти полностью русифицирован. Напишу только о том, что ярекомендую Вам изменить.
Поставьте галочку в «Backup». После включения этой функции, все оригиналы загруженных изображений (без водяных знаков) будут сохраняться в отдельной папке, и их при желании можно будет восстановить. Очень полезная штука.
В «Размеры изображений» рекомендую оставить только «Fullsize». Это значит, что водяные знаки будут отображаться только на оригинале изображения (полном размере), а не на миниатюрах и т.п. Таким образом водяные знаки не будут постоянно маячить перед глазами, а большой размер изображения будет защищен.
Изображение
На этой вкладке Вы можете сделать водяной знак из изображения. Для этого нажмите кнопку«Выбрать/загрузить изображение», после чего настройте его расположение (если необходимо).
Важно! Если Вы решили использовать изображения для водяного знака, укажите в общих настройках «Тип водяного знака» -> «Изображение».
Текст
Для добавления текстового водяного знака перейдите на вкладку «Текст» и укажите желаемый текст для цифровой подписи.
На этой же вкладке укажите выравнивание текста (нажав по прямоугольнику на изображении),смещение текста (если он не помещается или Вы хотите его сдвинуть), шрифт, цвет и размер текста. Также можно изменить наклон текста и его прозрачность.
Как видите, сложного в создании водяных знаков совершенно ничего нету. Плагин прост в использовании и интуитивно понятен.
Как добавить водяной знак на изображения в WooCommerce
Данный плагин также отлично работает с интернет магазином WooCommerce. Включить водяные знаки в магазине очень просто! Для этого на вкладке «Общие», в блоке настроек «Типы записей»отметьте галочкой «Товары».
Важно! Плагин WooCommerce должен быть активированный, в противном случае такой пункт в настройках просто не появится.
Восстановление и массовое нанесение водяных знаков
Восстановить оригинальные изображения (если включено их сохранение в настройках) как и массово нанести водяные знаки на все ранее загруженные изображения можно перейдя в Медиафайлы -> Easy Watermark.
«Start» — нанести водяных знаки на все изображения.
«Restore» — восстановить оригинальные изображения, на которых не будет водяного знака.
Результат
Вот такой текстовый водяной знак получился из примера этого урока.
Как обновить ссылки в WordPress после переноса сайта
Обновление всех ссылок после переноса сайта на хостинг
Любой шаблон можно интегрировать с woocommerce. Согласно документации я буду интегрировать woocommerce в нестандартную тему.
1. Сделайте копию файла page.php в папке темы и переименуйте файл на woocommerce.php
2. Откройте woocommerce.php через редактор notepade++ и удалите следующие строчки, а так же содержимое между строками:
<?php if ( have_posts() ) :
до
<?php endif; ?>
И впишите следующий код:
<?php woocommerce_content(); ?>
В основном неправильно отображаются страницы shop page, single product page и taxonomy pages (categories and tags). Другие страницы (checkout, cart, account) отображаются корректно, тк для их отображения используется шаблон page.php.
Мне попадались шаблоны, которые не поддерживают woocommerce, но сверстаны таким образом, что страницы отображаются нормально и интеграция не требуется.
Для редактирования определённых страниц в папку с шаблоном необходимо скопировать папку templates, которая находится в папке плагина woocommerce и содержит в себе шаблоны страниц, в директорию темы. Если вы использовали премиум темы интернет-магазинов на wordpress, то, наверное, видели, что в директории темы имеется эта папка.
Путь до папки будет следующий:
/wp-content/themes/ваш-шаблон/woocommerce/
Папка woocommerce в директории сайта будет содержать файлы templates.
2. Заполните 4-5 товарами. Перейдите на страницу магазина. Как вы видите товары расположены во всю ширину без отступов.
3. На хостинге или на Денвере перейдите в директорию шаблона Twenty Thirteen и сделайте копию page.php и переименуйте в woocommerce.php. Полностью замените содержание файла. Нужно задать отступы, выравнивать товары. Мы задаём класс и в стилях в файле style.css вписываем его значения. Я добавлю в style.css стили бутстрап фреймворка. =)
4. Теперь скачайте бутстрап фреймворк (файл с готовыми стилями) http://getbootstrap.com и скопируйте содержимое файла bootstrap.css, находящегося по адресу bootstrap\css\bootstrap.css в конец файла style.css, который находится директории шаблона Twenty Thirteen. Всё сохраните.
Итоговый вид:
В файл functions.php темы можно добавить следующий код, который указывает, что ваша тема поддерживает woocommerce.
add_theme_support( 'woocommerce' );
Осталось рассмотреть следующие вопросы:
Как добавить сайдбар на страницу магазина?
Как можно отредактировать файлы плагина woocommerce, чтобы сделать тему более красивую?
Если вы знаете ответы на эти вопросы, то сообщите, буду очень признателен. Статья будет редактироваться и обновляться, критика принимается.
Приветствую Вас, друзья! В этом уроке мы поговорим о том, как можно перевести тему (шаблон) или плагин на русский (или любой другой) язык в WordPress.
Я уверен, что многие из Вас сталкивались с ситуацией, когда нужные Вам плагины или темы сайта были на английском языке. В таких случая сразу возникает вопрос, как же перевести на русский или любой другой язык? Ответ на этот вопрос Вы найдете в этом уроке!
Сегодня мы рассмотрим с Вами один из самых простых, понятных и надежных способовперевода шаблонов и плагинов WordPress.
Как сделать перевод темы или плагина WordPress
Для перевода мы будем использовать плагин Codestyling Localization. Он простой, интуитивно понятный и работать с ним одно удовольствие. Также с его помощью можно не только создать новый перевод, а и изменять уже существующий. И так, приступим!
2. Установите и активируйте плагин. О том, как правильно устанавливать плагины мы говорили в одном из прошлых уроков.
3. После активации перейдите в Инструменты -> Локализация.
4. Зайдите на вкладку «Темы», если Вы хотите перевести тему сайта. Если же Вы хотитеперевести плагин, переходите на вкладку «Плагины».
5. После перехода на вкладку Вы увидите список плагинов или тем (в зависимости от выбранной вкладки). Нажмите кнопку «Добавить новый язык» напротив нужной Вам темы или плагина.
Создаем перевод дня плагина YITH Woocommerce Compare
6. В открывшемся списке выберите язык, на который Вы хотите сделать перевод и нажмите кнопку «Создать po-файл».
7. Теперь напротив добавленного языка нажмите кнопку «Сканировать». В открывшемся окне еще раз нажмите «Сканировать», и после завершения сканирования нажмите кнопку «Завершить».
8. После окончания сканирования нажмите кнопку «Редактировать».
9. На открывшейся странице нажимаем «Редактировать».
10. В открывшемся окне Вы увидите оригинальный перевод и поле, в котором нужно написать перевод. После того, как Вы указали перевод — нажмите кнопку «Save & Next».
11. Когда Вы переведете все строчки, нажмите кнопку «Генерировать mo-файл».
Перевод заработает сразу после генерации mo-файла. После этого перевод можно считать завершенным!
Обратите внимание на то, что не обязательно переводить все строчки. Вы можете переводить только то, что Вам нужно.
Как сделать сравнение товаров в магазине WooCommerce
Возможность сравнивать товары есть практически на всех сайтах интернет магазинов, и если Вы захотели добавить такую возможность на свой сайт, данный урок будет очень полезным.
Сравнение товаров в интернет магазине WooCommerce
Добавлять возможность сравнения товаров мы с Вами будем с помощью плагина YITH Woocommerce Compare. Итак, приступим!
2. Активируем плагин. После активации кнопка сравнения появится на всех товарах магазина.
Как видите, кнопка появилась, но на английском языке. Теперь нам нужно перевести название кнопки да и в целом почти весь плагин на русский язык.
Перевод плагина YITH Woocommerce Compare на русский язык
Перед созданием этого урока я перевел на русский язык часть плагина, которой будет вполне достаточно. При желании Вы сами можете любым удобным вам способом изменить мой вариант перевода. И так, начнем!
2. Разархивируйте содержимое архива (в архиве два файла).
3. Скопируйте файлы yit-ru_RU.po и yit-ru_RU.mo и вставьте их в папку languages, которая находится в папке плагина YITH Woocommerce Compare (wp-content\plugins\yith-woocommerce-compare\languages).
4. Теперь перейдите в WooCommerce -> Настройки -> Products Compare и введите на русском языке текст кнопки и название таблицы сравнения. Для сохранения изменений не забудьте нажать кнопку «Сохранить изменения».
Как сделать список желаний в интернет магазине WooCommerce
Кнопка «Добавит в желания», как и возможность«сравнения товаров»присутствует практически на всех популярных интернет магазинах, и ее наличие для многих уже стало привычным и обыденным.
Не буду вдаваться в подробности о том, зачем нужна такая возможность и что с ней делать. Предлагаю переходить сразу к делу!
2. После активации плагина перейдите в YIT Plugins -> Wishlist.
3. На открывшейся странице Вы увидите настройки плагина и его частичногоперевода. Измените доступные слова на русские.
Остальной перевод плагина нужно делать отдельно. В этом Вам поможет урок по переводу плагинов в WordPress.
Плагин будет работать и без перевода, но я не думаю что Вы поленитесь перевести небольшой плагин и оставить все как есть
В результате на каждом товаре появится кнопка, после нажатия на которую товар добавится в «Список желаний». Стиль кнопки Вы всегда можете изменить по усмотрению и желанию с помощью CSS.
Кнопка «Добавить в список желаний»
Как сделать фильтр товаров по свойствам в WooCommerce
Как создать подбор товаров по свойствам (атрибутам) товара
Создавать виджет с фильтром товаров по свойствам мы будем с помощью плагина YITH WooCommerce Ajax Navigation. С помощью этого плагина можно сделать фильтр по любым характеристикам (атрибутам, свойствам) товара.
Для примера, давайте создадим фильтр товаров по цвету. В интернет магазинах фильтр по цвету очень популярный и распространенный виджет, и я надеюсь что данный пример как и этот урок будет Вам интересен. Итак, приступим!
3. После активации плагина появилось два новых виджета: YITH WooCommerce Ajax Navigationи YITH WooCommerce Ajax Reset Navigation.
Добавьте их на сайдбар (боковую панель) которая отображается на странице магазина.
Важно! Плагин фильтрует товары по заданным в товарах атрибутам (свойствам). Их нужно предварительно добавить в каждом товаре. О том как добавлять атрибуты к товару мы говорили в уроке по созданию вариативных товаров.
4. После добавления виджетов на сайдбар нужно сделать следующее: указываем название виджета, выбираем атрибут, по которому будем фильтровать товары, и если Вы делаете фильтр по цвету — выберите Type: Color.
Также можно выбрать и другие типы фильтра:
List — стандартный вариант, при котором свойства будут отображаться списком
Color — выбираем при создании фильтра по цвету
Label — можно назначить свое имя для каждого свойства
Dropdown — выпадающий список
Далее выберите цвет кнопки для каждого цвета и нажмите кнопку «Сохранить».
На виджете YITH WooCommerce Ajax Reset Navigation нужно указать только имя для кнопки сброса фильтра.
Готово! Фильтр товаров по цвету создан! Но есть одна деталь, которая портит весь внешний вид фильтра — маленькие квадратики над кнопками свойств.
Массовое редактирование цены товаров в WooCommerce
Здравствуйте, друзья! Сегодня мы поговорим о том, как можно массово изменить цену на всех товарах в интернет магазине созданном с помощью плагина WooCommerce.
Заменять цену на тысячах товаров поштучно не только нудно и скучно, но это еще и достаточно времязатратный процесс! Задача по замене цены может возникнуть из-за скачков курса валют, сезонных скидок распродаж и т.п.
Поверьте, если у Вас есть интернет магазин, то рано или поздно Вы столкнетесь с необходимостьюизменять все цены на сайте. И так, как же можно массово изменить цены в магазине?
Массовое изменение цен в WooCommerce
С помощью плагина можно изменять не только цены на всех товарах, но и на определенных категориях, что зачастую очень удобно и полезно. В тоже время, предложенный в этом уроке способ изменения цен с помощью запросов в базу данных имеет меньше возможностей, так что о нем мы поговорим очень поверхностно. И так, приступим!
2. После активации плагина переходим с административной панели в Товары -> Prices.
3. В открывшемся окне нам нужно указать в поле Action действие, соответствующее Вашей задаче и выбрать в поле Category (если необходимо) категорию товаров. После этого нажимаем кнопку «Get Prices», чтобы отфильтровать товары по выбранной категории.
4. После нажатия кнопки «Get Prices» нужно указать значения в поле Value. В него нужно ввестицифровое значение, на которое Вы будете повышать или уменьшать цену товаров. В этом поле можно указывать как обычные числа, так и числа с процентами.
Для лучшего понимая наведу несколько примеров:
Уменьшаем цену товаров на 50
Увеличиваем цену товаров на 10%
5. После того как Вы укажите на сколько будете уменьшать или увеличивать цену товаров в полеValue — нажмите кнопку «Edit Prices». После нажатия кнопки цены на товарах изменятся, и Вам нужно будет сохранить эти изменения. Для этого нажмите кнопку «Save Prices».
Увеличиваем цену всех товаров в категории «Категория 1» на 10%
Готово! Как видите, всего за несколько кликов можно изменить цены на огромном количестве товаров.
С помощью этого плагина у Вас есть возможность массово изменять обычную цену товаров, цену скидки и т.п. Также, одним из самых больших и бесспорных плюсов плагина есть то, что он полностью бесплатный!
Здравствуйте, друзья! Сегодня мы поговорим о шорткодах интернет магазина WooCommerce. В этом уроке достаточно много нового и полезного могут найти те, кто не так давно создал интернет магазин с помощью плагина WooCommerce и еще не знают всех возможностей плагина.
В WooCommerce по умолчанию и без каких-либо плагинов можно использовать встроенные шорткоды. Вставляя шорткоды на страницы или записи, Вы можете вывести списки популярных, новых или акционных (со скидкой) товаров, категории и т.п. И так, давайте начнем!
Как вывести последние добавленные (новые) товары?
Данный шорткод часто используют на главной странице для того, чтобы посетители видели новинки в ассортименте магазина:
1
[recent_products per_page="12" columns="4"]
Шорткод выводит 12 последних добавленных товаров в 4 колонки. Для того чтобы изменить количество товаров нужно всего лишь установить нужное цифровое значение в recent_products per_page. Аналогично и с количеством колонок.
Результат:
Как вывести популярные товары?
Для этого используйте шорткод:
1
[featured_products per_page="12" columns="4"]
Этот шорткод работает точно так же, как и предыдущий, но отображает те товары, которые были отмечены звездочками «Рекомендуемый» в списке товаров:
Вывод одного товара по ID или артикулу (SKU)
Для того, чтобы сделать вывод одного нужного Вам товара по ID используйте шорткод:
1
[product id="45"]
ID (идентификатор товара) можно узнать при наведении на товар в списке товаров:
Для вывода товара по артикулу используйте:
1
[product sku="0001"]
Где узнать артикул товара писать не буду. Уверен, что если он у Вас есть, то вы точно знаете ?
Как сделать вывод нескольких товаров по ID или артикулу (SKU)
При желании можно сделать вывод товаров по идентификатору (ID), для этого используйте шорткод:
1
[products ids="1, 2, 3, 4, 5"]
Через запятую нужно указывать ID товаров которые Вы хотите вывести.
Вывести товары можно и с помощью артикулов. Для этого используйте шорткод ниже, в котором через запятую укажите артикулы нужных товаров:
1
[products skus="0001, 0002"]
По умолчанию товары будут отображаться в 4 колонки.
Кнопка «Добавить в корзину» для определенного товара
Еще один интересный шорткод. Он создает кнопку на которой отображается только цена указанного (по ID) товара и надпись «Добавить в корзину».
1
[add_to_cart id="40"]
Вывод страницы товара на любой странице или записи
Интересный шорткод, с помощью которого можно вывести страницу товара на любой странице или записи.
Вывод по ID товара:
1
[product_page id="40"]
По артикулу:
1
[product_page sku="0001"]
Результат:
Как вывести товары из категории WooCommerce?
Для вывода товаров из категории в WooCommerce есть шорткод:
1
[product_category category="kategoriya-1"]
Замечу, что в скобках нужно указывать не название категории, а ее ярлык!
Узнать ярлык категории можно перейдя в Товары -> Категории:
По умолчанию будет выводится 12 товаров в 4 колонки.
Как сделать вывод категорий?
Для того чтобы сделать вывод категории используйте шорткод:
1
[product_categories number="7" parent="0"]
Значение number — количество выводимых категорий.
С помощью шорткода ниже можно вывести категории(ю) по ID:
1
[product_categories ids="7,8" parent="0"]
Результат:
Как вывести товары со скидкой?
Для этого используйте шорткод:
1
[sale_products per_page="4"]
Результат:
Как вывести топ рейтинговых товаров?
Обычно рейтинги товару назначаются при добавлении комментария. На основе этих рейтингов можно сделать вывод товаров. Для этого в WooCommerce есть специальный шорткод:
1
[top_rated_products per_page="12"]
Вывод товаров по свойствам
С помощью шорткода ниже можно сделать вывод товаров по заданным свойствам. В примере ниже вы из свойства Цвет выводим все товары черного цвета.
WooCommerce — мощный, расширяемый плагин eCommerce, который поможет вам продать что угодно. Красиво.
Установка темы (шаблона) для интернет магазина
Выбор темы (шаблона) — очень важныймомент в создании интернет магазина. Вся проблема в том, что некоторые темы не поддерживают работу с плагином Woocommerce, что в свою очередь приводит к некорректному отображению элементов интернет-магазина. Поэтому в данном уроке я буду использовать бесплатный шаблон для интернет-магазина Storefront.
Cкачать шаблон можно на официальном сайте woothemes.com или по прямой ссылке. Если вы вдруг забыли как изменить шаблон (тему) вашего сайта — нажмите сюда.
Чтобы вставить валюту в интернет магазин, откройте wp-content/themes/тему_с_которой_вы_работаете и в файле function.php вставьте следующий код
2. Указываем название товара, категорию, миниатюру, описание и т.д. Делаем все тоже самое, что и при создании простого товара, но выбираем тип товара «Сгруппированный товар».
После этого нажимаем кнопку «Опубликовать».
Таким образом мы создали с Вами сгруппированный товар. Теперь нужно привязать к нему товары, которые будут в нем отображаться. Попробую привести аналогию: сперва мы создаем «коробку», а потом складываем туда товары. Так вот сгруппированный товар и есть коробка, и после его создания нам осталось только добавить в него товары.
3. Открываем любой из уже существующий товаров или создаем новый (но не вариативный) и переходим на вкладку «Сопутствующее». В поле «Группировка» указываемимя группированного товара, созданного в прошлом шаге.
Не забываем нажать кнопку «Обновить» для сохранения изменений.
Указывая группировку в товаре, мы таким образом добавляем его в сгруппированный товар. Аналогичным способом укажите группировку на тех товарах, которые Вы хотите добавить в сгруппированный.
Как создать вариативный товар
1. Для начала нам необходимо создать свойства, которые мы будем использовать в качестве вариаций. В нашем случае их несколько, это цвет и размер.
Для этого заходим в Товары -> Свойства и создаем свойство Цвет и Размер.
Добавляем новые свойства товара
2. Теперь нажимаем на созданное свойство Цвет и в открывшемся окне добавляем значения этого свойства. В нашем примере мы добавим белый, черный и красный цвет.
Добавление цвета в свойства «Цвет»
По аналогии добавляем X, XL, XXL в свойство Размер.
3. Далее нам нужно создать новый вариативный товар или изменить уже созданный товар на вариативный. При создании товара нужно указать то, что он будет вариативным.
Для этого выбираем в выпадающем списке Вариативный товар (при создании по умолчанию стоит значение «Простой товар»). После этого переходим на вкладку Свойства.
Выбираем «Вариативный товар» и переходим на вкладку «Свойства»
4. После перехода в вкладку Свойства выбираем из выпадающего списка свойство Цвет и нажимаем кнопку «Добавить».
Добавляем свойство «Цвет «
После добавления свойства Цвет и Размер необходимо выбрать значения, которые будут в вариации товара. Для этого при нажатии по полю с выбором значений выбираем цвета и размеры, которые соответствуют нашему товару.
Важно!!! Обязательно ставим галочку в «Использовать для вариаций» и после добавления всех значений нажимаем кнопку «Сохранить свойства».
Выбираем значения для вариаций «Цвета» и «Размера»
5. Теперь переходим на вкладку Варианты и нажимаем Присоединить все варианты и в окошке которое появилось подтверждаем наше действия нажав ОК. После нажатия кнопки вы создадите все возможные комбинации свойств вариантов. Что это значит? Это значит что на каждый цвет будут все размеры, а на каждый размер — все возможные цвета. Такой способ является самым быстрымпри добавлении множества вариантов.
Также можно создавать вариативные товары выбирая вручную на какой цвет у вас будут какие размеры. Для этого нужно нажать кнопку «Добавить вариант» и указать цвет и размер на добавленную вариацию.
Я рекомендую добавлять все вариации сразу. Проще и быстрее удалить лишние вариации когда их видно все, чем их добавлять поштучно. В нашем же примере мы будем использовать все возможные комбинации вариантов.
6. После того как все вариации добавлены нужно обязательно указать ценуна всех вариация(если есть скидка, то и скидку). Также на этом этапе можно назначить миниатюру на нужную вариацию (или на все).
Указываем обычную цену и цену со скидкой. Задаем разные миниатюры для вариаций если необходимо.
После того как вы добавите все цены, не забудьте обязательно сохранить изменения нажав кнопку«Обновить», а если товар новый то «Опубликовать».
Как видите все достаточно просто и интуитивно понятно. Возможно в первый раз и кажется все немного запутанным, но после нескольких добавлений вариативных товаров это пройдет ?
Вот так выглядит результат добавления вариативного товара из этого урока:
Результат добавления вариативного товара в WooCommerce
