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.