Set up Your Own Custom Ecommerce Solution Using WordPress
Interested in learning how to set up your own custom ecommerce solution using WordPress? If so, great! I’m going to take you through the exact process I use. Step by step.
I’ll include the hosting I use, the plugins I use and the theme I use.
Of course, you don’t have to copy everything I do.
- You might use a different PageBuilder.
- You might use a different WordPress Theme.
- You might sign up with a different hosting company.
All those considerations (and more) are up to you.
But for those new to this or wanting to find out about another way of doing it, it can be helpful to see a real storefront built with real designs.
I’m going to peel away the front-facing look of my website. I’ll show you all the behind-the-scenes steps I go through.
I am assuming, though, that you are interested in using the combination of WordPress and WooCommerce.
For a custom ecommerce solution, this is not the only way to sell stuff online. My way works for me, but it might not work for you. And that’s okay. You’ll most likely want to research this and test it out.
One day, hopefully, your ecommerce business will grow to a big operation with huge sales and web traffic. Then you’ll want dedicated web hosting with a robust provider, like WP Engine.
These services are more expensive, though, and not necessary for a small start-up site.
BlueHost plans currently start at around AUD$6:00 per month for a single site. These hosting providers are amongst only three officially recommended by WordPress.org. (The other is DreamHost, but I’ve never used them so I can’t give a personal recommendation).
Installing Your Theme and PageBuilder
Once you’ve signed up for web hosting, you’ll need to install WordPress. Most hosting companies like BlueHost will allow you to do a ‘one click’ install. You’ll just have to specify your login or ‘admin’ name, password, contact email address and blog (website) title.
When you login to the back end or Dashboard of your WordPress site you go to Appearance – Themes – Add New. Then you upload, install and activate a ‘zip’ file of the theme you’ve purchased.
The theme with its own PageBuilder I use and recommend is Divi, from Elegant Themes (affiliate link). Elegant themes has a huge library of Divi tutorials at: https://www.elegantthemes.com/documentation/divi/.
NOTE: to be able to keep getting updates for your Divi Theme (very important) you’ll need to add your Personal API key and username from your Elegant Themes Account to the ‘Updates’ section of the ‘Divi Theme Options’ in your WordPress dashboard. (Remember to click on ‘Save Changes’ once your username and API key have been added).
On your WordPress dashboard, go to Plugins – Add New – then type ‘WooCommerce’ in the top right ‘search plugins’ bar.
WooCommerce should appear at the top of the list of plugins. Next, go to the WooCommerce plugin, click ‘Install Now’, then ‘Activate’.
Go through the WooCommerce set up wizard to add your currency, store location, etc.
For security, back-ups, accepting secure online payments and other features you will need a range of additional plugins. You can refer to my article on this subject for a comprehensive list.
Set Up Your Website Pages
When you set up a new page with Divi, it will prompt you to choose from 3 options: ‘Build From Scratch’, ‘Choose A Pre-Made Layout’ or ‘Clone Existing Page’ (import from your library).
If you select ‘Choose A Pre-Made Layout’ you will be presented with a huge range of well over 100 Layout Packs.
Select the Layout Pack you want to use. Then choose the relevant page, such as Contact, or About.
Within a few seconds this layout will load and you can start making your modifications.
Using A Pre-made Layout
Divi comes with an extensive range of pre-made layouts. In this example, I will be using the Fashion Layout Pack as a pre-made storefront template, then making modifications along the way.
Create Your Menus
After creating your pages, you’ll need to create your main, or primary menu in WordPress.
To create your primary menu, go to the WordPress Dashboard and do the following:
Navigate to Appearance – Menus
- Select the “Create a new menu” link at the top of the page.
- Enter a menu name (I just call it ‘Primary’ for simplicity’s sake).
- Select your menu items in the left toggle under Pages.
- Click Add to Menu
- Organize your menu items by dragging them into place (I place them in order starting with Home, About, Contact, Terms, etc.).
- Under menu Settings at the bottom of the page, select “primary menu” as the display location.
- Save menu
Repeat this process to specify your Secondary and Footer menus.
Choose Your Colour Palette
Divi comes with a standard colour palette, but you shouldn’t accept that as is. An appropriate, consistent colour palette is a hallmark of a professional website.
Variable, clashing, inconsistent colours on a website scream ‘amateur’, and will put off potential customers.
If you need help deciding on the right colour palette for your online shop, there are websites that can guide you.
I recently used https://coolors.co to generate my unique colour scheme. I typed in the type of website or a keyword I wanted in the filter tag under ‘Explore’, and it generated some colour schemes for me to choose from.
These colour schemes are represented as vertical bars of colour, with hexadecimal numbers to define them.
You can also click on each hexadecimal number to edit it, if you want to adjust the colour to the exact hue and intensity you’re looking for.
Once you’re happy with your colour scheme, give it a name, save it, and keep a record of it for future reference. You will need these hexadecimal numbers for the next step.
Set Your Default Colour Palette
Once you’ve chosen your website colours, you can set the default colour palette in Divi by going to your WordPress Dashboard and navigating to Divi – Theme Options. And right there in the general tab you will find the option listed: Color Pickers Default Palette.
Add the colours you need there by clicking on the colour and changing the hexadecimal number to match your defined colour palette.
It is a good idea to keep the colour white (#ffffff) and a couple of dark colours to be used for styling backgrounds and text easily.
Choose Your Global Accent Colour
To change your ‘Global Accent Color’ in your WordPress theme, go to Divi – Theme Customizer – General Settings – Layout Settings and find the Theme Accent Color option at the bottom.
You will notice the new colours available to you in the colour palette since you updated the default color palette in your Theme Options.
Change the Theme Accent Color to one you’re happy with. Then, save and publish your settings.
Choose Your Fonts
Under General Settings – Typography you can choose your default font for headers, including sub-headings, and body text.
It’s fine to have different fonts for headers and body text, but I recommend having a legible sans-serif font for your body text. Also, steer clear of overly-fancy, curly or script fonts or weird fonts (no comic-sans!), as these can look tacky and ruin legibility of your important content.
Don’t use more than 2 different fonts, as a rule. Make them easy to read, at least 16 px, black or dark on white as a rule.
Again, inconsistent, random use of fonts is a hallmark of amateurs, and should always be avoided.
Style Your Header
To style your header go to the Theme Customizer.
Simply go to your WordPress Dashboard and navigate to Divi – Theme Customizer – Header & Navigation.
You have a few Header styling options to choose from including Centered, Centered Inline Logo, Slide In and Fullscreen.
I always choose the Default option, with the logo on the left and menu items on the right. This is the configuration most people expect and look for. But if you believe your design warrants a variation, you have these options to consider.
Under Header Format, you can choose whether to show your social media icons as well as a search icon, and add your phone number and email address – recommended, especially for e-commerce sites.
Style Your Bottom Bar
You can style the bar at the bottom of your page, called the ‘bottom bar’ also from the Theme Customizer.
Go to your WordPress Dashboard and navigate to Divi – Theme Customizer – Footer – Bottom Bar.
My advice is to give the bottom bar a background colour that is a slightly darker shade of the footer section’s background color sitting directly on top of it. Use one of the dark colours you defined in your colour palette.
You can disable, or turn off the footer credits, but I encourage you to add your own credits and copyright notice in the ‘Edit Footer Credits’ text box.
Build New Pages or Posts With Saved Elements
You can save a lot of time and maintain a consistent layout by saving, then reapplying key elements in Divi.
Typically, you will set up a page layout with a header, content section, and footer section. Or you might want to create a more elaborate landing page.
An obvious one is your page, or section header. Often you have a large image, background colour, heading and subtitle. All the styling of these headers or other sections can be saved in your Divi library.
With the section selected in the Visual Builder, click on the down arrow in the top left menu bar of the selected section. In the ‘Add to Library’ box that pops up, type in a Template Name, then click Save to Library.
When you want to use the same styling for another similar section later on, you can simply add this from your own Divi library when using the Visual Builder.
You can even set certain elements like Footer sections, Call to Action Modules, Button Modules, and Email Optins as ‘Global Items’. This is useful for elements that need to be deployed throughout your site but require the same uniform style and content. Updating one will update all.
When you ‘Add to Library’ an element, after giving it a Layout Name you can choose to tick the box under ‘Save to Global’ – Make this a global item. It’s that simple!
Build or Update Your E-commerce Site
Whether you build site from scratch, or use a theme with PageBuilder application like Divi, you still need to apply good design principles, as referred to in this article.
PageBuilders don’t replace good, well-planned design, but they do make the process a lot more efficient and less time-consuming.
Don’t forget to test your final design for mobile-friendliness. Your products, forms and shopping cart must work seamlessly on mobile devices.
If any of this is overwhelming or too much to take in, don’t worry. You can do this yourself if you take the time, and go through the steps.
Alternatively, if you have the cash, you can always pay someone to do it for you. It’s up to you!
Even if you would just like to have a friendly chat about this, contact me today – I’d love to hear from you!
To your online success,