E-commerce, digital items, and SSL certificates

So, you want to create an online marketplace for your goods or services. What do you need to know? At this month’s meetup we covered the basics of e-commerce.

For the presentation, I setup a demo site on my laptop using MAMP. I suggest setting up a development site so you don’t mess with your existing site.

To keep things simple I’m going to talk about e-commerce in for key areas

  • Storefront
  • Inventory
  • Payment
  • Orders/Shipping

What do do. First, setup a site. Pick a theme. For the demo I used the eStore theme on the WordPress.org theme directory. You can filter for themes that are tagged for commerce!

For the purpose of the demonstration I chose the WooCommerce plugin. Why?

  • It’s popular – 3 million installations
  • Owned by Automattic (previously WooThemes)
  • Great reputation
  • Flexible ecosystem

Once installed, WooCommerce walks you through the process of setting up the basics of your store. Once setup, and depending on the kinds of items  you’ll want to sell you may need to set up attributes, shipping, categories and other settings. You can do this at any time, but if you what you need to set up (like t-shirt sizes and colors) you should do this first. Then, start start adding Products!

During the presentation I roughly followed the handy guide for getting started from WooCommerce.

Payment Processing

And then there’s payment processing. This is one of the trickier aspects of e-commerce. For most people WooCommerce can do what they need 90% of the time. Even with built-in payment process solutions like PayPal and Stripe. However, There are a few things to consider.

Know your audience! What will they be more likely to use? You don’t need a thousand options if most folks your serve have an Amazon account.

 

What about digital items?

Tips for selling digital products with WooCommerce

SSL Secure Sockets layer

If you’re using a payment processor most handle the transaction and then return the visitor to the site. However, with some, like Stripe, you can perform the entire transaction “on site” (or the appearance of on-site). You’ll need a SSL certificate for it to work at all. You also are storing personal information (name, phone, address). Keeping as much information being sent over the wire secure is a good idea.

So, what does having a SSL certificate mean? It means that all communications between a user on their device and your website is encrypted. Think of it as a secret handshake between the two computers that prevents anyone seeing the information being sent (like over that open Wi-Fi at the local coffee shop!) during transmission.

There are many ways to add an SSL certificate. The easiest way, but potentially the most costly is to contact your hosting company. Bluehost and others companies offer it as an add-on – sometimes free, sometimes at a cost.

You can also setup other options, but they require a little technical know-how and time to implement.

  • Let’s encrypt! – https://letsencrypt.org
  • Cloudflare – https://www.cloudflare.com/plans/

Other reasons to have an SSL certificate

It builds trust. When people see that your site is secure they are more likely to trust the site and complete their transaction. Recently more modern browsers alert users when the site is not using an SSL certificate. Having a certificate ensures that your visitor won’t see conceding message about your site not being secure. Finally, Google rankings are slightly improved for sites that have an SSL certificate over those who do not.

Learn more about WooCommerce at WordPress.tv

What the heck is PHP?

These are the presenter notes from our January 2018 meetup.
According to Wikipedia, “PHP is a server-side scripting language”. What the heck does that mean?
Server-side – a server is just a type of computer, like your phone or laptop – with a specific purpose – like your phone or laptop. Server-side means that all the work in creating the web page created in PHP is done on the server. The client (server/client relationship) is your computer/device that just displays the resulting HTML, CSS, and javascript.
Scripting – the code is not complied into machine language – it remains human-readable
Language – a set of instructions (and rules) to make computers do what we want them to do. Every time, even when they break. 🙂

Best practices

Some solid advice, adapted from Presscoders.com.
1. See if a theme option will do the trick first
2. Use CSS to manipulate design (child theme style.css file)
3. Use functions.php for structural changes
4. Add new template files to a child theme
5. Use a plugin (only for major feature additions)

Let’s write some PHP

First, FTP or otherwise access your we server. Create a new document and call it “neat.php”. PHP files are just text files so you should be able to open the file in your text editor of choice.
Copy the following to your “neat.php”, save the file, and then open the file in your web browser. http://yoursitename.com/neat.php
<?php
echo “Hello world”;
?>
You should now see the words “Hello world” in your browser.
The  text you copied over is PHP! The first line let’s the server know the following text should be treated as PHP code. The second is our code. “echo” is a PHP command that outputs the strings (the text) it is being passed as arguments. So we’re saying, “Hey PHP, output the following bit of text. The colon is an instruction separator. We’re telling PHP that we’re done with this instruction. The last sentence tells the server, We’re done running PHP. You can stop now.
Here’s some PHP inside of an HTML element.
<div style=”border: 3px solid red;text-align:right;”>
<?php
echo “Hello world”;
?>
</div>
This is our same PHP code as before, but this time its inside of an HTML div. As you can see in this very simple example, your HTML and PHP can live inside of one another. Having HTML inside of PHP is a little more complicated to explain, but also possible.

How does WordPress use it?

WordPress uses PHP across the software. Most commonly for most WordPress users you’ll find it inside of your Theme files. These files are called templates.
Using your text editor, open the “footer.php” file in your theme of choice. Each theme’s file will look differently, but you can see that the code inside the template defines what the footer (bottom most section of your pages) will look like.
Some themes are broken up into even smaller units like for instance:
“template-parts/footer/site-info.php”

What can I do with PHP to modify my WordPress site?

Everything!
Small little changes like we did above in our child theme. The best way to learn when starting out is to just go muck with something, save the file and see what happens. If something breaks or doesn’t behave like you expect, undo your changes, save, and try again.
The loop is the way WordPress builds individual posts. You an modify things inside the loop so it applies to every post that appears – either by itself or in a list like say your blog or a category.
functions.php
One way to modify your WordPress site is by editing your theme’s functions.php !
Here’s an example that allows you to customize the login form users see when administering a site.

Themes and plugins are written in PHP!

Themes
You can hack an existing theme, or create your own. Instead of starting from scratch, use a starter theme!
As an aside: Starter themes are really basic themes that provide a base for you to build your own custom themes without starting totally from scratch. They often contain little to no styling.
A popular example:  http://underscores.me
Let’s mess around a little with our footer.php. What happens if you add each of these lines to your code? Where does it break or not work?
<?php wp_title(); ?>
<?php $author = get_the_author(); ?>
<?php $author = get_the_author();
echo “$author”
?>
More on WordPress functions:
Plugins
Since PHPis a scripting language and not compiled, we can view and modify any of the code we see in WordPress – including plugins!
One of the most simple and popular plugins that you can look at to see how it works:

Extend WordPress

You can also use PHP to store, retrieve, and modify content from the database! WordPress stuff, or you can extend it to your own schema!
One of my favorite is Advanced Custom Fields – gives you control over how content is entered, and then uses short PHP snippets to include in your theme files.

What do I do when I’m stuck?

Debugging errors in WordPress/PHP is something you’ll have to run into when working with your site. A few resources:
Google! Just enter the most generic parts of the error message with the word “WordPress: will lead to discussion (and hopefully answers) where other people have encountered similar issues.

More resources