How to customize a WooCommerce store’s design

First check whether your active theme is a block theme or a classic theme. With a block theme, go to Appearance > Editor. With a classic theme, go to Appearance > Customize and look for theme and WooCommerce settings.

Do this on a staging site or after taking a backup. A theme change can alter templates, menus, widgets, image sizes and product layouts, so do not switch themes directly on a busy shop without checking the result first.

For a block theme, open Appearance > Editor > Styles and set the site-wide colours, typography, spacing and layout. You can also adjust the appearance of individual blocks, including buttons, headings and product-related blocks.

For a classic theme, use the available options under Appearance > Customize. The exact controls depend on the theme, but commonly include the header, background, typography, buttons, sidebar position and general layout. Save changes only after checking the preview on desktop and mobile.

With a block theme, go to Appearance > Editor > Templates > WooCommerce > Product Catalog to change the Shop page and product archive layout. You can rearrange the product collection, add or remove breadcrumbs, archive titles, notices and filter blocks, and change the grid or list presentation.

Edit the Single Product template separately if you want to move the product gallery, title, price, description, add-to-cart button or related products. A common mistake is editing the assigned Shop page and seeing no change because the Product Catalog template is overriding it.

With a classic theme, open Appearance > Customize > WooCommerce and review the available product catalogue, product page and product image settings. Depending on the theme, you may be able to change columns, products per page, sidebar layout, product tabs, related products and image cropping.

If the WooCommerce panels are missing, the theme may control those settings itself, or the site may be using a block theme. Do not edit the parent theme’s files directly because an update can overwrite your changes. Use the theme’s documented options, a child theme or the site’s additional CSS area instead.

Use consistent product image ratios and upload images large enough for the biggest display size. After changing image dimensions, changing themes or replacing many images, go to WooCommerce > Status > Tools and run the shop thumbnail regeneration tool if older images remain blurry or incorrectly cropped.

Check the shop, category, product, cart and checkout pages at mobile and desktop widths. If a cache or optimisation system is active, clear its cache when a saved design change does not appear on the front end.

If you want the fast route, install and activate Elessi from Appearance > Themes > Add New > Upload Theme, then follow its setup wizard. Import a suitable demo layout, replace the logo, colours, fonts, imagery and product content, and review the shop and product templates before publishing.

Elessi fits this job when you want responsive WooCommerce layouts, AJAX product filters, multiple product display styles, demo imports and a theme options panel rather than building the storefront structure yourself. It also supports common page-building workflows, including Elementor and WPBakery. The manual route is still fine for a small catalogue or an existing theme that already matches your brand; choose Elessi when rebuilding the visual storefront is the priority.