! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета
...здесь Ваша реклама.?.
Здравствуйте !
написано: — 
отредактировано: 2018-05-22
издатель:  в теме: WooCommerce и WordPress реплики: будьте первым в диалоге
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

Как перенести в свой шаблон стили css плагина woocommerce

Нынче организуем стилистику магазина на WordPress, а именно — перенесём стили css плагина в директорию собственной темы (вообще, я всегда советую, не важно — сторонняя тема или заточенная под плагин: управление сосредотачивать всеименно в корне рабочего шаблона) ибо оставим функциональную механику на заботу авторам замечательного плагина, а себе управление эстетическим видом лабаза: только хозяин лавки должен решать в какой расцветке будет его магаз.

Способы разберём попроще и посложнее — для эстетов, а также покажу несколько кодов, направленных на логическую организацию внешнего вида магазина на базе плагина woocommerce: (заметьте — только код — без плагинов пока: оставим тяжким плагинам более тонкую функциональную работу)

…перенесём рычаги управления количеством отображаемого товара, последовательностью и т.п …и, на мой взгляд, важная деталь — настроим уберём/добавим в форме заказа поля для заполнения клиентом, и — коли наша цель создание интернет магазина на wordpress с нуля — то…

…начнём играть концерт:


Чтобы магазин на вордпресс полезно функционировал, приступим к стилистике…

 

 

 

 

перенести css wooc в директорию своего шаблона правильно

 

 

 

Сразу говорю, — будет логичнее, коли вы изучите предыдущую публикацию о настройке магазина… там я пояснял почему целесообразнее те или иные организационные административные действия…

 

 

Итак: пример магазина на wordpress можно взглянуть на моём сайте !! это, конечно, не полноценный в смысле понятия магазин, создания магаза здесь не было целью, но всё же для общих ваших пониманий подойдёт… да и мы разбираем тему создания магазина на базе вордпресс, прикрученного к стороннему сайту: впрочем, принцип везде одинаков…

 

 

 

Итак: способ — 1.

 

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

 

 

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

 

 

 

Также, чтобы стили woocommerce-layout.css считывались из вашего шаблона, нужно будет прописать и нижеследующие строки в файл функций…

 

 

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

 

 

 

Теория:

…только что мы перенаправили отработку основных стилей плагина. Для начала, этого достаточно:

Если пояснить просто — в плагине сделано так, что woocommerce.css как бы основной (там сосредоточены настройки JS в том числе), а woocommerce-layout.css вспомогательный…

Это вкратце ! — теперь можно основательно заняться подстройкой, а в процессе покопаем поподробнее начинку…

Как правильнее выполнять перенос папок плагина, читайте статью (ссылка выше).

 

 

 

 

Для тех, которым не терпится всё выправить изначально правильно…

 

Способ 2.

 

Вообще, стили, в плане лёгкости сайта, логичнее соединить воедино — в один общий файл, к примеру — style.css.

 

Как это делается:

 

В файле функций нужно организовать ещё один цикл кода, который призван полностью отключить css-стили плагина, но обеспечить подгрузку из общего файла стилей темы: (как понимаете, первые коды только перенаправляли пути к файлам…)

 

 

У кого-то заработает такой код:

 

/*** Отключаем стили CSS плагина - добавим этот код в функции ***/
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
/*** Отключаем стили CSS плагина - добавим этот код в функции Отключаем стили CSS плагина - добавим этот код в функции ***/

 

 

 

…кому-то, возможно, подойдёт такой: (всё зависит от удачно выбранной вами темы))

 

/*** Отключаем стили CSS плагина - добавим этот код в функции ***/
define('WOOCOMMERCE_USE_CSS', false);
/*** Отключаем стили CSS плагина - добавим этот код в функции Отключаем стили CSS плагина - добавим этот код в функции ***/

 

 

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

…иначе у вас в исходном коде будет засоренность ненужными мета-строками, смотрите фото (картинки кликабельны):

 

 

 

переносим к себе в шаблон стили css плагина woocommerce

 

 

переносим в свой шаблон стили css плагина woocommerce

 

 

На первом фото работает так: стили берутся из шаблона, но — не отключена подгрузка стилей плагина — первые коды сегодняшней статьи  (и снова напоминаю, читайте статью, ссылка выше).

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

А наиболее неприятным будет сообщение валидатора об ошибке организации работы css: будет что-то типа «такой-то такой файл css указан, но не найден…» хотя сайт и будет работать… Однако — это ошибка!

…словом, отключите «перенаправление» если решаетесь пользоваться вторым вариантом!

 

Должно получиться как на второй фотке: мета запросов стилей css  woocommerce-layout.css и woocommerce.css должны быть убраны.

 

 

Почему я давал коды по отдельности..?

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

 

 

 

функционально-визуальные настройки магазина на WooCommerce

 

 

 

 

Вот некоторые полезные коды для организации функциональной структуры бухгалтерии магазина…

Некоторых настроек на панели управления плагином (магазином) нет… возможно более тонкое управление и появится в будущем, но, как говорится — знания лишними не бывают в настоящем.

 

 

 

 

 

А в ЭТОМ посте большая подборка полезного кода для настроек магазина на Woocommerce.

 

 

 

 

 

 

