10 примеров интернет-магазинов на WooCommerce
В один прекрасный день мне захотелось загуглить классные сайты на WooCommerce и что в итоге? Все подборки были скучными и неинтересными, да ещё и с сайтами в стилях 2008 года.
В итоге, после двух дней поисков, составил подборку действительно интересных WooCommerce сайтов с точки зрения дизайна и функционала.
А также очень рекомендую свой видеокурс по созданию темы для WooComerce 🚀
1. Huru
У сайта настолько уникальный дизайн, что, не заглядывая в код, практически невозможно догадаться, что это WooCommerce. Очень гармонично реализованы вариативные товары и допродажи.
2. Root Science
В отличие от предыдущего сайта, находясь на этом лишь минуту, уже становится понятно, что он на WooCommerce. Мне этот нравится тем, что стандартный функционал WooCommerce раскрыт на 100% – яркий пример того, что можно создать качественный интернет-магазин даже без использования тонны плагинов и без разработки дополнительных функций, всё что нужно – заверстать классный (и подходящий) дизайн под WooCommerce.
3. BloomScape
Этот магазин получает лайк от меня за фильтр товаров, а также за реализацию карточек товаров с атрибутами и вариациями. А также за великолепную реализацию страниц Корзины и Оплаты ⚡️
4. Strandberg
Залипательный сайт с гитарами. Каждая страница товара – полноценный лендинг пейдж! Из функционала я бы отметил возможность смены валюты и сравнение товаров.
5. TwoChimps
Тут рекомендую оценить реализацию страницы товара, сообщение о добавлении товара в корзину (очень кайфовое!), а также это первый сайт в нашем списке с функционалом регулярных платежей – у них есть подписки на кофе.
6. La Marzocco
Продолжаем кофейную тему 😁 Простой и интуитивный в использовании сайт, из функционала можно наверное отметить разве что wishlist. Тут больше интересен тот момент, что известные на весь мир бренды используют WooCommerce.
7. Civilist – Легендарный берлинский скейт-шоп.
Реактивный по скорости интернет-магазин на WooCommerce 🚀 Это на случай, если кто-то сомневался в скорости WooCommerce. Мы уже давно знаем, что проблема скорости сайта выражается лишь в одной из двух следующих вещей – хостинг / сервер и руки разработчика.
8. Joco Cups
Долго думал, стоит ли добавлять этот сайт в подборку или нет… С точки зрения дизайна и функционала – он великолепен, с точки зрения оптимизации и скорости.. ээ как бы сказать (на момент написания этого поста он вообще не открывался). Возможно причина в том, что сервера находятся в Австралии (компания австралийская) и действительно бывали случаи проблем доступности таких удалённых серверов. Но также возможно, что разработчикам тупо не хватило опыта сделать норм.
9. Airstream Supply Company
И напоследок – ещё один супер-быстрый интернет-магазин. Правда эти ребята читеры – страницы сайта рендерятся на React, который взаимодействует с REST API самого WooCommerce. А что, так можно было? 😁 Как я уже говорил – прямые руки разработчиков решают.
10. Northern.no
Скандинавский минималистичный интернет-магазин, работающий на WooCommerce.
Бонус. Kalabasa
Недавно я говорил, что не знаю годных русскоязычных интернет-магазинов на WooCommerce. Теперь знаю, и более того, этот сайт разработан мной! 🚀
Смотреть кейс в портфолио • Перейти на сайт
Не уверен, что посты в таком формате – это моё. С радостью бы накидал вам ещё 10 сайтов, но что-то устал 😁
Если найдёте классные сайты, разработанные на WooCommerce (это легко узнать, например по классам тега <body>), кидайте в комментарии к этому посту – буду благодарен!
Миша
Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.
Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.
Можешь сделать обзор на плагин/в или же кастомную реализацию вставки кода у тебя на сайте? Это лучшая как по мне реализация, которою я видел ::)
Спасибо! Я рад, что вам нравится моя реализация! 🙃
Но на самом деле она очень сырая и мой блок в Gutenberg выглядит очень примитивно, я думаю в ближайшем времени попробовать мигрировать на CodeMirror и Prism.
Миша, спасибо что не забрасываете блог. Очередной раз нашел вас через гугл для решения своей нубской проблемы, и решил ее за 3,2 секунды )
Пожалуйста! 🙃 Рад помочь!
Huro заслужил первое место. Блог супер
🔥
Спасибо!
Отличная подборка!
Согласен
Михаил спасибо за всегда актуальную и полезную информацию 🙂
Прочитал пару ваших статей и решил купить курс :))))
Это вам спасибо, что читаете и за поддержку! 🙃🙏
Доброго дня!
Спасибо за подборку.
Сайт kalabasa.ru При наведени на изображение товара появляется эффект (небольшое увеличение). Не подскажите как он был реализован?
Доброго дня!
Пожалуйста, на самом деле при помощи CSS:
Ну и на родительский элемент
overflow:hidden;Спасибо большое!
Как я понимаю сайт на WP + WC
Подскажите, к какому классу CSS Вы применяли масштабирование при наведении мыши?
.wc-block-grid__product?А вы посмотрите в инспекторе браузера 🙂
Прошу прощения, я не шибко силен во всем этом и к сожалению ни с 1ой ни со 2ой ни с 3ей попытки не смог осилить задачу. У Вас вижу класс
.t_grid- видимо это особенность темы Вашего сайта, у меня же тема Storefront...Пытался применять к
.wc-block-grid__product, attachment-woocommerce_thumbnail, wp-post-imageс нулевым результатомтак вы же к самой картинке применяйте, в соответствии с вашей вложенностью
что то в духе : .wc-block-grid__product img
Меня всегда интересовало, как можно вывести iframe полной корзины на страницах магазина, с возможностью добавлять в нее товары. Чтобы тут же в корзине менять количество и проводить другие операции. (Речь не идет о мини-корзине)
А по карточкам меня восхищает этот сайт - torrefacto.ru/catalog/roasted/
Думаю, как можно также сделать? Правда это не WooCommerce ((