Case Study: Rebuild an E-Commerce Site with Beaver Builder and WooCommerce

Some years back I built an e-commerce website for a client using a StudioPress theme and the Shopp shopping cart. I customized the theme to match my client’s brand and added custom functionality to Shopp to address features we needed that weren’t available at the time.

That was my first e-commerce site to build on WordPress and it was a booger. Over the years the site has become increasingly difficult to support code-wise and incredibly unfriendly for the store owner to manage.

The site is an important aspect of my client’s business and we reached a point where we agreed the site needed an overhaul.

This article is a case study to discuss site issues and my approach to fixing them.

Alert: This post has affiliate links. If you click one and buy something, I get rich and retire immediately (thanks in advance!).

Three website problems to solve

A crappy shared host

Have you ever lived somewhere where your neighbors treated for pests and then all of a sudden those pests showed up in your house? Or maybe you lived in a house where weeds showed up in your immaculate lawn because your neighbor was too lazy to treat his?

Yeah, that’s kind of what shared hosting is like.

The site was hosted for years on a low-budget shared host. I’m not going to name names, but despite following all best practices in WordPress security and maintenance, the site was hacked 3 times. The host never took responsibility (it’s gotta be your squeaky clean WordPress install, not your hosting neighbor’s leaky toilet!).

Each time my client ponied up for a third-party service to go in and clean up the file system and the database. (As an aside, in my 20 years of working with websites the only client sites I’ve ever had hacked were on this same host.)

Other issues aside, getting to a new hosting environment was a priority.

A design that didn’t look good on mobile

I’ve always been a fan of the Genesis Framework (that’s the parent theme all StudioPress themes run on), so that was my go-to choice when I initially built the site. In order to keep project costs down, I used a pre-made theme that got me about 80% of the way to the site I wanted to build. The remaining 20% was a bit of custom CSS and custom templates.

It was right for the project and worked nicely.

But web design has changed a lot in the past five years, specifically the responsive web. Since the site was built, “we’ve” gone through the wide-spread adoption of responsive web development, to mobile-first CSS, to Google now actively demoting sites that aren’t mobile friendly.

In addition to the site becoming unfriendly for mobile shoppers, the site was fighting an uphill battle in Google’s organic search results.

An unstable shopping cart

Let me start by saying that e-commerce options for WordPress have come a loooooooong way in the past five years. I researched available options before I built the site and Shopp rose to the top of my list. I didn’t have much in the way of development chops at the time, but the “off the shelf” version of the product looked like it would meet my needs.

The only two pieces of functionality that weren’t part of Shopp were:

  • ability to add personalization options (think monograms)
  • ability to add custom gift wrap on a per-product basis

With the help of more advanced (and patient) developers like Andrew Norcross and Clifton Griffin, I was able to add those customizations.

Even still, nearly from Day 1 the cart was problematic. I’d end up with duplicate database entries that required manual deletion (from the database ?). I had products showing different prices on the front end than the back-end (due to other weird database issues).

I know that writing software is not easy, so my goal is not to trash Shopp. But working with it has been an ongoing headache. I’ve thrown more time into troubleshooting than I felt I could ever reasonably bill for.

The solution (Quality hosting with Beaver Builder and WooCommerce)

WordPress just celebrated its 15th birthday and now powers over 30% of the web. Needless to say, the landscape of available products and services looks considerably different now than it did even five years ago.

I point that out simply to say that there are many ways to solve the problems I outlined above. My solution may not be yours, but read on and I’ll share why I chose the particular solutions I did. Maybe it’ll help you.

Managed WordPress Hosting

If your business depends on your website, use managed WordPress hosting. Period.

I won’t belabor the point, but I’ve written about why that’s important and discussed the managed WordPress hosts I recommend here and here. Follow those links if you’re interested.

About a year ago I migrated my client’s site to Liquid Web’s Managed WP Hosting. In the spirit of complete transparency, I have friends that work there and believe them when they talk about the quality of the service. And to continue on the transparency train, my client didn’t receive any price breaks nor did I receive an affiliate commission with her transfer to Liquid Web.

I’d already had good experiences hosting a few of my sites (including this one) with Liquid Web, so it was a confident recommendation I made to my client. Other than some customer service snafus that happened when they upgraded their support ticketing system, the experience has been smooth.

The hosting move alone didn’t fix the other issues with the site (namely the shopping cart), but at least I feel confident about the security and am pleased with the performance improvement.

Earlier this year Liquid Web rolled out a new product: Managed WooCommerce hosting. This is similar to their Managed WordPress offering but includes some very specific benefits to sites running WooCommerce. (Here’s a writeup with more details on what Managed WooCommerce hosting is).

It started to make a LOT of sense to bump my client over to a Managed WooCommerce plan (except for the fact that the site wasn’t running WooCommerce…. yet).

A responsive theme

I’m still a big fan of the Genesis Framework although I’m more apt to use my own starter theme these days than a StudioPress theme. But when it comes to creating a great looking custom site with a minimal time investment, I’m a huge fan of Beaver Builder.

Beaver Builder falls into the broad category of “page builder plugins” for WordPress. Those typically get a bad name in my book, but I made an exception for Beaver Builder. (As an aside, Pippin Williamson did a fantastic critical review of various WordPress page builders.)

In less than a day, I was able to rebuild the website so that it kept the spirit of the original design while updating the experience for mobile users.

A best-in-class shopping cart

I mentioned that this was the first e-commerce site I’d built (back in the day!), but I’ve built a number of them since. WooCommerce has become my de-facto standard for sites selling physical products (for sites selling digital products, I prefer the simplicity of Easy Digital Downloads).

I had the hosting environment I needed, now I just needed to migrate all the products from Shopp to WooCommerce. If you’re thinking that you’d rather eat barbed wire than go through that migration process, you’d be smart.

EXCEPT! Except that my friends at Liquid Web built a Shopp to WooCommerce migration script that did all the heavy lifting.

I wouldn’t have known where to start with that migration as it involved mapping products between the various Shopp database tables to the various WooCommerce tables, maintaining product variations and relationships, image links, etc. Steve Grunwell made that possible with a simple command line script. (It’s free to use should you find yourself needing to do that same migration.)

Once all the products were “present and accounted for” in WooCommerce, I removed the Shopp plugin and all corresponding database tables (about 500MB worth — seriously) and breathed a massive sigh of relief.

Oh, and those special features I’d previously coded by hand? Turns out there are now plug and play solutions available:

No custom code or nuthin.

Putting a bow on it

Projects always take longer than expected. Always. (If you’re new to freelance WordPress development, make a note that everything will take you at least 2x longer than expected.)

There were definitely some hiccups along the way with this site overhaul, but the biggest time investment was with the shopping cart migration (and that’s even with Steve’s script doing the hardest parts). In the end though, my client has a refreshed online store, ready to receive waves of orders.

tl;dr

My solution:

16 thoughts on “Case Study: Rebuild an E-Commerce Site with Beaver Builder and WooCommerce”

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.