Woocommerce – прикручиваем магазин к своему шаблону

Плагин Woocommerce интересное решение для создания магазина на базе всеми любимой cms WordPress. Однако, впрочем, как и абсолютно во всём, существуют свои нестыковки, или, лучше сказать, некоторые пункты, которые требуют внимания и поднастройки! Но, естественный вопрос, как подстраивать-то..? Отвечу: не так уж и сложно! …только нужно немного подучиться…

Что жж, изучением материала и займёмся на страничках рубрики “Магазing и WordPress”.

И сегодня пост для тех пользователей, которые возжелали создавать инет- магазин на базе своей темы, не используя из addонов предлагаемые бесплатные шаблоны разработчиков коммерческого плагина, – здесь необходимо сказать то, что и шаблоны созданные именно для плагина Wooкоммеrce требуют многих правок: чтобы, как говорится, было всё попутю… и личностно!

 

 

 

 

 

прикрутим магазин к своему шаблону на WordPress

 

 

 

Если вы решаете в своём сайте использовать какой-то функциональный плагин, следует не забывать, что практически любой его собрат привносит в работу сайта свои недостатки. И благо, коли эти недостатки окупаются функционалом. Но чтобы было именно так, необходимо управлять созданной вами машиной.

 

 

Однако не всегда это удаётся. Не исключение и Woocommerce…

 

 

Давайте по порядку: что вам нужно от плагина магазина? Правильно, его логический php функционал, скажем так – ну, чтобы плагин замечательно обрабатывал и выполнял запросы пользователей. Вот и всё!

 

 

Да, так он и будет работать… если бы не НО !!

 

…у каждого из нас свои пожелания, а посему весьма часто требуется что-то в его функционале менять – добавлять/убирать… Не исключение и дизайн, то бишь стилистика: самый больной вопрос для эстета!

 

 

Стилистика, это в большей степени CSS… конечно, можно залезть в файлы плагина и всё замечательно поправить, настроить… одначе – такого редактора ждут разочарования! …ибо при обновлении плагина, которые весьма часто, все наши css-правки затрутся..!

 

Конечно, можно плюнуть и не обновляться… Но, не советую!

 

 

А советую научится управлению, ибо осилить настройки плагина Woocommerce, разобраться и приручить их не так и сложно! …тем более плагин того стоит! разработчикам же большой респекшн!

 

 

А посему – с настройками плагина wоо, всякими улучшалками, примочками и будем разбираться! Но, чур, постепенно… в следующих и следующих статьях.

 

 

 

Кстати, уж если мы заговорили о магазине на WOOC, то не обойти тот факт, что любой магазин имеет амбициозные цели – зарабатывать! а раз зарабатывать, то весьма логично, что потребуется модуль приёма платежей на сайте (приличный модуль)  …FONDY… Существует множество вариантов: и один из них – плагины, например – Фонди – для интернет-магазинов на Вордпресс в связке с WooCommerce: платежный шлюз…

 

 

 

 

 

 

Online консультация по настройкам и созданию сайтов на WordPress

 

 

 

…а сегодня займёмся стилистикой…

 

 

 

 

 

 

как вынести стили css из плагина Woocommerce в корень своего шаблона

 

 

 

 

Во-первых, ясности для, вот путь, по которому вы замечательным образом отыщете все стили плагина:

 

 

домен.ru/wp-content/plugins/woocommerce/assets/css -имя_файла

 

 

Чтобы перенести стили woocommerce.css из плагина в директорию своего шаблона, нужно в файле функций своей темы прописать следующие строки:

 

 

/* перенос css в файл шаблона */
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' );
/* перенос css в файл шаблона */

 

 

 

Однако этого мало: советую прописать и эти строки – если обратили внимание, их пропиской мы выносим файл woocommerce-layout.css в корень своего шаблона.

 

 

/* перенос css в файл шаблона */
function woo2_style() {
wp_register_style( 'my-woocommerce-layout', get_template_directory_uri() . '/woocommerce-layout.css', null, 1.0, 'screen' );
wp_enqueue_style( 'my-woocommerce-layout' ); } add_action( 'wp_enqueue_scripts', 'woo2_style' );
/* ФИНАЛ МАГАЗИН перенос css в файл шаблона */

 

 

 

Сразу после того как внесёте эти строчки в файл функций, стилистику woocommerce.css и woocommerce-layout.css можно будет смело править !! уже в вашем шаблоне.

 

 

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

 

Можно приступать к редактуре…

 

 

 

Однако для пытливого пользователя, перенос стилей css из плагина Woocommerceе к себе в шаблон ПОЛДЕЛА !!

 

 

Как понимаете, после наших правок (коли прикинуть к уму)) получается, что теперь будут работать стили как и в плагине, так и в шаблоне… т. е. ПЛАГИН станет работать со своим файлом, а шаблон со своим (вновь перенесённым).

В принципе можно для начала оставить и так… потестировать, знаний для… А можно и отключить в плагине отработку собственных стилей.

Хотя, на мой взгляд, это неправильно!

 

 

Посудите: любой файл стилей (практически любой) содержит в себе прописку относительных путей к иконкам, файлам JS обогащая динамику дизайна и т. п. и коль отключить целевой CSS документ, ничего хорошего не получится…

В принципе, можно отключить… но тогда придётся переносить в свой шаблон и главные сопутствующие папки images, fonts и далее и далее… я для себя счёл это неправильным, ибо плагин обновляется, а раз обновляется, то нужно и позволить авторам это делать… А вдруг они решат что-то в этих папочках поменять впоследствии…

 

 

Посему много копаться и излишне копаться в файлах плагина – не советую!

 

 

 

Другой выход: закомментировать файлы стилей плагина! Можно и так (попробовать).

 

 

 

 

После отключения (закомментирования, например) файлов стилей, закавыка состоит в том, что если не полениться и проверить свой сайт валидатором css (хоть ЭТИМ) – будут незначительные ошибки. …и всё же…

 

 

 

 

Давайте попытаемся исправить и это…

 

 

 

 

woocommerce.css как отредактировать и что нужно поправить в директории шаблона

 

 

 

 

…советую пойти обманным путём) Попытаться обыграть систему связки плагина и шаблона. А именно:

 

 

Подготовить на случай “послеобновления” плагина собственные файлы, которыми нужно будет заменить в папке assets обновлённые файлы – и всего делоф… Думается, понятно изъясняюсь… во всяком случае стараюсь.

 

В чём же состоит принципиальное решение этой работы.!?

 

…сделать так, чтобы файлы в папке assets оставались как бы рабочими (не закомментированными – валидатор ошибку в этом случае не покажет) – однако их стоит тоже как следует поправить:

 

Посмотрите внимательно на селекторы файла woocommerce.css, подумайте… прикиньте))

 

В итоге нужно оставить несколько важнейших селекторов (строк), которые связаны с плагинными папками images и fonts – а остальное кодированное чудо, смело удалить! Ведь основная стилистика теперь подцепляется и обрабатывается в корне шаблона.

 

 

 

 

 

 

То же самое проделать и с файлом ПЛАГИНА woocommerce-layout.css – с ним будет проще!

 

 

После настройки связанной работы плагина и вашего шаблона, можно вплотную приступать к редакциям в файлах темы!

 

 

 

 

 

Мораль!

После обновления плагина, всего-то и потребуется перекопировать и заменить пару файлов: дело двух минут, и работоспособность магазина возобновлена!

 

 

 

 

А у вас какие соображения на этот счёт!? делитесь в комментариях…

 

На этом моя повесть нынче решительно окончена...!

 

Online консультация по настройкам и созданию сайтов на WordPress