Темы оформления WooCommerce

http://gering111.com/woocommerce/

Темы оформления WooCommerce

Обычно, если шаблон вашего сайта написан по стандартам разработки WordPress, WooCommerce встает достаточно «ровно» и требует минимальной правки стилей. Но, это бывает далеко не всегда, к сожалению.

Итак, нам не повезло и стили все же надо править. Как это сделать максимально эффективно? Есть отличный способ.

Подготовим площадку для экспериментов 

• находим файлик /woocommerce/assets/woocommerce.css и копируем его в папку вашего шаблона
• копируем изображения из папки /woocommerce/assets/images/ в папку с изображениями шаблона

Теперь нужно подключить наш скопированный стиль к движку. Для этого добавьте следующий код в function.php шаблона:

1 2 3 4 5

<?php function woo_style() { wp_register_style( 'my-woocommerce', get_template_directory_uri() . '/woocommerce.css', null, 1.0, 'screen' ); wp_enqueue_style( 'my-woocommerce' ); } add_action( 'wp_enqueue_scripts', 'woo_style' ); ?>

Теперь финальный штрих — отключите использование встроенных стилей WooCommerce на странице основных настроек плагина. 

Зачем мы все это сделали, почему нельзя было просто править стили плагина? Очень просто — при обновлении WooCommerce (а он обновляется довольно часто) ваши изменения затрутся. Лично у меня есть один проект, который не обновляется уже около полугода, я просто не помню что менялось, а делать заново — нет ни бюджета, ни времени. Я считаю это очень большой своей ошибкой, не повторяйте такого 

Файлик со стилями можем смело редактировать — теперь они никуда не денутся. Мы же перейдем к выводу магазина на страницах вашего сайта.

Если вас не устраивает, как выводится магазин по умолчанию — давайте попробуем сделать собственный шаблон страницы. Скопируем page.php шаблона, переименуем его в woocommerce.php и немного доработаем

1 2 3 4 5 6 7

/*находим код вывода цикла обычно он выглядит так*/ <?php if ( have_posts() ) : ?> /*тут какой-то код*/ <?php endif; ?>   /*заменяем его на код WooCommerce*/ <?php woocommerce_content(); ?>

Интересной особенностью плагина являются собственные фильтры и хуки, совсем как у движка. С их помощью можно настроить практически любое отображение вашего магазина. Давайте я покажу несколько примеров:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<?php //Меняем обертку для вывода remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); add_action('woocommerce_before_main_content', create_function('', 'echo "<div id=\"shop\">";'), 10); add_action('woocommerce_after_main_content', create_function('', 'echo "</div>";'), 10);   //Удаляем хлебные крошки   remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);   //Удаляем табы в одиночном товаре remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20, 2); add_action( 'woocommerce_single_product_summary', 'woocommerce_product_description_panel', 20 );   //Удаляем отзывы о товаре remove_action( 'woocommerce_product_tabs', 'woocommerce_product_reviews_tab', 30 ); remove_action( 'woocommerce_product_tab_panels', 'woocommerce_product_reviews_panel', 30 );   //Удаляем встроенный сайдбар Woo remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10); ?>

Код добавляется в functions.php шаблона. Все это, конечно, можно удалить из шаблона вывода, непосредственно в плагине. Но не забывайте про его регулярные обновления  Впрочем, выход есть — скопируйте папку woocommerce/templates в папку шаблона и переименуйте ее в woocommerce. Теперь правьте как душе угодно, изменения не затрутся при обновлении.

Что сказать в итоге? WooCommerce это отличный плагин, который хорошо написан, достаточно неплохо документирован(на английском) и позволяет сделать практически любой интернет-магазин. Учитывая огромное количество платных шаблонов и дополнений к плагину — вы можете сравнительно недорого и самостоятельно настроить интернет-магазин вашей мечты.

Безусловно, есть альтернативные плагины, но я повторю еще раз, лично для меня WooCommerce — лучший плагин для создания интернет-магазина на WordPress.

Удачного вам дня