Custom WooCommerce Theme Development & Optimization Services

Custom WooCommerce Theme Development

The standard Storefront theme doesn't provide the flexibility needed for a unique online store design. Every second client comes with a question: "How do I remove extra fields from the cart?" or "How do I add a badge to the product card?" The answer is one — a bespoke WooCommerce theme. We take a design mockup and turn it into a fully working template without touching the plugin core. Our experience: over 30 WooCommerce projects, guaranteed compatibility with the latest versions. With over 5 years of specialization and 30+ successful projects, we deliver high-performance themes.

Thanks to custom development, the average page load time is reduced by 30-40%, and conversion increases by 15-20%. This is directly related to Core Web Vitals optimization: LCP < 1.5 s, CLS < 0.1. According to our data, 70% of stores on pre-built themes have LCP > 3 s, negatively affecting rankings. Typical project investment ranges from $3,000 to $10,000 depending on complexity, with a payback period of 3–6 months due to conversion uplift. Our themes achieve an average PageSpeed score of 95+ and 100% mobile responsiveness.

Why a custom theme is better than a ready-made one?

A ready-made theme (Storefront, Flatsome, Astra) saves time at the start but brings limitations: extra CSS, complex overrides through hooks, performance loss. A custom theme from scratch loads 2-3 times faster due to the absence of dead code and clean templates. The average project on a custom theme pays for itself in 2-3 months due to conversion growth.

Additionally, a custom theme contains no dead code, reducing CSS and JS volume by 40–60%. This positively affects rankings. Contact us for a project analysis.

How to override a template in WooCommerce?

WooCommerce looks for templates in the woocommerce/ folder inside the active theme. If the file is found, it overrides the original from the plugin. Here is a step-by-step guide:

1. Determine which templates need to be changed (catalog, product, cart, etc.).
2. Copy them from /wp-content/plugins/woocommerce/templates/.
3. Place the copies in the woocommerce/ folder of your theme.
4. Modify the files according to the design mockup.
5. Set up hooks for additional functions to avoid copying unnecessary files.

wp-content/themes/my-theme/
├── woocommerce/
│   ├── archive-product.php         # Catalog page
│   ├── single-product.php          # Product card
│   ├── cart/
│   │   └── cart.php                # Cart
│   ├── checkout/
│   │   ├── form-checkout.php       # Checkout form
│   │   └── thankyou.php            # Thank you page
│   ├── myaccount/
│   │   └── dashboard.php           # My account
│   ├── content-product.php         # Catalog item (card in list)
│   ├── single-product/
│   │   ├── tabs/
│   │   │   └── tabs.php            # Product tabs
│   │   └── related.php             # Related products
│   └── loop/
│       ├── pagination.php
│       └── add-to-cart.php
 └── functions.php

A full list of templates is available in the official WooCommerce documentation.

Overriding the product card template

Instead of copying content-product.php with minimal edits, we write it from scratch for the design:

<?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">Out of stock</span>
            <?php endif; ?>
        </div>
    </div>

</article>

How to speed up development using hooks?

Many changes can be made through hooks without touching templates:

// Remove rating from the catalog card
remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5);

// Add SKU
add_action('woocommerce_after_shop_loop_item_title', function () {
    global $product;
    $sku = $product->get_sku();
    if ($sku) {
        echo '<span class="product-card__sku">SKU: ' . esc_html($sku) . '</span>';
    }
}, 6);

// Move price before title on product card
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 5);

// Add custom section after description
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 allow you to avoid copying templates and speed up development. For example, using the hook woocommerce_before_shop_loop_item_title, you can display a custom badge without editing content-product.php.

The most frequently overridden files include: archive-product.php, single-product.php, cart/cart.php, checkout/form-checkout.php, myaccount/dashboard.php, and content-product.php.

What does a custom product gallery give?

WooCommerce uses Flexslider for the gallery — heavy and outdated. Replacing it with a custom implementation:

// Disable standard gallery
remove_action('woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20);
remove_action('woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);

// Add custom gallery
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="Photo %d">
                    <img src="%s" alt="" loading="lazy">
                </button>',
                $idx === 0 ? ' product-gallery__thumb--active' : '',
                $idx,
                $idx + 1,
                esc_url($thumb)
            );
        }
        echo '</div>';
    }

    echo '</div>';
}

A custom gallery with zoom and swipe improves user experience and reduces returns.

WooCommerce support declaration

