How to build a beauty and cosmetics store in WordPress

Keep the first navigation simple: Shop, Skincare, Makeup, Hair care, About and Contact. Add collections such as New arrivals, Best sellers and Sensitive skin only if they help shoppers make a decision.

Create product categories before adding products. WooCommerce uses categories, tags and attributes to organise products and help customers browse the catalogue. Use categories for broad groups, tags for useful labels and attributes for details such as shade, skin type, finish or size.

Install WooCommerce and complete its setup for payments, tax, shipping and customer accounts. Add each product under Products, then assign its category, price, stock status, main image, gallery, short description and full description.

Use consistent product photography: the same crop, background and aspect ratio across the catalogue. Add variations for shades, sizes or scents instead of creating separate products when the items share one product page. Check the product page on a phone before publishing; oversized images and long titles are common causes of awkward grids.

With a block theme, go to Appearance > Editor. Use the Site Editor to edit the header, footer, templates, navigation and global styles. Add a hero section, featured categories, selected products, a short brand promise, reviews or trust information, and a clear link to the shop. The Site Editor supports global colours, typography, spacing, template parts and reusable patterns.

With a classic theme, use its Customizer or page editor instead. The exact controls depend on the theme, so do not assume that instructions for a block theme will match your dashboard.

Style the shop archive so product cards show the product image, name, price, rating where relevant and an obvious purchase action. Add category links or filters only when they make a large catalogue easier to use. WooCommerce’s store editing tools can customise the shop page and product catalogue, while block themes can use product collection blocks in catalogue templates.

If you use Elementor, build an archive template from Templates > Theme Builder > Product Archive. WooCommerce must be installed for the WooCommerce widgets and product data to work. Set the display conditions carefully so the template applies to the shop and intended product categories.

Do not treat the Shop page like an ordinary page. WooCommerce renders the catalogue through its shop or archive template, so editing the page content alone may not change the product grid. This is one of the most common reasons a carefully designed shop page still shows the theme’s default layout.

Preview the homepage, category archive, product page, cart, checkout and account area at phone, tablet and desktop widths. Check that buttons have enough room, text remains readable, product images do not jump between cards, and the header does not wrap into two unusable rows.

Test a real checkout with a test payment method or your payment provider’s test mode. Check variation selection, stock messages, shipping charges, coupon fields, confirmation emails and the order received page. Clear page-builder and caching plugin caches after layout changes, or you may be looking at an old version of the page.

The manual route is suitable for a small shop if you already have a block theme or a WooCommerce-compatible classic theme. It gives you fewer dependencies, but you must create the visual system, catalogue templates, service pages and responsive details yourself.

For a quicker beauty-specific starting point, choose Jolie if its Elementor layouts, WooCommerce support and salon booking features match your plan. It is aimed at beauty and cosmetics shops and can reduce the amount of layout work, but still replace the demo content, check every template condition and test the complete checkout and booking journey before launch.