Как редактировать wc_get_template_part для архивных продуктов

Я хочу установить пользовательский стиль для отображения цен на распродаже на странице архива WooCommerce. Я мог бы сделать это в файле single-product.php, но на странице архива это просто wc_get_template_part( ‘content’, ‘product’ ); и нет ссылки, чтобы найти его.

Как я могу найти HTML-шаблон и установить пользовательский класс CSS для товаров на распродаже на странице архива?

В вашей теме должны быть несколько файлов шаблонов, названия которых начинаются с “content”, за которым следует дефис, уникальное имя и .php, например, “content-xxx.php”. Иногда они могут находиться в подпапке, называемой чем-то вроде “template parts”.

Именно там вы найдете файл content-product.php и в нем цикл, который можете изменить, чтобы добавить ваше пользовательское объявление стиля.

Однако я настоятельно рекомендую убедиться, что вы изменяете дочернюю тему, которую вы создали, в противном случае обновления темы перезапишут ваши правки.

В качестве альтернативы, вы можете добавить некоторый код в functions.php вашей (дочерней) темы, или еще лучше, в пользовательский плагин, который находится в вашей папке плагинов, а не в папке темы (чтобы сделать его независимым от темы), чтобы добавить классы.

Вы можете сделать это с помощью фильтров, я делал это, чтобы добавить классы к классу Body и Post, но вы можете сделать это более детализированным, если нужно. Смотрите эту страницу для некоторых примеров:

https://developer.wordpress.org/reference/functions/body_class/

Прокрутите вниз, чтобы увидеть примеры, вы могли бы легко нацелиться на ваш шаблон.

Вы можете настроить HTML для товаров на распродаже на странице архива WooCommerce, переопределив файл content-product.php, который вызывается с помощью wc_get_template_part( 'content', 'product' ). Вот как вы можете это сделать:

Шаги:

1. Найдите файл шаблона
   Функция wc_get_template_part( 'content', 'product' ) загружает файл шаблона content-product.php. Этот файл находится по следующему пути:

   wp-content/plugins/woocommerce/templates/content-product.php
   

2. Скопируйте шаблон в вашу тему
   Чтобы безопасно внести изменения, скопируйте файл content-product.php в вашу тему или дочернюю тему. Поместите его в этот каталог:

   wp-content/themes/your-theme/woocommerce/content-product.php
   

3. Добавьте пользовательский CSS-класс для товаров на распродаже
   Откройте файл content-product.php в вашей теме. Чтобы добавить пользовательский класс для товаров на распродаже, оберните код отображения цены в условную проверку. Найдите следующую строку, которая отображает цену товара (или что-то подобное):

   <?php echo $product->get_price_html(); ?>
   

   Замените ее на:

   <?php if ( $product->is_on_sale() ) : ?>
       <span class="custom-sale-price"><?php echo $product->get_price_html(); ?></span>
   <?php else : ?>
       <?php echo $product->get_price_html(); ?>
   <?php endif; ?>
   

4. Стилизация пользовательского класса
   Добавьте ваш пользовательский CSS для цен на распродаже в style.css вашей темы или в пользовательский CSS файл. Например:

   .custom-sale-price {
       color: red;
       font-weight: bold;
   }
   

5. Проверьте ваши изменения
   Очистите кэш и протестируйте страницу архива, чтобы убедиться, что пользовательский стиль применяется только к товарам на распродаже.

Дополнительно

Если вы не хотите напрямую редактировать файлы шаблонов, вы также можете использовать хуки WooCommerce, такие как woocommerce_before_shop_loop_item_title, чтобы динамически добавить ваш пользовательский класс. Но для вашего конкретного случая наиболее простым подходом будет редактирование шаблона content-product.php.

Дайте знать, если вам нужно больше помощи!