Theme customization

Level: Beginner to Intermediate | Reading time: 11 minutes

Customize the design of your online WooCommerce store without touching the code, thanks to the Customizer and page builders.

In this chapter :

Recommendation - Use code-free tools like Customizer or Elementor before moving on to custom CSS. Simplicity guarantees maintainability.

WordPress customizer

WordPress' native tool for real-time visual customization.

Go to customizer

The menu Appearance > Customize opens the Customizer.

The interface is divided into two parts: the left sidebar contains the options and the right preview displays the live site.

Modifications are instantly visible in the preview. Click Publish to apply changes to the public site.

Available options

Options vary by theme, but standard ones include :

Site identity - You can configure the logo, site title, slogan and favicon icon.

Upload a professional logo (transparent PNG file, 200 to 300px wide). It replaces the generic "Site Name" text.

Colors - You define the site's palette (primary and secondary colors, links, text).

Choose colors consistent with your brand. Avoid using 10 colors (it's visually chaotic). 2 to 3 colors are sufficient.

Typography - Select fonts for titles and body text (if supported by the theme).

Google Fonts are integrated into most modern themes. Choose a legible, professional font such as Roboto, Open Sans or Montserrat.

Menus - You manage the main navigation, footer and mobile menu.

Create a menu in Appearance > Menus, then assign it to a location in the Customizer.

Widgets - Add blocks to the sidebar and footer (search, categories, promotions).

Homepage Settings - Choose between a static page or blog posts. For e-commerce, use a static page to display your catalog.

WooCommerce (if theme is compatible) - Configure button colors, product layout and number of columns.

Explore all tabs and adjust settings to suit your brand.

Page builders 🔺

These are drag-and-drop page builders that require no code.

Warning: Attractive at first glance, beware of page builders. They tend to slow down sites, and in the event of a problem you'll have trouble identifying the cause. You've been warned!

Elementor

This is the #1 page builder, with over 10 million installations. The free version covers basic needs, the Pro version costs $59/year.

Features:

WYSIWYG drag-and-drop interface
Over 100 widgets available (titles, images, buttons, columns, videos)
Pre-made templates for landing pages and sections
Responsive editing with separate desktop/tablet/mobile views
WooCommerce integration with product grids and custom checkout

Installation :

Go to Extensions > Add > "Elementor ".
Activate the plugin
On the desired page, click on Pages > Modify with Elementor.

The drag-and-drop interface is intuitive. Drag widgets, edit text and images, then publish.

The Pro version adds: Theme Builder to create custom headers and footers, a popup builder and an advanced WooCommerce builder.

Recommendation: The free version is excellent for getting started. Upgrade to Pro if you need to customize headers and footers.

Divi builder

This is an $89/year premium alternative from Elegant Themes, giving access to all their themes and plugins.

The interface is similar to Elementor. It's a drag-and-drop visual builder with pre-made modules and saveable layouts.

The advantage is that the Divi theme is included and is very popular for e-commerce.

The disadvantage is that it's a proprietary solution: if you change your theme in the future, you'll have to redo all your pages.

Wpbakery (visual composer)

This used to be the market leader, but it's in decline. The interface is complex and dated.

Avoid it if you're starting a new project. Elementor and Divi are superior.

Gutenberg (wordpress block editor)

The native WordPress editor since version 5.0, it features drag-and-drop blocks.

The editor is basic but constantly improving. It's free, native and lightweight.

It's perfect for simple content. On the other hand, it is insufficient for complex layouts (Elementor is better in this case).

Child themes 🔺

Child themes allow you to modify your theme without losing your changes when updating the parent theme.

Why use a child theme?

The problem: If you modify the theme files directly, a theme update overwrites all your changes. Your work is lost.

The solution: A child theme inherits the parent theme, but your changes remain isolated. When you update the parent theme, the child theme is preserved.

Create a child theme

The "Child Theme Configurator" plugin (free) generates a child theme in 1 click.

Procedure :

Install Child Theme Configurator.
Go to Tools > Child Themes.
Select parent theme (Storefront, Astra, etc.)
Click on Create new child theme.
Name it (e.g. "Storefront Child")
Click on Create
Go to Appearance > Themes > Activate to activate the child theme.

The child theme is now active and inherits the parent theme.

Modifications to the child theme

CSS - Add your styles to the child theme's style.css file (it overwrites the parent's).

