ACORN is a modern online store for women’s clothing, which we developed on WordPress using the WooCommerce plugin. This CMS with such an extension offers many tools that cover the online store owners’ business needs. Let’s consider what we implemented during the project development.
Home Page: Everything and Nothing Extra
IMPORTANT: Online stores must interest potential buyers from the first seconds. That is why the visitor is greeted by a large banner with stylish dresses and a promotional offer. Right here, we implemented a CTA button so that the buyer could quickly place an order. Let’s discuss the other blocks of the home page in more detail.
New
This section displays the latest offers. Each product is shown with a high-quality photo. The option «Add to saved» is available to the user. For this, the development team installed the “Wishlist” plugin. Under the block, we placed the «All news» button. After clicking, the user is transferred to a page with all new goods. A price is under each item in this block. In addition, the user can immediately view the available product colors.
Categories
The next home page block is categories. They are placed in the collage form with pictures and captions. Images are clickable thanks to integrated links, when clicked, the user is transferred to the appropriate category. Our developers implemented the «All categories» button under the collage. When clicked, the corresponding page opens.
Sale
A sale is a great marketing ploy to increase orders. This block displays cards with discounted products. Buying a position is also easy: just click on it and place an order.
Brief Introduction
This block consists of three text sections accompanied by thematic icons. Below the minimalist visuals is a short description. The user can learn more, as the «Details» button is provided. When clicked, the visitor is taken to a static page with relevant content.
Our Instagram
It has been proven that sites with built-in company social networks cause more trust in users. We implemented a widget for Instagram in this block. Images posted on social networks are displayed. By clicking, the user can go to the online store account and learn more about it.
Description and Footer
Next, our developers implemented a text block. It contains an online store description. We made a footer after this block. It contains the brand logo, catalog categories, links to useful pages for customers, and contact information. In addition, we have integrated social networks. To go to the online store pages, just click on the corresponding icons.
About Important Functions
A thoughtful home page structure is important, but functionality also plays a big role in user comfort. Our developers have implemented the following features:
- Convenient cart. The cart button is on the header. We implemented it as a slider. When clicked, a window with added products will pop up on the right. There is a «Checkout» button in the cart. After clicking, the user is taken to a page with a special form.
- Quick search. The search button is located on the header. We implemented the search using AJAX technology and custom code. In a few clicks, the user can find the products he is interested in.
- Clickable contacts. In the footer, the user can click on the phone number, e-mail, or feedback button. Links are integrated into the buttons.
Additional features
Customization is what sets an online store apart from competitors. Our WordPress site developers have implemented the following additional functionality:
- Custom gallery on the product card. The image of the product is divided into 4 zones. If you move the mouse cursor over it, the pictures of the wardrobe element change. When the user hovers over different colors, the pictures also change.
- Quick add to cart. After choosing a color, the dimensions appear on the product card. By clicking on the size, the product is automatically added to the cart. We implemented this using custom JS and PHP code.
- A range of colors. By default, 7 colors are displayed in the product card. If the product is available in more shades, a number with a “+” is displayed next to the colors. After clicking, the palette will expand.
- Table of sizes. It is implemented in the form of a sidebar. A special feature is that a separate table has been created for each category. For example, it is one size for jeans, and another for dresses.
- Models page. The site administrator can enter the parameters of the models that demonstrate the goods. Thanks to this, the user can orient himself when viewing how the clothes will look on the figure with its parameters.
- Dynamic gallery. On the product page, the user can choose the color of the clothes and watch not only photos, but also videos. This allows you to more realistically assess how the element of the image fits the figure.
- Do you like solid fashions? In this block, the user can hover over a special sign in the picture, click on it and quickly buy clothes from the picture. Our developers implement such a function using custom code.
Result
Our team managed to create an online store. We implemented modern and useful features in a short time. We tested everything to make sure that the site works without crashes after development. An online shop on WooCommerce is a functional solution for running a business.