פיתוח ועיצוב תבנית WooCommerce מותאמת אישית ושירותי אופטימיזציה

פיתוח ערכת נושא מותאמת אישית ל-WooCommerce

ערכת הנושא הסטנדרטית Storefront אינה מספקת את הגמישות הנדרשת לעיצוב חנות מקוונת ייחודית. כל לקוח שני מגיע עם שאלה: "איך מסירים שדות מיותרים מעגלת הקניות?" או "איך מוסיפים תגית לכרטיס המוצר?" התשובה היא אחת — ערכת נושא מותאמת אישית ל-WooCommerce. אנו לוקחים אב טיפוס עיצובי והופכים אותו לתבנית עובדת מלאה מבלי לגעת בליבת התוסף. הניסיון שלנו: מעל 30 פרויקטי WooCommerce, תאימות מובטחת לגרסאות העדכניות ביותר. עם מעל 5 שנות התמחות ו-30+ פרויקטים מוצלחים, אנו מספקים ערכות נושא בעלות ביצועים גבוהים.

הודות לפיתוח מותאם אישית, זמן טעינת העמוד הממוצע מופחת ב-30-40%, וההמרות גדלות ב-15-20%. זה קשור ישירות לאופטימיזציית Core Web Vitals: LCP < 1.5 שניות, CLS < 0.1. לפי הנתונים שלנו, 70% מהחנויות על ערכות נושא מוכנות מראש имеют LCP > 3 שניות, מה שמשפיע לרעה על דירוגי החיפוש. ההשקעה הטיפוסית בפרויקט נעה בין 3,000 ל-10,000 דולר בהתאם למורכבות, עם תקופת החזר של 3–6 חודשים הודות לעלייה בהמרות. ערכות הנושא שלנו משיגות ציון PageSpeed ממוצע של 95+ ו-100% התאמה למובייל.

למה ערכת נושא מותאמת אישית עדיפה על מוכנה מראש?

ערכת נושא מוכנה (Storefront, Flatsome, Astra) חוסכת זמן בהתחלה אך מביאה מגבלות: CSS מיותר, עקיפות מורכבות דרך hooks, ואובדן ביצועים. ערכת נושא מותאמת אישית מאפס נטענת פי 2-3 מהר יותר הודות להיעדר קוד מת ותבניות נקיות. הפרויקט הממוצע על ערכת נושא מותאמת אישית מחזיר את ההשקעה תוך 2-3 חודשים הודות לגידול בהמרות.

בנוסף, ערכת נושא מותאמת אישית אינה מכילה קוד מת, מה שמפחית את נפח ה-CSS וה-JS ב-40–60%. זה משפיע לטובה על דירוגי החיפוש. צרו קשר לניתוח פרויקט.

איך לעקוף תבנית ב-WooCommerce?

WooCommerce מחפש תבניות בתיקיית woocommerce/ בתוך ערכת הנושא הפעילה. אם הקובץ נמצא, הוא עוקף את המקור מהתוסף. הנה מדריך שלב אחר שלב:

