Любой шаблон можно интегрировать с 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.
Теперь немного потренируемся.
1. Установите шаблон Twenty Thirteen и плагин WooCommerce — excelling eCommerce
2. Заполните 4-5 товарами. Перейдите на страницу магазина. Как вы видите товары расположены во всю ширину без отступов.
3. На хостинге или на Денвере перейдите в директорию шаблона Twenty Thirteen и сделайте копию page.php и переименуйте в woocommerce.php. Полностью замените содержание файла. Нужно задать отступы, выравнивать товары. Мы задаём класс и в стилях в файле style.css вписываем его значения. Я добавлю в style.css стили бутстрап фреймворка. =)
Содержание woocommerce.php должно быть следующее:
<?php
/**
* Displays the page section of the theme.
*
*/
?>
<?php get_header(); ?>
<div class="container-fluid">
<div class="row-fluid">
<div class="span1">
</div>
<div class="span10">
<?php woocommerce_content(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
4. Теперь скачайте бутстрап фреймворк (файл с готовыми стилями) http://getbootstrap.com и скопируйте содержимое файла bootstrap.css, находящегося по адресу bootstrap\css\bootstrap.css в конец файла style.css, который находится директории шаблона Twenty Thirteen. Всё сохраните.
Итоговый вид:
В файл functions.php темы можно добавить следующий код, который указывает, что ваша тема поддерживает woocommerce.
add_theme_support( 'woocommerce' );
Осталось рассмотреть следующие вопросы:
Как добавить сайдбар на страницу магазина?
Как можно отредактировать файлы плагина woocommerce, чтобы сделать тему более красивую?
Если вы знаете ответы на эти вопросы, то сообщите, буду очень признателен. Статья будет редактироваться и обновляться, критика принимается.
Для ознакомления:
Документация woocommerce http://docs.woothemes.com/document/third-party-custom-theme-compatibility