How to Set Up Your Website Hosting and Domain

The first step to having a website is figuring out what domain name you’ll use (hint: most of them are taken). There are many sites you can use for that such as domain.com. Don’t register a domain, just use the tool to find an appropriate one.

For this tutorial, we’ll set you up at BlueHost.com which is currently one of the cheapest hosts available. If you pay for one year, it will run up at just over $70.

bluehost_home

Enter your domain name and hit next.

bluehost_step2

Pick a plan based on your budget. Note that you have to pay up front.

bluehost_step3

You won’t need any additional features to get started.

bluehost_step4

Set up your secure password. If you aren’t already using a password management program like 1Password, we highly recommend setting one up.

bluehost_step5

bluehost_step6

Be sure to bookmark your BlueHost portal page. This is how you’ll manage your website’s hosting account.

bluehost_step7

You don’t need their help (they’ll want to charge you).

bluehost_step8

Continue on to the next step…

bluehost_step9

Now you’re at your CPanel Main menu. This is the main page for configuring your hosting environment.

bluehost_cpanel

Let’s set up your email account. Again, if you aren’t using a password manager like 1Password or Lastpass to generate and save passwords, you may want to look into it.

bluehost_email

After you create an email account, you can go to your webmail client provided by Blue Host here:

bluehost_accessing_email

Feel free to try various webmail clients or set up your own email client, if you have one. This example shows us using horde:

bluehost_email_home

Congratulations! You’ve successfully created a hosting account with Blue Host, obtained a domain name, set up your email address!

Installing WordPress on Bluehost

Once you have your domain name set up. Let’s go ahead and install WordPress.

Go to your cPanel in Bluehost.

bluehost_cpanel_wordpress

Click on WordPress in the Site Builders menu and then follow through the directions.

bluehost_wordpress

bluehost_wordpress_step2

In the next step, you tell them where to install WordPress and what name you want to give your site.

bluehost_wordpress_step3

If after you submit the page you get a warning about the directory already existing and data being overwritten like so:

bluehost_wordpress_issue

That’s OK. Just go ahead and resubmit the form.

bluehost_wordpress_installing

When that’s done, you’ll be shown your WordPress admin url, your login, and your password. Save this information in your password manager or some other secure location.

Your site now has WordPress on it so you probably want to install your theme.

Installing and Configuring FoxyShop and FoxyCart

A great tool for ecommerce in WordPress is FoxyShop, a free plugin to the FoxyCart ecommerce platform. This post will walk you though installing FoxyShop and configuring FoxyCart.

To install FoxyShop, search for it from the Plugins menu and click Install Now.

wordpress_foxyshop

Next, we need to activate the plugin.

wordpress_foxyshop_activate

Your FoxyShop plugin is now installed!

wordpress_foxyshop_activated

Now we’ll take a quick pause from this configuration and set up a FoxyCart store.

Go to www.foxycart.com

foxycart_merchant

foxycart_signup

foxycart_getstarted

Fill out the sign up form to create your account at FoxyCart.com. The screenshot below also shows how you can use a password management system like 1Password to generate a password for your account. You don’t have to have this, but it’s highly recommended. Either way, don’t share or reuse passwords online.

foxycart_password_management

foxycart_signup_form

The next step is to create your FoxyCart store.

foxycart_create_store

Next create your default product category. Since you’ll be doing a donation page, you don’t need any shipping.

foxycart_default_category

Then configure a Stripe payment gateway in test mode.

foxycart_payment_gateway

FoxyCart has a few main templates. The cart, checkout, receipt and email receipts. Each one can be configured to start with the standard default theme as shown below.

foxycart_cart_template foxycart_checkout foxycart_receipt

For the email theme, you’ll have to specify an email subject.

foxycart_email_1 foxycart_email_2

Congratulations! You’ve now set up your FoxyCart store! Let’s head back over to our WordPress admin and finish configuring our FoxyShop plugin.

foxyshop_setup_1

We’ll need to take some settings from FoxyCart and save them in your FoxyShop plugin, and some settings from FoxyShop to save over at FoxyCart.

foxyshop_setup_3

You can get the FoxyCart subdomain here:

foxycart_settings

For the Store / Advanced settings, you can paste the copied values from FoxyShop here.

foxycart_advanced_settings

After you save everything, your FoxyShop plugin should be installed.

foxyshop_setup_complete

You’ll also want to configure FoxyShop to support subscriptions for your online donations. You can turn that on here:

foxyshop_enable_subscriptions

That’s it! You’re all set with a powerful online ecommerce platform on your website.

Installing a WordPress Theme

Installing a WordPress theme is very easy and you can find thousands of themes. For this tutorial, we’ll walk you through installing a very specific theme customized for FoxyShop. Please download it using this link:

foxyshop-starter-theme-with-donation-single-product