1. קבעו אילו תבניות צריך לשנות (קטלוג, מוצר, עגלה וכו').
2. העתיקו אותן מ-/wp-content/plugins/woocommerce/templates/.
3. הניחו את העותקים בתיקיית woocommerce/ של ערכת הנושא שלכם.
4. שנו את הקבצים לפי אב הטיפוס העיצובי.
5. הגדירו hooks לפונקציות נוספות כדי להימנע מהעתקת קבצים מיותרים.

wp-content/themes/my-theme/
├── woocommerce/
│   ├── archive-product.php # Страница каталога
│   ├── single-product.php # Карточка товара
│   ├── cart/
│   │   └── cart.php # Корзина
│   ├── checkout/
│   │   ├── form-checkout.php # Форма оформления
│   │   └── thankyou.php # Страница подтверждения
│   ├── myaccount/
│   │   └── dashboard.php # Личный кабинет
│   ├── content-product.php # Элемент каталога (карточка в списке)
│   ├── single-product/
│   │   ├── tabs/
│   │   │   └── tabs.php # Вкладки товара
│   │   └── related.php # Похожие товары
│   └── loop/
│       ├── pagination.php
│       └── add-to-cart.php
└── functions.php

רשימה מלאה של תבניות זמינה בתיעוד הרשמי של WooCommerce.

עקיפת תבנית כרטיס המוצר

במקום להעתיק את wp-content/themes/my-theme/ ├── woocommerce/ │ ├── archive-product.php # Страница каталога │ ├── single-product.php # Карточка товара │ ├── cart/ │ │ └── cart.php # Корзина │ ├── checkout/ │ │ ├── form-checkout.php # Форма оформления │ │ └── thankyou.php # Страница подтверждения │ ├── myaccount/ │ │ └── dashboard.php # Личный кабинет │ ├── content-product.php # Элемент каталога (карточка в списке) │ ├── single-product/ │ │ ├── tabs/ │ │ │ └── tabs.php # Вкладки товара │ │ └── related.php # Похожие товары │ └── loop/ │ ├── pagination.php │ └── add-to-cart.php └── functions.php עם עריכות מינימליות, אנו כותבים אותה מאפס לפי העיצוב:

<?php // woocommerce/content-product.php
defined('ABSPATH') || exit;
global $product;
if (!$product || !$product->is_visible()) return;
$product_id = $product->get_id();
$permalink = get_the_permalink();
$thumbnail_url = get_the_post_thumbnail_url($product_id, 'woocommerce_thumbnail');
$badge = get_post_meta($product_id, '_product_badge', true);
?>
<article <?php wc_product_class('product-card', $product); ?>>
    <a href="<?= esc_url($permalink) ?>" class="product-card__image-wrap" tabindex="-1">
        <?php if ($thumbnail_url) : ?>
            <img src="<?= esc_url($thumbnail_url) ?>" alt="<?= esc_attr(get_the_title()) ?>" loading="lazy" class="product-card__image" >
        <?php else : ?>
            <div class="product-card__image product-card__image--placeholder"></div>
        <?php endif; ?>
        <?php if ($badge) : ?>
            <span class="product-card__badge"><?= esc_html($badge) ?></span>
        <?php endif; ?>
        <?php if ($product->is_on_sale()) : ?>
            <span class="product-card__sale"><?= esc_html(wc_get_sale_flash()) ?></span>
        <?php endif; ?>
    </a>
    <div class="product-card__body">
        <a href="<?= esc_url($permalink) ?>" class="product-card__title">
            <?= esc_html(get_the_title()) ?>
        </a>
        <?php if ($product->get_short_description()) : ?>
            <p class="product-card__desc"><?= wp_kses_post(wp_trim_words($product->get_short_description(), 12)) ?></p>
        <?php endif; ?>
        <div class="product-card__footer">
            <span class="product-card__price"><?= wp_kses_post($product->get_price_html()) ?></span>
            <?php if ($product->is_in_stock()) : ?>
                <?php woocommerce_template_loop_add_to_cart(['class' => 'btn btn--primary btn--sm']); ?>
            <?php else : ?>
                <span class="product-card__outofstock">Нет в наличии</span>
            <?php endif; ?>
        </div>
    </div>
</article>

איך להאיץ פיתוח באמצעות hooks?

שינויים רבים יכולים להתבצע דרך hooks מבלי לגעת בתבניות:

// Убираем рейтинг из карточки в каталоге
remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5);

// Добавляем артикул
add_action('woocommerce_after_shop_loop_item_title', function () {
    global $product;
    $sku = $product->get_sku();
    if ($sku) {
        echo '<span class="product-card__sku">Арт: ' . esc_html($sku) . '</span>';
    }
}, 6);

// Перемещаем цену до заголовка на карточке товара
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 5);

// Добавляем кастомную секцию после описания
add_action('woocommerce_single_product_summary', function () {
    global $product;
    $benefits = get_post_meta($product->get_id(), '_product_benefits', true);
    if ($benefits) {
        echo '<div class="product-benefits">' . wp_kses_post($benefits) . '</div>';
    }
}, 25);

