Mastering WooCommerce Theme Development

Creating a custom WooCommerce theme from scratch is a rewarding challenge that lets you design exactly what your store needs.

While WooCommerce provides a solid foundation, building your own theme means full control over every aspect, from the layout to the checkout flow. This is ideal for developers who want a tailored experience without the limitations of pre-built themes or clunky plugins.

Starting with a blank slate requires understanding the core structure of WordPress and WooCommerce, but once you’re familiar with the hooks, templates, and style management, the sky’s the limit.

You’ll also need to blend design and functionality, ensuring your store is as smooth on the backend as it is visually appealing to customers.

Ready to get your hands dirty? Let’s dive in.

WooCommerce theme development: Core concepts and file structure

To get started, you need to understand the building blocks of WooCommerce theme development. These core concepts are your toolkit for customizing the store exactly how you want it to function:

• WordPress theme structure includes files like style.css, functions.php, and templates such as header.php and footer.php. In addition, WooCommerce-specific templates are needed for displaying product pages, cart, and checkout features.
• WooCommerce template overrides provide the flexibility to customize default layouts by copying the template files from WooCommerce’s plugin directory into your theme’s woocommerce/ folder. This way, you can modify templates like single-product.php to adjust product page layouts without altering the core WooCommerce files.
• Hooks and filters are used to add or modify content throughout WooCommerce pages. Placed in your theme’s functions.php, they allow you to insert custom elements or adjust existing ones – ideal for tweaking the product page or customizing the checkout process without touching the templates themselves.
• Template hierarchy dictates which templates are used for different WooCommerce pages. For instance, archive-product.php is used for product listing pages, while single-product.php is used for individual product pages. For specialized pages like the cart and checkout, you would use templates like cart.php and checkout.php.

Once you’ve grasped the core concepts, the next step is understanding the file structure. In both block and classic themes, how you organize your files will determine how efficiently your theme operates and how easily you can manage template overrides, styles, and custom functionality:

• style.css contains the custom styles and metadata for your theme.
• functions.php is where you register theme features, enqueue scripts and styles, and set up WooCommerce support.
• woocommerce/ is where you place template overrides like archive-product.php, single-product.php, cart.php, and checkout.php.
• template-parts/ organizes reusable components such as headers, footers, and product grids for easy management.
• assets/ is where you store your CSS, JavaScript, images, and fonts.

Beyond the primary files, both block and classic themes benefit from additional files that enhance customization. These files – whether for adding custom block styles or handling advanced template logic – let you fine-tune your theme, offering more control over the design and functionality:

• header.php and footer.php are standard WordPress files that are used across your theme but can be adjusted for WooCommerce-specific needs.
• custom-functions.php is typically used for adding specialized WooCommerce-related functions or custom scripts to enhance the theme’s functionality.

Classic vs. block themes: Technical considerations for developers

When choosing between classic and block-based themes for WooCommerce development, you need to consider key technical differences that impact flexibility, customization, and overall workflow.

TL;DR: Classic themes provide more control over customizations but require deeper technical knowledge of PHP and layout management. Block themes offer an easier, modular design but may require additional workarounds for complex WooCommerce customizations.

Setting up your development environment for WooCommerce themes

If you’re ready to build your WooCommerce theme from scratch, here’s what you’ll need:

• Local WordPress environment setup with tools like Local WP, MAMP, or XAMPP to create a local server for running WordPress locally, allowing for development and testing without affecting a live site.
• The WooCommerce plugin installed in your WordPress environment to integrate and test WooCommerce features with your custom theme.
• Theme folder structure inside wp-content/themes/, with key files like style.css for custom styles, functions.php to enable WooCommerce support, index.php as a fallback template, and a woocommerce/ folder for template overrides like single-product.php and archive-product.php. Block themes also need a block-templates/ folder for modular templates.
• An IDE or code editor like VS Code or PhpStorm that supports PHP, JavaScript, and CSS, along with debugging tools that help you write and test code efficiently.
• Version control with Git to track changes and collaborate, revert to previous versions, and store backups on platforms like GitHub or GitLab.
• WordPress debugging in wp-config.php to log errors to wp-content/debug.log, helping identify issues during development.
• A staging site or local database testing to ensure your theme works as expected, allowing you to test WooCommerce functionality like cart behavior, payments, and product pages safely.
• Browser-based developer tools like those in Firefox and Chrome to inspect and debug HTML, CSS, and JavaScript on the frontend, making it easier to fix layout or functionality issues quickly.

Building your custom WooCommerce templates with hooks and filters

Here’s a simple walkthrough for using hooks and filters to create your WooCommerce templates:

1. WooCommerce templates are in wp-content/plugins/woocommerce/templates. Copy the files into a woocommerce folder within your theme to safely override them.
2. Start adding custom code to use hooks. For example, to add a message after the product title, use an action hook like this in functions.php:

function custom_product_title_message() {

echo '<p>Custom message after the product title!</p>';

}

add_action('woocommerce_single_product_summary', 'custom_product_title_message', 20);

Add filters to modify content before display. For instance, to change product prices, use a filter like this:

function custom_price_format($price, $product) {

return 'Special Price: ' . $price;

}

add_filter('woocommerce_get_price_html', 'custom_price_format', 10, 2);

Customizing product displays and galleries with template overrides

To customize product displays and galleries with template overrides in WooCommerce, follow these steps:

