How to build a handmade skincare website in WordPress

List the pages customers need before changing the design: Home, Shop, product categories, About, Ingredients or skin concerns, Contact, Cart, Checkout and My account. For skincare, organise products by use as well as product type, such as cleansers, soaps, moisturisers, gift sets and sensitive-skin products.

Choose two fonts, a small colour palette and one image style. Keep strong contrast for prices, buttons and navigation. Decide whether the homepage will lead with a featured collection, a best-seller or a skin concern.

Install WooCommerce and complete its setup, including the shop, cart, checkout and account pages. WooCommerce needs the cart, checkout and account areas configured somewhere on the site to work properly; the setup wizard usually creates them for you.

Open WooCommerce > Settings > Products > General and confirm the shop page. Do not build a visually attractive shop page and forget that WooCommerce may still be using a different page as its shop archive.

If you use a block theme, go to Appearance > Editor. Set global colours, typography and layout in Styles, then edit the header and footer as reusable template parts. Use patterns for repeated sections such as a product promise strip, ingredient panel, testimonials or newsletter sign-up.

This manual route is fine for a small catalogue and gives you control without adding a page builder. Its drawback is that you must assemble and maintain the shop archive and product layout yourself, and the exact controls vary by theme. Changes to a header or footer template part can affect every page using it, so save and check the whole site after editing.

Give the shop a simple grid with clear product names, prices, short benefits and an obvious add-to-cart action. Use category links or filters that match how customers shop. On each product page, show the main image, product title, price, short description, ingredients, directions, skin suitability, size, stock status, reviews and related products.

WooCommerce product pages can be edited with product and gallery blocks, while a builder such as Elementor can create reusable single-product and product-archive templates using dynamic product data. If you use Elementor’s WooCommerce builder, create the template, publish it and set its display condition; otherwise the normal WooCommerce layout may continue to appear.

Upload a clear featured image and several gallery images for every product. Use the same background, crop and aspect ratio across the catalogue. WooCommerce recommends product images of at least 800 × 800 pixels, and it creates the display sizes used for the shop, product page and thumbnails.

The common Friday problem is a shop grid full of soft or badly cropped images. This usually comes from a theme or builder requesting a smaller image, changed image dimensions without regenerated thumbnails, custom CSS, caching or image optimisation. After changing the theme or image settings, regenerate shop thumbnails if that option is available, clear caches and check the image source on both desktop and mobile.

Preview the homepage, category pages, product pages, cart and checkout at phone width. Check that buttons are easy to tap, product text is not truncated, the menu opens, gallery images do not jump, and the header does not take over the screen. Test one simple product and one variable or multi-option product if you sell different sizes or scents.

If a layout breaks only on mobile, first check the template actually being used, then test with only WooCommerce and your builder active. A temporary switch to a default theme on a staging site can show whether the problem comes from the theme or a plugin.

For a quicker launch, use Soapy, a handmade soap and organic skincare theme with prepared layouts for About, Awards, Why choose us, Location, Collections, Shop and product pages. It supports WooCommerce and works with Elementor and Gutenberg, so you can replace the demo branding, colours, images and copy instead of building every storefront section from scratch.

Import only the layouts you need, set your global colours and fonts first, then add products and replace every demo image and text. Keep WooCommerce responsible for products, cart and checkout, and use the theme mainly for presentation. That makes it easier to diagnose whether a future problem belongs to the store setup or the design layer.