How to Set up In-Store Pickups for Online Orders with Divi’s Free Coffee Shop Layout Pack & WooCommerce

Last Updated on May 16, 2024 by 5 Comments

Editorial Note: We may earn a commission when you visit links on our website.
How to Set up In-Store Pickups for Online Orders with Divi’s Free Coffee Shop Layout Pack & WooCommerce
Blog / Divi Resources / How to Set up In-Store Pickups for Online Orders with Divi’s Free Coffee Shop Layout Pack & WooCommerce
Play Button

If youโ€™re creating a coffee shop website, one of the things you might be looking for is a way to allow in-store pickups for online orders. It just makes it easier to attract a new audience that doesnโ€™t have the time to stand hours in a line waiting to order a coffee. It also helps you, as a coffee shop owner, to be more organized.

To help you with the process of creating such a system, weโ€™ve created this tutorial. Weโ€™ll show you, step by step, how to achieve a fully-functioning coffee shop website that allows in-store pickups for online orders using the free Coffee Shop Layout Pack, the WooCommerce plugin and the WooCommerce Local Pickup Time Select plugin.

Setting up Your Website Using The Coffee Shop Layout Pack

The first thing you will need to do, before setting up the in-store pickups for online orders, is creating a fully-functioning website with the free Coffee Shop Layout Pack. Weโ€™ve created a tutorial that shows you all the steps you need to go through, or if you prefer, you can just watch follow the video below.

Allow In-Store Pickups for Online Orders with Diviโ€™s Free Coffee Shop Layout Pack


Subscribe To Our Youtube Channel

Install The WooCommerce Plugin

So once youโ€™ve gone through the process of settings up the Coffee Shop Layout Pack, itโ€™s time to get started. For this tutorial, weโ€™ll be using two additional plugins. The first one that you will need to download, by using the following link, is WooCommerce. Once youโ€™ve downloaded the WooCommerce plugin, go to your WordPress website > Plugins > Add New > And upload the zipped file.

pickup

Install The WooCommerce Local Pickup Time Select Plugin

The second plugin weโ€™ll be needing for this tutorial is WooCommerce Local Pickup Time Select, which you can download if you click on the following link. This free plugin is the easiest and cheapest way to add a pickup time to your checkout page. Again, upload this plugin to the WordPress website you are working on in the same way as you did for the WooCommerce plugin.

Change Settings of WooCommerce Plugin

The WooCommerce Local Pickup Time Select plugin adds some additional settings to your WooCommerce plugin. So if you want to change the settings, youโ€™ll have to go to the settings of the WooCommerce plugin.

pickup

Then scroll down the General tab until you come across โ€˜Store Hours and Closings for Local Pickupโ€™. Starting from there, you can choose when people can pick up their orders by adding, among other things, the opening and closing hours.

pickup

Create Products

Creating products within your WooCommerce plugin is a two-steps process; adding the product categories and adding the products that belong to each one of the categories. For this example, weโ€™re creating two categories; coffee and pastry.

Add Product Categories

Depending on your assortment, you will probably have multiple categories thatโ€™ll make it easier to display your products within the different pages. To add a category, go to Products > Categories > Add new category.

pickup

Add Products

Once youโ€™ve created the product categories, itโ€™s time to add the different products. You can add these products by going to Products > Add new. Once youโ€™re adding a new product, you will need to give your product a title, description, price, category and product image. For this tutorial, weโ€™ve created four different products.

pickup

Add Products to Shop Module

Once youโ€™ve activated the plugins and added the products, you can start changing your website visually. One of the first things you will need to do is the Shop Module you can find on the Shop page.

Open Shop Page with Visual Builder

To get started, open the shop page with the Visual Builder.

pickup

Change Column Structure of Shop Module

Next, open the Shop Module settings and change the Column Number to โ€˜4 Columnsโ€™.ย  Once you do that, youโ€™ll watch your four products appear in one line.

pickup

Change Shopping Cart Page

The product pages are, unfortunately, pages you canโ€™t modify with Divi. However, we can luckily change some other pages that contain WooCommerce shortcodes. One of those pages is the shopping cart page. By adding some sections and making some modifications, weโ€™re going to make our shopping cart page look like this:

pickup

Enable Visual Builder on Shopping Cart Page

Start by going to your shopping cart page and enabling the Visual Builder.

Change Row Width of Shopping Cart Shortcode

Then, open the settings of the row containing the shopping card shortcode and change the width into โ€˜1075pxโ€™.

pickup