1. Locate the template files you want to customize, like single-product.php or archive-product.php, in the WooCommerce plugin folder. Copy these files to your theme’s woocommerce folder to ensure changes are preserved during updates.
2. To change the product title in product listings, copy content-product.php to your theme’s woocommerce folder. Then, modify the title section:

<h2 class="product-title">

<?php the_title(); ?>

</h2>

3. To customize the price format in product listings, in content-product.php, replace the default price display with:

<span class="price">

<?php echo 'Discounted Price: ' . $product->get_price_html(); ?>

</span>

To modify the product gallery layout, copy product-image.php from single-product to your theme’s woocommerce/single-product/ folder, and replace the gallery with your custom structure:

<div class="custom-gallery">

<div class="main-image">

     <?php the_post_thumbnail(); ?>

</div>

<div class="thumbnails">

     <?php // Custom carousel code ?>

</div>

</div>

5. To customize the product summary (title, price, description), override single-product.php or single-product-summary.php by adjusting the layout:

<div class="custom-summary">

<h1 class="product-title"><?php the_title(); ?></h1>

<div class="product-price"><?php echo $product->get_price_html(); ?></div>

<div class="product-description"><?php the_content(); ?></div>

</div>

6. To remove the Add to Cart button from product archives, copy content-product.php and comment out the add-to-cart button section:

<!-- <a href="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="button add_to_cart_button">Add to Cart</a> -->

7. To change the number of products per page, modify the query in archive-product.php by adding:

$args = array(

'posts_per_page' => 12, // Adjust the number of products

);

$query = new WP_Query($args);

Styling WooCommerce components with theme.json and advanced CSS techniques

While the block editor is useful for per-block customizations, theme.json is ideal for global styles like colors and typography, making it a better choice for advanced CSS customizations.

To start styling global WooCommerce components, create or modify the theme.json file in your theme:

1. Define custom colors and typography for elements like product titles and buttons. For example:

{

  "version": 2,

  "settings": {

"color": {

   "custom": {

     "primary": "#ff5733",

     "button": "#33aaff"

   }

},

"typography": {

   "fontSizes": [

     {

       "name": "large",

       "size": "24px",

       "slug": "large"

     }

   ]

}

  },

  "styles": {

"blocks": {

   "woocommerce/product-title": {

     "color": "var(--wp--preset--color--primary)"

   },

   "woocommerce/button": {

     "backgroundColor": "var(--wp--preset--color--button)"

   }

}

  }

}

2. To style WooCommerce components with CSS variables, define reusable values for things like colors, spacing, and fonts. For example:

:root {

--main-color: #ff5733;

--button-color: #33aaff;

--spacing-small: 10px;

--spacing-large: 20px;

}

.woocommerce .product-title {

color: var(--main-color);

}

.woocommerce .button {

background-color: var(--button-color);

padding: var(--spacing-small) var(--spacing-large);

}

3. To create a custom grid layout for product listings, use CSS Grid. For example, modify the product layout on category or shop pages like this:

.woocommerce ul.products {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

gap: 20px;

}

.woocommerce .product {

background-color: #fff;

border: 1px solid #ddd;

padding: 10px;

}

4. To style pagination, you can target the pagination buttons using CSS:

woocommerce-pagination .page-numbers {

background-color: #33aaff;

color: white;

border-radius: 5px;

padding: 10px;

}

.woocommerce-pagination .page-numbers.current {

background-color: #ff5733;

}

.woocommerce-pagination .page-numbers:hover {

background-color: #ff3311;

}

5. For hover effects on buttons, you can apply dynamic styles to product buttons when hovered:

woocommerce .product:hover .button {

background-color: #ff5733;

transform: scale(1.05);

transition: transform 0.3s ease, background-color 0.3s ease;

}

6. Use media queries to adjust styles based on screen size to ensure your store is responsive. For example, change the layout of the product grid on smaller screens:

@media (max-width: 768px) {

.woocommerce ul.products {

     grid-template-columns: 1fr;  /* Single column layout for smaller screens */

}

}

Hire a Codeable expert to build your custom WooCommerce theme

Building a WooCommerce theme from scratch allows for complete creative and technical control, ensuring your eCommerce site stands out with a personalized user experience that aligns with your brand’s identity. This level of customization can streamline your operations, improve performance, and give you a competitive edge.

However, as we’ve covered, the process isn’t without its complexities. Creating a custom WooCommerce theme requires a solid understanding of WordPress, frontend development, and the nuances of eCommerce. It’s a detailed and time-intensive task that requires the right expertise to ensure both functionality and design are executed smoothly.

With Codeable, you can get an expert to build a bespoke WooCommerce theme without needing to take a chance on an unproven freelancer. Our team of vetted WordPress developers specializes in building custom WooCommerce themes tailored to your business needs.

From design to advanced eCommerce features, they ensure your site is optimized for performance. They can also provide ongoing maintenance, adapting your store as your business grows and you add new features, improve speed, or ensure security.

Let’s build something that grows with your business. Submit your first project to Codeable today!

20 000+ businesses of every shape and size have already trusted us to hire WordPress developers and scale their growth.

Find your expert

Dream It

Build It

Build a WordPress site you've always dreamed of

Join our newsletter Dream It, Build It for insights on how to get the most out of WordPress

Name:

Email:

Subscribe