TehnoVek — WooCommerce Store for Electric & Motor Vehicles
Scalable WooCommerce storefront developed as the first stage of a future full-scale online store
Role: Structure, design, WordPress development · Year: 2026 · Stack: WordPress / Astra Pro / Elementor / WooCommerce
TehnoVek — scalable WooCommerce store for electric mobility and motor vehicles
Year: 2026
Project type: WooCommerce store development
Platform: WordPress
Stack: Astra Pro / Elementor / Ultimate Addons for Elementor / WooCommerce
Additional tools: SureForms / Variation Swatches for WooCommerce / Modal Window / WPCode
Business model: Physical store + online product catalog with planned eCommerce expansion
Product focus: Electric scooters / electric tricycles / e-bikes / motorcycles / ATVs / parts and accessories
{/}
About the project
TehnoVek is a Ukrainian retailer of electric mobility products, motor vehicles, spare parts, and accessories.
The initial requirement was to create the first technical stage of a future online store rather than a temporary promotional website.
At launch, the website needed to operate primarily as a landing-style storefront and product catalog, while its underlying architecture had to support further expansion into a complete eCommerce system without rebuilding the project from scratch.
No finished design, brand book, or detailed technical specification was provided.
The initial brief consisted primarily of functional requirements and ideas for future development, so the structure, interface logic, and visual presentation were shaped directly during implementation.
{?}
Architecture and development approach
Instead of building a temporary landing page and replacing it later, the project was developed from the beginning as a real WooCommerce store.
WooCommerce product, category, variation, inventory, and other core functionality remains available in the system, while the cart and checkout are currently hidden from the public interface according to the client’s launch strategy.
This approach allows the website to operate as a product catalog during the initial stage while retaining the technical foundation required for future payment, delivery, and other eCommerce integrations.
The website was built using Astra Pro, Elementor, WooCommerce, and Ultimate Addons for Elementor, with several additional plugins and custom code used for specific interface functionality.
Development was carried out on the contractor’s hosting environment and the completed website was later cloned to the client’s hosting and production domain.
Mobile · TehnoVek
{#}
Homepage and storefront structure
The homepage was created from scratch in a landing-page format rather than following a conventional online store homepage layout.
Its structure gradually introduces the product range, purchase options, business advantages, service information, and contact opportunities through a sequence of dedicated sections.
The hero section uses a background image slider with a Ken Burns effect, while clickable category banners directly below the hero provide quick access to the main product groups.
WooCommerce product widgets are integrated into several homepage sections, allowing visitors to browse selected products and move directly to individual product pages without leaving the landing-style flow.
Clickable category banners
WooCommerce product widgets
CTA and direct contact buttons
Contact actions are distributed throughout the page.
Primary CTA buttons open contact forms inside modal windows, while clickable Telegram, Viber, WhatsApp, and hotline controls provide immediate alternative communication channels.
The same communication logic is continued in the header and footer.
CTA buttons open contact forms inside modal windows
The footer additionally includes social media links, a newsletter subscription form, and an embedded Google Map showing the location of the client’s physical store.
Transparent and regular headers and footer
{&}
Product catalog and category structure
The initial catalog was populated with 16 real products rather than demonstration content, with most of them configured as variable WooCommerce products.
Product categories were implemented not simply as archive pages, but with the ability to add additional content.
This makes it possible to gradually develop individual categories into search- and advertising-oriented landing pages as the catalog grows.
TehnoVek — Product catalog page
A basic product filtering system was also implemented.
Instead of permanently occupying storefront space, filters are opened inside a slide-out panel from the left side of the screen, keeping the catalog interface compact, particularly on mobile devices.
Store filters — desktop version
Store filters — mobile version
{%}
Product page customization
WooCommerce product pages received several interface and behavioral modifications beyond the standard storefront functionality.
Variation Swatches for WooCommerce was used to provide a more visual product variation selection interface.
TehnoVek — Product page, desktop preview
For products whose color variants consist of two or more colors, the standard plugin behavior was additionally extended with a custom solution.
Instead of displaying only a single-color selector, individual swatches can visually represent multiple colors within the same variation option.
The standard WooCommerce availability message was also modified for the current catalog-first sales model.
Individual swatches with multiple colors
“Check availability”, “Ask a question”, and direct contact options
Instead of simply displaying “In stock,” the storefront uses an “Check availability” action linked directly to a modal contact form.
A separate “Ask a question” button was added to product pages and opens a contact form in a modal window. The form is automatically pre-filled with the product name and a direct link to the current product page, so each enquiry immediately identifies the item the customer is asking about.
The same interface block includes direct messengers and hotline controls, giving visitors several ways to contact the store without entering a traditional checkout flow.
Contact form open in a modal window — Product page, desktop preview
{\}
Product content and expandable information
Product descriptions were prepared in Elementor to allow more flexible presentation than the standard WooCommerce text editor.
Because technical products can require substantial amounts of information, displaying every detail directly on the page would result in excessively long product layouts.
To keep product pages compact and easier to navigate, extended description content was placed inside a custom expandable section implemented without an additional plugin.
Product description inside an expandable section, desktop preview
Technical specifications were organized separately into accordion sections.
Technical specifications organized into accordion sections, desktop preview
This structure keeps the initial product page readable while still providing detailed information when visitors need it.
The approach is particularly useful for products such as electric scooters, e-bikes, and ATVs, where specifications may include numerous parameters covering motors, batteries, brakes, suspension, dimensions, wheels, electronics, and other technical characteristics.
{Q}
Interface and navigation refinements
Different header behavior was implemented depending on page context.
The homepage and primary informational pages use a transparent header, while catalog and other internal pages use a standard version.
The header remains sticky across the website and automatically hides while scrolling down, returning when the user scrolls upward.
Several interface strings that were not available through the standard WordPress or WooCommerce localization system were also localized through lightweight PHP customization rather than adding another translation plugin or modifying WordPress core files.
These small adjustments helped keep the interface consistent without introducing unnecessary dependencies.
{+}
Supporting pages and GDPR elements
In addition to the storefront and catalog structure, the project included basic informational pages such as About Us and Contacts.
Several supporting legal pages were also created together with their content:
- Public Offer;
- Terms and Conditions;
- Privacy Policy;
- Cookie Policy.
A GDPR-oriented cookie consent interface was implemented with individual preference controls rather than a simple notification-only banner.
This created the basic legal and privacy structure required for further development of the commercial website.
Cookie consent interface
Cookie consent interface with individual controls, desktop preview
{W}
Contact workflow and notifications
Domain-based email accounts were created on the client’s hosting environment and connected to the website contact forms.
Incoming form submissions are delivered to the store’s domain email while copies are automatically forwarded to the client’s private email address.
Telegram integration was also configured as an additional notification channel.
Messages submitted through website forms, together with website-generated email notifications, are duplicated to a Telegram bot.
As a result, customer enquiries do not depend on a single communication channel and can be noticed quickly even when the client is away from the website administration interface.
{U}
Performance and technical deployment
After development, the website was cloned from the contractor’s environment to the client’s hosting and production domain.
The production server uses LiteSpeed, so caching and performance optimization were configured after deployment according to the behavior of the final hosting environment.
Google PageSpeed testing after optimization produced mobile scores above 80 across the website and desktop scores above 90, with many pages reaching 99–100.
Basic protection against brute-force login attempts was also configured for the WordPress administration area.
The final deployment therefore included not only the storefront itself, but also the supporting hosting, email, notification, performance, and basic security configuration required for practical day-to-day operation.
{!}
Result
The client received a working WooCommerce-based storefront designed to serve as the first stage of a larger eCommerce project.
The delivered version includes:
- a custom landing-style homepage;
- WooCommerce product and category architecture;
- 16 real products, most with variations;
- customized product pages and variation selectors;
- custom multi-color variation swatches;
- modal enquiry workflows;
- direct messenger and hotline communication;
- expandable product descriptions and accordion-based technical specifications;
- product filtering through a slide-out panel;
- informational and legal pages;
- GDPR-oriented cookie controls;
- domain email and Telegram notification integration;
- responsive storefront behavior;
- caching and performance optimization on the production server;
- an architecture ready for further eCommerce expansion.
The current public workflow intentionally operates without a visible cart and checkout.
These components can be introduced later together with payment, delivery, and other commercial integrations without replacing the underlying WooCommerce structure.
{*}
Notes
This portfolio case preserves the initial release stage of the TehnoVek website.
The project was intentionally designed as a scalable system rather than a finished one-time landing page.
The client plans to continue expanding the product catalog and may introduce additional functionality such as payment and installment services, more advanced product filtering, delivery integrations, and other eCommerce features.
For this reason, the version presented here should be viewed as the technical and structural foundation of the project rather than its final possible state.
A separate demo copy preserves this initial implementation even if the production website continues to evolve.
If future development becomes substantial enough, later stages may be documented separately as an ongoing WooCommerce development and customization case.
{!}
Collaboration Proof
The project was completed through Freelancehunt.
Below is a real client review that is still available on the platform.
{*}
<contact_me>
…If you’d like to discuss a project, clarify requirements, or explore possible collaboration, you can find all contact details on the contact page.