Як зробити тему WordPress WooCommerce готовою

Зробіть свою тему WordPress WooCommerce сумісною з тезими корисних фрагментів

Тож ви хочете додати магазин до своєї теми – приголомшливо! WooCommerce – чудовий вибір. Технічно кажучи ВСІ теми “WooCommerce сумісна”, оскільки це плагін. Теоретично будь-який плагін повинен працювати з будь-якою темою WordPress (кодованою правильно).


Як розробник тем, можливо, ви хочете налаштувати вихід WooCommerce, щоб краще відповідати вашій темі або надавати варіанти кінцевим користувачам, які не доступні в налаштуваннях WooCommerce (наприклад, зміні кількості стовпців у магазині). Нижче ви знайдете кілька корисних фрагментів, які ви можете використовувати, щоб надати «кращу» підтримку WooCommerce у вашій темі та / або змінити речі під ваш конкретний дизайн.

Важливо: Багато фрагментів нижче використовують функції, доступні лише в WooCommerce. Тому переконайтеся, що ці фрагменти не просто скинуті внизу вашого файлу function.php у темі, створеній для розповсюдження. Якщо ви збираєтеся поділитися своєю темою з іншими або продати її, обов’язково розмістіть фрагменти у власному файлі, завантаженому лише тоді, коли плагін WooCommerce активний.

Перевірте, чи ввімкнено WooCommerce

У своїх темах я люблю визначати користувацьку константу, яку можна перевірити, чи включена WooCommerce таким чином, я можу включати файли або запускати функції лише тоді, коли WooCommerce активна (див. Важливе повідомлення вище, якщо ви ще цього не зробили).

// Додати нову константу, яка повертає значення true, якщо WooCommerce активна
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Перевірка активності WooCommerce
якщо (WPEX_WOOCOMMERCE_ACTIVE) {
// Робити щось...
// Наприклад, включення нового файлу з усіма вашими правками в Woo.
}

Декларуйте підтримку WooCommerce

Це перший і найважливіший фрагмент коду, який потрібно додати до вашої теми, який “дозволяє” підтримку WooCommerce та запобігає попередженням плагіна, що повідомляє кінцевому користувачеві про те, що тема не сумісна.

addgery ('after_setup_theme', function () {
add_theme_support ('woocommerce');
});

Видаліть WooCommerce CSS

Особисто я радше перекриваю стилі WooCommerce, щоб запобігти можливим проблемам із сторонніми плагінами WooCommerce. Однак якщо ви хочете видалити всі стилі WooCommerce, це дуже просто.

Наступний фрагмент призначений для видалення ВСІХ стилів WooCommerce:

// Видаліть усі стилі Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Цей фрагмент є прикладом умовного видалення конкретних стилів CSS:

