Вопрос или проблема
У меня есть очень простая тема, которая прекрасно работает с WooCommerce. В моем файле functions.php я настроил следующее для поддержки woocommerce.
//
// Хуки WooCommerce и переопределения темы
//
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
add_action('woocommerce_before_main_content', 'cm_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'cm_theme_wrapper_end', 10);
function cm_theme_wrapper_start() {
echo '
<div class="main-content-wrapper">
<section class="layout-standard">
<section class="cards">
<div class="layout-gallery short">
<div class="background"></div>
<img class="background-image" src="'; if ( has_post_thumbnail() ) { the_post_thumbnail_url('header-bg'); } else { echo get_template_directory_uri().'/images/default.jpg'; } echo '" alt="'; $image_title = get_post(get_post_thumbnail_id())->post_title; echo $image_title; echo '" title="'; $image_title = get_post(get_post_thumbnail_id())->post_title; echo $image_title; echo '">
<div class="width-container">
<div class="inner-container">
<h1 class="section-title">'; woocommerce_page_title(); echo '</h1>
</div>
</div>
</div>
</section>
<div class="width-container">
<div class="content-container">
<div class="content-holder">';
}
function cm_theme_wrapper_end() {
echo '
</div>
</div>
</div>
<div class="sidebar-container">';
get_sidebar();
echo '
</div>
</section>
</div>';
}
Это работает отлично, однако на базовой странице магазина не отображается изображение страницы. Вместо этого показывается изображение последнего продукта. Это, по сути, архивная страница, но, думаю, вне WordPress.
Как я могу отобразить изображение страницы магазина вместо последнего изображения продукта?
Страница магазина WooCommerce является архивом типа поста. Она не находится вне WP, а просто управляется в рамках либо плагина, либо темы, а не как “страница” или другой тип поста. Это похоже на то, как обрабатываются категории постов.
Поскольку страница магазина является архивом, её цикл/запрос идентифицирует продукты. Поэтому отображается последнее изображение продукта. Вы можете изменить ваш код следующим образом:
... (до строки 16 вашего существующего кода) ...
echo '<img class="background-image" src="';
// если это страница магазина - функция, специфичная для WooCommerce
if(is_shop()) {
echo get_template_directory_uri().'/images/shop-page-image.jpg';
// для всего остального контента
} else {
if ( has_post_thumbnail() ) {
the_post_thumbnail_url('header-bg');
} else {
echo get_template_directory_uri().'/images/default.jpg';
}
}
$image_title = get_post(get_post_thumbnail_id())->post_title;
echo '" alt="' . $image_title . '" title="' . $image_title . '" />';
Просто измените “shop-page-image.jpg” на имя файла, которое вы хотите отобразить на странице магазина.
Поскольку базовая страница магазина является архивом типа поста, вы можете получить миниатюру для этого архива условно и настроить дополнительные страницы соответствующим образом.
В этом примере тип WooCommerce — product
if (is_post_type_archive(product)){$base_thumb = wc_get_page_id( 'shop' );}
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $base_thumb ), "size" );
echo $thumbnail[0];
.
Ответ или решение
В установке WooCommerce и создании на его основе темы иногда возникают определенные сложности, особенно когда речь идет о динамическом отображении изображений на Странице магазина. Основная проблема, с которой вы столкнулись, заключается в том, что на Странице магазина отображается изображение последнего продукта вместо изображение, установленного в качестве основного для этой страницы. Давайте разберем, как можно решить эту проблему, пользуясь функциями WordPress и WooCommerce.
Теория
Прежде всего, важно понять, как работает Страница магазина в WooCommerce. По умолчанию WooCommerce использует Страницу магазина как архивную страницу для вывода всех товаров, что аналогично способу отображения архивов других типов записей, например, категорий статей. Из-за этого WooCommerce по умолчанию отображает миниатюру последнего товара, а не изображение, заданное на Странице магазина.
Для решения этой проблемы нам нужно вмешаться в обработку этой страницы и задать условие, при котором для архивной страницы будет загружаться именно то изображение, которое вы хотите видеть на Странице магазина.
Пример
Рассмотрим практический пример, как можно задать нужное изображение на Страницу магазина. В представленном вами коде создаются собственные обертки для вывода контента WooCommerce, однако необходима корректировка для конкретной реализации изображения Страницы магазина.
echo '<img class="background-image" src="';
// Добавляем проверку для страницы магазина
if (is_shop()) {
// Подставляем изображение, которое хотим видеть на Странице магазина
// Обратите внимание, что здесь важно указать правильный путь к вашему изображению
echo get_template_directory_uri().'/images/shop-page-image.jpg';
} else {
// Логика для остальных страниц
if (has_post_thumbnail()) {
echo the_post_thumbnail_url('header-bg');
} else {
echo get_template_directory_uri().'/images/default.jpg';
}
}
// Для получение заголовка изображения
$image_title = get_post(get_post_thumbnail_id())->post_title;
echo '" alt="' . $image_title . '" title="' . $image_title . '" />';В этом примере добавлено условие is_shop(), которое проверяет, является ли текущая страница Страницей магазина. Если это так, код загружает изображение shop-page-image.jpg. Обратите внимание на то, что файл shop-page-image.jpg должен быть предварительно загружен в директорию с изображениями вашей темы.
Применение
Чтобы вашу реализацию можно было применять более гибко и динамично, можно дополнительно использовать функции WordPress для получения ID страницы магазина и дальнейшего управления свойствами страницы. Для этого может понадобиться функция wc_get_page_id('shop'), которая помогает получить ID страницы магазины, что можно использовать для более сложной логики вывода.
$base_thumb_id = wc_get_page_id('shop');
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($base_thumb_id), 'full');
if ($thumbnail) {
echo '<img src="' . esc_url($thumbnail[0]) . '" alt="Shop Page Image" />';
}Заключение
Реализация такого подхода позволит вам кастомизировать внешний вид страницы магазина и отображать нужные изображения, улучшая тем самым пользовательский интерфейс. Не забудьте также о том, что вся логика должна быть хорошо протестирована в различных условиях, чтобы избежать некорректного отображения на других страницах вашего сайта. Придерживаясь такой структуры кода, вы сможете добиться необходимого результата и настроить внешний вид магазина в WooCommerce идеально под ваши нужды.