The theme must explicitly declare WooCommerce support, otherwise a warning will be shown:

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');
});

Process and what's included

After receiving a design mockup, we conduct an analysis and determine the list of files to override. Then we design the woocommerce/ folder structure and configure hooks and filters. During implementation, we write templates for catalog, product, cart, checkout, and my account. We add custom elements — gallery, badges, extra fields. After markup, we test on all devices and browsers, measure Core Web Vitals. Finally, we hand over hook documentation, access details, and update instructions.

Timelines depending on complexity:

The cost is calculated individually — project evaluation is free. Get a consultation for your project — we'll help determine the optimal scope and timelines. Order custom theme development — get a unique store with high performance and conversion.

We have implemented over 30 WooCommerce projects, each with its own architecture. We use only the latest versions of PHP and WordPress. We guarantee compatibility with plugins and updates. We write clean code without unnecessary dependencies, reducing server load and speeding up loading. A custom theme requires no license fees — savings on licenses. Contact us so we can analyze your design and offer the optimal solution.

WordPress Development: Custom Themes, Plugins, and WooCommerce

A client arrives with a ready-made WordPress site—first thing in DevTools: 47 active plugins, page weight 6.8 MB, TTFB 2.4 s, five conflicting jQuery versions in the console. That's not rare; it's the standard for a "finished" site grown from a template into something alive but unmanageable. We solve such problems end-to-end—from audit to deployment. Get in touch—we evaluate your project in one business day.

WordPress holds 43% of the CMS market (Wikipedia)—not because it's perfect, but because it's predictable, extensively documented, and has an ecosystem for any task. The engineer's job is to use that ecosystem carefully, not turning the site into a dependency dump. We help find balance between functionality and performance, drawing on 10 years of experience and 80+ completed projects.

What are common architectural problems in WordPress?

Render-blocking from plugins

Plugin A loads jQuery 3.6, Plugin B loads jQuery 1.12, the theme has its own jQuery Migrate. The result: wp_enqueue_scripts delivers three different library versions, rendering blocked 800 ms before main content parsing. Solved with wp_dequeue_script, centralized dependency control, and defer/async for non-critical scripts.

N+1 queries and their solution

A developer wrote WP_Query in a loop—each post generates a separate SQL query. On a page with 20 posts, that's 21+ database queries. MySQL lags, server heats. Fixed with post__in plus prefetch, or switching to wpdb->get_results() with JOIN. Query Monitor is the first diagnostic tool.

WooCommerce under load

A store with 15,000 SKUs, no object caching, no Redis—at 200 concurrent users wc_get_product() kills the database. WordPress transients don't help: they write to DB, increasing load. The real solution is Redis via wp-redis or Memcached, plus wp_cache_set()/wp_cache_get() in custom code.

How to choose architecture: headless or monolithic?

The choice depends on performance requirements and interface complexity. Headless (REST API / WPGraphQL + Next.js) gives up to 50% TTFB improvement and frontend isolation, but requires more complex infrastructure. Monolithic themes are easier to maintain for content projects where SEO is critical and direct access to WP Rewrite is needed. We help determine the optimal option during audit. Switching to headless improves LCP by 2.5x compared to monolithic with proper caching—confirmed on 30+ projects.

How do we push LCP under 2.5s for production WordPress sites?

Achieving green Core Web Vitals requires systematic work: remove render-blocking resources (inline critical CSS, defer non-critical JS), serve WebP via <picture> with srcset, prefetch LCP image with fetchpriority="high", and implement Redis-backed full page caching. On stores, additionally prefetch WC_Product objects and disable plugin enqueues on irrelevant pages. Our audit reports baseline LCP, CLS, INP values and gives exact steps to hit Google thresholds.

Stack and approaches in WordPress development

Theme development. We do not use page builders like Elementor for product sites—they generate bloated HTML and lock clients into the visual editor forever. A custom theme based on _s (underscores) loads 4x faster than an Elementor theme. Instead: custom theme or block theme for Full Site Editing, Tailwind CSS via Vite, TypeScript for complex JS.

Gutenberg and block development. Since WordPress 5.0, Gutenberg is not just an editor—it's a platform. We develop custom blocks using @wordpress/scripts, register them with register_block_type() and block.json. Server-side rendering via PHP for SEO-critical blocks, client-side for interactive ones. Inner Blocks for composite components.

