Дата публикации: 2017-09-05
От автора: при планировании WooCommerce-магазина вам придется ответить на много вопросов, которые серьезно повлияют на будущий успех сайта. Настройка магазина — серьезный вызов. После завершения этого процесса уже сложно внести какие-то правки в настройки и дизайн. Для кастомизации страниц товаров в Woocommerce вам потребуется рассмотреть доступные варианты, о которых я и расскажу в этом посте.
И вот, магазин создан. Следующий вызов — беспорядок на страницах товаров. На странице WooCommerce Single Product есть множество элементов, которые не напрямую могут помочь с кастомизацией дизайна и настройкой магазина. Два главных виновника беспорядка — категории товаров и звезды рейтинга. Не каждому магазину нужны эти элементы на странице Single Product. Так же и другие элементы необходимо передвинуть, чтобы они вписывались в кастомный дизайн магазина.
Все эти сложности можно легко решить с помощью экшенов и хуков в WooCommerce. Для демонстрации возможностей кастомизации страницы товара я создал несколько экшенов и хуков.
Кастомизируйте страницы товаров в WooCommerce
Первое, что вы должны хотеть — это сменить шаблон отображения товаров. Для этого необходимо загрузить файл single-product.php, который контролирует файлы шаблонов, которые, в свою очередь, отображают информацию о товарах на frontend’е.
Самый распространенный совет при настройке шаблонных страниц родительских тем и плагинов — делайте копии шаблонов темы. Все изменения делайте с копией. Такой подход гарантирует вам сохранность ваших изменений в случае обновления тем и плагинов.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Некоторые плагины и темы предоставляют обширную коллекцию пользовательских экшенов и хуков, которые позволяют вносить изменения напрямую в файлы темы. Самое классное в таком подходе это то, что вам не нужно изменять разметку файлов шаблона. В результате вы получаете чистый код и отсутствие дублей файлов.
С помощью single-product.php я буду вызывать файлы шаблона, которые отвечают за информацию о товаре и формат ее отображения на странице. Файл content-single-product.php — шаблон товара. Именно этот файл необходимо редактировать, чтобы изменить информацию и стили страницы товаров.
А теперь откройте single_template и вставьте следующий код, чтобы изменить шаблон страницы Single Product:
Страницы shop в Вукомерсе нет, есть woocommerce.php, но лучше редактировать archive.php — этот файл отвечает за ленту товаров и на магазине и в рубриках. Для редактирования: сделайте в корне темы папку woocommerce и скопируйте туда файл archive.php из папки template в плагине.
ЗЫ. Просто так тянуть верстку — плохая практика, следует использовать хуки, для добавления своих классов
Страница товара разбита на несколько файлов. Каждый файл отвечает за вывод определенного контента.
- Структура файлов страницы товара
- Визуализация хуков страницы товара
- Примеры использования хуков для страницы товара
- Отключение всех функций с хука
- Замена надписи «Добавить в корзину»
- Управление вкладками на странице товара
- Заключение
Структура файлов страницы товара
Вся структура дана от основной папки /templates/