Как перенести в свой шаблон стили 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 в файл шаблона ***/

 

 

 

 

 

 

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

 

Способ 2.

 

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

 

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

 

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

 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

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

 

 

 

 

 

 

 

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

 

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

 

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

 

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

 

 

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

 

 

 

 

 

к оглавлению

функционально-визуальные настройки магазина на 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;
}
/** УБИРАЕМ ГРАФЫ В ОФОРМЛЕНИЯХ ЗАКАЗА **/

 

 

 

 

 

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

 

 

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