The theme: WooCommerce support and styles

The look of the shop is set by the WordPress theme. To change it without losing edits on a theme update, you create a child theme — a folder that inherits everything from the parent and adds its own. Styles and template copies live there; shop logic stays in the plugin.

A child theme

The course uses the free Storefront theme from the WooCommerce authors:

wp theme install storefront

Create the wp-content/themes/acme-child folder and the style.css file in it:

/*
Theme Name: Acme Child
Template: storefront
Version: 1.0.0
*/

The Template line is the folder name of the parent theme. Activate the theme in Appearance → Themes — the site looks like Storefront, but now you have a place for your own files.

Enqueueing styles

Create a functions.php file next to it:

// wp-content/themes/acme-child/functions.php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'acme-child',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get('Version')
    );
}, 20);

The function loads the child theme's style.css on every page. The version number is appended to the file address so that the browser does not keep an old copy.

Page classes

WooCommerce adds classes to the body tag, and styles are bound to the right page through them:

/* wp-content/themes/acme-child/style.css */
.single-product .acme-lead-time {
    color: #2e7d32;
    font-weight: 600;
}
 
.woocommerce ul.products li.product .price {
    font-size: 1.1em;
}

The first rule colors the Made in 3 days line from the previous chapter, the second enlarges the price on catalog tiles.

Support in your own theme

Storefront already knows about WooCommerce. A theme written from scratch must declare support itself — in its own functions.php:

// wp-content/themes/acme-theme/functions.php
add_action('after_setup_theme', function () {
    add_theme_support('woocommerce', [
        'thumbnail_image_width' => 300,
        'single_image_width' => 600,
    ]);
 
    add_theme_support('wc-product-gallery-zoom');
    add_theme_support('wc-product-gallery-lightbox');
    add_theme_support('wc-product-gallery-slider');
});

The first call says the theme is ready for shop pages and sets the image width in the catalog and on the product page. The next three turn on zoom, full-screen view and sliding in the product gallery. Without the declaration a warning appears in the admin panel and the gallery is a plain list of images.

Switching off WooCommerce styles

The plugin loads three style files of its own. A theme with its own markup can remove them:

// wp-content/themes/acme-theme/functions.php
add_filter('woocommerce_enqueue_styles', '__return_empty_array');

After that the catalog and the cart are left unstyled — you have to write all the styles yourself. Do not do this in a Storefront child theme.

Common mistake

Edits are made right in the files of Storefront or another ready-made theme. A theme update replaces the folder completely, and the styles and templates are lost. Everything of yours goes only into the child theme: it receives no updates.