In this tutorial, I will teach you how to build your first e-commerce store and accept Bitcoin payments. We will build the website from scratch, together, step by step with no steps skipped. The software we’re going to use is free and open-source.
This setup is made for complete newbies with no coding or web-design knowledge. The tutorial includes lots of illustrations and easy-to-follow videos divided into steps.
When you complete the last step, you’ll have a professional looking, e-commerce store with your products or services, contact and about us page and a Bitcoin payment processor which will allow you to accept Bitcoin payments directly, with no fees or intermediate.
There are many tutorials on how to create a website or an e-commerce website on the internet. However, none of the guides explains how to accept Bitcoin.
My goal is to help non-tech savvy people to set up their website in a cost-effective and user-friendly way and start accepting Bitcoin through BTCPay Server, directly without fees or transaction cost.
If you’re a bit of an advanced user and you know how to create a website, this detailed article is separated into sections, so you can jump to the part which interests you the most. Already have a WoocCommerce store? Start here and learn how to accept Bitcoin.
If you’re a newbie, do not be afraid or overwhelmed. I invested a significant amount of time in breaking the entire process of launching the store into tiny pieces, so there’s no need to do everything in a day. Each step will give you a certain sense of accomplishment, and you’ll see the results, with each completed stage.
The tutorial is paginated into multiple pages. Each page represents a step. Each step has a video explanation. At the bottom of each page, you will see a button to proceed to the next phase.
Let’s now take a look at all the steps.
Under the Hood
If you have the understanding of how your e-commerce store works under the hood, you’ll easier troubleshoot issues. In this step, I would like to explain the basics of how our e-commerce store will work. The illustrations below illustrates the software and tools we’ll be using to run the store.
Our e-commerce project contains several elements, which I’d like to explain before we move into building our store.
We’ll have a shared hosting plan where we’ll install WordPress (website software) and Woocommerce (e-commerce software which transforms our blog into a robust store). Our shared plan will host our store software, the domain name, and the SSL certificate.
Due to the nature of a Full Bitcoin node, for those of you who’d like to install their own Bitcoin payment processor, we will be deploying a VPS (Virtual Private Server) and keep the store and the payment processor separate. The store owners who are on a budget and can’t afford a VPS or want to see how Bitcoin payments work for them will have a section in which I’ll show you how to attach a store to a free BTCPay Server Host and receive payments with no intermediates.
Once we’re finished, you’ll have a complete system in place, same as a real, professional web-store. We won’t be paying anyone for it, we’ll do it all ourselves, and you’ll see it’ll be quite easy.
Let’s now cover each of the project elements and explain them briefly.
Web Hosting
Web-hosting is a networking infrastructure which keeps your site online 24/7. While you can host your site on your home server, you would have to leave it running on all day and night, taking care of security and performance. Websites are stored on specialized computers called – servers. Servers are kept in secure data centers which have a high level of physical protection, backup system, fire suppression and more.
When purchasing a hosting, you’re paying for space on their server and also bandwidth (the network speed) and few more things.
Web hosting can be :
- Shared
- Virtual
- Dedicated
Shared Hosting
With shared hosting, plenty of web-hosting customers share one physical server. It’s basically like living in a building with lots of apartments. All of the people living in the building share the same resources (CPU, disk space, RAM), but have different living space (website).
Shared plans are universal (one solution to fit all websites), which means they can be limited in specific cases, so it offers a limited amount of customization. Luckily a shared hosting is more than enough for a web-store these days.
Shared Hostings has pre-installed user-friendly interfaces called the control panel (c-panel). Shared hostings eliminate technical maintenance and shields everything into an easy to understand interface. Since there are lots of people sharing one server, it’s the most affordable option.
Dedicated Hosting
In dedicated hosting, one customer is the sole owner of the server. Dedicated is the priciest option which offers unlimited customization options. With a dedicated server, you live in a mansion.
VPS Hosting
VPS (Virtual Private Servers) can be compared to living in a semi-detached house. Each family has a separate house, but they are still connected to their neighbors. VPS is a hybrid of shared and dedicated, where each server is virtually separated into a few pieces, where each customer gets their own piece of a server, and all of them operate independently of each other.
In this setup, for the sake of ease of use and performance, we will be using shared hosting for our store, and an affordable VPS to host our Bitcoin payment processor.
Why do you need both VPS and Shared for this setup?
We will build our website on shared hosting because shared hosting comes with a 24/7 support and fantastic, out of the box tools.
Our Bitcoin payment processor will be on a VPS, because it’s resource-intensive, and there’s no shared hosting plan which can handle it.
So there are 3 ways to approach this tutorial :
- Shared + VPS hosting (recommended)
- Shared + free host (useful for testing)
- VPS for both store and Bitcoin payments processing (won’t be covered in this tutorial, advanced)
If you’d like to have your BTCPay server and receive Bitcoin payments to your node, you’ll have to launch a separate VPS.
If you don’t want to run Lightning Network payments and have your own server, you can easily connect to some of the free hosts of BTCPay server and receive payments through them for a start.
If you have the technical knowledge, you can host both site and Bitcoin payment processor from VPS only.
Domain name and SSL
Domain name is – www.yourwebsite.com. Domain names are created to make internet-protocol addressed (IP’s) which look like random numbers: 34.213.40 accessible and easily recognizable by humans.
Imagine that your website is a house, a domain name is your street address where your readers can find you easily, instead of using the map coordinates (IP address).
SSL creates an encrypted tunnel from your customer’s browser to your web-server. SSL is an encrypted protocol which makes sure that a third party can’t extract and intercept the data.
In the past, SSL was used only for stores processing credit card payments, but recently it became a standard for all websites. Some browsers nowadays will mark your websites as insecure and block users from visiting it, if it does not have an https protocol.
Our hosting will allow us to have our own domain name and register it through them and provide us with a free SSL certificate through Let’s Encrypt right out of the box. So all of this will be happening in the back-end, and you won’t notice it.
WordPress
The most basic explanation of WordPress is that it’s free, open-source software used to create websites, written in PHP programming language. It’s the easiest and most used CMS (Content-Managment-System) or a blogging platform which powers 30% of all websites on the planet.
WordPress Theme
A theme gives WordPress site it’s appearance or design and allows you to customize it. There are hundreds of thousands of WP themes out there. Some are free; some are paid.
We will be using a free theme called Storefront.
WordPress Plugins
Plugins are pre-written pieces of code which give the functionality to your website, and it’s theme. Just like with themes there is an insane number of free and premium plugins.
Woocommerce
Woocommerce is a free and open-source WordPress e-commerce plugin. It transforms your website from just another blog to a robust and customizable e-commerce solution.
BTCPay Server
BTCPay server is an open-source Bitcoin payment processor which allows you to directly receive Bitcoin (and altcoin) payments, with no intermediates and no processing fees. BTCPay WordPress plugin creates a link from your server to your Woocommerce store.
The cost
As you noticed so far, we will be using free and open-source solutions. The only things we’d have to pay to create our first web-store are hosting and domain name.
Web Hosting
Choosing the hosting for your website is one of the most challenging tasks you’ll encounter. There are thousands of companies offering very similar packets or services.
Use the video instructions below in combination with the text.
In this article, I will show you how to use the SiteGround Hosting. I’ve been using them for various web-projects in the past 4 years, and I feel very comfortable recommending them. Their plans might not be the cheapest, but their servers, customer support, and built-in tools are second to none, in my experience.
The only disadvantage is that Siteground does not accept Bitcoin for their hosting service. I hope they will start accepting Bitcoin at some point.
If you decide to choose a different hosting, please understand that this step will not be the same and that you’ll have to find the tutorial on how to install WordPress and WooCommerce with your hosting company. Most reputable hosting services have these tutorials, so it shouldn’t be much of a problem.
If you do not want SiteGround hosting, skip this step and join us in the next step when we begin customizing our store. The majority of the setup will be very similar with most of the hosts, provided that the hosting has 1-click WordPress and Woocommerce creation, which most of the reputable hosts these days offer.
Choosing The Hosting Plan
There is a variety of hosting plans. Siteground (as well as most web hosts) offers a variety of plans with varying prices and features.” For any beginner, the cheapest and the most basic plan will do the job.
Let’s now begin doing fun stuff and select our hosting plan with SiteGround.
In the hosting menu, choose “Web Hosting.”
Once the tab opens, select the first StartUp plan, which is at the time of writing $3.95 per month.
Note on pricing. The price of $3.95/month will be valid only for the billing cycle you choose. If you go with a 12 months circle later on, after 12 months you’ll be billed $11.95 per month and not 3.95. If you select a 3-year plan, you’ll be charged $3.95 for the first three years, and after that $11.95/month.)
Yes, it’s a marketing trick, but do not worry. Siteground often has promotions, and you’ll most likely be able to renew at the $3.95 monthly rate at a later point. Watch out for Cyber Monday, Black Friday and holidays, as their renewals are pretty cheap then. If you outgrow your plan at any point, you’ll easily be able to upgrade and pay just the difference. They’ll do all the hard work of transferring and updating for you.
Click on “GET STARTED” button to choose the plan.
Domain name
As I mentioned, choosing a catchy domain name is crucial. The domain name is your brand. Avoid using hyphens (-). If possible, use a short and memorable domain.
Do not be disappointed if your desired website name is taken. That’s how things work. As the matter a fact, it usually takes 10-15 attempts until you get the domain name you wanted. With 140,000 being created each day, it’s getting harder and harder to find a good domain name.
If you already own a domain, tick “I already have a domain.”
Besides the name itself, you’ll also be able to select the suffix (.com, .net, .co, etc.).
The domain registration with Siteground is $15.95 per year and has to be paid in full right away.
When the domain you want is available with the suffix of your choice, click on “Proceed.”
Setting up the account
In the next step, you’ll have to set up your account with SiteGround. The email and the password you choose here will be used to login into your c-panel (backend of your hosting). The data you enter can be easily changed.
Fill in the date required.
As I implied earlier, the payment options in Siteground are quite limited. For all of the Bitcoiners out there, no, at this time they don’t accept Bitcoin. You can pay with credit card (yuck I know), or if you prefer PayPal, you can contact them through the live chat, and they’ll send you an invoice.
Once you fill your credit card payment information, the next segment is selecting your hosting plan, data center, and billing cycle.
If your customer base is in the US; select the US base center. If you’re in Europe, pick any EU data center.
My recommendation is “USA Datacenter and 12-month billing cycle with Startup plan“.
Extra Services
In the end, Siteground will offer some additional services like privacy protection for your domain (useful if you can afford it, not required) or security scan (useless).
Agree with their TOS and don’t subscribe to their newsletter. Click “Pay Now” to finalize your purchase.
Phone verification
You’ll need to verify your phone number to complete the purchase. Failing to verify your phone may lead to your account getting terminated. Enter the phone number and enter the code you receive via SMS on your phone.
Enter the six digits code into the field and click “Next.”
Your account will be created now. Please do not navigate away from this page. The whole process takes less than 2 minutes.
Creating WordPress and WooCommerce
The reason why I like the Siteground is not only because of their speed, customer support, and security but also because of how easy it is to set up a website. In the past, you had to install both WordPress (Content Managment System – CMS) and Woocommerce as a plugin. While both of these are not hard to install at all, it’s good that SiteGround has a 1-click installation and it installs them right away.
Furthermore, they’ll add some of the plugins they think is necessary and also the test content and products so that you can see how your site looks.
Select “Start a new website.”
In the second tab, mark WooCommerce (This option installs both WordPress and Woocommerce since Woo can’t work without WordPress).
Fill in the login details and remember them. These credentials will be used to log in into the back-end of your site as admin later on.
The hosting company will once again suggest “enhanced” features for your account. As mentioned, unless you want a domain privacy feature, which is not necessary, especially if you’re looking to reduce the cost, ignore the enhanced features and click confirm.
You’ll be finally presented with the file overview of your account. Click on “Complete Setup.”
Siteground now created a ticket, and they’ll install WordPress and Woocommerce for you. I believe that this process is mostly automatic on their end, however since the ticket is created, it’s quite likely that they’ll have the technician manual check the installation.
Congratulations, you now have a shared server on which you’ll soon have your website powered by open-source content management system – WordPress and enhanced with e-commerce plugin called Woocommerce.
E-mail verification (inbox)
The last piece of the puzzle in this step is very straightforward. Head back at your email account and take a look at your inbox. The hosting will send you a bunch of emails with relevant information, so it’s a very good idea to go through them before we proceed.
You’ll need to confirm your email and wait for them to update the ticket. The waiting time may warry, but I’ve had everything set up in under 15-20 minutes.
Go to your inbox and check each e-mail received from the Siteground and follow the instructions provided in the email, where required, agree with the terms of service or click on the verification link. Check the emails in chronological order, from first received to the last one which arrived in your inbox.
Previewing the website
The last e-mail you receive will be a ticket reply from one of the hosting technicians who will provide you with the website link, administrator access link, and the credentials.
When you receive this ticket, you’ll be able to preview your website! Just click on the link in email www.yoursite.com
Don’t be discouraged nor disappointed that your site does not look the way you imagined. We are about to change the design. The site uses the default WordPress theme for blogging.
Take a break now; you’ve come a long way. You finally have the domain name and a website. In the next step, we will redesign and customize your website.If at any point you have questions regarding hosting or are having troubles with the setup, please go to Siteground’s support tab and enter the live-chat. A customer support representative will answer all of your questions and help with the issues.
Customizing WordPress
Creating the store was very easy. The real challenge is in customization. In this step, you will learn how to log in to the back-end of your store, completely change website appearance by installing the theme and, tweak some of the basic settings.
Logging into WordPress
You’ve seen the front end of your website. Now it’s time to get geeky and take a look at the backend. The first thing you should do is to manually enter into the browser (or click the link provided in the ticket) yourwebsite.com/wp-admin If you have a different suffix like .co , then it’s yourwebsite.co/wp-admin.
The /wp-admin is a default login page for all WordPress site. The access URL can be changed, but let’s not do that for now.
You’ll notice the WordPress login page. Enter your email address or username and password you provided when we deployed the Woocommerce and WordPress.
When you fill in the login credentials, click on the blue “Log In” button in the bottom right corner of the form.
You will be redirected to the website back-end dashboard.
Getting familiar with the back-end interface
It might look overwhelming at first, but don’t worry. On the back-end, you’ll work on all website changes; you’ll add products, see the orders, payments, even reports of your store. That means that with time, you will get used to it.
For starters, you won’t use all of the options. Pay attention to the left-hand sidebar which contains all the essential links.
The dashboard menu can be broken into several pieces :
- WordPress Settings – You add blog post for your store blog here, view the comments, add media files, create static pages and follow the plugin updates.
- Woocommerce Settings – Since we’re creating an e-commerce site here, pay attention to the Woocommerce section. Here you’ll spend most of your time. You can create products, manage orders, set up payment, and tax method and so much more.
- Theme (Appearance) – Inside the appearance, you can change the design of your website
- Plugins add functionality to your website. A plugin is a piece of code someone created which adds a specific function to your website out of the box in most cases.
Now that you’re not scared of the back-end and you have familiarized yourself with the essential features let’s make things funky and start customizing our e-commerce store by installing a WordPress theme.
Installing the Theme
The WordPress theme is just the design of your website. There are plenty of free and premium themes out there. WordPress has a directory which lists all the free themes. Premium paid themes can be found on sites like ThemeForest.
Free themes mostly come with a community or no support, whereas premium themes should have support. Choosing the theme is a critical step.
My recommendation is that you start with a free theme called Storefront. It’s the theme created by Woocommerce team. It does not cost anything; it’s community-supported, stable and compatible with Woocommerce. For, beginners it is the best starting point. As you master the WordPress, at some point you might get yourself a premium theme.
Enough chit-chat, let’s install our first WordPress theme and change the dull look of our website.
On the left-hand side of the dashboard (you need to be logged in in /wp-admin) click on the “Appearance.” Once you’re there, add a new theme by choosing the “Add new” button on top, or the + button at the bottom.
You will be redirected to a WordPress theme directory. Here you can see a vast number of themes sorted by popularity, categories, etc. You can experiment with other themes later on, but be aware that sometimes have a different modification and customization settings, so if you select a theme different than the one in the tutorial, you might not be able to follow along.
As I mentioned a few times, choosing a theme is not only picking the prettiest one. You have to consider its loading speed, documentation, and compatibility with WordPress. When selecting the theme, always make sure to read the reviews.
The Storefront theme is maintained by the Woocommerce team themselves. It’s free, well-documented and there are tons of articles about customization. It also loads decently fast.
In the search bar on the top right corner, type Storefront and click enter. Click “Install” and wait for a few seconds.
The button will show “installing” for a few seconds. Be patient and do not navigate away from the page.
The theme is now installed, but not yet active. Activate the theme by clicking “Activate.”
Congratulations, you’ve successfully installed and activated your first WordPress theme. I’m sure you’re excited to preview the changes, so let’s see how our website looks now.
On the top left corner of the dashboard sidebar, hover over the “My Blog” and click “Visit Site” or “Visit Store,” it doesn’t matter at this point which one you choose.
Bam – Your website should look much better at this point.Important note: If by any chance your homepage does not look like the one in this tutorial after installing and activating the Storefront theme, please go to Appearance > Storefront and “Install Default Storefront Homepage” Having troubles? Please read the official Storefront installation documentation.
Siteground created demo content and added demo images to showcase how your web-store might look. Much better than before, right?
Well, we’re about to spice things up even more and customize the store even further. But first, let’s remove the demo content.
Removing the demo content
The imported demo content is useful for previewing the store appearance, but after you’ve selected the theme, it’s just a distraction that needs to be removed. In this part, we’ll just remove :
- Demo products
- Demo product categories
- Demo blog post
- Demo comment
- Demo media files (images)
Removing the plugins
No matter how cool it sounds to have a specific feature or functionality to your website, you should never go crazy with plugins. Use only what you need. Having too many plugins installed or active may slow down the site and may cause compatibility issues among those very same plugins.
Use only well-rated and popular plugins from the WordPress repo.
That said, on the initial Setup, Siteground pre-installed a few plugins that are useful and some which are not. Let’s take a look and remove plugins which you won’t be needing.
On the dashboard menu on the left, click “Plugins” and in the submenu click “Installed Plugins.”
Remove the “Hello Dolly” plugin by merely deleting it. Since it’s deactivated, you can delete it right away.
Jetpack is a feature-rich plugin, but I think it adds a bunch of unnecessary features and way too much overkills the performance. While you can keep it, I usually remove it from my websites. Since the plugin is active, first deactivate it, and then, delete it.
Removing the Products
Deleting imported test products will be good practice for you to learn how to delete any product in your store. Unlike plugins which are deleted permanently, WordPress moves products in “trash” so you’ll have to remove the products from there as well.
To delete the demo products, click onto the “Products” tab and select “All Products.”
In the top right corner, use the check field to select all the products.
Go over to the “Bulk Actions” drop-down button, and select “Move to Trash” and click the “Apply” button next to it.
This will move all of your selected products to the trash. But we want to remove them entirely. That’s why, please click on the “Trash” link
Permanently deleting process is identical to removing the products to the trash. Select all of the products in the trash. In the bulk action, choose “Delete Permanently” and then – “Apply.”
Removing product categories
To remove the demo categories, under the Products tab, click “Categories.” In the checkbox, select all. Click on the “Bulk actions” and choose “Delete.” Click “Apply button to confirm.”
The default category “Uncategorized” can’t be removed. All of your products for which you don’t set up the category will be “Uncategorized.”
Removing posts and comments
The process of removing the post and comments from the WordPress is very similar to removing the products.
For posts, go to Posts > All Posts. Select > Trash > Delete permanently.
Okay, enough with deleting. I wanted for you to get used to the interface and navigating through the WordPress and Woocommerce.
Now that you’re a bit more comfortable, it’s time to build stuff, or as we Bitcoiners say: BUIDL! In the next step, we will set up our Woocommerce and configure the necessary settings.
Woocommerce Customization
On the left-hand side, in the sidebar, from the menu select – WooCommerce.
If you see a warning that your WooCommerce database needs to be updated, please click onto “Run the updater” and then confirm it if your browser displays a pop-up window.
If you do not see this message, that’s perfectly fine, you’ll see the WooCommerce dashboard, as displayed in the image below.
WooCommerce itself is separated into two navigational elements :
- WooCommerce Setup – where you adjust the store preferences such as general settings, handle orders, view reports, etc.
- Products – where you can add, remove and manage your products
WooCommerce General Settings
Creating WooCommerce Pages
WooCommerce needs some default pages to work. While some of those pages may have been created, it’s always a good idea to check if there’s anything we’re missing. Woo has a great tool that will help you monitor the errors and create the missing pages, and assign each created page, right out of the box.
Click on the WooCommerce link in the dashboard sidebar and click on “Status.”
In System Status, you can check your store and host necessary information. Scroll all the way to the bottom of the page. If you have missing pages, they will be marked.
The system not only checks the missing pages for us, but there’s a tool which allows us to add those pages in a single click. Scroll all the way up and click onto the “Tools” tab.
On that page, scroll down again, locate the “Create default WooCommerce pages” and click “create page” button on the right.
Once you do that, on top of the page, you should see a message which says “All the missing WooCommerce pages successfully installed.”
To verify that everything is working as expected, go back to WooCommerce>Status and check to see if WooCommerce displays errors in the missing pages section.
It’s very likely that there will be a page which the tool can’t create. In this case, the terms and conditions page has not been established. So, let’s create our first page manually and assign it in WooCommece.
In Page tab, click > Add New Page.
Let’s add the title to our page and add a bit of text. The process is very straightforward and no different than writing an e-mail.
Enter the title in the first blank box and text into the second. You can format text, by using the toolbar above the text box. If you want to add an image or media file, use the “Add Media” button.
When you’re done editing text, click on the blue “Publish” in the right sidebar.
While we’re here, let’s create another page – the privacy policy. Publish the privacy policy.
Now we will let WooCommerce know, which page is our Terms and Conditions page, and which is our Privacy policy. Let’s assign the Terms and Conditions page first.
Go to Settings in the WooCommerce menu. Click the “Advanced tab.”
From a drop-down menu, select our Terms and Conditions page.
Click blue “Save Change” button at the end of the page.
Recently due to GDPR EU laws, WooCommerce developers started paying attention to customer’s data privacy. That’s why they have a feature where your customers need to add their consent and agree to your TOS and Privacy Policy.
Let’s assign the Privacy policy page next, and from there Woo will handle and add the checkbox in the checkout automatically.
In the WooCommerce tab, select settings and go to “Accounts and Privacy” tab. Locate the privacy page from the drop-down menu. Don’t forget to SAVE the changes.
Creating product categories
Website structure is a crucial detail. You should take the time to plan the structure, categories, and sub-categories of your products. Not only will it help your customers navigate with ease, but also search engines like Google and Bing, will pick up and “understand” your content better.
By categorizing products, you’re making it easier for your customers to find items they’re interested in.
Men’s Clothing > T-Shirts > Crew Neck is just one example of a clear and well-organized structure.
Take your time to map out the store categories and sub-categories for your store on a piece of paper. Once you created a clear categories and sub-categories structure, let’s add our first product category in WordPress.
Let’s add the first product category In Products tab > Categories.
The rest of the process is quite straightforward.
Add category name in the “Name field.” For example “T-Shirts.” If for any reason you’d want a different category URL (category/shirts and not category/t-shirts, you can enter “shirts” in the Slug field, otherwise skip it.
Add a description and add an image. Click add “category.”
Repeat this process for as many categories as you need. If you’re creating a sub-category, or as Woocommerce calls it “child” category, choose its main (parent category).
For example, if you created T-Shirts category and saved it and now want to have a V-Neck subcategory, when adding V-Neck category, select T-Shirts to be parent category from the drop-down menu.
Adding products
Now that we created product categories let’s create a product. Adding products in WooCommerce is pretty straightforward. The interface is very similar to adding a page or writing a blog post.
There are several types of products you can create in WooCommerce. In this article, I’ll show you two most important types: simple and variable product. Please check the documentation on products in WoooCommerce.
Creating Simple Product
- Go to WooCommerce > Products > Add Product.
- Enter a product Title and Description
- Select product category
- Scroll down to “Product Data”
- In General tab – set product price and optionally – sale price.
- In the inventory tab – check “stock management at a product level” and enter the stock information.
- Add product featured image
- Add product gallery image
- Add product’s short description
- Publish the product
Repeat this step and add as many products as you’d like.
Creating Variation Product
Creating a simple product wasn’t that hard, was it? But what happens if your product has a variation like different size or color? Luckily WooCommerce allows you to create variable products easily.
The beginning of the process is very similar to the simple product creation.
- Go to WooCommerce > Products > Add Product.
- Enter a product Title and Description
- Select product category
- Scroll down to “Product Data”
- From the product data drop-down menu, select “Variable product.”
- In the “Attributes tab,” create custom product attribute
- In the name field add attribute name, for example, “Size.” In the value field, add the attributes separated by the pipeline for example 8 | 9 | 10 and clicking “save attribute.”
- Head over to “Variations” tab, from the drop-down menu, choose “create variation from all attributes” and click “Go.”
- Select the attributes for your variation.
- Expand all variations and assign a photo for each if you want. That’s optional. The only required option is to set the price for each variation.
- Publish the product when you’re finished.
For more information on variable products, check this page. Add as many variable products as you’d like.
Now that we’ve added products, let’s configure our shipping methods.
Shipping rates and methods
If you’re going to sell a physical product, it has to be shipped to your customers, and you’ll want to charge shipping. In this step, I will show you how to create and configure shipping for your products. Due to the nature and variety of products, my setup might not fit your store, as the matter a fact it probably will not. Therefore, you’ll need to do a bit of researching and reading to find out how to configure shipping for your needs.
I’ll cover very basic, flat rate shipping, and assign two different shipping classes for the United States Region. That means, that video below describes that customers from the US, will get flat rate shipping per product, whether it’s a t-shirt or shoes.
Please, read the WooCommerce documentation. It covers stuff much more in-depth. The second video made by WPTuts YouTuber covers some advanced methods.
Since shipping is not universal and there are lots of variables that influence how you as a store owner are going to configure it, I strongly recommend that if you have the time, watch this excellent videos and read the documentation.
Installing plugins
Plugins are tools that enhance and expand the functionality of an already versatile WordPress + WooCommerce combination. They are pre-written pieces of code that someone made. Too many plugins may cause compatibility and performance issues.
Though it’s hard to resist, especially when you’re just starting out, install only plugins you need. Remove those you do not use, and most importantly use reputable free or premium plugins.
There is a variety of plugins you can use to improve your store. In this step, I’ll show you how to install one plugin – a contact form.
Adding Contact Form
The easiest way for a customer to reach out to you is through a contact form. In this part of the article, I’ll show you how to quickly create a contact form and receive customers questions directly to your e-mail.
In the dashboard, click Plugins > Add New.
In the search field on the right, type in Contact Form 7 and press enter. Once you see the Contact Form 7 plugin, click “Install Now” and then “Activate.”
Click “Plugins” > Installed Plugins and then find Contact Form 7 from the list. Click on the Settings.
From the list of contact forms, select the Contact Form 1, which was pre-created. You can also create your own from scratch. Click “Edit.”
Verify or change the email address here. When you make a change click “Save.”
Copy the code which appears below the headline section marked in blue. Right click on the mouse > Copy. Make sure to select an entire section, including the opening [ and closing brackets – ].
Go to Pages > All pages and when you see the “Contact Page” click onto “Edit.”
Right-click your mouse – and Paste the code. Make sure to click the “Update” to save changes and click on the Preview changes.
That’s it, your customers can now send you emails via the contact form on your contact page.
Customizing Theme
Adjusting the WordPress theme merely comes down to going to Apperance> Customization and changing the colors, text or adding elements via a very user-friendly builder, which requires zero coding skills to make a change.
In this part of the tutorial, I will show you how you can customize some of the things, but feel free to spend more time playing around in the Customizer. You will see the live-preview of changes, but always remember to save them by clicking “Publish.”
Customizing Header
In the Appearance > Customize click “Header” from the left-hand side menu. The expanded option allows you to adjust the header appearance and live-preview them at the same time.
The sidebar displays plenty of theme’s parts. Click on “Header”.
Change the colors of different header elements. The changes you make will be displayed in real time. Do not forget to click “Publish” to preserve the modifications you made.
Customizing Footer
Now that we applied the changes to our header, let’s change the footer a little bit and make it more appealing and user-friendly.
By default, the Storefront theme has four widgets columns – Footer Widget 1, 2, 3 and 4.
In your dashboard, Appearance > Customize.
Select the footer.
You can now customize the footer colors to the ones you fit, by clicking on the “select color” of the appropriate section. Do not forget to click the “Publish” button to save the changes.
Adding About Us in the footer
The About This Site located in the footer widget area 1 is too generic. Let’s change it and add a bit of personalization. In Appearance > Widgets, go to “Footer Column 1” and click on it to expand it. Click on the text widget inside it, and simply change the text to whatever you wish. After you make changes, click “Save”.
Adding Bitcoin Accepted Here Sign
Since you will be accepting Bitcoin payments in your store, it’s highly recommended that you add the “Bitcoin Accepted Here” sign, to let your customers know.
So, let’s customize the footer again.
In the dashboard on the left-hand side, go to Appearance > Widgets.
In this case, I’ll add the image in the second one, as it fits my design, but of course, you can add it whenever you wish.
Click on the “Footer Column 2”. Once the drop-down opens with a text widget, click on the text widget to expand it. Rest is easy, you can customize the text if you wish, but let’s now add the image by clicking on “Add Media.” Select the image you wish to upload and add it into the widget.
Now, the image might look a bit larger than it should, so we need to resize it. Inside the widget, click onto the uploaded image. The menu on top will appear and click onto the edit (pencil) icon.
Once the image editor opens, in the “Display Settings,” click onto the “Size” drop-down menu and choose “custom size.” I’ve found that 180 px (width) and 62 px height works quite okay for my setup and image, but you’re free to add any size you prefer.
When you select the size, click on the “Update.”
It’s mandatory to click on the “Save” or your edits will be lost, and you’ll have to start again.
Preview your changes and do the resizing again if necessary.
Adding Menus to Footer
Footer navigation is as important as the menu in the header. That’s why you should provide your customers with an easy way to find the most important pages of your website.
Since we’ve added the About Us text in Footer Widget Column 1, Store address and the Bitcoin accepted here sign in the Column 2, we will now add two navigational menus in Column 3 and 4.
In the Appearance > Menus. Click “Create New Menu.” Give your menu a name “Footer Menu 1” in my case, but you can use any name you want. In the “pages” tab, locate the pages you’d like to add to the menu. If you don’t see a certain page, click “View all” Select the pages and click “add to menu”. You can drag and drop and re-arrange the pages. When you added the pages, click “Save menu.”
In this particular menu, I wanted to add important store information. That’s why I had to use some items from the “Woocommerce endpoints” as well. The process is the same, select the pages from that tab and add them to the menu. Save menu.
Repeat the same process for the second menu. In the second menu, I’ve added pages like Shop, Blog, Shipping and refund policy, etc. If you don’t have such pages, you can add them by going to “Pages in your dashboard” and “Add new page.”
Repeat the same process for the second footer menu.
Now we created two menus. We need to add them into our footer widget areas.
Appearance > Widgets. From the Available Widgets, find “Navigation menu” and drag it into footer column 4.
Once the Navigation Menu widget is in your widget area, click on “Select Menu” and add first footer menu we created. Click Save. Repeat the same process for the second menu and save.
Our footer now looks very professional and most importantly provides essential information and good navigation for our customers.
Setting up BTCPay Server
Installing BTCPay WooCommere Plugin
While you’re on fire installing the plugins, let’s install the BTCPay plugin, which will allow us to connect our own Bitcoin Payment processing system on the VPS server and our Woocommerce store. The plugin is a “bridge” between the two.
For now, we will just install it.
At the time of writing, BTCPay Server has not been added to WordPress plugins repository, so we will need to install it manually. But do not worry, it’s easy enough.
UPDATE: BTCPay for WooCommerce is now added. You can install plugin directly from the plugins > add new > btcpay for woocommerce.
First, we need to download the WooCommerce plugin from the GitHub.
Go to BTCPay WooCommerce plugin section, and click on the “Releases” tab.
Locate the latest release and download a woocommece.zip file by clicking on it.
In your WordPress dashboard, click “Plugins > Add new” and “Choose File.”
Select the downloaded file marked usually as btcpay-woocommerce.zip and upload it to the website.
Click “Install Now” to install the uploaded plugin.
Do not close the page, wait for few seconds and click “Activate plugin” once the installation is completed.
- 1. Hosted solution
- 2. Self-hosted solution
Connecting to a Third-Party Host
BTCPay Hosts are running their own BTCPay Server. In their settings, they enabled registration for other people. You’re never uploading your private key to hosts.
There are free third-party hosts and paid ones. In this step, I will show you how to connect to a free host. For the up to date list of BTCPay Server hosts, check this document.
The process of connecting to a host is similar for each of them. We have to register and pair the API keys with your WooCommece Store. I will be using BTCPay Jungle host in this example, but feel free to use any other you prefer. If you’re hosting BTCPay server yourself, you can show this guide to your friends so that they can connect to your node and receive payment to their Bitcoin wallet.
Registering with a third-party host
The first step is to register and enter the login credentials. Head over to BTCPay Jungle.
- Click on “Register”
- Enter your e-mail and password
- Go to your e-mail inbox, and verify the e-mail address.
4. Log in to the host website
5. Click on the “Stores”
6. Click “Create new store”
7. Enter store name
8. Click “Create”
Pairing your store with a host
Now it’s time to pair your payment processor to your website. The BTCPay plugin we installed, is a bridge between your host and your store.
Go back to your store dashboard. WooCommerce > Settings > Payments. Click BTCPay.
- In the field, enter the full URL of your host (including the https) – https://btcpayjungle.com
- Click on the generated link which will redirect you back to your BTCPay host.
3. Click on request pairing
4. Approve the pairing
5. Copy the pairing code
6. Go back to your store and paste the pairing code
7. Click “Pair”
8. When you see the image, it means you successfully paired your host and your store
Installing BTCPay self-hosted Server
UPDATE. While this section is still valid, there’s now a much easier way to install BTCPay Server without ever using code. Please visit this article I wrote. and follow the video below.
You can still follow the instructions below, since you will need to register and buy hosting with lunanode, but the deployment method is much easier and takes less than 2 minutes.
Having your payment processor server handled by a third party has its pros and cons. The cost reduction and fewer efforts are are the most notable advantages. Relying on someone else’s full node brings privacy and trust issues. Furthermore, the self-hosted BTCPay offers additional features (Lightning Network) that only work if you’re the server admin (owner).
Once you outgrow the third-party solution, you should consider running your BTCPay instance on a VPS, for the ultimate privacy, versatility, and trustlessness.
There are many ways in which you can run your own BTCPay. If you’re technically advanced user, you can look into software documentation and choose the method which suits your knowledge.
In this tutorial, we’re focused on ease of use and cost-effectiveness. For that reason, I decided to showcase you a method which is the cheapest. Even though it requires that you add a piece of code here and there, provided that you follow the instructions, you shouldn’t have any issues.
This part of the article is based on Nicolas Dorier article. I’ve decided to modify it slightly so that it fits the style of the entire tutorial.
BTCPay Server can be deployed and run Bitcoin and Lightning network on any Virtual Private Server which meets the minimal requirements :
- 2048MB of RAM
- 80GB of storage
The 80GB storage is enough if you use the pruned mode. If you want to accept other cryptocurrencies supported in BTCPay, go with a larger storage. For Bitcoin and Lightning Network, 80GB is enough.
Buying the VPS
In this tutorial, I wanted to use a VPS provider which accepts Bitcoin payments. While the list of such services is quite decent, it was a real challenge for the entire community to find an appropriate solution and find the right balance between the price and offered features. The choice came down to Canadian VPS provider – LunaNode.
LunaNode has a large number of plans. For our purpose, the ideal solution would be the c.1 plan, but its price is 20$/month.
To save a bit of money, we will go with the m.2 plan 7$/month and purchase additional storage space for $2.4. We also have to pay $3.5 as a one-time only for CPU points so that our node can sync. The total cost would be $9.4/month + $3.5 for the first month.
Creating an account
- Click “Sign Up” and enter account information
- Verify your email address
- Click “Deposit Credit” to pre-fill your account
- Choose a payment method and the amount and click “Add Credit” button.
- Add your phone number and “Continue”
- Verify your phone by entering 4 digit PIN you received via SMS.
- Wait for your invoice confirmation (you will receive a confirmation e-mail)
1-CLICK BTCPay Server Deployment
From here there is no need to follow the rest of the guide on how to deploy btcpay. The video bellow will show you how to launch BTCPay Server in less than 2 minutes.
Creating the Virtual Machine
Wait for e-mail confirmation of your order. When you receive the confirmation email, click on the link. Log into LunaNode dashboard.
- Click “Create VM” on the left-hand side menu.
- Give your VM a name in the “hostname” field, for example – btcpay.
- Click on the “Memory optimized” plans from the tabbed selection
- Choose the m.2 plan
- Scroll down, and in the “Image” section, select the operating system for your machine – Ubuntu 18.04 64-bit.
- Create virtual machine.
Buying additional volume
Now that we purchased our computer and installed an operating system on it, we must add a bit of storage. In laymen words, we’re plugging a 80 gigabyte USB stick into our PC.
Let’s go ahead and purchase additional storage for our virttual machine.
- Go to “Volumes” in the dashboard.
- Select volume location from the dropdown menu, add name and write 80 in the size field.
- Create volume
Attaching a volume
We now created an 80GB storage, which we need to attach to our virtual machine.
- In Volumes, scroll down to the “Volume List”
- Find the volume you previosly created and click on to “Manage”
- When the volume opens, choose “Attach to VM”
- In the pop-up window, choose the virtual machine to which you want to attatch the volume.
- Attach volume to VM
Enabling CPU usage
So far, we created our machine, installed an operating system on it, created a storage volume and attached a volume to it. Because this machine needs to sync with bloca kchain, it needs a little bit of extra power. Let’s enable additional CPU usage. If you’re using a better plan than the m.2, you probably won’t need extra settup like CPU or additional volume.
- Virtual Machines > Find your machine > Manage.
- Click on the “CPU” from the tabbed menu
- From the first drop down menu “Pay for CPU utlization” – select YES.
- Click Update.
DNS Setup
Now that we set up our Virtual Machine entirely, we need to configure our DNS. The setup will be similar t whatever host you’re using, but since our entire store setup is on SiteGround, I’ll show you on the SiteGround platform.
- Log into your Sitegrond account.
- From the upper menu, choose “My Account“
- Click on go to C-panel.
- DNS Zone Editor
- Open a new tab in browser and go to LunaNode > Virtual Machine and select your VM.
- In General tab of your virtual machine, copy the “External IP”
- Go back to Siteground Simple DNS zone editor. In the add an a-record section, select the name and paste the external IP. If put the name to btcpay for example, sitegrund will immediatelly show you what will the the url location for your BTCPay Server. In my case, btcpay.wootoshi.com
- Click “add an a-record“
Deploying BTCPay Server
Now that we have our virtual machine ready, it’s time to run software on it. That software is BTCPay combined with few more things. This part of the tutorial may seem like a rocket-science, but in essence, you will just be copy-pasting stuff into the terminal of your PC.
Firt, open a terminal if you are using Mac or Linux. For Windows users, download and install Putty (Direct Link).
To open a terminal on Mac, open > Applications folder, then > Utilities folder. Open the Terminal application. You can also tell Siri to do it for you “Siri, Terminal”.
We will be pasting a few pieces of code into the terminal. The chunks of code will be marked as gray boxes. Copy each of these boxes of codes into your terminal, one by one. You have to do modifications and add your domain name/email in the bolded pieces.
Copy-paste the code into terminal by making modification in clearly marked areas. It’s not as complicated as it may seem at first, do not be scared! 🙂
First, you need to log into the virtual machine from your PC. To do that copy the command below, and replace the bolded part with your own domain name. Ubuntu is a default username for all LunaNode users. You are replacing the domain you configured in Siteground. In my example it’s btcpay.wootoshi.com.
Replace the domain with your own and paste in your terminal. Hit enter.
ssh ubuntu@btcpay.wootoshi.com
Enter the password. The password for your virtual machine can be found in LunaNode dashboard. Virtual Machine > General Tab (where you copied the external IP earlier).
Paste the password (it won’t be visible in terminal). Hit enter.
Copy the following commands without making any changes
sudo su -
mkfs.ext4 /dev/vdc mkdir /mnt/dockervolume mount /dev/vdc /mnt/dockervolume echo "/dev/vdc /mnt/dockervolume ext4 defaults 0 0" >> /etc/fstab
ln -s /mnt/dockervolume /var/lib/docker
apt-get update && apt-get install -y git
git clone https://github.com/btcpayserver/btcpayserver-docker cd btcpayserver-docker
export NBITCOIN_NETWORK="mainnet" export BTCPAYGEN_CRYPTO1="btc"
export BTCPAYGEN_LIGHTNING="lnd"
export ACME_CA_URI="https://acme-v01.api.letsencrypt.org/directory" ssh-keygen -t rsa -f /root/.ssh/id_rsa_btcpay -q -P "" echo "# Key used by BTCPay Server" >> /root/.ssh/authorized_keys cat /root/.ssh/id_rsa_btcpay.pub >> /root/.ssh/authorized_keys export BTCPAY_HOST_SSHKEYFILE=/root/.ssh/id_rsa_btcpay
Please replace the btcpay.wootoshi.com with your own name. Replace only the content inside the quotation mark, not the quotation marks. Copy – Paste.
export BTCPAY_HOST="btcpay.wootoshi.com"
Please replace the e-mail address with your e-mail. Replace only the content inside the quotation mark, not the quotation marks. Copy – Paste.
export LETSENCRYPT_EMAIL="youremail@example.com"
Copy-paste the following commands without making any changes. When you paste the last piece of code, wait for 5-6 minutes for everything to be installed.
export BTCPAYGEN_ADDITIONAL_FRAGMENTS="opt-save-storage-s"
. ./btcpay-setup.sh
. ./btcpay-setup.sh -i
When everything is installed, you’ll be able to access your BTCPay Server page by entering domain name in your browser. In my example that’s btcpay.wootoshi.com
Connecting BTCPay with your wallet
The process of connecting a wallet and your BTCPay server is the same for both third-party or self-hosted solution. Your private keys are never uploaded nor required by the BTCPay Server. You’re only uploading the xpub key of your wallet.
BTCPay works with any wallet, but I strongly recommend Electrum, if you use software wallet and Ledger Nano S for a hardware wallet, since it’s integrated into BTCPay. Of course, you can use any other wallet which gives you the ability to access your public key -xpub.
Input your xpub, then on the second screen, if you see a wrong address, input the first address of your wallet so that BTCPay can help you to configure correctly.
There are two ways in which you can connect your BTCPay to your wallet:
- Automatic with Ledger Nano S
- Manual with any wallet supporting xpub (Electrum recommended)
Connecting your wallet with Ledger Nano S
Please make sure that you have Bitcoin app installed on your Nano S, and that you’re using Google Chrome as a browser.
- Plug Nano S and enter Bitcoin App
- Go to Store > Settings
- Scroll down to Derivation Scheme, and click Modify next to the currency you wish to receive.
- Ledger Nano S will be detected
- Select your account
- Derivation scheme will be added automatically
- Select “Enable” checkbox at the bottom
- Click “Confirm”
- Compare the receiving addresses in your BTCPay and Ledger Nano S
Connecting your BTCPay manually
The second way, which probably most of you will use is to connect your wallet with BTCPay by using the manual method. The process is very similar to the one above, the only difference is – you have to set your derivation scheme yourself. In the previous step Nano S did it for you.
- Go to Store > Settings
- Scroll down to Derivation Scheme, and click Modify next to the currency you wish to receive.
- You will see a notification that no Ledger has been detected.
- Go to your wallet and copy xpub. In this example, in Electrum wallet, go to Electrum > Wallet Information > Public Master Seed
- Copy the Public master seed
- Paste the public master seed into BTCPay derivation scheme part
- Set up the address type. The Electrum will show your address type in Electrum > Wallet Information
- Select “Enable” checkbox at the bottom
- Click “Confirm”
- Compare the receiving addresses in your BTCPay and your wallet
Testing BTCPay Checkout
Before going live, it’s crucial that you test out your store. In this step, you need to put yourself in the customers’ shoes and see if everything works in your store as expected.
Watch the video below to see how you can set up the Electrum Gap limit and then the checkout process.
- Go ahead, add the item to cart.
- Checkout and fill in the required information
- Select Pay with Bitcoin
- Pay the order from your Bitcoin wallet
- Check if the order appears in your WooCommerce under WooCommerce > Orders.
- Check if the test payment appears in your Bitcoin wallet, Electrum for example
- Go to your BTCPay (self-hosted or third party, and check if the invoice is visible in > Invoices.
- Go to your BTCPay Internal Wallet and check if the transaction is there. > Wallet
You can create a low-valued item for the testing purpose.
Summary
I truly hope that you enjoyed the tutorial and that by now you have a fully functional e-commerce store powered by free and open-source software. I don’t want to leave you with providing some additional resources for learning.
Official documentation
Most of the questions you’ll have are probably documented in the official articles.
Managing your orders
Got your first order? Congratulations. Here’s how to manage the order properly.
Free Plugins
- Two Factor Authentication (log into WP with U2F – hardware wallet)
- Customer Reviews for WooCommerce
- WooCommerce Google Analytics
Search Engine Optimization
This is a bit advanced, but when you are ready to improve your Google rankings, here are two resources that helped me a lot.
Support groups
Marketing
Once you establish your store and learn how to use WooCommerce, make sure to announce it to the community on r/Bitcoin or Bitcointalk forum. If you’re accepting Lightning Network payment, add your store to Lightning network stores.
Ping me on Twitter if you built a store by following this guide, and I’ll retweet your website to our modest following and add also submit your site link to the BTCPay Stores directory.
The best marketing tip I can give you is: Help people, solve problems and create value. Be patient and do not give up. This entire article is a good example of how we at BitcoinShirt are creating a value for the community and in return expanding our brand-awareness.
Credits
I would like to thank following community members for proof-reading and helping me improve this tutorial by providing valuable feedback.
- Entire BTCPay Community (for inspiring me)
- Nicolas Dorier (helped with the VPS setup)
- Josh Humphrey from Bottomshelf Bitcoin Podcast (proofreading and feedback)
- Sosthène (proofreading, feedback and French translation of the video series)
- brittkelly (proofreading and feedback)
The stores made by following this tutorial
If you made your store and (or) began accepting Bitcoin payments by following the article, please let me know. It would make my day and show that my work was not in vain. I’d like to feature you. That’s the only thing I’m asking in return. You have no idea how happy I am when I see a new Bitcoin business or a service.
Thank you
We’ve come a long way. I would like to thank you and congratulate you on your new store. Thank you for being patient and following my not so perfect videos. Thank you for being brave and for accepting Bitcoin. Now you are one of us. Welcome to the community. I’m now sending you a huge cyber-hug.[/vc_column_text]
Disclaimer: Unlike the majority of similar tutorials on the internet, this one does not contain affiliate links. I was not compensated nor sponsored by anyone to write the article or recommend a particular service. My motivation behind it is to help newbies start their e-commerce store and embrace the Bitcoin. The services recommended here are the ones we’re using at our website here at bitcoinshirt.co. Technically speaking, people may argue that there are better solutions for hosting this setup, but I assure you that I’ve been thinking about the setup for a long time and came to a conclusion that the one presented here offers the best balance between ease of use, security, and price. By separating the BTCPay Server and website, we’re making sure that your store has minimal to no interruptions or downtimes. Price-wise the Siteground hosting I’ll use in this tutorial might not be the cheapest out there, but it proved reliable and easy to use for myself for four years so far. I want to keep this article up to date in the years to come. My greatest satisfaction would be if someone launches a store and starts accepting Bitcoin to help with the adoption.
Source: https://bitcoinshirt.co/how-to-create-store-accept-bitcoin loaded 11.11.2021