функція wpex_remove_woo_styles ($ стилі) {
unset ($ styles ['woocommerce-general']);
unset ($ styles ['woocommerce-layout']);
unset ($ styles ['woocommerce-smallscreen']);
повернути $ стилі;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Увімкнути Галерею продуктів, масштабування та лайтбокс WooCommerce (v3.0 +)

У WooCommerce 3.0 вони представили нову галерею продуктів, масштабування та лайтбокс. Усі вони повинні бути включені через “add_theme_support”, якщо ви хочете використовувати їх у своїй темі.

add_theme_support ('wc-продукт-галерея-слайдер');
add_theme_support ('wc-product-gallery-zoom');
add_theme_support ('wc-product-gallery-lightbox');

Видаліть назву магазину

У багатьох темах вже є функції відображення заголовків архівів, тому цей код видаляє зайвий заголовок з WooCommerce, що краще, ніж приховати його за допомогою CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Змініть заголовок архіву для магазину

Якщо ваша тема використовує функції archive_title () або get_archive_title () для відображення заголовка для своїх архівів, ви можете легко налаштувати його через фільтр, щоб схопити назву сторінки вашого продукту, а не назву архіву магазину..

функція wpex_woo_archive_title ($ назва) {
if (is_shop () && $ shop_id = wc_get_page_id ('магазин')) {
$ title = get_the_title ($ shop_id);
}
повернути $ title;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Змініть кількість товарів, що відображаються на сторінці в магазині

Використовується для зміни кількості зображень на сторінці в архівах магазину та товарів (категорій та тегів).

// Змінення публікацій магазину WooCommerce на сторінці
функція wpex_woo_posts_per_page ($ cols) {
повернення 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Змініть кількість стовпців, що відображаються в магазині за рядом

Я не розумію, чому WooCommerce працює таким чином, але ви не можете просто змінити фільтр ‘loop_shop_column’, ви також повинні додати унікальні класи до тегу body, щоб стовпці працювали. У той час, як у шорт-кодах Woo є обгортка Div із правильними класами, на яких не мають сторінок магазину, саме тому нам потрібні дві функції.

// Змінення стовпців магазину
функція wpex_woo_shop_column ($ стовпців) {
повернення 4;
}
add_filter ('loop_shop_column', 'wpex_woo_shop_columns');

// Додати правильний клас корпусу для стовпців магазину
функція wpex_woo_shop_column_body_class ($ класи) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ class [] = 'стовпці-4';
}
повернути $ класи;
}
add_filter ('body_class', 'wpex_woo_shop_column_body_class');

Змінення наступних та попередніх стрілок сторінки

Цей фрагмент дозволить налаштувати стрілки на сторінки в магазині, щоб відповідати тим, які є у вашій темі.

функція wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '';
$ args ['next_text'] = '';
повернути $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Змініть текст значка OnSale

Особливо корисно на сайтах, що використовують іншу мову або для видалення знака оклику, який я не є великим прихильником.

функція wpex_woo_sale_flash () {
повернути ''. esc_html __ ("Продаж", "Вукомерція"). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Змінити стовпці мініатюр галереї продуктів

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

функція wpex_woo_product_thumbnails_columns () {
повернення 4;
}
добавлення ('woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_column');

Змініть кількість відображених супутніх товарів

Використовується для зміни кількості продуктів, що відображаються для супутніх товарів на одній сторінці продукту.

// Встановити пов’язані продукти для відображення 4 продуктів
функція wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
повернути $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Змініть кількість стовпців на рядок для пов’язаних і розпродажів розділів на продуктах

Так само, як і в магазині, якщо ви хочете правильно змінити кількість стовпців для пов’язаних товарів та товарів, що продаються на одних сторінках, ви повинні фільтрувати стовпці, а також змінювати класи тіла.

// Фільтр-продаж стовпців
функція wpex_woo_single_loops_column ($ стовпці) {
повернення 4;
}
add_filter ('woocommerce_up_sells_column', 'wpex_woo_single_loops_column');

// Фільтр пов'язаних арг
функція wpex_woo_related_columns ($ args) {
$ args ['стовпці'] = 4;
повернути $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Фільтрувати класи тіла, щоб додати клас стовпця
функція wpex_woo_single_loops_column_body_class ($ класи) {
if (is_singular ('product')) {
$ class [] = 'стовпці-4';
}
повернути $ класи;
}
add_filter ('body_class', 'wpex_woo_single_loops_column_body_class');

Додайте у своє меню динамічне посилання та вартість кошика

Цей фрагмент додасть у ваше меню пункт кошика WooCommerce, який відображає вартість товарів у вашому кошику. Крім того, якщо на вашому веб-сайті ввімкнено функцію Font-Awesome, він відобразить невеликий значок сумки для покупок. Важливо: Ці функції не повинні бути загорнуті в умовне значення is_admin (), оскільки вони покладаються на AJAX для оновлення вартості, ви повинні переконатися, що функції доступні, коли is_admin () повертає справжнє та хибне.

// Додайте посилання в кошик до меню
функція wpex_add_menu_cart_item_to_menus ($ items, $ args) {

// Переконайтесь, що ви змінили 'wpex_main' у своєму меню !!!!
if ($ args-> topic_location === 'wpex_main') {

$ css_class = 'меню-пункт-пункт меню-пункт-тип-кошик меню-пункт-тип-woocommerce-cart';

якщо (is_cart ()) {
$ css_class. = 'пункт поточного меню';
}

$ items. = '
  • '; $ items. = wpex_menu_cart_item (); $ items. = '
  • '; } повернути $ позиції; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Функція повертає посилання на кошик головного меню функція wpex_menu_cart_item () { $ вихід = ''; $ cart_count = WC () -> cart-> cart_contents_count; $ css_class = 'меню-wpex-cart-total wpex-cart-total-'. intval ($ cart_count); if ($ cart_count) { $ url = WC () -> кошик-> get_cart_url (); } else { $ url = wc_get_page_permalink ("магазин"); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('сума', '', $ html); $ вихід. = ''; $ вихід. = ''; $ output. = wp_kses_post ($ html); $ вихід. = ''; повернути $ вихід; } // Оновити посилання кошика за допомогою AJAX функція wpex_main_menu_cart_link_fragments ($ фрагменти) { $ fragments ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); повернути $ фрагменти; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Висновок

    WooCommerce за замовчуванням буде працювати з будь-якою темою, але додасть додаткову підтримку плагіну, щоб вона краще відповідала вашій темі. Я фактично написав цю публікацію, кодуючи нашу тему блогу та магазину WordPress у Нью-Йорку, тому більшість із цих виправлень включені в нашу тему. Або якщо ви бажаєте придбати тему, щоб подивитися, як все робилося (див. Файли на wpex-new-york / inc / woocommerce) – це може бути простішим способом навчитися правильно додавати спеціальна підтримка плагіна WooCommerce, переглядаючи вже кодовану тему.

    Чи є ще які-небудь фрагменти, які, на вашу думку, належать до цього списку, або вам можуть бути корисні при розробці нових тем, готових до WooCommerce?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map