Від автора: при плануванні WooCommerce-магазину вам доведеться відповісти на багато питань, які серйозно вплинуть на майбутній успіх сайту. Налаштування магазину — серйозний виклик. Після завершення цього процесу вже складно внести якісь правки в налаштування і дизайн. Для кастомізації сторінок товарів в Woocommerce вам буде потрібно розглянути доступні варіанти, про які я і розповім в цьому пості.
І ось, магазин створений. Наступний виклик — безлад на сторінках товарів. На сторінці WooCommerce Single Product є безліч елементів, які не безпосередньо можуть допомогти з кастомізацією дизайну і налаштуванням магазину. Два головних винуватця безладу — категорії товарів і зірки рейтингу. Не кожному магазину потрібні ці елементи на сторінці Single Product. Так само і інші елементи необхідно пересунути, щоб вони вписувалися в кастомный дизайн магазину.
Всі ці труднощі можна легко вирішити за допомогою екшенів і хуків в WooCommerce. Для демонстрації можливостей кастомізації сторінки товару я створив кілька екшенів і хуків.
Кастомизируйте сторінки товарів в WooCommerce
Перше, що ви повинні хотіти — це змінити шаблон відображення товарів. Для цього необхідно завантажити файл single-product.php, який контролює файли шаблонів, які, в свою чергу, відображають інформацію про товари на frontend’е.
Найпоширеніший рада при налаштуванні шаблонних сторінок батьківських тем і плагінів — робіть копії шаблонів теми. Всі зміни робіть з копією. Такий підхід гарантує вам збереження ваших змін у разі оновлення тем і плагінів.
Деякі плагіни і теми надають велику колекцію користувальницьких екшенів і хуков, які дозволяють вносити зміни безпосередньо у файли теми. Саме класне в такому підході це те, що вам не потрібно змінювати розмітку файлів шаблону. В результаті ви отримуєте чистий код і відсутність дублів файлів.
За допомогою single-product.php я буду викликати файли шаблону, які відповідають за інформацію про товар і формат її відображення на сторінці. Файл content-single-product.php — шаблон товару. Саме цей файл необхідно редагувати, щоб змінити інформацію та стилі сторінки товарів.
А тепер відкрийте single_template і вставте наступний код, щоб змінити шаблон сторінки Single Product:
function get_custom_post_type_template($single_template) {
global $post;
if ($post->post_type == ‘product’) {
$single_template = dirname( __FILE__ ) . ‘/single-template.php’;
}
return $single_template;
}
add_filter( ‘single_template’, ‘get_custom_post_type_template’ );
as well as following code include in template _include
add_filter( ‘template_include’, ‘portfolio_page_template’, 99 );
function portfolio_page_template( $template ) {
if ( is_page( ‘slug’ ) ) {
$new_template = locate_template( array( ‘single-template.php’ ) );
if ( ” != $new_template ) {
return $new_template ;
}
}
return $template;
}
Створіть кастомні товари/категорії в WooCommerce
На цьому етапі я припускаю, що у вас вже є працюючий WooCommerce-магазин, і ви знайомі з процесом налаштування сторінки товарів і категорій. Існує безліч причин для створення користувацьких сторінок товарів і категорій. Для цього необхідно налаштувати користувальницький шаблон цих шаблонів.
Налаштуйте файли шаблонів в WooCommerce
При роботі з файлом content-single-product.php необхідно пам’ятати наступне: будь-які додані товари і категорії повинні вставлятися в кінець файлу. Ще одна хороша практика — назвіть файл так, щоб він виділявся і був легко пізнаваний. Наприклад, якщо у вас є категорія «Books», назвіть файл content-single-product-books.php. Така невелика правка гарантує, що ви моментально визначте файл для певної категорії. Цей файл відповідає за всі зміни, які необхідні, щоб сторінки товарів і категорій виглядали рівно так, як ви хотіли (додавання або видалення сайдбара, зміна в циклі і т. д.).
Далі необхідно змінити файл single-product.php. У файлі є цикл, який відповідає за те, які шаблони необхідно завантажити для відображення товарів.
Я додам умова, яка буде перевіряти належність товару до певної категорії, після чого завантажувати пов’язаний single-product.php у кастомный шаблон. Цей файл можна не перейменовувати. Перед вставкою коду знайдіть у цьому файлі наступний рядок:
woocommerce_get_template_part( ‘content’, ‘single-product’ );
Її необхідно замінити на наступний код:
global $post;
$terms = wp_get_post_terms( $post->ID, ‘product_cat’ );
foreach ( $terms as $term ) $categories[] = $term->slug;
if ( in_array( ‘YOURCATEGORY’, $categories ) ) {
woocommerce_get_template_part( ‘content’, ‘single-product-YOURCATEGORY’ );
} else {
woocommerce_get_template_part( ‘content’, ‘single-product’ );
}
У цьому коді знайдіть YOURCATEGORY і замініть на своє скорочення категорії. Також ви можете перейменувати файл content-single-product.php. На прикладі з категорією вище «Books» файл single-product.php був перейменований в content-single-product-books.php. Зараз такий код:
global $post;
$terms = wp_get_post_terms( $post->ID, ‘product_cat’ );
foreach ( $terms as $term ) $categories[] = $term->slug;
if ( in_array( ‘books’, $categories ) ) {
woocommerce_get_template_part( ‘content’, ‘single-product-books’ );
} else {
woocommerce_get_template_part( ‘content’, ‘single-product’ );
}
До цього етапу всі файли успішно змінені та/або перейменовані. Наступний крок — завантажити їх в WooCommerce-магазин. Щоб все пройшло гладко, створіть в директорії теми папку /woocommerce/. Не забувайте, що обидва файлу (content-single-product.php і single-product.php) необхідно помістити в одну папку. Хороша практика — змінювати елементи коду в цій папці теми, щоб запобігти складні для дебага помилки при перезапису оригінальних файлів WooCommerce.
Останній етап — перевірити сторінки товару і категорій на те, що зміни, внесені в код, застосувались і ідеально відображаються на екрані.
Висновок
Кастомізація сторінок товарів і категорій WooCommerce — це додавання і зміна хуків. Ось і вся наука. Важливо зрозуміти, що всі зміни безпосередньо впливають на рендеринг цих двох сторінок на frontend’е магазину. Якщо вам необхідно допомогти з кодом або з чим-небудь ще, пишіть в коментарях, і я відповім вам.
