Online Optical Store WordPress Website
About the project
OKO is an online store of a network of optics salons, which, in addition to a wide range of products, offers vision diagnostics and the manufacture of glasses. Initially, the client turned to us for complex Internet marketing, an indispensable condition of which is a well-prepared site. But over the 30 years of its existence, the company’s website has become outdated and in need of updating, not only for promotion, but also for design and security updates.
The Task: Expectation and Reality
The initial task was to completely update the site, namely the WordPress and PHP versions, as well as the theme and plugins. The client also wanted to increase the speed of the site and implement the ability to set clear parameters in the product card, which is extremely important when choosing contact and optical lenses.
In fact, we came across an outdated WordPress theme that has not been supported by developers for a long time. And if the plugins could be easily updated, the theme itself could not be updated.
During the first attempts to update the site, we found a lot of outdated code and functions that do not work in the new version of the PHP, JavaScript and Jq programming languages.
Thus, the labor costs for correcting errors were comparable to the creation of a new online store, but even this did not guarantee its normal operation. As a result, after numerous attempts to revive the site, we faced a new task – to develop an online optics store on WordPress / Woocommerce from scratch.
Online store navigation
Main page
The main page is a familiar shortened version of the entire site. The first screen consists of the logo, menu, product categories, search navigation, CTA button, and shopping cart. For customers of the online store there is a personal account. A slider with banners introduces site visitors to current promotions and great deals.
Scrolling down, we will see blocks with the main and popular categories of goods, which in turn are divided into subcategories “Hot Deals”, “Top Sellers” and “Promotional Products”. The next block is dedicated to a separate group of products — frames:
If the user did not have time to turn to the catalog and scrolled the page to this point, then it’s time to appeal to the trust of users and talk about the advantages of an online store:
The next block invites visitors to familiarize themselves with the range of sunglasses. Further, the main page is supplemented by a “Blog” with useful articles and a block with Instagram publications. And the final chord of the page is the footer with the main button, main services, latest news and company contacts:
Catalog with product filtering
All sections of the catalog combine such parameters as “Price”, “Brand” and “Country of origin”:
Each section of the catalog is equipped with additional filters depending on the type of product. So, contact lenses can be sorted by “ADD power”, “Term of use”, “Cylinder” and “Sphere”. Spectacle lenses can be selected by the parameters “Cylinder”, “Sphere”, “Coating”, “Diameter” and “Lens Type”, and sorting products by “Material” and “Type” will help you quickly find the right frame:
For the category of sunglasses, you can set additional filtering by “Type of protection”, and products for contact lenses are filtered by “Volume”:
Product card with the function of selection and combination of characteristics
One of the most important pages of the site looks neat and at the same time meaningful. Thanks to the convenient selection function, the buyer can set clear parameters for lenses for the right and left eyes and quickly place an order:
In addition to the description of the product in the product card, it is also possible to share a link to the product on the social network Facebook.
The card is also complemented by the “Similar Products” block, which not only increases the likelihood of a purchase, but also the position of the page in the search:
Optical Blog
Another great tool for SEO promotion, because useful and informative articles increase website traffic, and hence its visibility in search results. In addition, the blog increases the level of competence of the company, helps users find answers to questions and is able to turn ordinary site visitors into buyers:
About the company
The page that tells about the company looks simple and practical. Well-structured text is complemented by high-quality photos, company numbers, and burgundy call-to-action buttons:
Network of opticians on the map
The OkO company is represented not only on the Internet, but also in two Ukrainian cities. We marked the network of salons on the Google map, divided them into cities and equipped them with a convenient switch:
Site functionality: WordPress + WooCommerce
WooCommerce
As the basis of the site, we used the popular and familiar WordPress platform for the client, the WooCommerce e-commerce plugin and the WoodMart theme with a ready-made design and a wide range of functions for launching an online store:
Despite the ready-made solution from WordPress, we customised the site according to the client’s requests. In addition to launching an online store and setting up the functions that come out of the box, we additionally installed several plugins:
- WR All Export Pro — for mass export of data from the 1C program.
- All Import — for importing from the provided 1C database.
- Yoast SEO — for search engine optimization of the site.
- Payment gateway for LiqPay for Woocommerce — for paying for goods through the LiqPay service.
- Contact Form 7 — for managing contact forms.
- Markup by Attribute for WooCommerce — for adjusting prices on the site.
- Facebook for WooCommerce — to synchronize the site with the Facebook page.
- JetElements Plugin for Elementor — for implementing an interactive Google map.
Admin panel of the website
Choosing the development of the site on WordPress, the client receives a simple and easy-to-use admin panel. With such an admin panel, even the most complex online store will be easy to manage. Thanks to an intuitive interface, administrators and content managers can easily and quickly edit service descriptions and product characteristics, adjust prices and add photos to the site:
Combination of lenses by parameters
For the optics website visitors with visual impairments, the function of choosing contact lenses with different parameters for each eye is very important.
In the cards of the “Contact Lenses” catalog, we implemented the ability to select two products at once by setting the parameters of the sphere and the basic curvature for the left and right eyes.
With the product category “Toric Lenses”, everything is a little more complicated: separately set properties for each eye included more than 5 thousand combinations, which in total came out to 10 thousand combinations per card. This affected the loading of the page, the speed of which reached as much as 15 seconds. As a result, it was decided to abandon the combination of toric lenses in terms of parameters. Instead, we set a task for the future — to develop our own plugin for WooCommerce, designed to solve such problems without compromising site performance.
Multilingualism
Before Webnauts, the OKO website functioned in Russian. And since on July 16, 2022 the law on the state language affected all Internet resources, it was important for our client to implement the site in two languages. The new law implies that all sites representing Ukrainian business must have a Ukrainian version and be loaded by default for all users of Ukraine.
Said and done: we have carried out automatic translation of the site using the GTranslate plugin, and now the start page is loaded in the state language.
Download speed
This is not only an important requirement of the client, but also a necessary condition for the normal operation of any online store, because modern users are not ready to wait more than 4 seconds for page loading . Despite the fact that the theme of the online store is already focused on performance, we further optimized the speed of the site by disabling unnecessary features from the WoodMart box.
Writing articles for the blog
Any site needs optimization, and a new one even more so. One effective way to gradually increase traffic is to fill the site with content that meets all SEO requirements: usefulness, literacy, uniqueness, moderate use of occurrences and keywords. It is this kind of articles that we have prepared for the blog of the OkO chain of optics stores. Despite the fact that the blog is informational in nature, each article focuses on the products of the online store and helps to convert visitors into customers.
You can easily share an article you like on Facebook — this feature contributes to the growth of site traffic even better:
The Result
To be in tune with the times means to be in tune with the technology. In this case, we encountered a problem when updating a site on WordPress is completely unjustified and equates to the development of a new product. As a result, we created a modern and fast online store of the Optics network with WooCommerce, filled its pages with high-quality content and equipped product cards with a convenient function for selecting and combining parameters.
Comments