Hooks מאפשרים להימנע מהעתקת תבניות ולהאיץ פיתוח. לדוגמה, באמצעות ה-hook content-product.php, ניתן להציג תגית מותאמת אישית מבלי לערוך את <?php // woocommerce/content-product.php defined('ABSPATH') || exit; global $product; if (!$product || !$product->is_visible()) return; $product_id = $product->get_id(); $permalink = get_the_permalink(); $thumbnail_url = get_the_post_thumbnail_url($product_id, 'woocommerce_thumbnail'); $badge = get_post_meta($product_id, '_product_badge', true); ?> <article <?php wc_product_class('product-card', $product); ?>> <a href="<?= esc_url($permalink) ?>" class="product-card__image-wrap" tabindex="-1"> <?php if ($thumbnail_url) : ?> <img src="<?= esc_url($thumbnail_url) ?>" alt="<?= esc_attr(get_the_title()) ?>" loading="lazy" class="product-card__image" > <?php else : ?> <div class="product-card__image product-card__image--placeholder"></div> <?php endif; ?> <?php if ($badge) : ?> <span class="product-card__badge"><?= esc_html($badge) ?></span> <?php endif; ?> <?php if ($product->is_on_sale()) : ?> <span class="product-card__sale"><?= esc_html(wc_get_sale_flash()) ?></span> <?php endif; ?> </a> <div class="product-card__body"> <a href="<?= esc_url($permalink) ?>" class="product-card__title"> <?= esc_html(get_the_title()) ?> </a> <?php if ($product->get_short_description()) : ?> <p class="product-card__desc"><?= wp_kses_post(wp_trim_words($product->get_short_description(), 12)) ?></p> <?php endif; ?> <div class="product-card__footer"> <span class="product-card__price"><?= wp_kses_post($product->get_price_html()) ?></span> <?php if ($product->is_in_stock()) : ?> <?php woocommerce_template_loop_add_to_cart(['class' => 'btn btn--primary btn--sm']); ?> <?php else : ?> <span class="product-card__outofstock">Нет в наличии</span> <?php endif; ?> </div> </div> </article> .

הקבצים הנעקפים בתדירות הגבוהה ביותר כוללים: archive-product.php, single-product.php, cart/cart.php, checkout/form-checkout.php, myaccount/dashboard.php, ו-content-product.php.

מה נותנת גלריית מוצרים מותאמת אישית?

WooCommerce משתמש ב-Flexslider לגלריה — כבד ומיושן. החלפתו ביישום מותאם אישית:

