Как сделать тему для woocommerce
Изменить внешний вид Woocommerce, товары, кнопки, страницы, цвет, размер
Привет! Продолжаем разбирать самые интересные и полезные плагины для интернет-магазина woocommerce. Сегодня вы узнаете как изменить внешний вид онлайн магазина woocommerce. Вы сможете изменить внешний вид страницы товара, страницы магазина, страниц оформления заказа и корзины. Вы сможете менять цвет и размер заголовков, цен, описаний, категорий, скрыть не нужные элементы, изменить цвет и размер кнопки в корзине и т.д.
Изменить внешний вид интернет-магазина Woocommerce
Product Shop Page, страница товара.
– Selected Products, выберите здесь All, тогда изменения будут касаться всех товаров. Вы можете выбрать только один товар или несколько определённых товаров.
– Product Images, поставьте здесь галочку, чтобы скрыть изображение товара.
– Product Title, поставьте здесь галочку, чтобы скрыть заголовок товара.
– Logged In User Only, если поставите здесь галочку, то кнопку Добавить в корзину будут видеть только зарегистрированные пользователи.
– Products Prices, поставьте галочку, чтобы скрыть цены на товары.
– Add To Cart Button, поставьте здесь галочку, чтобы скрыть кнопку Добавить в корзину.
Shop Page Appearance, внешний вид страницы Магазин.
– Remove Unset Product Images, поставьте галочку, чтобы скрыть изображения которые не установлены.
– Set Default Product Image, здесь можно задать изображение, которое будет использоваться по умолчанию для товаров у которых нет изображения.
– Title Font Color, здесь вы можете выбрать цвет шрифта для заголовка товара.
– Title Font Size, выберите размер шрифта заголовка товара.
– Title Font Weight, здесь вы можете выбрать тип шрифта для заголовка товара.
– Price Font Color, выберите цвет цены товара.
– Price Font Size, выберите размер цены товара.
– Price Font Weight, выберите тип шрифта цены товара.
Product Details Page, одиночная страница товара.
– Selected Products, выберите для каких товаров будут происходить изменения. Для всех товаров выберите All.
– Product Images, поставьте галочку, чтобы скрыть изображения товара.
– Product Title, поставьте галочку, чтобы скрыть заголовок товара.
– Product Tabs, поставьте галочку, чтобы скрыть вкладку товара.
– Related Products, поставьте галочку, чтобы скрыть похожие товары.
– Logged In User Only, поставьте здесь галочку, чтобы кнопка Добавить в корзину, была видна только зарегистрированным пользователям.
– Products Prices, поставьте галочку, чтобы скрыть цену товара.
– Add To Cart Button, поставьте галочку, чтобы скрыть кнопку Добавить в корзину.
– Products Category, поставьте галочку, чтобы скрыть категории товара.
Detail Page Appearance, внешний вид страницы товара.
– Remove Unset Product Images, удалить неопределённые изображения.
– Set Default Product Image, задать изображение по умолчанию для товаров у которых нет изображений.
– Title Font Color, выбрать цвет заголовка товара.
– Title Font Size, выбрать размер заголовка товара.
– Title Font Weight, выбрать тип шрифта заголовка.
– Price Font Color, цвет цены товара.
– Price Font Size, размер цены товара.
– Price Font Weight, тип шрифта цены товара.
– Description Font Color, цвет описания товара.
– Description Font Size, размер текста описания товара.
– Description Font Weight, тип шрифта текста описания товара.
– Category Font Color, цвет категории товара.
– Category Font Size, размер текста категории товара.
– Category Font Weight, тип шрифта категории.
– Сохраните сделанные изменения.
Cart Page, корзина.
– Cart Empty Button, поставьте галочку, чтобы добавить кнопку Корзина пустая на страницу Корзина.
– Button Font Color, цвет кнопки пустой корзины.
– Button Font Size, размер кнопки.
– Button Font Weight, тип шрифта кнопки.
– Нажмите на кнопку – Save All Settings для сохранения настроек.
Checkout Page, страница Оформить заказ. Здесь вы сможете выбрать между двумя параметрами Disable – отключить, Optional – необязательно.
– Billing Country, биллинг страны.
– Billing First Name, биллинг имя.
– Billing Last Name, биллинг фамилия.
– Billing Company, биллинг компания.
– Billing Address1, биллинг адрес 1.
– Billing Address2, биллинг адрес 2.
– Billing City, фактура города.
– Billing State, биллинг государства.
– Billing Post Code, биллинг код поста.
– Billing Email, биллинг электронная почта.
– Billing Phone, биллинг телефон.
Shipping, доставка.
– Shipping Country, доставка страна.
– Shipping First Name, доставка имя.
– Shipping Last Name, доставка фамилия.
– Shipping Company, доставка компания.
– Shipping Address 1, 2, доставка адрес 1 и 2.
– Shipping City, город доставки.
– Shipping State, государственная доставка.
– Shipping Post Code, доставка код поста.
– Account Password, пароль учётной записи.
– Order Comment, комментарий заказа.
– Сохраните сделанные изменения.
WooCommerce шаблоны для сайта интернет-магазина одежды
Торговля одеждой — популярная ниша в интернет-коммерции. Одна из причин высокого рейтинга такого бизнеса — это простота создания онлайн-магазина. Благодаря многофункциональным шаблонам WordPress, создание качественного сайта уже не требует особых знаний программирования и дизайна. Нужно лишь выбрать вариант магазина WooCommerce, установить шаблон, настроить его, добавить изображения, видео и текстовый контент.
В сегодняшнем обзоре 10 качественных WooCommerce премиум-шаблонов от TemplateMonster для открытия интернет-магазина одежды.
Hugesale — многоцелевой WooCommerce шаблон интернет-магазина
Трендовый шаблон Hugesale станет замечательным каркасом для будущего онлайн-магазина. Если дизайн по умолчанию не по вкусу, его можно легко изменить несколькими щелчками мыши. Существует множество красивых элементов дизайна и различные страницы, такие как домашняя страница, несколько страниц для продаж и для блога. Благодаря сочетанию различных плагинов и многофункциональности, даже новичок сможет справиться с разработкой сайта.
Nakes — Lingerie ECommerce Modern Elementor
Нежный женственный дизайн этого шаблона призван подчеркнуть преимущества товара и создать должную атмосферу на сайте. Шаблон создан на базе билдера Elementor, а это значит, что трудностей с настройкой и редактурой сайта быть не должно. Плагины Jet позволяют располагать многочисленными инструментами для работы с сайтом и для упрощения навигации по сайту для клиента. Поддержка 24/7 всегда придёт на помощь во всех вопросах настройки и эксплуатации.
Holyster — Fashion
Этот шаблон достаточно прост и лаконичен, но при этом имеет свой стиль, свой «изюм». Дизайн полностью адаптирован под любые устройства. Тема имеет страницу блога для обсуждения новостей и интересных фактов. Возможности инструментария шаблона позволяют редактировать страницы по предпочтению. Каждый товар имеет рейтинг, отзывы и детальные описания с фото.
Fabulous — шаблон WooCommerce интернет-магазина брендовой одежды
Модный молодёжный дизайн этого шаблона производит впечатление. Имеет 5 страниц блога, что позволяет наладить и поддерживать контакт с аудиторией. Веб-формы подписки позволяют клиенту быть в курсе всех событий. А форма поиска и расширенный интерфейс порадуют клиентов своим удобством.
Данный премиум шаблон имеет множество преимуществ. Его установка занимает несколько минут и пару кликов мыши. Добавить новые страницы или отредактировать старый тоже проще простого благодаря конструктору Elementor. Страницы сайт можно будет отображать на многих языках. Можно добавлять интересные предложения, а также акции и скидки на домашнюю страницу.
Wummo
У этого шаблона есть множество возможностей для создания полноценного сайта по продаже одежды через интернет. В поставляемый пакет входят различные страницы, каждая со своим стилем. Переключатель цветов шаблона служит большим плюсом при оформлении дизайна. Конструктор посадочных страниц прекрасно справляется со своей ролью, что позволяет человеку, не имеющему особого опыта в программировании, создать сайт не хуже профи.
Leesopi
Leesopi — очень креативный шаблон, имеет в своей основе яркий и стильный зелёный цвет. Эффект масштабирования позволяет клиенту тщательно просматривать товар. Рейтинг товара, отзывы и портфолио предоставляют возможность для покупателя оценить по достоинству продукт. Шаблон мультиязычный — имеет в своём арсенале множество распространённых в мире языков.
Boombag — WooCommerce Theme
Этот шаблон создан специально для современного и модного интернет-магазина. Благодаря встроенным плагинам, настройка сайта не представляет никакой сложности. Дополнительные параметры Ecommerce-темы и дополнительные параметры модулей дают возможность создать вкус сайту. Есть возможность вести страницу блога.
Modella — Rockability Fashion
Трендовый дизайн шаблона Modella найдёт отклик в сердцах молодёжи. Одним из наиболее полезных элементов является набор инструментов Jet Plugins для Elementor Page builder. Все плагины устанавливаются легко и быстро благодаря встроенному мастеру Jet Plugin Wizard. Добавить привлекательные эффекты анимации в несколько кликов, чтобы оживить контент на сайте, возможно с помощью плагина JetTricks.
Noe — Style & Fashion
Ещё одна стильная и модная WP-тема для коммерческого продвижения товара. Яркий шаблон отличается элегантными цветовыми схемами, интересной анимацией. Он собрал в себе плагины премиум-класса WooCommerce, Slider Revolution, установку в один клик, Mailchimp, контактную форму 7. Тема поставляется с множеством анимаций слайдера.
Самостоятельная разработка интернет-магазина на WordPress и WooCommerce
Здравствуйте, сегодня хочу дать подробную инструкцию на тему самостоятельного создания интернет-магазина на базе WordPress + WooCommerce. Многие считают WP чисто блоговым движком, раньше было именно так, но сейчас всё серьёзно изменилось. Движок поддерживает множество функций, является модульным, потому собрать можно практически что угодно.
Оговорюсь сразу, на той же PrestaShop сделать ИМ можно намного легче, но собрать сайт-универсал будет труднее. Поэтому остановимся именно на WP + WC. Поверьте, сделать интернет-магазин самостоятельно очень просто. И я расскажу как.
Создаём интернет-магазин на базе WordPress и WooCommerce
Итог, конечно, получится немного тяжеловесный. Плагин для коммерции жрёт много ресурсов, прибавляет неплохое количество запросов к серверу, но для ИМ до 10 тыс. товаров подходит, дальше становится сложнее масштабировать, хотя неоднократно слышал про 100 тыс. товаров на сайтах. Но ссылку на таких монстров на WP+WC так никто и не сбросил.
Можно использовать PrestaShop для чистого ИМ, но блоговый функционал и возможности построения сложных многозадачных проектов у сей CMS оставляют желать лучшего. Попробуйте, например, впихнуть туда визуальный конфигуратор товара, приключений ожидает немало. Да и стоимость разработки заметно выше. Одни плагины, которые будут бесплатны для Ву, в Престе сожрут больше 200 долларов.
Поэтому остановимся именно на этом стаке. Он позволит построить серьёзный интернет-магазин. Конечно, до специальной разработки под задачи на фреймворке недотянет. Но тут вопрос ещё будет стоять в грамотности разработчиков, знаний и финансах.
Персонализированные проекты — сложная и дорогая задача. И не у всех получается. Не буду тыкать пальцем, но даже у очень крупных площадок выходит ерунда порой.
И по просьбам некоторых людей распишу от А до Я. Начиная с выбора домена и хостинга, заканчивая непосредственно установкой.
Этап 1: выбор домена
Начнем с доменного имени. Это ваше лицо во Всемирной паутине. Хотите того или нет, но вам нужно выбрать хорошее и запоминающееся имя. И чтобы написать его можно было без ошибок.
Например, мой домен coffeelake.ru однажды оказался проблемой только из-за того, что не все знают, как пишется слово coffee по-английски. Соответственно, вводят с одной f или e. Чем проще имя, тем лучше. Можно даже немного пошлое.
Когда занимались продажей сетевых систем хранения (Network storage system, NAS), то предлагал вообще выкупить домен nas.ru. Звучит забавно, но поверьте, люди бы запомнили, нагенерировали ссылок. В общем, были шансы, что домен неплохо бы зашел.
Но консерваторы от бизнеса не особо одобрили и до сих пор сидят с никому не нужным ИМ, на который заходит 20 человек в сутки. Впрочем, продажи есть, они довольны, но в сети позиционирование нулевое.
Конечно, любой хостер предлагает купить домен у них. Но на данный момент более удобного места для приобретения доменного имени, чем у Рег.ру, не нашел. Вот, собственно и инструмент для массового выбора имен: https://www.reg.ru/domain/new/choose.
Стрелками указал, куда вводить имя. Также можете проверить массово несколько доменов на доступность. Дальше просто перебирайте. Вы получите выдачу с именами, далее можете выбирать нужное.
И вот вам промокод на скидку в 5% на покупку домена: 8404-F30B-D292-4306
Домен выбрали, теперь перейдём к не менее важным аспектам.
Этап 2 : выбор хостинга
WooCommerce — прожорливый плагин, который требует множество ресурсов. В данном случае важно качественное кэширование, которое помогает при повторных посещениях. Отлично, если доступен Redis, но гораздо больше мне понравился веб-сервер LiteSpeed.
Хостинги, на которых доступе Redis – это Beget: https://beget.com/. Хотя, если честно, работать с данным хостингом не особо понравилось, а также облачный сервер Jelastic: https://www.reg.ru/cloud-services/jelastic/.
Последний показался довольно шустрым, а ещё порадовал тем, что платить нужно только за реальную работу сервера, соответственно, на обычном блоге у меня набегало не более 200 рублей в месяц.
Настройка Redis для WP — процесс занятный, по крайней мере на шаредах редиску настроить точно не сможете. Придется брать VPS, а поработать с параметрами виртуального приватного сервера — нелегкая задача.
Так что проще использовать хостинг с LSAPI (LiteSpeed API). При первых обращениях он работает медленнее, чем nginx+apache, но быстрее, чем чистый Apache. При повторных обращениях выдает гораздо лучшие результаты. Потому для обыкновенного блога вариант не самый лучший, но в интернет-магазине раскроется полностью.
В данном случае порекомендую хостера Fozzy: https://fozzy.com/. Там есть LiteSpeed, а также бесплатная CDN по всей России. И скидка 10% на услуги: 0f42e170-1599-4410-8934-83f003aa61df
По поводу зарубежных площадок дельного совета дать не могу. Тестировал только российских поставщиков услуг.
О принципах выбора хостинга для WordPress рассказывал здесь. Можете почитать, информация будет полезна для держателей сайтов.
Этап 3: подготовка к установке
Для начала скачиваем архив с Вордпресс с официального сайта: https://ru.wordpress.org/download/. Там будет свежая версия движка. После рекомендую его распаковать у себя на компьютере, и дойти до корневой папки, где содержится файловая система WP.
И все содержащиеся там папки запакуйте в отдельный zip- архив, ибо большинство провайдеров поддерживают только этот формат.
Теперь откройте админ-панель вашего хостинга и создайте WWW- домен для вашего сайта. Не забудьте поменять NS- серверы при привязке домена к хостингу. Они могут обновляться до 24 часов. Укажите NS- серверы вашего хостинга. Их можно уточнить у вашего провайдера услуги. На Reg.ru можете сделать следующее:
Нажать на никнейм вашего аккаунта в правом верхнем углу экрана → кликнуть по «Мои домены» → выбрать ваш домен.
Далее можете прям из панели привязать ваш домен к хостингу. В левом меню переведите переключатель в положение ON, если хостингов несколько, укажите, какой именно нужен.
Если провайдер другой или предпочитаете руками поработать, то выберите в правой колонке DNS- серверы, после чего в открывшемся окне укажите NS- сервера вашего поставщика услуги.
Готово, теперь сайт привязан к хостингу и после обновления DNS можно приступать к работе.
Далее созда ё м WWW- домен для сайта. На ISPmanager это делается довольно просто:
в правом меню кликаем по кнопке « WWW- домены»;
тыкаем в кнопку создать.
После у вас появится интересное окошко, в котором нужно указать параметры сайта.
Давайте разберём по порядку:
В качестве имени укажите ваш корневой домен. Лучше без www. А вот как псевдоним можно указать домен с www или ваш технический домен.
Для корневой директории укажите папку, в которой планируете разместить сайт.
Включите SSL и перенаправление с HTTP в HTTPS. И сразу создайте новый Let’s Encrypt сертификат, он бесплатен. Если у вас есть платный сертификат, например, Comodo, то он устанавливается иначе. Но это уже отдельная история, инструкцию хостер вам даст, либо сделайте самостоятельное присоединение через TXT- записи.
Далее, выбираем режим PHP, например, FastCGI или другой веб-сервер, тот же LSAPI.
Версию PHP укажите 7.3. Она самая шустрая. В середине 2020 года можете выбирать 7.4, думаю, к тому моменту под нее все допилят, но сейчас немного кривовато работает.
Если желаете, можете пролистать чуть ниже и настроить сжатие и кэширование. Сжатие выставляйте на максимум. А кеширование поставьте сроком на 5 дней.
Теперь нужно закинуть архив с файловой базой WP, который ранее сделали в корневую папку сайта. В моём случае /www/test/. У вас может быть иначе. Чаще всего путь к корневой папке будет выглядеть так: httpd/site.name/ или www/site.name. Если не знаете точно, уточните в поддержке хостинга. Вам помогут.
Файловую базу распакуйте непосредственно в корневую папку сайта.
После распаковки должно выглядеть так.
Отлично, теперь перейдём к следующему этапу. Нужно создать новую базу данных. На скриншоте указываю, куда необходимо ткнуть в случае ISPmanager.
Скорее всего, у вас будет пустое окно, а у меня уже много баз расположено. Нажмите кнопку создать.
У вас появится окошко, в котором нужно будет указать имя базы данных, создать пользователя и указать пароль. Запомните, а лучше запишите эти данные, в процессе установки они понадобятся.
Всё, подготовка окончена, теперь пришло время перейти непосредственно к установке WordPress и WooCommerce.
Этап 4: установка
Теперь давайте установим WordPress, а после подключим плагин для электронной коммерции WooCommerce. Это сделать будет нетрудно. Так что впер ё д и с песней!
Итак, запуск инсталляции довольно прост. После распаковки файлов вам достаточно ввести адрес своего сайта в таком виде: https:// ваш-сайт. ru. Если устанавливать решили без ssl, то протокол будет http, но не рекомендую использовать небезопасный протокол для интернет-магазина, его будет тяжелее продвигать в поисковых системах, а также безопасность данных пользователей окажется под угрозой.
После ввода адреса вашего сайта появится такое диалоговое окно:
Нажмите кнопку «Вперёд!». Появится следующее окно. Тут понадобятся имя, логин и пароль базы данных.
Заполните поля. Обычно сервер БД — localhost. Если вылезет ошибка, то причиной может оказаться нестандартная конфигурация хостинга или неправильно настроенный VPS, обратитесь в поддержку или вкурите мануалы хостера. Префикс таблиц менять необязательно, только в случае, если в одной БД расположено сразу несколько сайтов.
Нажимайте кнопку «Отправить» и пред вами предстанет следующее окошко.
В этом окне нужно ввести данные пользователя:
название сайта (потом можно поменять);
имя пользователя (запомните его, нужно для входа);
пароль (тоже понадобится, ваш Кэп);
email администратора, желательно такой, доступ к которому не потеряете.
Также можете включить функцию, чтобы поисковые системы не индексировали новый сайт. Но это необязательно. Особенно если создаёте с нуля на новом домене. Если используете старый домен с историей, то на него лучше загнать сразу готовый сайт, предварительно разработанный на техническом домене.
Вс ё готово, осталось только ткнуть по кнопке «Установить WordPress ». Через минуту (даже меньше), сайт будет готов. Нажмите в следующем окне кнопку «Войти». Далее появится окно входа в панель администратора. Здесь нужно ввести логин и пароль, которые вы ранее указали. И снова «Войти».
Отлично, вы попали в панель администратора WordPress. Осталось совсем чуть-чуть.
Этап 5: подключаем WooCommerce
Теперь нужно установить плагин для электронной коммерции. Сделать это проще простого. Для начала потребуется навести курсор на место, указанное на скриншоте.
Там во всплывающем меню нажмите «Добавить новый». В этом окне в поисковую строку, отмеченную стрелкой, введите « WooCommerce » (без кавычек).
После нажмите Enter и вам будет выдано соответствие из репозитория. Ниже отметил плагины, которые нужно установить. Админка для Вуукоммерц на ваше усмотрение, но инструмент удобный, хоть и не идеальный.
Дальше перейдите в «Плагины» → «Установленные».
Отметьте указанные чекбоксы. И в отмеченном месте выберите «Активировать», затем нажмите «Применить».
Теперь появилось вверху экрана диалоговое окно. В нем нажмите кнопку «Запустить помощника установки». Либо можете сей этап пропустить, но все равно придётся это сделать позже.
Итак, запустили, появляется первый этап настройки. Здесь нужно указать место базирования магазина и валюту, а также тип товаров, который планируете продавать. В мо ё м случае это будет Франция, город Тулуза. На скриншоте наглядно показал. Не переживайте, Российская Федерация и рубль тоже поддержива ю тся.
В плане продажи товаров можно продавать как физические, так и цифровые, также отметьте чекбокс «Я буду также продавать товары или услуги лично.». Это понадобится для того, чтобы администратор мог контролировать финансовые операции.
Теперь перед нами следующее окно. Если желаете принимать онлайн-платежи, то обязательно установите модуль для WC Stripe, это позволит работать с безналичной оплатой. В том числе и на территории России. Также можно подключить модуль для PayPal. Офлайн-оплата нужна для возможности оплаты чеками или при подключении терминала.
Отлично, выбрали необходимое и кликнули по кнопке «Продолжить». И попадаем в окно «Доставка». Думаю, нетрудно догадаться, что придется здесь настроить.
Здесь оставьте как есть. Для того чтобы использовать более сложные методы доставки, вам прид ё тся добавить парочку расширений. Потом вы попадете в окно рекомендаций. Оставьте там вс ё по желанию. Лично убираю Mailchimp и Facebook.
Продолжаем. Плагин JetPack ни в коем случае не устанавливаем. Ходят слухи, что он полезен, но это монстр, серьёзно замедляющий сайт. Проверено. Так что «Жутьпак» ни к чему. Тыкаем по еле заметной надписи, отметил её на скрине.
Дальше можете подписаться на рассылку, создать первый товар или сделать импорт. На ваше усмотрение. Но про сие аспекты расскажу в следующих статьях. Сейчас нужно сделать немного другое, чтобы создать интернет-магазин на базе WordPress и WooCommerce до конца. Нажмите кнопку «Перейти в консоль».
Этап 6 : выбор темы
В правом меню выбрать «Внешний вид» → «Темы».
В левом верхнем углу «Добавить новую».
Дальше нажимаем на «Фильтр характеристик».
В левом меню выбираем «Магазин».
Кликаем «Применить фильтры».
Дальше у вас появится список тем, поддерживающих плагины электронной коммерции. Обычно под этим подразумевается WooCommerce.
Ищем тему, которая понравится. Встроенные демки будут выглядеть неказисто, так что смотрите либо на сайте разработчика, либо устанавливайте на собственный сайт. Но он пустой, так что выглядеть будет не лучше, чем на демке.
Что будете делать вы? Не знаю, выбирайте любую, которая понравится. Но учтите, если будете юзать Elementor, то знайте, что плагин очень тормозит ваш сайт. Поаккуратнее с ним. Впрочем, работать с данным плагином можно, он похорошел и уже менее прожорлив, чем раньше.
Интернет-магазин почти готов!
Конечно, в рамках одной статьи обрисовать всё будет крайне тяжело. Но как создать интернет-магазин на базе WordPress и WooCommerce теперь знаете. Большую часть пути уже прошли, дальше потребуется включить фантазию и поработать.
В следующих статьях научу делать главную статическую страницу, создавать товары, а также делать отслеживание событий с помощью Яндекс Метрика и Google Anal y t i cs. Когда преодолеем все трудности, вы сможете создать самостоятельно полноценный магазин для себя без найма разработчика.