Let's talk about how to make a online food store website integrated with marketplace using WordPress.
WordPress with some powerful plugins make this work more easier.
1. Requirements of Online Food Store
Want to use custom domain (ex. www.food.com)
Want to display selling foods in website
Doesn't need to selling products directly in website
Food has a link to marketplace to order
Make receipt contents in website
Display offline store information
Want to display franchise information
2. Online Food Store Feature Definition
Let's define feature from requirements based on WordPress platform.
Purchase custom domain.
Use WooCommerce Plugin to manage product(food).
Disable cart & order & delivery feature.
Add marketplace links to WooCommerce product to display outbound link in product detail page.
Manage receipts from WordPress Backend. It would be better to link between associated product and receipt.
Offline store and franchise is a same meaning. Make a franchise management feature in WordPress backend. And add additional field to franchize like location, telephone, url, type, etc.
Maybe this additional feature need to be added to website.
Receipts need to be categorized by food type.
Receipts has cooking ingredients, time, servings, difficult, etc.
Receipts can be filtered by category, ingredients, time, portions, difficult, etc.
User can search receipts by name.
3. Setup Hosting Server
Use hosting server like SiteGround. But also can be use AWS(Amazon Web Service) or GCP(Google Cloud Platform) to more flexible. In this time, I selected GCP(Google Cloud Platform) because it provides virtual server with Indonesia location. Since this online food store is serviced in Indonesia country, So GCP(Google Cloud Platform) with Jakarta Region is the best choice.
4. Install WordPress
This article gives you the following infomration:
5. Install WordPress Theme
Free
OceanWP
Use OceanWP. This theme has very flexible feature.
Paid
Hello Elementor
Use Hello provided by Elementor. This is a empty theme and all features will be configured by Elementor Pro.
Price : 0$
6. Install WordPress Plugins
6.1. Page Builder
Free
Elementor
The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.
Paid
Elementor Pro
Elementor Pro brings a whole new design experience to WordPress. Customize your entire theme: header, footer, single post, archive and 404 page, all with one page builder.
Price : $49/year
6.2. Product Management
Free & Paid
WooCommerce
WooCommerce is a flexible, open-source eCommerce solution built on WordPress. Sell anything, anywhere and make your way.
6.3. Loop Template
Receipt, Offline Store, Franchise archive page need to be customized.
Free & Paid
Ele Custom Skin
Elementor Custom Skin for Posts and Archive Posts. You can create a skin as you want.
6.4. Custom Post Type (For Receipt)
Free & Paid
Custom Post Type UI
Use this plugin to make a Receipt post type. Also can create receipt category using this plugin.
6.5. Custom Fields
Following data need to be managed by website.Receipt: Cooking times, Cooking ingredients, portions, etcMarketplace: Purchase link, etcOffline Store: Address, Tel, Operation time, etcFranchise: Shop URL, Name, etc
Free & Paid
Advanced Custom Fields
Customize columns on the administration screens for post(types), pages, media, comments, links and users with an easy to use drag-and-drop interface.
6.6. SEO (Search Engine Optimization)
Free & Paid
Rank Math SEO
Rank Math is a revolutionary SEO product that combines the features of many SEO tools and lets you multiply your traffic in the easiest way possible.
6.7. Image Optimization
Free & Paid
Smush
Reduce image file sizes, improve performance and boost your SEO using the free WPMU DEV WordPress Smush API.
7. Create Custom Post Type
Create required post type using Custom Post Type UI
Receipt
To inform the user of the food recipe purchased. Need to connect with associated food to purchase.
Franchise
Information about one or multiple franchise store(s).
8. Create Required Taxonomies
Make a custom taxonomies to grouping custom post type using Custom Post Type UI
Receipt
Receipt Category
Franchise
Franchise Type (Offline, Online, or Both)
9. Create Required Custom Fields
Make a custom fields to created custom post type to more easily manage using Advanced Custom Fields
Receipt
Cooking time
Cooking ingredients
Portions
Difficulty
Associated food products
Franchise
Common
Location
Telephone
Photo
If Offline
Google Map
Operation Time
If Online
Shop URL (Multiple)
10. Setup Product & Marketplace Link
As we want to display purchase link di website, how can link product with marketplace product?
Free
Manually Add to Content
Just manually add to each product ccontent with marketplace link.
Paid (But Free with Elementor Pro)
Use ACF
Create custom field of each marketplace and link to WooCommerce Product.
Amazon Link
eBay Link
...
Marketplace n Link
Use custom fields with dynamic contents in product detail page using Elementor Pro
Paid
Product Retailers
Product Retailers plugin add External Links for the product. Use this to make one or multiple outbound link.
Price : $49/year
11. Create Required Page
11.1. Homepage
Create a new page and design using Elementor.
11.2. Foods Page
Food is the Product in this WooCommerce webstore.
Free
WooCommerce Shop
As food is product in website, all foods will be shown in shop page.
Paid
Use Elementor Pro
Create a product archive template for the food. Also can be design for each food loop item using Ele Custom Skin free plugin.
11.3. Receipts Page
Receipt is the Custom Post Type with additional custom fields.
Free
Manually Create Template
Need to manually create archive-receipt.php for archive, and single-receipt.php for single post in selected WordPress theme.
Paid
Use Elementor Pro
Create a archive template for receipt post type. Also can be design for each receipt loop item using Ele Custom Skin free plugin.
11.4. Franchise Page
Franchise is the Custom Post Type with additional custom fields.
Free
Manually Create Template
Need to manually create archive-franchise.php for archive, and single-franchise.php for single post in selected WordPress theme.
Paid
Use Elementor Pro
Create a archive template for franchise post type. Also can be design for each franchise loop item using Ele Custom Skin free plugin.
12. Add Filtering & Search feature
There is no free option at this time. Thus, we should buy a paid WordPress plugin for this.
Paid 1
FacetWP
Advanced filtering and faceted search for WordPress and WooCommerce.
Price : $99/year
Paid 2
JetSmartFilters
Easy-to-use AJAX filters to apply for custom posts, terms, and WooCommerce products.
Price : $24/year
13. Conclusion
Free
Not Recommended
Hard to customize
No advanced filtering
Waste of time
Price : $0
Paid
Cost-Effective
Elementor Pro
JetSmartFilters
Price : $73/year
Paid
Full-Featured
Elementor Pro
Product Retailers
FacetWP
Price : $122/year
I'm highly recommanded to use Elementor Pro plugin because it make process more professional.
I'll add to my portfolio after finished to setup.