Save Shop Page Hero Section, Footer Section & Shop Section to Library

Next, open the shop page in another tab and enable the Visual Builder. Weโ€™ll be reusing the hero section, the shop section and the footer section of this page on our shopping cart page. Click on the following option of each section to add them to the library:

pickup

Add Sections to Shopping Cart Page

Once youโ€™ve added them to your library, you can go ahead and add them to your Shopping Cart page by just clicking on the following icon:

pickup

Save Page & Exit Visual Builder

Once everythingโ€™s in place, you can save the page and exit the Visual Builder.

Change Checkout Page

Then, thereโ€™s also the checkout page, which you can luckily edit with the Divi Builder as well. The pickup time option will appear on this page. Our end result will look like this:

pickup

Enable Visual Builder on Checkout Page

Start by going to your shopping cart page and enabling the Visual Builder.

Change the Row Width

Then, open the row that contains the WooCommerce shortcode and change the width to โ€˜571pxโ€™ within the Sizing subcategory.

pickup

Add Hero Section & Footer Section

You can reuse the hero section and footer section within your library on the checkout page as well. Just make sure you change the title of the hero section. We wonโ€™t, however, add the shop section to this page since weโ€™re already further down the lane.

Add Pickup Information

Another recommendable thing to add to your checkout page is a separate section that contains information about the order pickup. That can end up looking like something like this:

pickup

Save Page & Exit Visual Builder

Once everythingโ€™s in place, you can save the page and exit the Visual Builder.

View Orders & Pickup Time

The orders people place on your website show up in the same way as usual, the only difference is that the pickup time will be added. If you go to your WordPress website > Orders > Open an order, youโ€™ll see that the pickup time is mentioned in the order details.

pickup

Plugin Alternative: WooCommerce Pickup Locations

pickup

The plugin weโ€™ve created this use case with is the easiest and cheapest solution out there. However, it does limit you in some ways.ย  You canโ€™t make use of it if you have different stores and people canโ€™t order things more than ten days ahead. An alternative for theย WooCommerce Local Pickup Time Select Plugin is the Woocommerce Pickup Locations plugin. Although this is a paid plugin, $22 for a regular license, itโ€™s a very nice alternative because of the different options it provides you with. People can select the pickup location, the timing and the date while ordering.ย  You can also choose to display a map with your stores marked on it.

Final Thoughts

In this tutorial, weโ€™ve shown you how to easily allow your coffee shop website to have in-store pickups for online orders. This tutorial is a part of our weekly Divi design initiative where we share a use case for the free layout pack that comes out every week. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Be sure toย subscribe to our email newsletterย andย YouTube channelย so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by jabkitticha / shutterstock.com

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time ๐Ÿ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi 5 Update: Public Alpha Version 4

Divi 5 Update: Public Alpha Version 4

Posted on November 25, 2024 in Divi Resources

The Divi 5 Public Alpha is available for testing. If you use Divi 5, you’ll notice an update notification for Public Alpha Version 4 today. We release new Divi 5 versions every two weeks, and it gets better each time! If you haven’t tested Divi 5 yet, try it and let us know what you...

View Full Post
New Starter Site for Freelancers (Quick Install)

New Starter Site for Freelancers (Quick Install)

Posted on November 24, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

5 Comments

  1. You mentioned 3 things to install and use.
    1) Coffee Shop Layout Pack,
    2) WooCommerce plugin
    3) and the WooCommerce Local Pickup Time Select plugin.

    According to the description on the Local pick up time plugin WordPress download page, Local Pickup Time plugin is Free. However it extends the Woo Commerce Local Pickup shipping option plugin which is quite expensive.

    Is there another way to do this without having to buy the Woo commerce Local pick up plugin then also use the Free pick up time plugin to extend Woo commerce Local pick up. Do both these plugins need to be used together? or will the Pickup time plugin work on it’s own with woo commerce?

    • It says the woocomm local pickup plugin is optional?

  2. it would be helpful if elegant themes made a response to gutenberg, what is going to happen to the divi theme?

    • You should be able to turn Gutenberg off, or use an existing plugin to remove it. Don’t stress it’s all good ๐Ÿ™‚

  3. Wow, it is like Elegant Themes can read my thoughts! I was just investigating implementing something like this for a local restaurant. I think what will be easier though is to add a live-chat feature which connects to their CRM, allowing the user to submit their order without having to make an order quickly without having to complete a checkout form.

    Any other thoughts on what is working for solutions like this?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

๐Ÿ‘‹ It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Join To Download Today