REST API and headless. WordPress as headless CMS via WP REST API v2 or WPGraphQL. Typical setup: WordPress on subdomain cms.example.com, Next.js frontend on main domain. ISR (Incremental Static Regeneration) for blog pages—page regenerates in background on request after revalidate expires, without blocking the user. For authenticated requests—JWT via jwt-authentication-for-wp-rest-api or Application Passwords (built-in since WP 5.6). More about REST API—Wikipedia.

WooCommerce. Extend via hooks and filters—never modify core files. Custom product types via WC_Product extension. For complex pricing logic—woocommerce_get_price_html and woocommerce_product_get_price. Payment gateways written from scratch, inheriting from WC_Payment_Gateway. Integration with 1C via CommerceML or custom REST endpoint.

Performance. Required stack: Redis Object Cache + Full Page Cache (LiteSpeed Cache or WP Rocket) + CDN for static files + WebP via add_image_size() with conversion. Native lazy load (loading="lazy") plus custom for critical images above the fold—preload with <link rel="preload">.

Case study: WooCommerce store, LCP 9.2s → 1.8s

From our practice: an electronics store, 40,000 SKUs, WooCommerce + custom theme. PageSpeed Insights: LCP 9.2s, CLS 0.41, INP 680ms.

Diagnosis:

• Hero image 3.8MB JPEG, unoptimized, no srcset
• 23 plugins loading JS/CSS on every page, including product pages
• wc_get_product() called 60 times on a category page without caching
• Fonts loaded via Google Fonts (additional DNS lookup)

What we did:

• Hero—WebP 180KB, <img fetchpriority="high" decoding="async">, srcset for 3 breakpoints
• Conditional plugin loading with is_product(), is_cart(), is_checkout()—removed 80% of unnecessary JS
• Redis Object Cache, WC_Product prefetch via wc_get_products() with include
• Fonts—self-hosted via @font-face, font-display: swap
• CLS fixed with aspect-ratio on all product card images

Result: LCP 1.8s, CLS 0.04, INP 140ms. Core Web Vitals—green. Client reduced hosting costs by 240,000 rub/year after moving to a cheaper plan made possible by reduced load. Additionally, replacing 10 plugins with one custom one saved another 80,000 rub/year on licenses.

Work process

1. Audit and analytics. Analyze existing codebase, competitors, technical requirements. For new sites—semantic core, UX prototyping.
2. Architecture. Decide: monolithic or headless. Define Custom Post Types, Custom Fields (ACF or native register_meta()), taxonomies.
3. Development. Local environment: Docker (nginx + php-fpm + MariaDB). Git with pre-commit hooks for PHP CS Fixer and ESLint. Deployment via WP-CLI + SSH or Buddy.works CI/CD.
4. Testing. PHPUnit for custom plugins. Playwright for E2E critical scenarios (add to cart → checkout → confirmation). Lighthouse CI in pipeline—fail if Performance Score < 85.
5. Deploy and support. Staging via WP Stagecoach or manual clone. Monitoring—UptimeRobot + Sentry for PHP errors. Plugin updates—via WP-CLI in test environment first.

What you get as a result

• Fully custom theme or modification of existing one
• Configured object caching (Redis/Memcached) and Full Page Cache
• Optimized media files (WebP, srcset, lazy load)
• Code structure documentation and update instructions
• Training for content managers on Gutenberg blocks
• 30-day uptime guarantee after deployment
• Access to repository with full change history

Timeline benchmarks

Pricing is calculated individually after requirements audit. Contact us for a preliminary estimate.

Common mistakes in WordPress development

• Directly editing theme files—all changes lost on theme update. Use a child theme or fully custom theme.
• update_post_meta() in a loop—each call is a separate UPDATE. For bulk operations use $wpdb->update() or update_metadata_by_mid().
• Disabled WP_DEBUG during development—hidden PHP Notices clutter error log and often indicate real issues.
• Storing media in Git—wp-content/uploads in .gitignore, sync via WP-CLI media import or rsync.
• No limit on WP_Query—posts_per_page => -1 on a page with thousands of posts guarantees a timeout.

Why trust WordPress development to professionals?

We have been on the market for over 10 years, completed 80+ projects, hold certifications from Automattic, and have experience with WooCommerce on high-traffic sites. Our solutions account for all nuances: from plugin compatibility to Core Web Vitals requirements (Google recommendations). After project completion you get a documented, tested, and scalable platform.

For a consultation and evaluation of your project—contact us. We respond within one hour during business hours. Get a free preliminary audit today.