Как натянуть верстку на woocommerce
Введение в создание WooCommerce-тем для WordPress
Дата публикации: 2017-09-18
От автора: Woocommerce — это популярная eCommerce платформа для WordPress, которую WooThemes стремительно развивают. В этой статье я расскажу, как создавать темы для для WooCommerce.
Статья написана с некоторыми предположениями по поводу вашей среды разработки:
У вас установлены WordPress и WooCommerce.
Вы знакомы с созданием тем WordPress и использованием HTML и CSS.
Вы использовали инструменты разработчика Chrome или аналогичные инструменты для веб-разработки, такие как Firebug.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Настройка плагина WooCommerce CSS
Обычно WooCommerce поставляется со встроенным CSS, который позволяет сделать его совместимым с максимально возможным количеством тем. Стандартный CSS- отличная отправная точка, но маловероятно, что он будет идеально соответствовать стилю вашей темы сразу после установки.
Таким образом, есть два способа редактировать CSS для темы WooCommerce:
Вы можете использовать стили по умолчанию в качестве базы и переопределить их.
Вы можете отключить стили по умолчанию и начать с нуля.
Переопределение стилей по умолчанию
Переопределение стилей по умолчанию — это самый быстрый способ начать работу, который подходит большинству людей.
Вы можете скопировать стандартный файл CSS WooCommerce целиком (находится в wp-content \ plugins \ woocommerce \ assets \ css \ woocommerce.css или woocommerce.less), удалить все, что не нужно, и изменить все, что требуется; однако это может занять много времени и привести к повторению CSS кода.
Для этого я обычно использую следующий подход:
Просматриваю сайт и нахожу стили, которые мне нужно изменить.
Далее я использую инструменты разработчика Chrome (или аналогичный инструменты) для идентификации классов и вношу изменения в браузер, чтобы убедиться, что понимаю, как это будет выглядеть. Обычно это делается щелчком правой кнопкой мыши на странице и выбором «инспектировать элемент» в раскрывающемся списке.
После я просматриваю CSS в инструментах разработчика Chrome, так как он может разбить или вычеркнуть любые префиксные версии для других браузеров. Важно изменить эти значения так, чтобы CSS соответствовал различным браузерам, которые могут использовать посетители вашего сайта.
Наконец, я удаляю все значения, которые я не изменял в скопированном CSS. Например, если бы я менял ширину чего-то, но не имел высоты, то мне не нужно включать высоту в свой собственный файл CSS.
Лично я считаю, что этот подход лучше всего работает в большинстве случаев и действительно сокращает время разработки.
В Google Chrome вы можете щелкнуть правой кнопкой мыши по элементу в окне «Инструменты разработчика», чтобы переключать различные состояния (hover, active и т. д.). Это позволяет просматривать все состояния без поиска в исходном файле CSS.
Отключение стандартной таблицы стилей и запуск с нуля
Стандартную таблицу стилей можно отключить, добавив небольшой фрагмент кода к темам functions.php:
Самый быстрый способ получить все классы WooCommerce — скопировать исходный файл CSS WooCommerce в свой собственный и удалить все, что вам не нужно.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Объявление поддержки WooCommerce в теме
Это особенно важно, если вы продаете темы или публикуете их для пользователей.
Без специального объявления поддержки WooCommerce в вашей теме пользователям будет показано сообщение об ошибке при установке WooCommerce, и оно останется там до тех пор, пока оно не будет отклонено.
К счастью, все это можно решить с помощью небольшого фрагмента кода, вставленного в ваши файлы functions.php темы:
Немного углубимся: редактирование шаблонов
Редактирование CSS в WooCommerce довольно долгий путь, действительно ли вы хотите настраивать макет страниц? К счастью, есть хороший способ сделать это.
Плагин WooCommerce поставляется с несколькими front end HTML-шаблонами, а также с шаблонами электронной почты. Вместо редактирования этих файлов непосредственно в плагине (это очень плохая идея, потому что после обновления плагина все ваши изменения будут потеряны!), можно просто скопировать их в свою тему:
В каталоге темы создайте новую папку под названием «woocommerce».
Перейдите в каталог плагина WooCommerce и откройте папку «шаблоны». Папка шаблонов имеет множество подпапок со всеми различными шаблонами, которые использует WooCommerce. К счастью, файловая структура шаблона и именование в WooCommerce легко отслеживаются.
Во вновь созданной папке «woocommerce» скопируйте файл шаблона, который вы хотите отредактировать. Не забудьте сохранить структуру каталогов. Если шаблон, который вы хотите изменить, находится внутри подпапки, не забудьте создать эту подпапку в каталоге темы.
Отредактируйте файл из папки «woocommerce» и сохраните изменения.
Практический пример
Предположим, что мы хотим изменить некоторые из HTML на экране «Мои заказы» WooCommerce. Первое, что нам нужно сделать, это найти правильный шаблон. В этом случае раздел «Мои заказы» находится в разделе «Моя учетная запись» в WooCommerce. Структура каталогов выглядит следующим образом: /wp-content/plugins/woocommerce/templates/myaccount/my-orders.php
Затем необходимо создать папку в теме под названием «woocommerce», и внутри этой папки создать вторую папку под названием «myaccount». После этого нужно скопировать my-orders.php файл в каталог. Следует оставить следующее: /wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php
Любые изменения, внесенные в этот файл, теперь будут переопределять оригинал.
Цикл WooCommerce
Если вы уже создавали или редактировали темы WordPress раньше, вы должны быть знакомы с The Loop. У WooCommerce есть собственный цикл, позволяющий настраивать страницы WooCommerce, который вы можете использовать. Например, вы можете захотеть сделать это, когда хотите загрузить другую боковую панель для своих страниц WooCommerce.
Это самая простая интеграция и создание пользовательского шаблона WooCommerce, который будет применяться к каждой странице WooCommerce, включая продукты, категории и архивы. Если вы не хотите, чтобы ваш шаблон WooCommerce отличался от стандартного шаблона, то не нужно создавать собственный шаблон WooCommerce. Создание шаблона — прямолинейный процесс:
Как изменять WooCommerce. Эпизод #1. Введение: файлы, хуки, фильтры
Теоретические выкладки, о структуре файлов WooCommerce и о том, как правильно изменять WooCommerce через хуки. Вводное видео, о том как работают хуки в WooCommerce, какими инструментами пользоваться и правильно изменять файлы.
Инструменты
Для правки кода требуется использовать редакторы кода. Так как в них есть подсветка кода и очень удобно вносить правки или писать код с нуля.
В видео весь код правится через PhpStorm это не просто редактор, а целая система. Очень крутая, но платная. Хотя можно скачать или триальную версию, или пользоваться бетой совершенно бесплатно.
Бесплатные редакторы
Пользоваться можно любым, главное, чтобы удобно было. Рекомендую VS Code — при правильной настройке будет не хуже PhpStorm
Как правильно добавлять код
Существует два способа:
Все это делается для того, что бы при обновлении темы все ваши изменения сохранились.
Дочерняя тема
Дочернюю тему можно сделать самостоятельно или использовать плагин. Как сделать самостоятельно смотрите в видео
Еще удобно дочернюю тему сделать через плагин. Например, плагин Child Theme Configurator позволит прямо из админки создать дочернюю тему. После использования плагин можно удалить.
Специальный плагин
Другой способ вносить изменения использовать специальные плагины. Например, плагин Code Snippets позволяет делать подобные вставки. Или можно использовать пустой плагин. Об использовании пустого плагина, можно узнать в этой статье.
Всегда внимательно копируйте код сниппетов и делайте бекапы, не ленитесь.
Где смотреть документацию по WooCommerce
Нигде) Расписанной документации как таковой нет. Можно посмотреть то, что есть на официальном сайте
Без поллитры в ней не разобраться)
Предпочитаю смотреть код WooCommerce на GitHub, а если установить расширение Octotree для браузера Хром, то становится очень удобно просматривать файлы.
К тому же, на GitHub есть еще Wiki по WooCommerce, в которой подробно расписаны некоторые моменты. Это бывает полезно.
Как работают хуки в WordPress
Хуки или события и фильтры — это основная событийная модель работы WordPress. Не забываем, что WooCommerce — это плагин для WordPress. Для внесения изменений в WooCommerce чаще всего используются фильтыы и события.
Хуки — это важно! От понимания того, как работаю хуки будет зависеть понимание всей дальнейшей информации как этого курса, так и любых других связанных с разработкой на WordPress и WooCommerce.
Небольшое видео, для понимя работы хуков
По теме хуков еще рекомендую почитать статьи:
Как изменять (переопределять) файлы WooCommerce
Полный путь к папке шаблонов из корня сайта /wp-content/plugins/woocommerce/templates/
Пример: чтобы переопределить уведомление о заказе администратора, скопируйте: wp-content/plugins /woocommerce/templates/emails/admin-new-order.php в wp-content/themes/yourtheme /woocommerce/emails/admin-new-order.php
Скопированный файл будет переопределять файл шаблона WooCommerce по умолчанию.
Предупреждение: не редактируйте эти файлы в самом ядре плагине, так как они перезаписываются в процессе обновления, и любые настройки будут потеряны.
Примеры использования хуков
Включение поддержки WooCommerce в теме
Базовое включение поддержки WooCommerce
Включение поддержки WooCommerce с передачей
Это установка значений по умолчанию
Подключение zoom, swipe, lightbox
Отключение стилей WooCommerce
Загрузка файлов CSS и JavaScript WooCommerce только на страницах магазина
Заключение
Это вводная часть. В ней разобрали какими инструментами пользоваться, как вносить код и некоторые другие вещи.
Как изменять WooCommerce через хуки смотрите в видео выше по таймкоду 8:32. С этого времени как раз начинаются примеры кода.
Удачи в изменении WooCommerce! Вопросы, предложения пишите в комментариях, и не забудьте расшарить эту статью в соцсетях! Вам это ничего не стоит, а меня будет мотивировать)
Натяжка на WooCommerce. HTML2WC. Введение. Настройка окружения. Инструменты
Sharing is caring
Понравилось это:
Похожее
Меня зовут Артем Абрамович и я являюсь фрилансером-вордпресером. Занимаюсь настройкой и редактированием сайтов созданных на CMS WordPress. Это основная моя специализация, есть еще несколько работ, которыми я занимаюсь, но обо этом вы можете более подробно узнать из моего портфолио.
82 комментария к “Натяжка на WooCommerce. HTML2WC. Введение. Настройка окружения. Инструменты”
Это некое продолжение? всё как то сумбурно и быстро. где тему брать так и не понял.
в следующем видео покажу как чего
Артем надо в цсс шапочку написать с заглавием темы
Вп ж не понимает что это и к чему
Ну да, верно. Не подумал на эту тему. Но в следующей серии уже будет полноценная тема, это ведь просто база
. Артем отлично, спасибо что начали этот курс. Очень полезный будет для меня. Да и не только для меня. 🙂
Артём – привет! Нужный курс!) Я – в деле) Лайк и подписка!
Здесь очень важно умение объяснять доходчиво материал, в этом проблема многих авторов курса. Надеюсь, у вас всё получится классно!)
И вот проблемка – в скачанной теме при попытке активировать её вордпресс ругается про файл style.css, в котором не прописано что-то в заголовке темы.
Надо тему ставить из архива e-store-theme.zip все срастется, если нет, то в следующем видео покажу как чего
Артём, я уже столько тем переставил, так что не совсем чайник))) хотя, надо завтра попробовать на чистый вордпресс поставить попробовать, может это у меня траббл какой-то, не спорю)
Луче вообще не ставь, а просто в файлы ВП закинь, там стайл пустой, может из-за этого ошибку выдавать
Кстати, давно подписан на Артема и заметил такую вещь… Сравнить видео которые были пол года-год назад и сейчас, качество видео заметно улучшилось, в видео теперь присутствуют различные анимации, например, в этом видео прикольная анимашка по плану курса.
Спасибо за добром слове) Анимашки и раньше были, просто без них проще все монтировать, зато с ними нагляднее
Артем, а чем пользуетесь при записи и монтаже?
Программой Camtasia, за глаза хватает
Пока не начнешь выкладывать никогда не узнаешь актуально или нет. Начни уже видосы выкладывать и посмотрим как чего
Супер просто!! Давно я ждал уроков по чистой разработке темы под WooCommerce, а тут ещё и на моем любимом phpStorm. Все уже подготовил, с нетерпением жду следующих уроков. Огромное Вам спасибо за освещение такой темы, уверен что она очень многим будет полезна!
Курс в тему, как раз сейчас буду делать на инт. маг. на woocomerce.
Вот я думаю как все же будет правильне:
1. Делать тему с нуля
2. Использовать undescose
3. Использовать стартовую тему которую советуют сами разработчики woocomerce
4. Взять за основу другую тему, например Divi
Кто что скажет на этот счет? Как будет грамотнее и быстре?
Смотря какой дизайн. Если уникальный дизайн или кастомная верстка, то лучше по пп1-2, ну или свое что-то запилить. Как собственно и будет в этом курсе
Если на дизайн и верстку не завязано, то лучше использовать Store Front, ту что от самих Вукомерсов
Дизайн уникальный.
Верстка ладно с ней проблем не будет. А с функциями добавления товаров и прочее…
Я склоняюсь все же взять за основу Storefront и натянуть на нее свою верстку.
Только вот при очередном обновлении не слетит ли моя кастомизация этой темы?
Если дизайн уникальный, то я бы все же посоветовал отдельную верстку делать на андекскодере том же. Но можно и на СторФронете, вот только придется многое переделывать, в теме не используется ни один фреймворк, нет сетки… В общем кастомные стили и под них придется подстраиваться
Чтобы кастомизация не слетела надо все делать через дочернюю тему
Понял. Спс. за совет!
Артем круто, что собрася силами и временем.
Смотрим и оттачиваем мастерство 😉
Как всегда Лайк!
Здравствуйте. Сколько уроков планируете? Как часто будут выходить? Печально конечно что прошлый курс шел более полугода
ДОброго! Примерно 20- 30 серий, пока не до пилим до упора. А вот выход, если спонсоры найдутся, то будет 2-3 видео в неделю, если нет, то как обычно одно в неделю
Здравствуйте еще раз =) Я бы и рад подкинуть монет, но я сейчас безработный и вот учусь потихоньку.
Можно спросить, а как реализовать комментарии? Дело в том что я делаю шаблон который положу в портфолио. У него есть LP + страница портфолио и страница блога. Постраничную навигацию я реализовал с помощью wp-PageNavi, а вот коментарии…
Как поступить? Для комментариев исспользовать плагин или пытаться написать описать логику в файле комментариев. Примеров в сети кстати не так уж и много по этому поводу.
Доброго! Да без проблем…
Что постраничка, что комменты – это штатный функционал ВП, можно и нужно все это штатным функционалом выводить. Сгенерируйте себе стартовую Андерскодер, ну или мою стартовую скачайте и посмотрите, там все это штатно есть.
ЗЫ Все уже придумано, не надо лисапеды придумывать)))
Включена ли функция фильтра в основной плагин WooCommerce (есть ли возможность сразу настроить какой нибудь фильтр после установки основного плагина без скачивания дополнительных?)
И может у Вас уже есть ролики на счет моих вопросов.
Например:настройка фильтрации в WooCommerce и т.д. Спасибо
P.S. Вчера взял курсовую на тему – Создание интернет магазина на WordPress.
Доброго! В Вукомерсе есть свои фильтры готовые, но и сторонних есть вагон. В последствии разберем как штатный фильтр настраивать
ЗЫ Если не секрет, в каком учебном заведении такие курсовые задают?
Круто! Жду продолжения.
Не, по Редукс нет видео. Как-то не приходилось с ним работать
Как всегда актуально!
Не мне вам подсказывать. Но раз в неделю? Серьёзно? Вы ж теряете половину публики. Времена ожидания прошли. Снимите по-быстрому и получайте сливки)))
Только думал подписать, но раз в неделю……это вообще жесть))) Все из-за спонсорства?)) ох и любите же вы деньги))) а кто не любит, скажут многие))))
Конечно из-за спонсоров. Мне же еще надо и семью кормить, а видео занимает много времени и приносит пока мало денег. Так что приходиться фрилансить
День добрый.
А можно ли ссылку на github code для wp-security?
Добрый! Опс, сорри, забыл))
Ссылку добавил в описание
Доброго времени суток! Не подскажите есть ли плагин для PHPStorm для сниппетов как на sublime text?
Доброго! В Штроме есть такая вещь как плагины, можно ставить дополнения. А еще есть Live Templates – можно запиливать свои сокращения
Третий урок будет в открытом доступе?
А ссылку на тему можно? Что то в интернете много тем с таким названием)
Тема разрабатывается во время этого курса. Все ссылки в описании к видео
Неожиданно приятно что есть такие курсы в открытом доступе! Лайк+подписка+подписка на оповещения
Спасибо тебе за уроки)
тогда уж и пхп, чего уж там…
сейчас актуально смотреть? (информация не устарела?)
спасибо за исходники на Гитхабе!
Добрый день, Артём!
Подскажите, пожалуйста, в каком видео у Вас оплата. 2:48
Добрый! А про оплату нет видео, не сподобился записать. Да и процесс там сложный
@Финты WordPress я столкнулся с проблемой интеграции perfectmoney на сайт. Можете дать направление? Документация у них абстрактная и плагин под Woo не работает.
@Финты WordPress 4:16 круть! =)
Напишите им в поддержку и спросите у них вообще как можно интеграцию сделать, а то может у них нет открытого АПИ
@Финты WordPress я уже писал по SCI, а с API ещё буду разбираться =) они мне предлагают нанять технического инженера, как будто я финансовый директор какого-то IT-подразделения =) буду думать.
Самое не очень то, что они документацию топорную сделали.
Хоть одно что то толковое нашел!
з усього що я бачив на просторах інтернету це найкорисніше відео по натяжці верстки на woocommerce
query monitor не позволяет нормально с локалки на хостинг вылаживать сайт “…wp-content/plugins/query-monitor/wp-content/db.php” вот такая ошибочка, а если удалить файл этот то потом уже не востановишь сайт
Что-то у вас нето с локалкой значит, у себя подобного не наблюдаю
@Финты WordPress Прошу прощения, это проблема хостера была.
Друзья, посмотрел практически весь курс и решил написать, здесь, под первым видео, чтобы вы понимали с чем имеете дело, изначально. Это просто бесценный опыт по магазину! Автор профессионал своего дела. Не пугайтесь комментариев на счет скорости, если вникать и иметь в соседней вкладке открытый github с исходниками автора, всё предельно понятно! Я не имел дело с woocommerce вообще, но знаю верстку и wordpress. Взял заказ по магазину и учился только по этим урокам. Все что мне нужно было находится в этом курсе! Поэтому советую всем, слушайте внимательно и у вас всё получится. Ну а автора буду рекомендовать всем, подписка, лайк! Спасибо!
Спасибо за отзыв! Вы наверное первый, у кого все получилось и срослось без проблем с момента запуска курса, но я рад что оказался полезным
Добрый день Артем! Подскажите как вывести товары на главную таким образом чтобы показывало кнопку wishlist. Заранее благодарю.
Я так понимаю конструкция должна быть типа вот такой:
while ( have_posts() ) <
the_post();
wc_get_template_part( ‘content’, ‘product’ );
>
Добрый! Смотря как вишлист сделан, обычно это из настроек плагина вишлиста включается