// Отключаем стандартную галерею
remove_action('woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20);
remove_action('woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);

// Подключаем свою
add_action('woocommerce_before_single_product_summary', 'my_theme_product_gallery', 20);

function my_theme_product_gallery(): void {
    global $product;
    $main_image_id = $product->get_image_id();
    $gallery_ids = $product->get_gallery_image_ids();
    $all_image_ids = $main_image_id ? array_merge([$main_image_id], $gallery_ids) : $gallery_ids;

    if (empty($all_image_ids)) {
        echo wc_placeholder_img('woocommerce_single');
        return;
    }

    echo '<div class="product-gallery" data-lightbox="product">';
    echo '<div class="product-gallery__main">';
    foreach ($all_image_ids as $idx => $image_id) {
        $full = wp_get_attachment_image_url($image_id, 'full');
        $large = wp_get_attachment_image_url($image_id, 'woocommerce_single');
        $alt = get_post_meta($image_id, '_wp_attachment_image_alt', true) ?: get_the_title();
        printf(
            '<a href="%s" class="product-gallery__slide%s" data-index="%d"> <img src="%s" alt="%s" loading="%s"> </a>',
            esc_url($full),
            $idx === 0 ? ' product-gallery__slide--active' : '',
            $idx,
            esc_url($large),
            esc_attr($alt),
            $idx === 0 ? 'eager' : 'lazy'
        );
    }
    echo '</div>';

    if (count($all_image_ids) > 1) {
        echo '<div class="product-gallery__thumbs">';
        foreach ($all_image_ids as $idx => $image_id) {
            $thumb = wp_get_attachment_image_url($image_id, 'thumbnail');
            printf(
                '<button class="product-gallery__thumb%s" data-index="%d" aria-label="Фото %d"> <img src="%s" alt="" loading="lazy"> </button>',
                $idx === 0 ? ' product-gallery__thumb--active' : '',
                $idx,
                $idx + 1,
                esc_url($thumb)
            );
        }
        echo '</div>';
    }
    echo '</div>';
}

גלריה מותאמת אישית עם זום והחלקה משפרת את חווית המשתמש ומפחיתה החזרות.

הצהרת תמיכה ב-WooCommerce

ערכת הנושא חייבת להצהיר במפורש על תמיכה ב-WooCommerce, אחרת תוצג אזהרה:

add_action('after_setup_theme', function () {
    add_theme_support('woocommerce', [
        'thumbnail_image_width' => 450,
        'single_image_width' => 800,
        'product_grid' => [
            'default_rows' => 3,
            'min_rows' => 1,
            'default_columns' => 4,
            'min_columns' => 2,
            'max_columns' => 6,
        ],
    ]);
    add_theme_support('wc-product-gallery-zoom');
    add_theme_support('wc-product-gallery-lightbox');
    add_theme_support('wc-product-gallery-slider');
});

תהליך העבודה ומה כלול

לאחר קבלת אב טיפוס עיצובי, אנו מבצעים ניתוח וקובעים את רשימת הקבצים לעקיפה. לאחר מכן אנו מתכננים את מבנה תיקיית // Убираем рейтинг из карточки в каталоге remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5); // Добавляем артикул add_action('woocommerce_after_shop_loop_item_title', function () { global $product; $sku = $product->get_sku(); if ($sku) { echo '<span class="product-card__sku">Арт: ' . esc_html($sku) . '</span>'; } }, 6); // Перемещаем цену до заголовка на карточке товара remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10); add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 5); // Добавляем кастомную секцию после описания add_action('woocommerce_single_product_summary', function () { global $product; $benefits = get_post_meta($product->get_id(), '_product_benefits', true); if ($benefits) { echo '<div class="product-benefits">' . wp_kses_post($benefits) . '</div>'; } }, 25); ומגדירים hooks ו-filters. במהלך היישום, אנו כותבים תבניות לקטלוג, מוצר, עגלה, תשלום וחשבון אישי. אנו מוסיפים אלמנטים מותאמים אישית — גלריה, תגיות, שדות נוספים. לאחר הסימון, אנו בודקים על כל המכשירים והדפדפנים, מודדים Core Web Vitals. לבסוף, אנו מוסרים תיעוד hooks, פרטי גישה והוראות עדכון.

לוחות זמנים בהתאם למורכבות:

העלות מחושבת באופן אישי — נעריך את הפרויקט לפי הדרישות שלכם. קבלו ייעוץ לפרויקט שלכם — נעזור לקבוע את ההיקף ולוחות הזמנים האופטימליים. הזמינו פיתוח ערכת נושא מותאמת אישית — קבלו חנות ייחודית עם ביצועים גבוהים והמרות.

יישמנו מעל 30 פרויקטי WooCommerce, כל אחד עם ארכיטקטורה משלו. אנו משתמשים רק בגרסאות העדכניות ביותר של PHP ו-WordPress. אנו מבטיחים תאימות לתוספים ועדכונים. אנו כותבים קוד נקי ללא תלות מיותרת, מה שמפחית עומס על השרת ומאיץ טעינה. ערכת נושא מותאמת אישית אינה דורשת דמי רישוי — חיסכון ברישיונות. צרו קשר כדי שנוכל לנתח את העיצוב שלכם ולהציע את הפתרון האופטימלי.