How we built the Marketplace demo website with WoodMart
Explore the live demo: https://woodmart.xtemos.com/marketplace2/
Discover WoodMart Ecommerce WordPress theme: Flexible, Stylish, and Ready to Launch. Built with performance and modern aesthetics in mind, this WoodMart demo can be imported with a single click and offers full design adaptability. Every component, from typography to product layouts, is fully customizable, making it easy to align with your brand identity and business goals.
In this article, we’ll break down the structure of the WoodMart prebuilt site, focusing on its header, footer, homepage, and essential page sections. You’ll gain insight into how WoodMart leverages its drag-and-drop builder, powerful theme options, and WooCommerce integration to create stunning storefronts. WoodMart offers unmatched flexibility, allowing you to build high-performing eCommerce sites that look and feel unique — the only limit is your creativity.
What is a Prebuilt Website?
A prebuilt website in WoodMart is a fully designed and ready-to-use demo tailored to meet the needs of specific industries or store types. These pre-configured sites include everything from homepage layouts, product grids, category pages, and blog sections, to optimized headers, footers, and promotional banners — all crafted to deliver a professional online shopping experience from the start.
- Designed to jumpstart your online store with minimal setup.
- One-click import gives you a complete site in seconds.
- Every demo is responsive and optimized for mobile devices.
- Seamlessly integrates with WooCommerce and performance-optimized.
- Fully customizable via the WoodMart Theme Options and Elementor , WPBakery or Gutenberg.
- Included with your WoodMart license at no extra cost.
What You Need Before You Begin
Before importing the Prebuilt website, your hosting environment must meet specific requirements and have WordPress properly configured. The theme requires PHP 7.4 or higher, the latest WordPress version. For complete setup instructions and detailed PHP configuration guidelines, see our full requirements and setup guide.
Fast One-Click Install
Importing a WoodMart Prebuilt Website is effortless — just a single click, and you’re on your way. With flexible import options, you can bring in a complete demo or mix and match individual pages to suit your needs. Customize your setup by importing only what you need.
Website Structure
Each page within the WoodMart Marketplace 2 demo is thoughtfully structured into 4 key areas: the Header, the Page title, the Main Content, and the Footer. Thanks to WoodMart’s intuitive theme options and builder compatibility, you can customize each section independently, giving you full creative control over your site’s layout and appearance.
Below is a preview of the Marketplace 2 prebuilt pages that come ready to use out of the box. Once imported, every element — from text and imagery to layout and styling — can be tailored to match your brand. You can also add new pages or extend existing ones to better suit your store’s goals.
WoodMart makes it easy to build a cohesive, professional online store with pre-designed pages that are both beautiful and fully customizable.
Header builder
With the WoodMart Header Builder, customizing the Header section of your website is simple and intuitive. Add and arrange elements like navigation menus, logos, shopping cart and wishlist widgets, custom HTML blocks, social icons, search bar, and more — all from a user-friendly interface. You have full control over the layout, order, and styling of each component.
The Search has the “Popular requests” option enabled, which shows quick buttons under the search form with popular search requests.
Exploring The Home Page
On the homepage of the Marketplace 2 demo, the main content area — positioned between the header and footer — is intentionally designed without a page title bar, giving you maximum visual space and creative freedom. This section can be customized in countless ways to align with your brand identity, showcase promotions, highlight key categories, or tell your story. Whether you’re building a minimalist storefront or a feature-rich landing page, WoodMart gives you the flexibility to shape the content exactly as your business needs.
The demo uses the custom width for the container – 1660px
This section is created using a 100% width Container that contains a nested carousel element. The nested carousel, in turn, consists of 5 slides in which an Information box element is defined. The reason of using the nested carousel here is to set the custom gap between the Information boxes.
Next, we have a product carousel + image carousel that are synchronized with each other.
Synchronization: this option gives the ability to synchronize 2 carousels (parent and child), thus when you scroll the parent category, the child category scrolls as well.
In order to adjust such work, you need 2 image carousels (first as a parent, second as a child), child category should have the same ID as the parent carousel has.
The below section of Banners uses the Nested carousell, we have the Banners carousell element but we didn’t use it as we need to set the different color scheme, with the Banners carousell it’s impossible so that is why we used here the Nested carousell.
The last content section is a section with Collapsible content functionality. For more details on how this works, please refer to our documentation.
The Footer
The Marketplace 2 demo has Footer built via HTML Block. The advanced approach involves utilizing HTML Blocks for footer content. Navigate to Theme Settings → Footer and select “HTML Block” as your Footer Content option. This method unlocks the full potential of WPBakery Page Builder , Elementor, or Gutenberg, enabling you to craft sophisticated footer designs with custom elements, advanced layouts, interactive components.
In the HTML Block for the Footer we used a special element “Togle” which gives the ability to make the compact Footer for the mobile device.
Typography
The demo uses another design of the icons
The fonts Albert Sans and Urbanist are applied globally through Theme Settings → Typography.
Styles & Colors
In Theme Settigns -> Styles and Colors -> Rounding we have adjusted border-radius of 20px for global elements.
In addition to setting the primary color, secondary color, and link color, the color of the top browser bar on mobile devices was also specified.
We have set the background for the pages as well in Theme Settings -> Styles and Colors -> Pages Background.
We used “rgb(246,245,248)” color for the “All pages”, “Product archive”, “Blog archive”, “Single post”.
A custom background was set for the labels displayed on the product card in Theme Settings -> Shop -> Product labels.
A background was set for all product elements.
A color scheme was configured for the Buy now button.
Default and Accent buttons are setted as Rounded.
WoodMart custom layout builder
The Marketplace 2 demo uses such a layouts:
- Product archive layout shop
- Product archive layout shop category
- Product archive layout child category
- Single product layout
- Cart layout
- Checkout layout
Single product
The Specification area is build through the Product additional information table element. In the Data source area you can include attributes that will be shown for the specific block
Thus you have the ability to customize the defalt “Additional information” section on the Product page.
The Products (grid or carousel) element in the Single product layout has an additional options to show the “Upsells” or “Related” products.
Product archive
For the Product archive we have 3 layouts, 1 for the All product archives and 2 for the specific categories – Electronics and Appliances
Using our Archive Title + WooCommerce Breadcrumbs elements, we created the Page Title.
We created a layout for the main category to display the top-selling products.
Cart layout
The Cart layout includes all the necessary elements and additionally we have defined the cross-selling products.
In the mini-cart and on the Cart page, we have shown the Shipping progress bar:
Cart Totals Layout 2 style is enabled. (By default the Layout 1 is enabled)
Checkout layout
The checkout page in Elementor and WP Backery contains two different areas that need to be customized separately. A checkout form that will contain all checkout fields and buttons, and Checkout top content needed for login and coupons forms. In Gutenberg, in a single layout, we completely design the checkout page layout.
We usually place the payment methods on the right. Here, we changed the order.
More details on how to adjust the Checkout layout is here.
Conclusion
The WoodMart Marketplace 2 demo showcases the flexibility and power of the WoodMart theme. From the custom header builder and synchronized carousels to the mobile-optimized footer with collapsible content, every element demonstrates how you can create a professional, high-performing eCommerce store without compromising on design or functionality.
We’d love to hear from you! What aspects of the Marketplace 2 demo caught your attention? Are you planning to use any of these techniques in your own WoodMart project? Share your thoughts, questions, or experiences in the comments below — your feedback helps us create even better demos and tutorials for the WoodMart community.