WooCommerce – плагін для створення інтернет-магазинів. Візуальний гід по хукам WooCommerce: Archive/Shop/Cat Page

woocommerce

Однією з особливостей надзвичайно популярного плагіну WooCommerce – є те, що він містить у собі вбудовані фільтри та власні хуки (такі, як на самому WordPress). Саме з допомогою цих хуків ми налаштовуємо зовнішній вигляд магазину на платформі WooCommerce.

Зараз ми покажемо вам інфографіку з корисними хуками, які ви зможете використати для налаштування вигляду інтернет-магазину. Власне, у файлі functions.php ми прописуємо відповідний код, тобто за допомогою такої образної схеми “add_action(‘place-hook-here (місце_для_хука_тут)’,’your-PHP-function-here(ваша_PHP_ функція_тут’);” ви зможете розмістити свої користувацькі функції там, де вам необхідно.

WooCommerce Archive Page [Visual Hook Guide] або ж сторінка архіву

Зверніть увагу, що це та сама сторінка, що і Shop, Category, Tag pages ( сторінка Магазину, Категорії)

%d0%b2%d1%83%d0%ba%d0%be%d0%bc%d0%b5%d1%80%d1%86_1

%d0%b2%d1%83%d0%ba%d0%be%d0%bc%d0%b5%d1%80%d1%86_2

WooCommerce Archive Page Default add_actions (Налаштування за замовчуванням до Архівної сторінки)

Зверніть УВАГУ, ЩО ЦІ НАЛАШТУВАННЯ ВИ ЗМОЖЕТЕ ВІДКЛЮЧИТИ ЗА ДОПОМОГОЮ хука remove . Наприклад, 

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
// These are actions you can unhook/remove!

 

add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );

add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );

 

add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );

add_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );

 

add_action( 'woocommerce_before_shop_loop', 'wc_print_notices', 10 );

add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );

add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

 

add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 

add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

 

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

 

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

 

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

 

add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );

 

add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );

Що таке WordPress Theme Customizer API та його можливості

pic-2

WordPress Theme Customizer – це дуже потужна річ, яка використовується для кастомізації (тобто прилаштування під потреби клієнта) тем на базі Вордпресу. Стандартні теми: такі як Twenty Fifteen та більшість преміум-тем містять великий вибір кастомних налаштувань, які клієнт може сам змінити в залежності від своїх потреб та уподобань.

Отож, чим же ж такий корисний WordPress Theme Customizer? Він дає можливість клієнту самому змінити зовнішній вигляд теми ( завантажити лого, фавікон, змінити колір хідера, шрифту, змінити картинку фону, яку він використовує) без допомоги програміста, не написавши жодного рядка коду і т.д. Усе це за вас зробить Customizer, вам потрібно лише вибрати відповідні налаштування в меню Вигляд –> Налаштувати ( Customize) .

До того ж завдяки використанню скриптів на JQUERY та технології AJAX (вбудовані в ядро Вордпресу) користувач може бачити зміни, які він робить, в режимі реального часу, проте на самому сайті вони вступлять в силу лише після збереження та оприлюднення. Багато розробників вважає, що оскільки  WordPress Customizer — це backbone-додаток, який працює з WP REST API, то його можливості майже безмежні.

Продовжити читання “Що таке WordPress Theme Customizer API та його можливості”

Bootstrap та його основні компоненти.

      Що таке Bootstrap

Bootstrap – це CSS / HTML фреймворк для створення сайтів. Іншими словами, це набір інструментів для верстки. У ньому є ряд переваг, завдяки яким BS вважається найпопулярнішим з собі подібних.
Bootstrap був розроблений Марком Отто і Якобом Торнтоном для Twitter, і випущений в якості продукту в серпні 2011 року на GitHub. У червні 2014 Bootstrap був проектом № 1 на GitHub!

Переваги :
– Швидкість роботи – завдяки безлічі готових елементів верстка займає значно менше часу;
– Масштабованість – додавання нових елементів не порушує загальну структуру;
– Легке налаштування – редагування стилів проводиться шляхом створення нових CSS-правил, які виконуються замість стандартних. При цьому не потрібно використовувати атрибути типу «!Important»
– Велика кількість шаблонів ;
– Величезне співтовариство розробників;
– Широка сфера застосування – Bootstrap використовується для OpenCart, Prestashop, Magento, Joomla, WordPress та ін. Особливою популярністю користується Bootstrap для створення lading page (цільових сторінок).
Bootstrap це набір з трьох фреймворків: CSS / html, JS-компонентів та іконочного шрифту.

Продовжити читання “Bootstrap та його основні компоненти.”

Підключення додаткових шрифтів та бібліотека Font Awesame

І. Шрифти Google fonts

Крім декількох стандартних Arial, Verdana, Times New Roman, Georgia, Tahoma є безліч інших оригінальних шрифтів на Google Fonts. В новій версії шрифтів стало 629, порівняно із 180 старої.
Величезний плюс в тому, що їх не потрібно кудись завантажувати, десь встановлювати, а просто скористатись каталогом і підключити обраний шрифт до свого ресурсу. Як це зробити? Продовжити читання “Підключення додаткових шрифтів та бібліотека Font Awesame”

Як додати підпункт “меню” в пункті меню “вигляд” в WordPress

Для цього потрібно створити у Вашій темі файл functions.php і в ньому прописати наступний код:

 

<?php

if ( ! function_exists( ‘custom_navigation_menus’ ) ) {

// Register Navigation Menus
function custom_navigation_menus() {

$locations = array(
);
register_nav_menus( $locations );

}
add_action( ‘init’, ‘custom_navigation_menus’ );

}

?>

 

Далі, оновлюємо сторінку адмінки Вашого сайту і в пункті меню “Вигляд” бачимо додатковий підпункт!

правило @media та повна адаптація під мобільні

Користувачів малих екранів не завжди влаштовуватиме стандартний вигляд сайту: пункти меню, відступи, читабельність тексту — усе це вимагає адаптації під невеликі екрани. Продовжити читання “правило @media та повна адаптація під мобільні”

Facebook-відпустка

Соціалки це мегапрекрасна річ: живе спілкування, радість за успіхи давніх знайомих, тонни корисної інфи, яка дозволяє розвиватись і безліч можливостей.

Тому, чим більше я задумуюсь над вчиненим, тим більше шкодую… Продовжити читання “Facebook-відпустка”

Притискаємо футер до низу вікна браузера засобами CSS

Існує чимало способів притиснути футер до низу сторінки як з допомогою jquery, так і з допомогою css. Продовжити читання “Притискаємо футер до низу вікна браузера засобами CSS”

viewport. Адаптація під мобільні

Повноцінний адаптивний дизайн передбачає окремий макет, який комфортно моніторити на екранах невеликого розширення. Проте першим кроком до адаптації Ваших сайтів є наявність метатегу viewport.

Продовжити читання “viewport. Адаптація під мобільні”

Навіщо фрілансеру платити податки

Кожні три місяці ваш покірний слуга вилазить з зони комфорту і йде оформляти податкову відомість. Бухгалтерія для мене — це справа страшенно марудна, де почуваєшся двійочником. Проте є одна деталь, яка стимулює брати себе в руки. Продовжити читання “Навіщо фрілансеру платити податки”