Тема магазина по макету Figma

Каталог, карточка товара, корзина, оформление заказа и блог на WooCommerce.

Стили разложены по слоям: токены из Figma, база, компоненты, страницы,
брейкпоинты. Цвета, типографика, радиусы и отступы взяты из Variables и
текстовых стилей макета, ниже по слоям хардкода нет.

Иконки — Phosphor, вставляются инлайном как SVG, символами ничего не рисуется.
Стили WooCommerce отключены, вёрстка своя, !important не используется.

template-parts/subcategories.php

@@ -0,0 +1,77 @@
+<?php
+/**
+ * Subcategory cards shown above the catalog filters.
+ *
+ * Renders the children of the current category; on the catalog root, or when a
+ * category has no children, it renders that level's siblings instead, so the
+ * row always offers somewhere to go rather than collapsing to nothing.
+ *
+ * @package VyatkaShop
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$vyatka_current = is_product_category() ? get_queried_object() : null;
+$vyatka_parent  = $vyatka_current instanceof WP_Term ? $vyatka_current->term_id : 0;
+
+$vyatka_terms = get_terms(
+	array(
+		'taxonomy'   => 'product_cat',
+		'parent'     => $vyatka_parent,
+		'hide_empty' => true,
+	)
+);
+
+// A leaf category shows its siblings.
+if ( ( is_wp_error( $vyatka_terms ) || ! $vyatka_terms ) && $vyatka_current instanceof WP_Term ) {
+	$vyatka_terms = array_filter(
+		(array) get_terms(
+			array(
+				'taxonomy'   => 'product_cat',
+				'parent'     => $vyatka_current->parent,
+				'hide_empty' => true,
+			)
+		),
+		static fn( $term ): bool => $term instanceof WP_Term && $term->term_id !== $vyatka_current->term_id
+	);
+}
+
+if ( is_wp_error( $vyatka_terms ) || ! $vyatka_terms ) {
+	return;
+}
+?>
+<div class="subcategories" data-subcategories>
+	<ul class="subcategory-list" data-subcategory-track>
+		<?php foreach ( $vyatka_terms as $vyatka_term ) : ?>
+			<li>
+				<a class="subcategory-card" href="<?php echo esc_url( get_term_link( $vyatka_term ) ); ?>">
+					<span class="subcategory-card-media">
+						<?php
+						$vyatka_thumb_id = (int) get_term_meta( $vyatka_term->term_id, 'thumbnail_id', true );
+						if ( $vyatka_thumb_id ) {
+							echo wp_kses_post( wp_get_attachment_image( $vyatka_thumb_id, 'thumbnail' ) );
+						}
+						?>
+					</span>
+					<span class="subcategory-card-copy">
+						<span class="subcategory-card-title"><?php echo esc_html( $vyatka_term->name ); ?></span>
+						<span class="subcategory-card-count">
+							<?php
+							printf(
+								/* translators: %s: number of products in the category. */
+								esc_html( _n( '%s товар', '%s товаров', (int) $vyatka_term->count, 'vyatka-shop' ) ),
+								esc_html( number_format_i18n( (int) $vyatka_term->count ) )
+							);
+							?>
+						</span>
+					</span>
+				</a>
+			</li>
+		<?php endforeach; ?>
+	</ul>
+	<button class="subcategory-next" type="button" data-subcategory-next aria-label="<?php esc_attr_e( 'Показать ещё подкатегории', 'vyatka-shop' ); ?>">
+		<?php vyatka_shop_icon( 'arrow-right-fill', array( 'class' => 'icon-20' ) ); ?>
+	</button>
+</div>