Від автора: ви захотіли додати тему магазин – чудово! WordPress WooCommerce – відмінний вибір. Чисто технічно, ВСІ теми сумісні з WooCommerce, адже це просто плагін. Чисто теоретично, будь-плагін повинен працювати з будь-якою темою WordPress (добре скроєної).
З боку розробника тим ви, можливо, хотіли б краще підігнати WooCommerce до теми або забезпечити опції для кінцевого користувача, яких немає в стандартних налаштуваннях WooCommerce (наприклад, зміна кількості стовпців в магазині). Нижче ви знайдете трохи корисного коду, за допомогою якого можна «поліпшити» підтримку WooCommerce в темі і/або змінити щось під свій дизайн.
Важливо: багато шматки коду нижче використовують функції, доступні лише в WooCommerce. Переконайтеся, що цей код не просто скинутий в кінець functions.php в темі. Якщо ви збираєтеся поширювати свою тему або продавати, то необхідно помістити весь код у своїх файлах і завантажувати їх тільки при активності плагіна WooCommerce.
Перевіряємо активність WooCommerce
В своїх темах я люблю задавати кастомний константу, з допомогою якої можна перевіряти активність WooCommerce, щоб підключати файли або запускати функції тільки, коли він активний (див. важливо зверху).
// Додайте нову константу, яка буде повертати true, якщо WooCommerce включений
define( ‘WPEX_WOOCOMMERCE_ACTIVE’, class_exists( ‘WooCommerce’ ) );
// Перевіряємо WooCommerce на активність
if ( WPEX_WOOCOMMERCE_ACTIVE ) {
// Робимо що-небудь…
// Наприклад, підключаємо новий файл з усіма правками.
}
Оголошуємо підтримку WooCommerce
Це перший і найважливіший код, який необхідно додати в тему – він «включає» підтримку WooCommerce і ховає попередження від плагіна, які говорять користувачеві, що тему не сумісна.
add_action( ‘after_setup_theme’, function() {
add_theme_support( ‘woocommerce’ );
} );
Видаляємо WooCommerce CSS
Особисто я краще перепишу стилі WooCommerce, щоб уникнути всіх можливих проблем зі сторонніми WooCommerce плагінами. Однак якщо ви хочете видалити всі стилі WooCommerce, зробити це дуже просто.
Наступний код видаляє ВСІ стилі WooCommerce:
// Remove all Styles Woo
add_filter( ‘woocommerce_enqueue_styles’, ‘__return_empty_array’ );
Код нижче – приклад умовного видалення певних стилів:
function wpex_remove_woo_styles( $styles ) {
unset( $styles[‘woocommerce-general’] );
unset( $styles[‘woocommerce-layout’] );
unset( $styles[‘woocommerce-smallscreen’] );
return $styles;
}
add_filter( ‘woocommerce_enqueue_styles’, ‘wpex_remove_woo_styles’ );
Включаємо WooCommerce галерею товарів, Zoom і LightBox (v3.0+)
У WooCommerce 3.0 була представлена нова галерея товарів, zoom і lightbox. Все це активується через «add_theme_support», якщо хочете використовувати їх в темі.
add_theme_support( ‘wc-product-gallery-slider’ );
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() для відображення заголовка в архівах, то ви можете з легкістю замінити його за допомогою фільтра. Ви можете вставити свою назву сторінки товарів замість архівного заголовка.
function wpex_woo_archive_title( $title ) {
if ( is_shop() && $shop_id = wc_get_page_id( ‘shop’ ) ) {
$title = get_the_title( $shop_id );
}
return $title;
}
add_filter( ‘get_the_archive_title’, ‘wpex_woo_archive_title’ );
Міняємо кількість товарів, що відображаються на сторінці магазину
Використовується для зміни кількості товарів, що відображаються за раз на сторінці магазину і архівів товарів (категорії та теги).
// Alter WooCommerce shop per page posts
function wpex_woo_posts_per_page( $cols ) {
return 12;
}
add_filter( ‘loop_shop_per_page’, ‘wpex_woo_posts_per_page’ );
Міняємо кількість колонок, що відображаються в магазині
Не розумію, чому WooCommerce так працює, але ви не можете просто так змінити фільтр loop_shop_columns. Потрібно додати унікальні класи в тег body, щоб колонки заробили. У шорткодах Woo є div з відповідними класами, яких немає на сторінках магазину, тому нам знадобляться 2 функції.
// Alter shop columns
function wpex_woo_shop_columns( $columns ) {
return 4;
}
add_filter( ‘loop_shop_columns’, ‘wpex_woo_shop_columns’ );
// Add correct class for body shop columns
function wpex_woo_shop_columns_body_class( $classes ) {
if ( is_shop() || is_product_category() || is_product_tag() ) {
$classes[] = ‘columns-4’;
}
return $classes;
}
add_filter( ‘body_class’, ‘wpex_woo_shop_columns_body_class’ );
Міняємо стрілки посторінкової навігації (назад, вперед)
Цей код змінює стрілки посторінкової навігації в магазині, щоб вони краще підходили під вашу тему.
function wpex_woo_pagination_args( $args ) {
$args[‘prev_text’] = “;
$args[‘next_text’] = “;
return $args;
}
add_filter( ‘woocommerce_pagination_args’, ‘wpex_woo_pagination_args’ );
Міняємо текст бейджа OnSale
Особливо корисно на сайтах використовувати різні мови або видаляти окличні знаки – я не дуже їх люблю.
function wpex_woo_sale_flash() {
return ‘‘ . esc_html__( ‘Sale’, ‘woocommerce’ ) . ‘‘;
}
add_filter( ‘woocommerce_sale_flash’, ‘wpex_woo_sale_flash’ );
Міняємо колонки мініатюр в галереї товарів
Можливо, ви захочете змінити кількість колонок мініатюр на сторінці галереї товарів під свій макет. Ця функція допоможе вам.
function wpex_woo_product_thumbnails_columns() {
return 4;
}
add_action( ‘woocommerce_product_thumbnails_columns’, ‘wpex_woo_product_thumbnails_columns’ );
Міняємо кількість супутніх товарів
Використовується для зміни кількості супутніх товарів на сторінці одного товару.
// Set related products to display 4 products
function wpex_woo_related_posts_per_page( $args ) {
$args[‘posts_per_page’] = 4;
return $args;
}
add_filter( ‘woocommerce_output_related_products_args’, ‘wpex_woo_related_posts_per_page’ );
Міняємо кількість колонок для секцій супутніх товарів і додаткових продажів
Якщо хочете правильно змінювати кількість колонок для секцій супутніх і додаткових продажів на сторінці одного товару і декількох, вам необхідно відфільтрувати колонки і змінити класи body.
// Filter up-sells columns
function wpex_woo_single_loops_columns( $columns ) {
return 4;
}
add_filter( ‘woocommerce_up_sells_columns’, ‘wpex_woo_single_loops_columns’ );
// Filter related args
function wpex_woo_related_columns( $args ) {
$args[‘columns’] = 4;
return $args;
}
add_filter( ‘woocommerce_output_related_products_args’, ‘wpex_woo_related_columns’, 10 );
// Filter body classes to add column class
function wpex_woo_single_loops_columns_body_class( $classes ) {
if ( is_singular( ‘product’ ) ) {
$classes[] = ‘columns-4’;
}
return $classes;
}
add_filter( ‘body_class’, ‘wpex_woo_single_loops_columns_body_class’ );
Додаємо динамічну посилання на кошик і вартість корзини в меню
Код нижче додасть кошик WooCommerce в меню, де відображається ціна товарів. Також якщо у вас є шрифт Font-Awesome, він відобразить маленьку іконку кошика. Важливо: ці функції не можна загортати в умова is_admin(), так як вони працюють з AJAX для оновлення вартості. Необхідно знати, що функції доступні, коли is_admin() повертає true і false.
// Add the cart link to menu
function wpex_add_menu_cart_item_to_menus( $items, $args ) {
// Make sure your change ‘wpex_main’ Menu to your location !!!!
if ( $args->theme_location === ‘wpex_main’ ) {
$css_class = ‘menu-item menu-item-type-cart menu-item-type-woocommerce-cart’;
if ( is_cart() ) {
$css_class .= ‘current-menu-item’;
}
$items .= ‘
$items .= wpex_menu_cart_item();
$items .= ‘
‘;
}
return $items;
}
add_filter( ‘wp_nav_menu_items’, ‘wpex_add_menu_cart_item_to_menus’, 10, 2 );
// Function returns the main menu link cart
function wpex_menu_cart_item() {
$output = “;
$cart_count = WC()->cart->cart_contents_count;
$css_class = ‘wpex-menu-cart-total wpex-cart-total-‘. intval( $cart_count );
if ( $cart_count ) {
$url = WC()->cart->get_cart_url();
} else {
$url = wc_get_page_permalink( ‘shop’ );
}
$html = $cart_extra = WC()->cart->get_cart_total();
$html = str_replace( ‘amount’, “, $html );
$output .= “;
$output .= ‘‘;
$output .= wp_kses_post( $html );
$output .= “;
return $output;
}
// Update cart link with AJAX
function wpex_main_menu_cart_link_fragments( $fragments ) {
$fragments[‘.wpex-menu-cart-total’] = wpex_menu_cart_item();
return $fragments;
}
add_filter( ‘add_to_cart_fragments’, ‘wpex_main_menu_cart_link_fragments’ );
Висновок
WooCommerce буде працювати з будь-якою темою за замовчуванням, але немає нічого складного в тому, щоб трохи поліпшити підтримку плагіна, щоб він краще вписувався в тему. Я писав цю статтю, поки кодил нашу тему New York WordPress Blog & Shop, тобто більша частина твіков включена в нашу тему. Якщо хочете, можете купити тему, щоб подивитися, як все зроблено (див. файли у wpex-new-york/inc/woocommerce). На прикладі, можливо, буде легше вивчити, як правильно додавати кастомний підтримку плагіна WooCommerce.
А ви знаєте код, який можна додати в цей список, або він був би корисним при розробці нової теми для WooCommerce?