It is a slightly modified version of the theme mentioned here because we’ve gone ahead and added code for custom price fields functionality for your donation page along with a couple pages for your checkout and receipt templates.

Now let’s go ahead and install this theme to your fresh WordPress install. Go to your domain /wp-admin where you should see this login screen:

wordpress_loginscree

Now go to where themes are managed in the Appearance section, click install a theme and then the upload link:

theme_upload

This is where you’ll upload the starter theme you downloaded above.

theme_choosefiletheme_choosingfiletheme_installnow

The below page will pop up and all you have to do is activate the theme.

theme_activate

Once the theme is activated, you should see it as a theme you can manage:

theme_setupgoodtogo

Congratulations! Your FoxyShop starter theme, configured for a custom donation page is now installed.

How to Set Up Stripe

Stripe is a great payment gateway to use with no monthly fees. This page will walk you through setting up your Stripe account and connecting FoxyCart to it so you can collect donations.

First, go to stripe.com

stripe_home

When creating any online accounts, we highly recommend using a password management tool like 1Password or Lastpass. Don’t ever reuse passwords.

stripe_signup

Continue and select the account settings.

stripe_setup stripe_account_settings

Click on API Keys and copy your Test Secret Key.

stripe_api_keys

Head over to www.foxycart.com and login to your admin store account.

stripe_configure_gateway_key

Login

stripe_foxycart_login

Click on payment in the menu and paste in your Stripe API key.

stripe_add_key

That’s it! You’re ready to start running some tests of your donation page. You should be able to checkout completely and see the money show up in your test Stripe account.

 

Create a FoxyShop Donation Page

This is the moment you’ve been waiting for. Setting up your own donation page!

Within the FoxyShop plugin, click on adding a new product. Set the base price to 0 and remove the quantity and weight fields.

foxyshop_add_product

You’ll also want to add an image for your product.

foxyshop_add_image

The goal here is to get a super flexible donation page which will allow your constituents to pick a specific donation amount, specify a custom amount, and decide if they want to give a one-time gift or a recurring gift.

donation_page

For this product, check the two checkboxes to “Force Immediate Checkout” and “Empty Cart Before Adding Product” as shown below since we won’t really need the modal cart functionality.

To get the donation page functionality we need, we’ll need to set up some specific product variations.

foxyshop_product_setup_donation

Create a product variation called “Donation” of variation type “Radio Buttons” with the following data:

$5{p:5}
$10{p:10}
$25{p:25}
$100{p:100}
Other{dkey:custom-price}

Next, create a “Single Line of Text” variant named “Donation Amount” and set the “Display Key” to “custom-price”

Finally, create a “Drop Down List” variant named “Frequency{sub_frequency}” with these values:

Just Once{v:}
Every 2 Weeks{v:2w}
Every Month{v:1m}

Save the page, and you should be good to go. To add a link to this page in your menu, create a new page in WordPress of format “link” and point it to the url of your products.

Customize FoxyCart Checkout and Receipt Templates

To streamline your constituent’s donation experience, you’ll want a custom checkout and receipt template. Simply create two new pages called “checkout” and “receipt”. The content of the pages should be empty.

Next, go to FoxyShop‘s settings and add “checkout, receipt” to the list of pages that should skip the FoxyCart includes on these pages.

foxyshop_settingsfoxyshop_skip_includes_pages

Now go into FoxyShop and click tools. Add the URL to these pages and note, you have to use your site’s domain name, not what is shown here in the picture.

update_templates

Make sure to click the Update Checkout Cache and Update Receipt Cache buttons. If you make any major changes to your site’s header or footer (such as adding new pages to a menu), you’ll also want to come back here and update these caches again.

 

How to Activate FoxyCart and Stripe to Collect Live Donations

If you’re run plenty of tests on your donation page and you’re confident your site is ready to start collecting real, live donations, this page is for you! If you made it this far with the help of this tutorial, please contact Luke Stokes at FoxyCart.com and let him know you enjoyed this tutorial. We might be able to get you a discount on your account.

First, let’s activate our Stripe Account. Note: this process may take some time in order for your account to be verified with them.

Login to stripe.com and click on the “live” slider button. Then click Activate account.

stripe_activate

Fill out the application form and submit it to Stripe.

stripe_activate_application_1 stripe_application_step2

Now let’s activate your FoxyCart.com account. Login and click the Start My FoxyCart Subscription button.

foxycart_activate

Select Monthly (unless you can afford the annual payment, which gives you a discount).

stripe_pay_for_foxycartstripe_pay_for_foxycart_2

Now complete your FoxyCart checkout.

stripe_pay_for_foxycart_checkout stripe_pay_for_foxycart_checkout_2

Now that your FoxyCart subscription is live, you can go back to Stripe.com and copy your Live API Key.

stripe_live_key

Then paste the live key in your FoxyCart admin under the payment settings.

stripe_foxycart_set_live_key

Your site is now live, ready to accept donations!