SOFT SPRINT

softsprint.net
shop

Как установить WooCommerce на свою тему WordPress?

POSTED IN 2015 | wiki

В этой заметке кратко перечислим полезные моменты, связанные с установкой WooCommerce на свою (нестандартную) тему.

1. Не работает CSS WooCommerce.
Копируем файл page.php и переименовываем в woocommerce.php. Находим цикл WordPress в этом файле:
Начинается с:

1
<?php if ( have_posts() ) :

Заканчивается на:

1
<?php endif; ?>

Меняем цикл на:

1
<?php woocommerce_content(); ?>

Так мы создали специальную страницу для WooCommerce, которая будет использована этим плагином для формирования страниц магазина. Теперь WooCommerce будет подключаться корректно, что обеспечит правильные стили.

Также можно использовать метод хуков. Кому интересно, тут официальная инфо: http://docs.woothemes.com/document/third-party-custom-theme-compatibility/
Кратко суть следующая: в файле functions.php нашей темы мы указываем, куда нужно размещать цикл WooCommerce, например, между <section id=”main”> и </section>

2. Изменить стандартные стили WooCommerce на свои.
Понятно, что изменять СSS файлы самого плагина WooCommerce в его папке woocommerce/assets/css не является правильным, поскольку при очередном обновлении WooCommerce все Ваши стили будут перезаписаны стандартными. Есть несколько решений вопроса:

  • в файле style.css Вашей темы можно переписать стили WooCommerce через !important и тогда именно они будут подгружаться. Решение подходит, если изменение стилей не будет массовым;
  • можно подключить отдельный файл стилей для WooCommerce в самом конце вашей темы перед , например так:
1
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/woo.css" type="text/css" media="screen" />

В самом файле woo.css переписываем стили WooCommerce на нужные нам. Поскольку этот файл стилей загружается последним, именно он и определит внешность WooCommerce;

  • можно полностью отключить файл стилей WooCommerce – подробнее здесь: http://docs.woothemes.com/document/disable-the-default-stylesheet/
    Суть такая: отключаем все стандартные стили (или некоторые из них) и подключаем свои собственные. Этот способ – на любителя.

P.S. На момент написания заметки экспериментальным путём установлено, что в первом варианте не обязательно применять !important – стили и без этого атрибута будут загружены из файла style.css Вашей темы. Это же и официальной документации указано: http://docs.woothemes.com/document/css-structure/

3. Регистрируем поддержку WooCommerce нашей темой.
Достаточно добавить в файл functions.php нашей темы такой код:

1
2
3
4
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

Теперь плагин WooCommerce не будет выводить сообщение о несовместимости темы с ним.

4. Меняем стандартный шаблон WooCommerce на свой.
Здесь речь идёт не о стилях CSS, а о логике работы, например, корзины или формы заказа, прочее. Достаточно скопировать всё содержимое из папки плагина: /woocommerce/templates/ в папку Вашей темы. Пример:

Скопировать woocommerce/templates/emails/admin-new-order.php в папку Вашей темы yourtheme/woocommerce/emails/admin-new-order.php

В таком случае, каждое следующее обновление WooCommerce не затронет Ваших изменений шаблона работы WooCommerce, поскольку плагин будет считывать в первую очередь данные из папки Вашей темы.
Подробнее тут: http://docs.woothemes.com/document/template-structure/

5. Создание сервисных страниц страниц WooCommerce

  • [woocommerce_cart] – страница корзины товаров
  • [woocommerce_checkout] – страница формирования заказа
  • [woocommerce_order_tracking] – страница отслеживания заказа
  • [woocommerce_my_account] – страница аккаунта

Достаточно создать новую страницу и поместить в неё один из этих шорткодов.

Вот так кратко выглядит инструкция по стыковке WooCommerce со своей кастомной темой.

CONTACT US
Cookies | Privacy Policy | Terms and ConditionsSoftSprint ©