как изменить количество товаров на витрине магазина на WooCommerce

 

 

 

 

 

Вот это кодированное чудо задаёт количество единиц товаров на главной странице, категориях и метках: см. строку 2…

 

 

/*** число товаров вообще, на странице витрины МАГАЗИН ***/
add_filter('loop_shop_per_page', create_function('$cols', 'return 3;'));// 3 число товара
/*** число товаров ***/

 

 

 

…этот код — число колонок товаров (впрочем, пояснение в комментариях)…

 

 

/*** число КОЛОНОК ТОВАРОВ МАГАЗИНА ***/
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 4;        //4 количество колонок
}
}
/*** ФИНАЛ число КОЛОНОК МАГАЗИНА  ***/

 

 

 

 

 

как настроить страницу формы оформления заказа

 

 

 

 

…а вот эти строки обеспечат настройки — снятие красного значка определённых полей «обязательного заполнения» покупателем …

 

 

/** ПОЛЯ В ФОРМЕ ЗАКАЗА НЕ ОБЯЗАТЕЛЬНЫЕ **/
add_filter( 'woocommerce_checkout_fields' , 'no_required_checkout_fields' );
function no_required_checkout_fields( $fields ) {
$fields['billing']['billing_last_name']['required'] = false; //фамилия
$fields['billing']['billing_address_1']['required'] = false; // адрес
$fields['billing']['billing_city']['required'] = false; // город-область-регион
$fields['billing']['billing_postcode']['required'] = false;
return $fields;
}
/** ПОЛЯ В ФОРМЕ ЗАКАЗА НЕ ОБЯЗАТЕЛЬНЫЕ **/

 

 

 

Прописка этих строк в файле функций позволит расположить ссылку «Продолжить покупки…» где-нить в финале формы заказа… ссылке можно назначить через какой-нить «…span…» индивидуальный стиль…

 

 

/** ПРОДОЛЖИТЬ ПОКУПКИ В ФОРМЕ ЗАКАЗА **/
function checkout_more_buttons() {
echo '<a href="https://mihalica.ru/shop/"> ← Продолжить покупки</a>';
}
add_action ('woocommerce_review_order_before_submit', 'checkout_more_buttons', 5);
/** ПРОДОЛЖИТЬ ПОКУПКИ В ФОРМЕ ЗАКАЗА **/

 

 

 

…если пропишете в файле функций такой код, — количество полей для заполнения покупателем, оформляя покупки, будут под контролем …

Какие-то ненужные (лишние на Ваш взгляд формы) можете убрать… добавить — возможно пропиской строк по аналогии…

 

 

/** УБИРАЕМ ГРАФЫ В ОФОРМЛЕНИЯХ ЗАКАЗА **/
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) { //Убрали ненужные поля
unset($fields['billing']['billing_company']);         // компания
//unset($fields['billing']['billing_country']);       // страна
unset($fields['billing']['billing_address_2']);       // точный адрес
unset($fields['billing']['billing_state']);           //область/регион
return $fields;
}
add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields( $fields ) {
$fields['billing_address_1']['class'] = array( 'form-row-wide' ); //Поле адреса
return $fields;
}
/** УБИРАЕМ ГРАФЫ В ОФОРМЛЕНИЯХ ЗАКАЗА **/

 

 

 

В следующей статье этой рубрики разберёмся с каноническими ссылками магазина и тем, как закрываются/открываются отдельновзятые страницы в атрибутику

<meta name="robots" content="noindex,nofollow" />

 

 

…так что подписывайтесь…

 


подписка feedburner Online консультация по работе c сайтом на WordPress

 

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   14 полезных сниппетов — код для наилучшей работы сайта WordPress — функции   Ускоряем сайт: основные кэш и gzip правила .htaccess которые нужно знать   Подключение jQuery библиотеки от CDN Google — рационально!..   Как добавить свой новый (второй) сайт в Яндекс Директ   Как исключить вывод (выборочно) поста с главной страницы сайта — регулировка в админке   Как к статье добавить блок ссылок на похожие по теме записи сайта   Создаём плагин — добавочный файл функций — my-functions.php   Включаем обслуживание gzip сжатия файлов на хостинге и в htaccess   Что такое Яндекс? SEO оптимизация сайта за пределами Google   Выведем последние комментарии в любом месте сайта — несколько вариантов   Убираем циклическую ссылку h1 логотипа на главной странице   Санкции вебмастера Яндекс (фатальные ошибки) — предупреждения, или что это?..   Как самостоятельно установить в Notepad++ плагин Compare   Яндекс ИКС — новый индекс качества сайта, заместо ТИЦ
↔ перетаскивайте ленту ↔
ещё статьи по теме:

смотреть ещё статьи в теме WooCommerce и WordPress
меточная навигация:


Комментарии © 0 к статье: Как перенести в свой шаблон стили css плагина woocommerce

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Внимание! Обязательные поля помечены *

  отныне доступен плагин: privacy-policy ©

 необходимо принять правила конфиденциальности и пользовательского соглашения
Яндекс.Метрика
?Skype консультация Skype консультацияЕсли вы выбрали для своего сайта WordPress и только-только начинаете изучать панель управления контентом, то этот вариант оnline консультаций — практически по любым вопросам — для вас! Skype онлайн