How to make online food store website integrated with marketplace using WordPress
How to make a online food store using WordPress

How to make online food store website integrated with marketplace using WordPress

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.

Table of Contents

1. Requirements of Online Food Store

2. Online Food Store Feature Definition

Let’s define feature from requirements based on WordPress platform.

Maybe this additional feature need to be added to website.

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

I used to follow this great tutorial to install.
This article gives you the following infomration:

  • Setup user on your server
  • Install a LAMP(Linux, Apache, MySQL, PHP) stack
  • Setup SSL using Let’s Encrypt
  • Install WordPress

5. Install WordPress Theme

Free

Use OceanWP. This theme has very flexible feature.

Paid

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

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 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 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

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

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, etc
Marketplace: Purchase link, etc
Offline Store: Address, Tel, Operation time, etc
Franchise: Shop URL, Name, etc

Free & Paid

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 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

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

Franchise

9. Create Required Custom Fields

Make a custom fields to created custom post type to more easily manage using Advanced Custom Fields

Receipt

Franchise

Common

If Offline

If Online

10. Setup Product & Marketplace Link

All selling food can be registerd as a product by WooCommerce.
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.

Use custom fields with dynamic contents in product detail page using Elementor Pro

Paid

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

As food is product in website, all foods will be shown in shop page.

Paid

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

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

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

It would be better to user can filtering product(food), receipt using various filtering options.
Filtering options are already made when we create a taxonomies and additional custom fields of Product, Receipt, and Franchise. How can we add filtering options to page?

There is no free option at this time. Thus, we should buy a paid WordPress plugin for this. 

Paid 1

Advanced filtering and faceted search for WordPress and WooCommerce.

Price : $99/year

Paid 2

Easy-to-use AJAX filters to apply for custom posts, terms, and WooCommerce products.

Price : $24/year

13. Conclusion

Free

Price : $0

Paid

Price : $73/year

Paid

Price : $122/year

Finally, We can make a online food store easily using WordPress with some plugins.
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.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments