Posted on

How to Fully Uninstall a WordPress Plugin

Plugins can be a great boon to WordPress sites, but there are times they outlive their usefulness.

If a plugin fulfills a function you don’t need anymore, stops being updated, or appears to slow your site down, it may be time to remove it.

Normally to delete a plugin you would go to the Plugins section of the admin, deactivate it first, and then select the delete option. Then you’re done… right?

Unfortunately, not always.

Uninstalling a plugin should be a simple task, but it is not always the case. Plugins can store data in a number of places, and unfortunately, not all developers include an uninstall script which fully removes that data.

In this post, we’ll cover:

What plugins typically store data?

Plugins which ask for user input are the most likely to store data.

They include:

  • Form plugins
  • Caching plugins
  • SEO plugins
  • Security plugins

Where do plugins store data?

The wp_options database table stores information on which plugins are active, and what settings they have active.

Custom database tables are created by some plugins to store data.

Plugins may modify WordPress’ wp-config.php file. If your site runs on Apache, the .htaccess file may have rules added to it. These could include security or caching settings, for example.

Files and folders within the wp-content folder may be created by plugins too.

To identify what’s added by plugins, it helps to know what’s in a standard WordPress install.

What’s in a new install of WordPress?

Database tables

A new install of WordPress will have the following tables:

  1. wp_commentmeta
  2. wp_comments
  3. wp_links
  4. wp_options
  5. wp_postmeta
  6. wp_posts
  7. wp_termmeta
  8. wp_terms
  9. wp_term_relationships
  10. wp_term_taxonomy
  11. wp_usermeta
  12. wp_users
Tables in a single vanilla WordPress install
Tables in a single vanilla WordPress install

If you set up a multisite you’ll have those 12 tables plus a few more:

  1. wp_blogs
  2. wp_blog_versions
  3. wp_registration_log
  4. wp_signups
  5. wp_site
  6. wp_sitemeta

Your WordPress install might have a prefix other than wp_ if you chose another one on install, or have altered it through the use of a plugin. (For simplicity I’ll continue to mention wp_ as a shorthand for your database table prefix.)

For each new site you add to a multisite, there will be another ten tables starting with wp_2_ etc.

wp-content folder

The basic WordPress folder has an index.php file and two subfolders:

  • plugins
  • themes

A mature install will likely have other subfolders which may include the following:

  • languages
  • mu-plugins
  • upgrade
  • uploads

Any other folders present may have been created by a plugin.

How easy is it to fully delete plugins?

I tested this out on a single WordPress install with some existing plugins. I tried installing and deleting a number of popular plugins to see how easy it was to uninstall them completely.

All the plugins I tested stored information in wp_options.

Plugins that have uninstallers in wp-admin

Gravity Forms

What’s stored?

Gravity Forms creates 9 new database tables:

  1. wp_rg_form
  2. wp_rg_form_meta
  3. wp_rg_form_view
  4. wp_rg_incomplete_submissions
  5. wp_rg_lead
  6. wp_rg_lead_detail
  7. wp_rg_lead_detail_long
  8. wp_rg_lead_meta
  9. wp_rg_lead_notes

How should you uninstall Gravity Forms?

  1. Go to Forms > Settings > Uninstall.
  2. Click the button.
  3. Choose OK.
  4. Go to the plugin screen to fully delete the plugin.
Gravity Forms Uninstall dialog
Gravity Forms Uninstall dialog

Is everything deleted?

All 9 custom tables are deleted, but some data remains in the wp_options table.

Wordfence

What’s stored?

A whopping 23 database tables are created by this popular security plugin.

  1. wp_wfBadLeechers
  2. wp_wfBlockedCommentLog
  3. wp_wfBlockedIPLog
  4. wp_wfBlocks7
  5. wp_wfConfig
  6. wp_wfCrawlers
  7. wp_wfFileChanges
  8. wp_wfFileMods
  9. wp_wfHits
  10. wp_wfHoover
  11. wp_wfIssues
  12. wp_wfKnownFileList
  13. wp_wfLeechers
  14. wp_wfLocs
  15. wp_wfLogins
  16. wp_wfNet404s
  17. wp_wfNotifications
  18. wp_wfPendingIssues
  19. wp_wfReverseCache
  20. wp_wfScanners
  21. wp_wfSNIPCache
  22. wp_wfStatus
  23. wp_wfVulnScanners

You’ll also see a wflogs folder in wp-content.

How should you uninstall Wordfence?

An alternative to Wordfence’s manual uninstall is adding the Wordfence Assistant plugin to do the job.

To use Wordfence Assistant, deactivate and delete Wordfence as normal. Then in Wordfence Assistant’s options, choose the Delete All Wordfence Data and Tables option.

Remove all Wordfence data in the database and elsewhere
Remove all Wordfence data in the database and elsewhere

Is everything deleted?

Using Wordfence Assistant, the database and files were purged of Wordfence content.

Plugins that have uninstall scripts

Well developed plugins have an uninstall.php file to take care of the uninstall process.

For example:

Broken Link Checker’s uninstall script removes its 4 database tables.

Relevanssi’s uninstall script removes 3 tables created by the plugin.

WP Rocket has an uninstall script which is supposed to remove all data and files including the advanced-cache.php file.  When I tried it, I noticed that this file stayed put after the plugin was gone.

Other plugin uninstall methods

If there is no uninstall script, some plugins have provided other suggestions for a complete uninstall.

NextGEN Gallery

This plugin creates 3 database tables:

  • wp_ngg_album
  • wp_ngg_gallery
  • wp_ngg_pictures

It also creates an ngg folder within wp-content.

You will need to manually remove the 3 tables and the folder, as they aren’t removed on uninstall. Try this advice for a full NextGen Gallery uninstall.

WooCommerce

WooCommerce creates 16 tables:

  1. wp_wc_download_log
  2. wp_wc_webhooks
  3. wp_woocommerce_api_keys
  4. wp_woocommerce_attribute_taxonomies
  5. wp_woocommerce_downloadable_product_permissions
  6. wp_woocommerce_log
  7. wp_woocommerce_order_itemmeta
  8. wp_woocommerce_order_items
  9. wp_woocommerce_payment_tokenmeta
  10. wp_woocommerce_payment_tokens
  11. wp_woocommerce_sessions
  12. wp_woocommerce_shipping_zones
  13. wp_woocommerce_shipping_zone_locations
  14. wp_woocommerce_shipping_zone_methods
  15. wp_woocommerce_tax_rates
  16. wp_woocommerce_tax_rate_locations

WooCommerce recommend adding a line to wp-config.php for a completed uninstall:

Loading gist abrightclearweb/5c58577f8d5f1aba20535cc458a58d38

I tried this twice and didn’t get a perfect uninstall either time. Remember to double-check that the data has gone.

Plugins that leave data behind

These are some plugins I found which don’t remove all data when uninstalled.

Akismet

Akismet stores a lot of data in the wp_commentmeta table, which remains on deletion.

Mine had nearly 6,000 rows!

EWWW Image Optimizer

This plugin stores data about the path to your images, their original size, size after compression and % reduction in the table wp_ewwwio_images. This table stayed when I removed the plugin, as did an ewww folder.

WP All Export

4 tables are created by this plugin:

  • wp_pmxe_exports
  • wp_pmxe_google_cats
  • wp_pmxe_posts
  • wp_pmxe_templates

These are not removed when the plugin is deleted.

Yoast SEO

Yoast SEO creates 2 tables:

  • wp_yoast_seo_links
  • wp_yoast_seo_meta

It also stores some data in:

wp_usermeta – contains some meta_key values like wpseo_title.
wp_postmeta – contains some meta_key values for various post ids, including:

  1. _yoast_wpseo_linkdex
  2. _yoast_wpseo_title
  3. _yoast_wpseo_metadesc
  4. _yoast_wpseo_focuskw
  5. _yoast_wpseo_focuskw_text_input
  6. _yoast_wpseo_primary_category
  7. _yoast_wpseo_content_score

A deactivate/delete uninstall leaves all this data behind.

How do you clean up after messy plugins?

Firstly, back up your site (files and database) in case you make a mistake. Super important!

WPMU Dev members can use Snapshot Pro for backups.

You’ll be using FTP and SQL queries for the clean up. If you’re not comfortable with these, have an expert on hand.

Delete pages

For any plugin that created pages, delete them if they weren’t removed on uninstall and you don’t need them any more. Remember to 301 redirect the page permalinks.

Remove unwanted database tables

Any tables which are not part of the usual WordPress install are likely to be tables added by plugins.
You can use phpMyAdmin, a database manipulation tool available on most hosting control panels.

Use the Drop option to delete individual tables from unwanted plugins.

phpMyAdmin showing tables with options including Drop
phpMyAdmin showing tables with options including Drop
phpMyAdmin’s warning confirmation dialog for dropping a table
phpMyAdmin’s warning confirmation dialog for dropping a table

Or select multiple tables and select Drop from the With selected dropdown, then confirm.

Dropping multiple tables with phpMyAdmin
Dropping multiple tables with phpMyAdmin

Another option is to use the Advanced Database Cleaner plugin to inspect your tables within WordPress.

There’s a button to detect orphaned tables, though you need to upgrade to the Pro version to use it.

Any plugin-related tables that you’re sure you don’t need you can delete. Check them and choose Delete from the Bulk Actions dropdown.

Advanced Database Cleaner shows all your WordPress data tables
Advanced Database Cleaner shows all your WordPress data tables

Delete redundant folders from wp-content

FTP into your site and check the contents of files and folders you don’t recognise. If you’re sure you won’t need them, delete them.

For example:

  • EWWW Image optimizer adds an ewww folder.
  • NextGEN Gallery adds two folders – gallery and ngg.
  • WP Rocket adds advanced-cache.php and a cache folder.
The EWWW folder within wp-content
The EWWW folder within wp-content

Check wp-config.php and .htaccess files

These are critical files, so copy them first before editing them!

If you spot any lines in wp-config.php added by plugins you’ve deleted, remove them.

In .htaccess look for a # followed by the plugin name and remove any lines in between.

Part of the code created by iThemes Security in .htaccess
Part of the code created by iThemes Security in .htaccess

Remember to upload the updated file(s) when you are done.

Cleaning up transients and cron jobs

Transients are data stored temporarily by WordPress. Checks for WordPress updates and notices on the admin dashboard are stored in transients. Transients are (mostly) set to expire after a set time period, and are recreated over time.

Some plugins create transients. The Transients Manager plugin will help you identify which plugins have done so, and you can delete any you no longer wish to keep.

Transients Manager shows transients and expiry date
Transients Manager shows transients and expiry date

Deleting all transients won’t remove them all – the WordPress ones remain.

Cron jobs are scheduled tasks that can be run on a web server. WordPress runs its own cron jobs through WP-Cron.

WP Crontrol plugin will show you what cron jobs are running and when.

Some cron jobs revealed by WP Crontrol
Some cron jobs revealed by WP Crontrol

You can modify or delete the cron jobs, but some core cron jobs can’t be deleted.

Unfortunately you’re at the mercy of the plugin developer when it comes to naming cron jobs. If the name of a job is unclear, don’t delete it, as it may affect the performance of a plugin you depend on.

Cleaning up your database tables

Now it’s time to run some database queries for a final clean up.

Akismet

Did you use Akismet? This is a tidying up task you can run even if you continue to use the plugin, since Akismet generates a lot of table rows.

On the wp_commentmeta table, run the SQL query:

Loading gist abrightclearweb/4a445d1845bd09bbdf3958ada0381968
Querying wp_commentmeta to find Akismet data
Querying wp_commentmeta to find Akismet data

(Remember to change wp_ in this query if you have a different table prefix.)

Then assuming the query found some rows, run the query

Loading gist abrightclearweb/d6e134165204dfcffc3414b114d11aae
Deleting Akismet data from wp_commentmeta
Deleting Akismet data from wp_commentmeta

You should now have a much lighter wp_commentmeta table.

Yoast SEO

Yoast data seems to lurk everywhere!

Try this SQL query on the wp_postmeta table:

Loading gist abrightclearweb/eda7a8e9764fc2698b6615f6d726a2a4
Yoast data in wp_postmeta
Yoast data in wp_postmeta
Loading gist abrightclearweb/d1cd5492b2aa8ea03410bd2b1499f0f9
558 rows of Yoast data were removed from wp_postmeta
558 rows of Yoast data were removed from wp_postmeta

For wp_usermeta try:

Loading gist abrightclearweb/bddca929c0fb2ef6513fd705feffb069

wp_options table

Most plugins leave some entries in the wp_options table. If you want to go the whole hog in cleaning you can remove the rows related to your deleted plugins.

Use similar queries to the previous ones to find relevant rows, and if any are found, delete them:

Loading gist abrightclearweb/4623fb979c4036699fbd0498051e9e98

Replace the pluginname with the name or abbreviation of the plugin you’re looking for (keep the % signs). Most are straightforward but a few may need some educated guesswork. Examples are:

  • EWWW Image Optimizer: ewwwio
  • NextGEN Gallery: ngg
  • WooCommerce: wc

While you’re at it, you can do some more housekeeping by following these 10 database optimization tips and these WordPress clean up tips.

Summing up

Deleting plugins is not always as straightforward as it appears. A lot of information can be stored by plugins both in the filesystem and the database, and plugin developers vary on the thoroughness of their uninstall routines.

Most of us assume an uninstall means deleting all data, and that’s not regularly the case.

If you’re a plugin developer, you might not be able to bear the thought that someone may never use your plugin again! But most users will thank you for including an uninstall script. Please follow the Uninstall Methods section in the plugin development handbook.

As a user, select your plugins carefully. Find out from developers how you uninstall them. Test out new plugins on a staging site rather than your live site to keep your site clutter-free. And remember as a general rule, the bigger the plugin, the more data it stores.

Posted on

HTML to WordPress Theme Tutorial: Step 1 – Converting Your HTML to PHP

For many of us, our first experience of coding for WordPress is when we write our first theme.

After all, every WordPress site needs a theme, and if you want something bespoke then it makes sense to code it yourself.

When I started out with WordPress in 2010, I’d never worked with a content management system (CMS) before. But I’d coded plenty of HTML and CSS, either within large sites that used HTML for content as part of a CMS, or for small client sites I built from scratch.

I spent weeks weighing up the pros and cons of different CMSes I could use for client sites (remember, this was before WordPress became the dominant force it is today) and decided on WordPress for two reasons. The first was the awesome community of users and developers that we’re all a part of. And the second was the fact that with some HTML experience, it’s not that hard to create a WordPress theme.

Continue reading, or jump ahead using these links:

In this series of three posts, I’m going to walk you through the process of creating your own WordPress theme from static HTML. We’ll start with a single HTML file and a CSS stylesheet, and convert those into a WordPress theme with all the bells and whistles that entails.

The posts will work through the process in order:

  1. Creating your index.php file, adding in template tags and a loop.
  2. Creating additional template files and template parts such as the header, sidebar and footer files.
  3. Adding functionality, including widgets and a navigation menu, and getting your functions file set up.

In this post I’ll create a single file – index.php. That will be based on the index.html file from my static site, but I’ll remove the content and replace it with template tags and a loop.

So let’s get started!

What You’ll Need

To follow along with this series, you’ll need a few tools:

  • A development installation of WordPress, preferably on your local machine.
  • A code editor.
  • A static site – if you don’t have one you’re working from, you can download the files I’m using.

Make sure you do this work on a development site, not a live site – you don’t want the world to see your theme until it’s ready.

The Starting Code

The starting site has just two files – our index.html and style.css. I’ve deliberately kept things simple, and used a pared down version of my site. Here’s how it looks:

Our starting home page

You can find the contents of the index.html and style.css files on Github – I’m not going to show the code here as there’s a lot!

Note: This is a basic set of code designed to help you create your own theme. If you want to use it for live sites, you’ll probably have to add extra styling etc. to it. It wouldn’t pass the theme directory requirements. Please just use it for learning, not to power a live site.

Setting Up Your Theme

To create your theme, you’ll need a folder for it in your WordPress installation. Using your code editor or file manager, go to wp-content/themes and create a new folder. Give it whatever name you want. I’m going to call mine wpmudev-theme-part1.

Copy your index.html and style.css files to that folder. They won’t do anything yet, but they will soon.

Now you have a folder with two files in it. You’re getting started!

Right now, WordPress doesn’t know that you have a theme. Any theme needs just two files: index.php and style.css. As you’ll see while following along with this series, you normally need more than that, but the theme will function with just two.

Let’s start by adding commented out text to your stylesheet. Open your style.css file and add the following:

Loading gist 2b693721668dba8bcc578b8de9824642

This gives WordPress the information it needs to recognise that this is the theme stylesheet. Feel free to edit the details, adding your own name and URL and changing the name of the theme if you like.

The next thing to do is change the filename of your index.html file to index.php. You now have the two files that will get your theme working.

However you haven’t added any PHP yet. To do that we’ll need to add some template tags and a loop. Let’s do that.

Adding Template Tags

A template tag is a special WordPress function that you use in a theme template file. It can do any one of a wide variety of things – to see the range of template tags on offer, check out the codex.

Here we’re going to add template tags for two things:

  • Calling the stylesheet
  • Automatically generated classes and IDs for CSS

Calling the Stylesheet

Right now if you open up your site with your new theme activated, you’ll notice that none of your styling is loading. Here’s how mine looks:

My site with no CSS

Don’t panic! You just need to add a stylesheet call to the head section of your index file.

Note: In part three of this series, I’ll show you how to move this to the theme functions file, which is best practice. For now we’re just working with two files: the stylesheet and index.php files, so we’ll stick with those.)

Open up your index.php file. Find this line:

Loading gist 2b693721668dba8bcc578b8de9824642

Edit it so instead of calling a static file, it uses PHP to load the theme stylesheet:

Loading gist 2b693721668dba8bcc578b8de9824642

This uses the bloginfo() template tag, a useful tag that fetches all kinds of information about your website from the database. In this case it’s fetching the url of the theme and then accessing the file in that folder called style.css.

Now refresh your home page. You’ll find that the styles load. Here’s my page now:

My site with styles working

You’ll notice that it looks exactly like your old static site. That doesn’t mean we’re done though – nowhere near! The content is pulling through from static content in that index.php file, which we’ll correct by adding a loop. But first let’s add some more template tags.

Creating Automatically Generated Classes and IDs

It’s really useful to be able to get WordPress to automatically generate CSS classes and IDs for your posts and your <body> element. This means you can later use those classes for styling, targeting specific post types, categories and more.

Open your index.php file. Find the opening <body> tag. It’ll be sitting on its own line, after the closing </head> tag.

Edit it so it reads like this:

Loading gist 2b693721668dba8bcc578b8de9824642

This uses the body_class() template tag, which will detect what kind of page your website visitors are on at any given time and generate CSS classes based on that.

If you refresh your page and inspect the code you’ll find that WordPress automatically adds some CSS classes for you:

Loading gist 2b693721668dba8bcc578b8de9824642

These will vary according to the page you’re on in your site and which type of content it’s displaying. You can use this to target your CSS at certain content types such as single posts, certain categories or anything you want.

Now let’s do this for your individual post. Find this line in your index.php file:

Edit that line so it reads like this:

This uses two template tags:

  • The the_ID() tag fetches the post ID and uses that to give the post a unique ID.
  • The post_class() tag works in a similar way to the body_class() tag, adding a list of classes to the article element that correspond to the type of post this is. Note that right now this won’t work properly as you’re not fetching a post from the database – but when we add the loop next, it will.

Adding a Loop

Now for the fun bit. Right now, the content of your page is hard-coded in. You want it to be populated from a call to the database, so that the correct content will be displayed whatever page you’re on.

In your index.php file, find the code inside the <article> tag (the one you already added the ID and closes to with template tags).

Edit that code so it reads like this:

There’s a lot of code there – if you want to understand what’s going on, check out our post explaining the loop.

Now if you refresh your home page you’ll see some very different content – your posts. If this is a brand new WordPress install you’ll see the default post that’s added when you install WordPress:

My site now has a loop

Adding Hooks

The final step in this first part of our series is to add a couple of important hooks to our code. These are placed in the head section and the footer, and they’re essential for many plugins to work.

In your head section, add this before the closing </head> tag:

Loading gist 2b693721668dba8bcc578b8de9824642

Now move down to the end of your index.php file. Before the closing </body> tag, add the wp_footer() hook:

Loading gist 2b693721668dba8bcc578b8de9824642

That adds a special hook to the top and bottom of every page in your site – these are essential for your themes and your site to work properly, so don’t skip them.

Now save your file.

What Comes Next

You now have the beginnings of a WordPress theme. However there’s still work to do. In the next part of this series I’ll walk you through the process of splitting your theme up into multiple template files. You’ll create separate files for the header, sidebar and footer, an include file of the loop, and a separate file for each of pages and archives.

Posted on

New website and branding for Sugar Calendar

Today I’m really excited to announce the launch of a new, dedicated website for Sugar Calendar! Say hello to sugarcalendar.com.

This is the first in a large series of updates we are working on for our sweet and simple event calendar plugin for WordPress. In the coming months you will see new features released, improved interfaces, numerous add-on plugins, and a whole lot more!

Back in November, 2017, John James Jacoby joined my team at Sandhills Development specifically to work on Sugar Calendar. With the skills and experience that John brings to the table, we will be elevating Sugar Calendar  from a small, simple event calendar plugin to a full-featured event platform. Work on this is in progress and a lot of updates will be coming out in the near future.

John and I have both spent considerable time building and maintaining our own event calendar plugins so with our combined knowledge and experience added to the vast wealth of skills at Sandhills Development already, we should be able to deliver a really good platform.

While we are working on the updates, we need to ask a small favor of existing customers. As part of the migration to the new website, we have regenerated all license keys and account records on sugarcalendar.com. In order to ensure your site(s) stays up to date with the latest versions, please follow these steps:

  1. Update to Sugar Calendar version 1.6.6 from within WordPress like any other update.
  2. Reset your account password at https://sugarcalendar.com/account using the same email address you purchased Sugar Calendar with.
  3. Once updated and logged into your account, please retrieve your new license key and update your site(s) that use Sugar Calendar with it. This is the license key you will use from now on.

That’s it!

With the launch of the new site, we also have an affiliate program available that you may join. Help promote Sugar Calendar and earn a commission on every sale!

If you have any questions or issues, do not hesitate to reply to this email or send us a support ticket from the new support page.

P.S. The upcoming updates will include a price change. Upgrade to or purchase an Ultimate license now to lock yourself into the low price forever.

The post New website and branding for Sugar Calendar appeared first on Pippins Plugins.

Posted on

7 Reasons Why Your WordPress Plugins or Themes Won’t Install

For the most part, I think WordPress is a pretty solid platform. Of course, we complicate things when we drag third-party elements into it for the sake of improving performance or security, adding new design features, or opening up greater functionality. But the payoff is generally worth it. Without those integrations, you’d have to do much more manual coding and that just doesn’t isn’t the most effective way to build a website these days.

That said, there are times when issues arise when you try using WordPress plugins and themes on your website. As I’ve talked about before, there are WordPress plugin conflicts that occur upon initial installation or during updates. But there are other ways in which they can cause issues for you before you even get them on the site.

Below, I’m going to break down the 7 reasons why a WordPress plugin or theme won’t install on a website and some ways to get around these errors.

7 Reasons Why Your WordPress Plugin or Theme Won’t Install

The nice thing about these kinds of WordPress errors is that they’re easy to identify. Usually, there’s an error message that accompanies each failure to load, so there isn’t as much troubleshooting with something like this as there are with other WordPress errors. It’s just more annoying than anything else.

So, here are the most common reasons why your WordPress plugin or theme won’t install and what to do about them:

1. Uploading the Wrong File Format

Typically, you’ll encounter an installation error during the manual upload of a theme or plugin through the Add New / Upload option in WordPress (as opposed to directly installing from the WordPress repository):

Plugin or Theme Won't Install - Upload New Plugin
Install your new WordPress plugins here.

When you see the following “bad format” message, it means that you have not uploaded the native files provided to you by the theme or plugin developer.

Plugin or Theme Won't Install - Bad Format Error
This is what the “bad format” error looks like.

The only plugin or theme files that should ever be uploaded to WordPress are zip files.

Before you get in touch with the plugin or theme developer, verify that you didn’t receive the correct file from them. If this came from your client, they may have unzipped the folder and given you what they thought was the correct file from within. If it didn’t come from the client and you really don’t have the right folders, get in touch with the developer.

2. Missing Files

Now, let’s say you did try and upload a zip file into WordPress, but you saw this error message instead:

Plugin or Theme Won't Install - Zip Missing Files
This is what the “missing files” error looks like.

This means that the files contained within the folder are not what WordPress was expecting.

Unzip the folder and review the contents. Is this even the correct zip? Does it contain all the files you would expect a plugin or theme to have? You can cross-check the contents of the folder against WordPress’s recommendations for files that should be included in the package:

If you’ve detected any missing files, reach out to the developer for assistance.

3. Syntax Error

When you purchase a WordPress plugin or theme from a reputable developer, you shouldn’t have to worry about this kind of error occurring.

However, let’s say your client was trying to cut corners and save money, and so they found some plugin or theme online that looked promising. You try to install it in WordPress and you receive a syntax error. It’ll usually say something about “parse error” and “syntax error”.

All this means is that there’s something wrong in the code. This error can actually come up if you erroneously try to edit a theme or plugin once it’s installed on your website. However, if you’re seeing it during installation, then the error lies with the developer.

If you want to review the code of the plugin or theme on your own, you might be able to detect and repair the error yourself. Before you dig in, check into any other reported issues with the plugin or theme if there’s a support system attached to it (through WordPress or a marketplace).

If there aren’t any, your safest bet might be to have your client get a new plugin or theme. If you don’t trust the developer to code the backend well, this issue could keep coming up with each new update (and you don’t want to deal with that).

4. Uploading the Wrong Zip File

This error is one you’re probably going to encounter with larger, multipurpose themes. You received a zip file from your client and, by all intents and purposes, it looks to be in good shape. However, let’s say you go to add the new theme:

Plugin or Theme Won't Install - Add New Theme
Install your new WordPress theme here.

Then you see this error:

Plugin or Theme Won't Install - Stylesheet Error
This is what the stylesheet error looks like.

In actuality, the stylesheet is not missing. You probably just downloaded the wrong version of the theme file.

Some developers offer up different zip packages for their themes, especially if they’re including plugins and child themes within them. Here’s an example of how Uncode includes various download options on Themeforest:

Plugin or Theme Won't Install - Theme Download Options
Various file downloads are available when you purchase a premium theme.

While it’s essential to have that full file with all the documentation, licenses, plugins, and alternate themes, that file cannot be uploaded into WordPress because it looks like this:

Plugin or Theme Won't Install - Theme Unzipped
As you can see, the contents of this zip file wasn’t going to get me very far in WordPress.

WordPress can unzip the top-level zip file, but it won’t be able to go through and unzip everything else contained within the folder. If you want to get your theme in there, then you need to upload the proper zip file.

5. Exceeding the Memory Limit

I touched on this error recently when I talked about the server issues that affect WordPress. Basically, this happens when your web hosting PHP memory limit is too low to process the installation.

The error will say something like, “Fatal error: Allowed memory size of _______ bytes exhausted…” If you see this memory error, it’s easy to fix.

Log into the control panel of your site and open your preferred file editor: FTP or file manager. In the root directory, you’ll find your wp-config.php file. Click on the edit button and add the following line of code:

define( 'WP_MEMORY_LIMIT', '256M' );

Since the default memory limit is usually 64M, this will significantly increase it and help you get your new theme or plugin installed without issue.

6. Exceeding the File Size Limit

Memory isn’t the only thing that can be pushed to its limit when uploading a new WordPress plugin or theme. You may also find that the allowable file size is exceeded. When this occurs, you’ll see a message similar to this:

“The uploaded file exceeds the upload_max_filesize directive in php.ini”

To fix this maximum upload limit, you’ll need to do so through the control panel. Access your directory using either FTP or a file manager. Once you’re in there, locate the wp-admin folder.

Do you see a php.ini file? If not, you’re going to have to create one.

Once you have the php.ini file open, look for a section that mentions “filesize”. If it exists, you’ll want to overwrite it with the following code. If it doesn’t, then enter the following lines of code into the file:

upload_max_filesize = 1000M
post_max_size = 2000M
memory_limit = 3000M
file_uploads = On
max_execution_time = 180

This will give you some more leeway in how large your WordPress theme and plugin files can be. If you’re still experiencing problems with this error, read through Jenni McKinnon’s guide on how to increase the maximum upload limit.

7. Miscellaneous Errors

I’m including this final hodgepodge error type because you never know what types of external conflicts might get in the way of you being able to install a plugin or theme. In my case, it was an old conflict between an SSL certificate and CDN I had on my site.

In a nutshell, here’s what happened:

  1. I bought a new WordPress theme.
  2. I installed the WordPress theme and activated it.
  3. When I uploaded the theme, I received a bunch of error messages about how some of the plugins wouldn’t install. I initially disregarded the message because I didn’t think I was going to use most of the plugins anyway.
  4. As it turns out, before I could customize or use my theme, I had to activate a required plugin from the developer… which would not install. The message below is what I saw.
Plugin or Theme Won't Install - SSL Certificate Error
This was the SSL certificate error I saw.

I’ve had an SSL certificate on my website for over a year and had experienced issues with it in the past. Specifically, it conflicted with the CDN. To resolve the conflict, I asked my web host to get rid of the CDN. As far as I knew, the issue was fixed. (Funny enough, the CDN ended up being the problem here.)

Anyway, after working in conjunction with my web hosting company and the theme developer, we were able to sort out that the error could be bypassed by uploading the plugin files directly into WordPress. I had assumed that an inability to install through the theme upload would mean an inability to install through the normal process. However, the workaround took and I was able to get the plugin installed on my site.

I guess this is my roundabout way of saying that if you encounter an error during the installation of a WordPress plugin or theme, it doesn’t resemble numbers 1 through 6 above, and you’ve tried manually uploading, go to the perceived source of the problem. They should be able to provide you with insights into the problem and spare you the agony of trying to figure it out on your own.

Wrapping Up

So, is there a way to avoid these in the future? Well, using reputable themes and plugins from WordPress developers is a good place to start. Familiarizing yourself with what theme and plugin files should contain is another good thing to have under your belt.

All in all, I think this is probably one of the easier kinds of errors you might end up having to deal with in WordPress. That said, errors are a nuisance you often can’t afford to deal with when they pop up mid-workflow, so make sure you’re well-versed in what the most common errors are and how to go about fixing them.

Posted on

How to Migrate a WordPress Multisite: A Step-by-Step Guide

WordPress Multisite has been a highly beneficial addition. While you can’t use it for every new web development project, it’s highly valuable when all the right variables are in place.

In the Ultimate Guide to WordPress Multisite, we talked about how to enable Multisite and create a network of sites from within a single installation of WordPress. If you’ve followed our recommendations, then you should have a fully functioning WordPress Multisite up and running.

But what happens when someone changes their mind and wants to move their site out of the multisite network? Or what if you have a new idea for a site and you want to add it to the network’s umbrella of sites? Or perhaps you rebranded the Multisite network altogether and now need to get all these sites over to the new domain name. What do you do when you want to migrate a WordPress Multisite?

In the following step-by-step guide, I’ll show you how to complete each of the three Multisite migration types.

WordPress Multisite Migration Guide

You have a WordPress Multisite, but you realize something needs moving. There are three kinds of migration scenarios you might consider for a Multisite network:

  • Migrating a single website into an existing WordPress Multisite network.
  • Migrate a single website out of the WordPress Multisite network.
  • Migrating the entire WordPress Multisite network from one domain to another.

While you might be hesitant to move anything around within your network, there’s no need to be. Sure, the process will be a little more complicated than migrating a single site from one domain to another, but that’s expected. Follow along with the steps outlined in the three scenarios below and you’ll have your Multisite migrated in no time.

Scenario #1: Migrate a Single Site into Multisite

In this scenario, you want to move a new website into your Multisite network. Awesome! Here’s what you need to do.

Step 1

Back up both your single site installation and your Multisite network. You can do this with one of these WordPress backup plugins.

Step 2

Next, deactivate all plugins on your single site WordPress installation. This is something WordPress suggests you do in case one of your plugins conflicts with the export process (which is a possibility).

Go to Plugins. Select the bulk “Deactivate” option for all your plugins.

Step 3

One other thing the Codex suggests is that you delete any quarantined spam comments. There’s no need to save and carry that data over with you as you will (and should) never use it.

Step 4

Within your single site installation, go to Tools and click on Export. It is in here where you will export a copy of your site’s files for easier setup on the Multisite.

Select the “All Content” radio dial button and click Download Export File.

Save the XML file to your computer.

Step 5

Log into your Multisite WordPress installation. From here, you must create a new empty site into which you can place the migrated site.

Go to My Sites > Network Admin > Sites, and then click Add New.

Fill in the following details for your new Multisite subdomain:

  • Site Address (this will be the subdomain name on the network)
  • Site Title (which can be the same as it was previously)
  • Admin Email

If you have questions on how to configure this, check out this guide on how to activate and configure Multisite.

Then click Add Site.

Step 6

With the new site added, navigate to the new subdomain on the network. If you hover over “My Sites” in the top admin bar, you will see it there.

The first thing to do is go to the site’s Settings and edit the title and description. If it needs to differ from what it was before, you can change that now. Also, be sure to review the blog and permalinks settings. Anything you want to maintain from the single site, you update it from here.

Step 7

If the Multisite network does not use the same theme or plugins as the single site, you will need to set those up now.

Note that not all WordPress plugins are compatible with Multisite, so be sure that any new plugins you carry over are acceptable to be on the network.

To copy them over, you can do one of three things:

  • You can use a premium plugin (I’ve included a list of those below) to copy and migrate your theme and plugins.
  • You can reinstall all plugin and theme files from-scratch in Multisite (at least the ones that don’t already exist).
  • You can copy the files from your wp-content folder on the single site’s server and into the corresponding Multisite’s folders for this subdomain. To do this, make sure you know the ID number for your new subdomain.

If you’re unsure of what your new subdomain’s ID number is, go out to the Network dashboard. Click on My Sites. Hover over the new site you’ve created and click Edit. You’ll see the address bar something like this:

https://networkname.com/wp-admin/network/site-info.php?id=14

The “id=14” will provide you with the site’s ID number, so you know which database to edit in your directory.

Once your subdomain has all themes and plugins activated, configure and customize them to your liking.

Step 8

Check the subdomain’s Pages, Posts, and Media for dummy content created during the new site setup on the network. If it created anything, delete everything before you import content from the old site.

Step 9

To import the data from your single site, go to Tools and click on Import. Select the WordPress option from the list. (If you haven’t installed the tool yet, do it now).

Upload your saved XML file here.

You’ll next get a prompt about who you want to assign authorship to for your imported posts. You can either assign them to a current user on the network or a brand new one.

Click on the “Download and Import Attachments” checkbox and save your changes.

Step 10

If there were widgets from the single site you want to move into the subdomain, you can easily do this using a plugin called the Widget Importer & Exporter.

Basically, it’s doing the same export/import process as you just did for your site’s content, only just for widgets.

Follow the steps in the plugin and complete the export of your widget data.

Step 11

Now, hop on over to the new subdomain on your Multisite network and give it a look. Does everything seem okay?

  • Are all images in place?
  • Is the primary navigation the correct one?
  • Does it appear that all plugins are working?
  • Are there any theme customizations missed in this transfer?
  • Do the blog posts all have the correct author?
  • And so on.

Give your site a good checkup and make sure everything is as you expect.

Step 12

If you decide that you want to give the subdomain a custom domain (perhaps the old one from its previous single existence), you can use domain mapping to do this.

Step 13

With your site up and loaded on the network, you now need to get rid of the old WordPress site.

If you will not use a custom domain on the Multisite and the migrated single site no longer needs its own hosting, delete the WordPress site and cancel your domain and hosting account.

If you will use a custom domain on the Multisite, then you only need to delete the WordPress site and cancel the hosting account.

Scenario #2: Migrate a Single Site out of Multisite

Shipper lets you easily migrate a Multisite subsite to a single WordPress install in just a few clicks! Avoid the hassle of migrating manually…check out our tutorial here: Migrate Subsite to Single Site

Here is what you need to do to complete the reverse process.

Step 1

Back up your WordPress Multisite network.

Step 2

Purchase a web hosting plan and domain name for your new WordPress site. (If you already purchased a custom domain for domain mapping, then you’ve already finished with the latter part).

Step 3

Log into your new web hosting account and navigate the one-click WordPress install. From here, you can download and get started with WordPress for your new site.

You can also grab a copy of WordPress from here:

Step 4

The export and import of content for migrating out of Multisite is different, as you can only grab that data directly from your database tables.

You can do this by logging into your Multisite’s control panel and navigating to phpMyAdmin.

In the tables that appear under the Network’s folder, find the one that corresponds with the site you want to migrate out of the network. The ID number will match the one from the process described earlier. When you look at the list of sites on your network, click on the Edit button for the migrating site, and you’ll find the ID number appended to the end of the web address.

The URL will be like this:

https://networkname.com/wp-admin/network/site-info.php?id=14

Use the ID number to select all the tables pertaining to that site. Once you’ve selected all of them, click the Export button at the top.

Step 5

The file that exported will be in a .sql format. Make a copy and rename it.

You’ll now want to open it in a code editor like Atom to adjust your site’s domain (if you haven’t mapped it to the custom domain already). On the network, you’ll see the site referred to as:

https://networkname.com/subdomainname/

However, when you import this into the new site, you want it to say:

https://mynewsitename.com/

Do a search and replace in the file and save your changes once you’ve updated all instances of the domain.

Step 6

You must make one more change in this file. Remember that site ID from before? Well, it should not exist when in the database tables for a single WordPress installation. So, anywhere that you find “wp_[ID number]_”, replace it with “wp_”.

Save the file once more.

Step 7

Log into your new single WordPress installation. Because this site will no longer be part of a network of related sites, you’ll probably want to use your own WordPress theme and plugins here. So, go for it! Get those activated and customized before moving on to the next step.

Step 8

Now, you can import the database tables from your old subdomain. To do this, log into this new website’s control panel and find your phpMyAdmin.

WordPress will have automatically created several database tables for you upon installation. You don’t need those duplicates here as you’re about to carry your own over. Delete the following tables (all of them will have “wp_” at the beginning of their name):

  • commentmeta
  • comments
  • links
  • options
  • postmeta
  • posts
  • terms
  • term_relationships
  • term_taxonomy

Once you’ve deleted the tables mentioned above, you can now click the Import button at the top.

Select the newly saved .sql file and click on the Go button.

Once you receive your successful upload message, you’re good to go.

Step 9

If there were widgets from the Multisite network you wanted to copy over to the new domain, you can do so with the Widget Importer & Exporter plugin.

Step 10

Take some time to poke around the Settings of your new WordPress site. Configure your site’s metadata and blog settings as you see fit.

Step 11

Visit your new live website and do a full review of it to confirm that everything is as you want. Because you’re likely starting with a new theme and trying to create a unique experience from the Multisite, you may have already taken care of customization in the plugin and theme setup. But it’s still good to review and make sure everything is in its proper place.

Step 12

When you’re content with your newly migrated site, you can return to your Multisite network and delete your website from the list of Sites on your Network’s dashboard.

Scenario #3: Migrate WordPress Multisite to Another Domain

And finally, let’s talk about WordPress Multisite migration from one domain to another. It doesn’t require much in the way of installing new WordPress installations or configuring WordPress themes and plugins. Instead, this is about renaming all the backend files to reflect the new domain name of your network.

Here is what you need to do:

Step 1

The first thing you need to do: back up your Multisite installation.

Step 2

If you haven’t done so already, buy that fancy new domain name for your network. Then associate it with the same web hosting account that your Multisite lives on.

Step 3

Next, you must edit the wp-config.php file in the root directory of your site. You can access this either through your File Manager or FTP.

Once you’ve located the file, click on the Edit button to open it.

Now, when you configured WordPress for Multisite, you added some code above this line:

/* That's all, stop editing! Happy blogging. */

The line you want to update in this case is this one:

define('DOMAIN_CURRENT_SITE', 'yournetworkname.com');

Update “yournetworkname.com” with the new domain name you want to use.

You then need to add the following two lines of code above the “That’s all, stop editing!” message:

define('WP_HOME','https://newnetworkdomain.com');
define('WP_SITEURL','https://newnetworkdomain.com');