Templates - Copy a template from the parent (such as single-product.php) to the child theme and modify it. The child theme's version will be used.

Functions - The child theme's functions.php file lets you add hooks and filters without affecting the parent.

Updates to the parent are secure, while the child theme remains intact.

Custom CSS 🔺

Custom CSS lets you make fine visual adjustments.

Additional customizer CSS

The menu Appearance > Customize > Additional CSS offers a text field for adding CSS directly.

Example: To change the color of the "Add to cart" button:

.single_add_to_cart_button {
  background-color: #ff6600 !important;
  color: #ffffff !important;
}

The preview is displayed in real time. Click Publish to apply changes.

Benefits:

Quick to set up
Changes are preserved during theme updates (if you're using a child theme)
No need to access FTP

Limitations:

Only suitable for minor modifications
Becomes unmanageable if you have 500+ lines of CSS

Browser Inspector

The Inspector helps you find the CSS selectors you need to modify.

In Chrome or Firefox :

Right-click on the element to be modified
Click on Inspect
The DevTools display the HTML code and CSS applied
Identify the class or ID (e.g. .product-title)
Copy the selector and use it in Additional CSS

You can edit the CSS directly in DevTools for live testing, then copy the working CSS to your site.

Current WooCommerce CSS classes

Products :

.products - Product grid
.product - Individual product item
.product-title - Product title
.price - Price
.sale - "Promo" badge

Buttons :

.button, .add_to_cart_button - General buttons
.checkout-button - Checkout button

Basket :

.cart_totals - Cart summary
.woocommerce-cart-form - Cart form

See your theme documentation for a complete list.

Responsive design 🔺

Your site must work properly on mobile, tablet and desktop.

Test responsive

With Chrome DevTools :

Press F12 then activate the Toggle device toolbar (mobile/tablet icon)
Select a device (iPhone, iPad, etc.)
Navigate your site and check the layout

The Responsive Design Checker (free online at responsivedesignchecker.com) lets you test several resolutions simultaneously.

CSS media queries

Media queries allow you to adjust styles according to screen size.

Example: A large title on desktop, smaller on mobile:

/* Desktop */
.product-title {
  font-size: 32px;
}

/* Tablet */
@media (max-width: 768px) {
  .product-title {
    font-size: 24px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .product-title {
    font-size: 18px;
  }
}

Common problems on mobile

Text too small - A font-size of less than 14px is unreadable. Use a minimum of 16px on mobile.

Buttons too small - Fingers are less precise than the mouse. Buttons should be at least 44×44px.

Overflowing images - Add max-width: 100%; height: auto; to your images to prevent them from overflowing the screen.

Navigation menu - Use a hamburger menu (☰) on mobile instead of the horizontal desktop menu.

Modern themes like Storefront or Astra handle responsive automatically. Just make sure everything works properly.

In a nutshell

Customize your WooCommerce theme via the WordPress Customizer for visual adjustments (colors, fonts, logos) without touching the code. Use a child theme if you're modifying template files (to avoid losing your modifications during updates). For complex customizations, prefer Elementor Pro or WooBuilder, which offer powerful visual editors without coding. Optimize navigation by creating clear menus, product filters and a powerful search engine. Systematically test for mobile compatibility, as over 60% of e-commerce traffic comes from smartphones.

Next steps 🔺

Custom - Custom development
Recommended - Plugin selection
Installation - Secure process
Back - Overview

Navigation: ← Extension Installation | Theme Customization | Next: Custom Code →