вы не сможете переопределить структуры страниц WooCommerce , как мы сделаем это позже в этой статье.
Скорее всего, в вашей теме уже есть функция functions.php, работающая на Hook after_setup_theme, вы можете добавить поддержку WooCommerce прямо туда.
Что еще интереснее в этом подходе, так это то, что мы можем дополнительно настроить поддержку нашей темы, передав массив в качестве второго параметра функции add_theme_support().
PHP
1
add_action ( 'after_setup_theme' , 'sam_add_woocommerce_support' );
2
/**
3
* Добавление совместимости с WooCommerce данные телеграммы финляндии с помощью дополнительного массива.
4
*/
5
функция sam_add_woocommerce_support () {
6
add_theme_support ( 'woocommerce' , [
7
'thumbnail_image_width' => 150 ,
8
'single_image_width' => 300 ,
9
'gallery_thumbnail_image_width' => 100 ,
10
11
'product_grid' => [
12
'default_rows' => 3 ,
13
'min_rows' => 2 ,
14
'max_rows' => 8 ,
15
'default_columns' => 4 ,
16
'min_columns' => 2 ,
17
'max_columns' => 5 ,
18
],
19
]);
20
}
Благодаря этой дополнительной информации вы сможете:
установить размер изображений, используемых на странице Магазина (спасибо thumbnail_image_widthи single_image_width),
установить размер изображений, используемых в галерее товаров (спасибо gallery_thumbnail_image_width),
измените настройки по умолчанию сетки продуктов, представленной в магазине, а также минимальное и максимальное количество столбцов и строк, которые будут использоваться благодаря массиву product_grid.
Конечно, это небольшие настройки, но я уверен, что вы найдете их удобными, потому что одним махом вы настроите две наиболее важные страницы любого сайта электронной коммерции : страницу одного продукта и страницу магазина.
Теперь, когда ваша тема совместима с WooCommerce и вы можете переопределить файлы ее шаблонов, пришло время узнать, сколькими способами мы можем настроить генерируемые страницы.
Начнем с CSS.
Как изменить стили CSS WooCommerce
Начнем с самых простых вещей, которые позволяют нам применить стиль нашей темы, перезаписав стили, установленные WooCommerce.