Save your changes and exit.

Step 4

The database files for your Multisite now also need to change to reflect the new domain name of the network. Log into phpMyAdmin.

From here, you will search for your network’s database tables. Specifically, these are the ones that will require an update from the old domain name to the new one (these are all preceded by “wp_”):

  • blogs > domain
  • options > home
  • options > siteurl
  • site
  • sitemeta > siteurl

In addition, you also need to update the following tables for each of the sites that exist on the network. The pound sign (#) below is where you will see the actual site ID number.

  • #_options > siteurl
  • #_options > home
  • #_options > fileupload_url

Once you have renamed the domain in every instance in which it appears throughout your database tables, you can save your changes and close. Your site should now be fully migrated to the new domain name.

Step 5

Don’t forget to change the name of your site and its web address within WordPress. If you want to do any rebranding and redesigning for this domain migration, you can do it now.

Simplify Your Multisite Migration, Ahoy!

There are many plugins you can use to streamline multisite migration, but there’s nothing better than using Shipper Pro to make your life easier.

With Shipper Pro, you can move WordPress sites from one host to another, development to live, local to production, etc.

You can migrate your entire multisite network securely with it to any location with a single click. Migrating WordPress sites has never been this simple!

Ready, Set, Migrate

A WordPress Multisite network isn’t set in stone. You can shift the network and the websites within it as you see fit—and you can migrate WordPress multisite almost as easily as a single site migration.

If you’re looking for expert help, our friendly live support team is ready to help you anytime with all your WordPress migration problems.

Posted on

13 eCommerce Product Page Design Must-Haves for Higher Conversions

With global eCommerce sales expected to grow to US$4.8 trillion by 2021, shouldn’t you be taking a serious look at how to design eCommerce websites for more conversions?

While some basic conversion tips for WordPress sites do apply here, an eCommerce site typically doesn’t play by the same rules when it comes to format and layout.

Specifically, I’d like to do a deep dive today into what makes for a high-converting eCommerce product page. After all, this page is the final step before conversion, so it’s the very last chance you have to seal the deal and convert visitors into paying customers.

If you haven’t built your eCommerce site yet, make sure to read our comprehensive guide to planning an eCommerce store with WordPress.

eCommerce Product Page Design

There’s no guarantee that your visitors will buy anything once they get to your product pages. But it’s your job when building an eCommerce site to not give them any extra reasons to abandon it.

In all honesty, I think the safest way to design an eCommerce product page is to start with a design and layout similar to an online retailer everyone already knows and trusts.

Amazon eCommerce Product Page
There’s a lot happening on this page; nevertheless, all the crucial conversion elements are present.

I don’t particularly like the look of Amazon’s website. I think the type is too small, there’s way too much going on, and the quality of the descriptions and photos from the seller isn’t always great. That said, Amazon’s product page design works well as it’s logically laid out and is consistently applied throughout the website. So, as we look at how to build eCommerce product pages for your WordPress site, I’d like to use this as a sort of wireframe for best product page design practices in terms of conversion.

As I describe each of the essential elements needed to design a high-converting eCommerce product page, I’m going to highlight an example of a website that demonstrates each point well. If you follow along from top to bottom, you’ll find that each of the elements (except for maybe the white space one) is part of the successful Amazon formula, but each site has found a cool way to put a unique spin on it.

1. Address Bar

Bean Box eCommerce Product Page
An example of the URL done right, from the Bean Box website.

You might not give much thought to the address bar of your product pages, but there is something to be said about following a strict formula here. Here is what you’ll need:

  • HTTPS. If this is an eCommerce site, this is non-negotiable. It’s also the very first trust mark visitors should encounter on your site in general.
  • A simple structure. Since products always exist deeper within the path structure, focus on keeping these clearly labeled and easy to follow. Adding product SKUs and other reference tags in the URL will only distract visitors.
  • An optimized slug. When thinking about SEO for eCommerce product pages, the focus keyword for your product page should serve as the slug. In other words, if your product is called “Bean Box”, then use bean-box as the slug for SEO purposes.

2. White Space

Apple eCommerce Product Page
An example of white space being used to highlight a product on the Apple website.

The best eCommerce product pages don’t necessarily cram a whole lot of content in. Apple is already a brand synonymous with minimalism, so it’s no surprise that their web design would use ample white space to frame their products. Here are some other space minimizing tips you can take away from this example, as well as other eCommerce sites that use white space well:

  • Keep product pages light on text and use ample spacing between the various elements (described below) to help customers focus on the key details one at a time.
  • Use a solid background color (preferably white) behind the product photos and descriptions. It helps keep the focus on the product.
  • Don’t place a sidebar on your product pages if it can be helped.
  • When displaying more than three or four images or videos of your product, use a fast and feature-packed gallery plugin to reduce the amount of space used.

3. Navigation

Costco eCommerce Product Page
An example of breadcrumbs navigation done well by Costco.

One of the tough things about using an eCommerce website as a consumer is the navigation. Sure, if there’s a search bar, you can always type in the exact product you want (if you know what it’s called); otherwise, it takes a lot of clicking back to retrace your steps from the original search query.

As a designer, you can use a breadcrumbs navigation at the top of your product page to simplify the work your visitors need to do. After all, they’re already interested in this product or type of product, right? Since breadcrumbs display all the categories and sub-categories that led to the product, it’s the ideal solution for getting them back to an earlier step so they don’t have to begin their search all over again.

4. Product Images and Video

Bellroy eCommerce Product Page
Bellroy includes a mix of both photos and video in their image gallery.

I’d say that nine times out of ten (or maybe even more than that), you’re going to find product images located on the left side of the page. It makes sense when you think about it. If you’re developing websites with languages written left-to-right, your customers’ eyes will automatically go to the top-left corner of your pages–where the product photos are.

This is why you can’t skimp on the production of photos or videos for your eCommerce site. This is the first impression visitors will have of the product and it could realistically make-or-break their decision to buy.

So, what can you do to ensure you’ve used product imagery correctly?

  • First, install an optimization plugin like Smush Pro. You’re going to upload very large media files to your site and you don’t want to compromise loading speed or picture quality in the process.
  • Never include images or videos that are blurry or low-resolution.
  • If an image doesn’t frame your product in the best light or isn’t an accurate depiction of it (i.e. it’s too flattering), don’t include it.
  • Since customers can’t try the products beforehand, upload various images that show it off from different angles or as it’s being used by a model.
  • Don’t use promotional product videos here; instead, use videos that actually show the product in action.
  • Also, if your product comes in different colors or sizes, those need to be represented here as well. The best way to handle this is to have those change when the variation is changed (see information on that below).
  • If you’ve been able to collect user-generated content, include them here (with permission from the users, of course).
  • For products that would benefit from 360 explorations, think about using a virtual reality plugin.

5. Product Name

Bose eCommerce Product Page
The Bose product name is the perfect mix of a branded name with a clear labeling of the product.

As far as the product name is concerned, the clearer you are in terms of what the product is, the better. This doesn’t mean writing out a three-line product name like the ones you sometimes see on Amazon that describes the product in over-the-top detail: “Product X in Raspberry Flaming Red, Waterproof, Durable, Lightweight, Sizes Small through Large, Made in USA, etc. etc. etc.” Just write a sensible unique product name.

Also, in terms of wording your product name, you should follow the same SEO naming conventions you’d use for any other page on a WordPress site. This means including the focus keyword in the name and limiting it to 55 characters or less (for search purposes).

6. Price

American Eagle eCommerce Product Page
American Eagle demonstrates a great way to instantly grab visitors’ attention with price.

The price of the product should be the very next thing your visitors see after the product name. Even if you get them fully invested in the value of the product with a well-written description and awesome product pages, too high of a price could be a dealbreaker. So, put it front and center.

Also, if you’re offering a special discount, put it right next to the original price–and don’t be afraid to use a bright and eye-catching color to draw attention to the cost savings.

7. Ratings and Reviews

Leesa eCommerce Product Page
A nice example of how a simple display of a product rating can stand out and help “sell” a product without saying too much.

Although the actual customer reviews or client testimonials shouldn’t sit anywhere near the top of your product page, the star rating and review count should. Social proof is an incredibly important part of the eCommerce landscape since customers can’t easily test out products beforehand, so these need to be in here somewhere–the higher on the page, the better.

Of course, a star rating might not always make sense for the type of product you offer. If it’s something like a business service, testimonials will make more sense. And if it’s something like a hotel or restaurant reservation, then you might want to opt for something like this where visitors are told how many other like-minded consumers are considering the purchase:

Priceline eCommerce Product Page
Priceline does social proof in a different way, but it works for this style of eCommerce.

Keep in mind that there’s a possibility that your products won’t receive positive reviews to start, and that’s okay. That’s why the actual write-ups are provided down below the product description. Visitors can scroll down and read the complaints for themselves to decide whether or not they’re valid, and to see whether or not the company behind them listens and responds to those complaints.

8. Product Description

Harry's eCommerce Product Page
Harry’s includes a succinct description that focuses on what benefits customers will actually get out of the product.

As I mentioned before, it’s best to keep your product pages light on text, especially above the fold. I’d recommend using very short, value-driven messaging within the description. Of course, you should briefly explain what the product is, but it’s important to take a moment here to actually sell the product. This means highlighting the benefits and giving customers a reason to look at the rest of the page.

9. Variations

Ikea eCommerce Product Page
The best thing about these variations is that when you select a different one, the photos on the left update to match them.

Not every product in your online store will offer variations that customers can choose from. However, if they do exist, make it super easy for them to select from the options available and also let them know upfront which options are not available. Nothing annoys a customer more than finding the product they want, selecting the size, and then clicking the CTA only to find that the product no longer exists in that variation.

So, when you’re designing this element, first and foremost, make it easy to use. Dropdowns are great if you have more than five options to display. Then, of course, use a clear indicator that tells customers which variations are available. Greying out text would work just as well as removing variations completely for products that aren’t available.

Johnny Cupcakes eCommerce Product Page
Johnny Cupcakes uses greyed-out text to show sold-out variations.

And, since I’m on the subject, this is a great way to stir up a sense of urgency with visitors. Let’s say that a popular item is about to go out of stock soon in a certain size. Rather than wait until it does to grey out the variation, slap a bright red warning next to it that lets visitors know you have low inventory available and/or that it’ll be replenished soon. This may motivate more customers to take action sooner.

10. CTA

Barnes and Noble eCommerce Product Page
Barnes & Noble puts their CTAs front-and-center. Also, take notice of how they use a ghost button to contrast a CTA of lesser value here.

The CTA button obviously plays a big part in the eCommerce conversion process, which is why you can’t really experiment with where to put your call-to-action. When it comes to a product page, that button needs to be front and center. It also needs to be well-designed, boldly colored, and tell customers exactly what’s going to happen when they click it.

  • “Add to Cart” will place the item in their shopping cart so they can continue browsing the store.
  • “Buy Now” will initiate the purchasing process.
  • “Add to Wishlist” will dump the product into a list and save it for later.

If your product page is long and you want to ensure that the idea of making a purchase stays top-of-mind, you can use the following trick (i.e. a sticky top bar) to keep the button always present:

Barnes and Noble eCommerce Product Page Scroll
This is a nice touch and not something you often see on eCommerce websites.

One other thing to do in this section is to place pertinent purchase details near the CTA. For instance:

  • The estimated shipping date.
  • A short statement about your returns and refunds policy.
  • Any associated fees or taxes with the purchase.
  • A warranty statement.

11. Social Media

Poo-Pourri eCommerce Product Page
The clean and simple look of the social icons on the Poo-Pourri product page is a nice touch.

Ideally, you would have social media icons displayed on every page of your WordPress site. If they’re not already there, be sure to place them on your eCommerce product pages–with a particular focus on platforms that are image-friendly. This means Pinterest, Instagram, Facebook, and maybe even Twitter. This will give your customers an easy way to share their favorite products with others.

12. Product Features

Fitbit eCommerce Product Page
Gadgets like the Fitbit need room to display their technical specifications, and this example looks fantastic.

If the product description is where you briefly discuss the value of your product, then the product features are where you can get into more technical details. Sizing specifications, care and maintenance instructions, assembly requirements, pieces included, and so on should be placed within this below-the-fold section. If you have a lot of ground to cover, use tabs to consolidate the information into a single space and keep your customers from having to scroll too far.

13. Related Products

Pottery Barn eCommerce Product Page
Not every Related Products section will look the same. For some, just a product image, name, and star rating will suffice. This is a good option too if you want to give customers less to click.

Using data about your products, about common purchasing trends, and about your customers’ personal shopping habits on your site, you can create a helpful ‘Related Products’ section. It’s a great opportunity to not only upsell or cross-sell on the product they’re already interested in, but it’s also a good way to give them alternative recommendations in case this particular one didn’t work out.

Once you’re done designing your eCommerce product pages with the above elements, don’t forget to use WordPress plugins to optimize their performance. Even if your pages look great and you nail the perfect layout, if pages take too long to load or visitors see a security warning, it could cost you. So, if you don’t have these installed on your site already, be sure to have a performance optimization plugin like Hummingbird and a security plugin like Defender in place.

eCommerce Product Page Optimization – Final Tips

In addition to product page design considerations like improving the layout and making sure that your content fully explains the benefits and features of your product (and builds trust with your company), look for ways to implement psychological triggers to direct consumers’ attention to the add to cart button.

Once you’ve established your eCommerce product page design using the methods discussed above, make sure to A/B test your pages and see if perhaps there are other elements or layouts your visitors would be more receptive to. The Amazon model is a smart choice to start with. It keeps the details of your products in a logical order, keeps pages to a manageable length, and ensures a consistent structure across your site.