Energy Supply Zone

From Adobe XD design to fully customized e-store

It is a complex project that was full of peculiarities that set it apart from other similar ones. WordPress, WooCommerce, Custom Taxonomies and Custom Fileds, and Elementor have been made the most of. It was designed in Adobe XD and in a pixel-perfect way it was turned into a website, from scratch.

This is part of the list of things that required customized solutions, and which set this project apart from the others in terms of complexity:

Home page: the hero section contains a background video that has play/pause functionality. The product carousel below it is made so that it enables product comparison, where, according to a given customized design, information is displayed on whether the product is in stock, and the product links and buttons are displayed in accordance with this information. This was realized directly through the Elementor template.

Product Categories: Contains several custom fields, including a custom FAQ section, where each category has its own questions and answers. All this is solved for the site owner in such a way that they are entered directly when entering a category in the backend, and are displayed automatically on the category page in the frontend. Also, on the store page and on the product category pages, a customized search/display with filters is enabled.

Single Product Page: Standard WooCommerce products are also enriched with added custom fields, going beyond the usual WooCommerce limitations. In the upper part of the individual product page, product data and specifications are displayed with the “unfold” functionality, which saves space and makes the page look neater. For the products, an automatic recalculation of the number of hours of power supply of individual categories of consumers has been achieved (it is a store that, among other things, sells various products for powering consumers in the household with battery power), based on the once-entered product capacity – and that is visually displayed on the individual product page. Some of the products are delivered as a kit, with included components, which (including the appearance and number of included components) are displayed in the slider on the individual product page. For a better presentation of an individual product, various visual and textual segments have been added, all of which are entered in the backend when entering product data and displayed on the frontend on the page of an individual product. Everything listed here is realized through the advanced use of Custom Fields (CPF).

Project Categories:
Skills Used:

Screenshots