softsprint menu Заказать

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

Март 15, 2015 в 6:24 | 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 все Ваши стили будут перезаписаны стандартными. Есть несколько решений вопроса:

1
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/woo.css" type="text/css" media="screen" />

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

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 со своей кастомной темой.

Давайте обсудим

softsprint heart

Наши контакты

Львов, Украина
mob: +380 97 551 44 55
skype: softsprint.net

Скажите Привет!