G2CROWD NAMES PANTHEON #1 IN WEBOPS See why real customers prefer our platform Learn More

A WooCommerce Developer’s Toolkit

Every time you start to work on a new WooCommerce project, one of the first things you should do is build the best possible toolkit setup for yourself. You should have tools to create a local instance, build plugins and themes, debug, troubleshoot and more. This post will dig into the toolkit for WooCommerce developers today, and I’ll share some of my favorite apps, plugins, and services for WooCommerce development.

Developing a new WooCommerce theme or plugin

Let’s first talk about how to set up a local site, jumpstart theme or plugin development, and how to learn more about hooking into WordPress and WooCommerce.

Creating your development environment

And to start, we wade into one of the holy wars of development: tabs vs spaces how do you set up your local development environment? The good news is that, with Pantheon, we can sidestep this conversation altogether — you can skip creating a local development and use Multidev. This lets you fork your live site and work there. Development sites are a breeze to set up, so you can build in the environment the live site will use. No surprises, just code.

You can have a development site ready within a few minutes, then you’re ready to dive in! I’d recommend installing WooCommerce and importing dummy data to get your site configured. I typically build against the latest default theme for WordPress, but Storefront is another good option for WooCommerce developers.

Frameworks for development

If you’re building a WooCommerce theme, you’ll probably want to start from a framework. Underscores is a good starting place, and Mythic or Sage are great options as well. These are designed to be used as a starting point rather than a parent theme, so you’re encouraged to take the theme as a skeleton and make it your own.

A word of caution for theme development in WooCommerce: while overriding template files in a theme is a common practice in WordPress theme development, it’s not a great option for WooCommerce developers. WooCommerce templates are frequently updated, and if your overrides are not maintained in tandem, you could run into issues where WooCommerce or an extension expects a hook to be available, but its not. Favor using the built in hooks and filters to make modifications instead, and experience peace and harmony by doing thing The WooCommerce Way™.

For plugin development, I’d encourage you to check out our WooCommerce plugin framework at SkyVerge. This is designed to give you a plugin skeleton with activation and deactivation methods, installation and upgrade routines, and several WooCommerce and WordPress helper functions. It’s not a boilerplate for plugins, but rather a framework that can be extended and built on top of.

Building for existing plugins and themes

If you’re not starting from scratch (such as modifying an existing plugin or theme) for your first WooCommerce development project, one of the first things you can do is familiarize yourself with the structure of the codebase you’re working on and the hooks it provides. You’re better off using existing hooks to build a companion plugin than modifying source code, as your changes will be future-proofed by using available hooks.

While you can review the codebase for this information, the Simply Show Hooks is a great way to expedite your learning. This plugin gives admin users a “Show all hooks” action in the WP admin bar, which can show all actions (or all actions and filters) that are available on a given page or screen.

Simply Show Hooks

This can even be used in the WP admin to show admin hooks as well.

Looking for something focused on WooCommerce? The WooCommerce Template Hints plugin is a wonderful tool for frontend development. When you’re logged in as an admin,  you’ll see which templates are being loaded to create WooCommerce pages and widgets. These visual hints are excellent for finding functions or hooks you need (and they’re not shown to guest visitors).

WooCommerce Template Hints

Testing your WooCommerce theme or extensions

Once you’re done building, you should user-test your work. While this could be considered solely QA, it also lets you evaluate your decisions and user flows, which can’t be covered by automated tests alone.

Testing user permissions and views

One of my favorite plugins for WordPress is User Switching. This plugin is amazing for testing your site as a customer or another user. As an admin, you can “switch” to another user, letting you impersonate this user until you’re ready to switch back to your account.

User Switching

On an eCommerce site, this helps you perform a number of tasks:

Testing eCommerce functions

We’ve built a WooCommerce Dev Helper at SkyVerge to help us testing functionality on-site. This gives you a few testing tools:

  • Use a “Bogus” payment gateway to test payments, similar to a credit card.
  • I typically use Forward to push development sites to a public URL. This plugin automatically ensures Forward works via the command line with your site (using a Forward File in your root directory), filtering your site URLs for the forwarded URL. (This likely works with ngrok or other forwarding services as well, but I haven’t tried it yet.)
  • Perform faster testing with WooCommerce Memberships and Subscriptions using new options for minutes and hours-long memberships and subscriptions.
  • Log data as you debug with the added global methods (I often use wp_var_log() instead of error_log() on my local sites since I can pass any type of variable). This is great for impromptu testing or logging, and you can take it further by setting up Xdebug.

Bogus Gateway

Troubleshooting a live WooCommerce site

What if you’re getting started with WooCommerce, and now you’re thrown into a live environment that you need to troubleshoot? It’s a little harrowing to look for issues in a platform when you’re not confident in what you’re doing, especially if that troubleshooting can impact your client’s livelihood.

Cloning a site to run tests

The best way to do troubleshooting is typically to approach it on a cloned site. This lets you isolate the problem without impacting the live environment, where payments may be processing or members may be accessing their data.

If you need to run some tests, you can do so really easily with Multidev if your site is hosted by Pantheon. This lets you duplicate your live site to a new instance, and you can run all of the tests you’d like. 

If the site your troubleshooting isn’t hosted on Pantheon, you have a few other options.

  • Use a service like Blogvault to clone an existing site. This lets you export the files and database from one site, migrate it to Blogvault, and spin up a new testing site.
  • If you have both local and production sites set up already, use WP DB Migrate Pro to directly pull the database from the live site down to the test site. You can do the same for files using an add-on
  • Install WP Staging to duplicate the existing installation to a subdirectory on the main site. I usually only use this as a last resort, as it leverages all of the resources of the production site, which isn’t ideal for testing.

Debugging slow sites

When debugging slow sites, there’s a collection of tools that you may be familiar with if you’ve already worked with WordPress before. One of my favorites is Query Monitor, which helps to show execution times for queries running on the site and for scripts or assets being loaded. It gives you a detailed view of what’s happening when a particular page is loaded, which can guide your investigation.

Query Monitor

An alternative is the Debug Bar plugin. While its functionality can overlap a bit with Query Monitor, Debug Bar also has lots of add-ons available that may help you do more detailed troubleshooting.

Debug Bar

For the most advanced debugging, Pantheon users also have access to New Relic APM Professional Edition which can give a deep view into the queries, third party API calls, and DB performance.  It can help users quickly find where and why a site is slow.

Debugging WooCommerce REST API requests and responses

Finally, you may often need to debug communication between your WooCommerce site and other sites, apps, or services. While supporting tens of thousands of merchants, I can say that we don’t often have to debug issues on Pantheon-hosted sites, but these are helpful nonetheless. 

Most WooCommerce gateways have logging settings, which will save API requests and responses automatically for review (and clean them of sensitive information). This is usually very helpful in determining what’s going on behind the scenes for a transaction. You should also check the WooCommerce order notes, as gateways often add error codes or messages to failed orders. Help is often found in unexpected places. 

If you need to simulate requests to your site, you’ll want a good HTTP client. This will let you make requests to the WordPress and WooCommerce REST APIs to view the response that external apps or services will receive. My favorite is Paw, though it’s MacOS only. I love that it can let me share requests and responses with other via URL, and save projects for future use (so your API credentials and example request can be saved). You could also consider Postman or Insomnia as alternatives, both of which work with Windows, too. 

If you want to look at outgoing requests from your site, check out Webhook.site or Beeceptor. Both are really useful to log outgoing API requests or webhooks so that you can review the raw request data. This is especially helpful if your site should be syncing data or sending notifications to an external service to determine if the issue is in sending the request, or if the issue is further downstream with your recipient.

Other debugging tools

Finally, here are a few general-purpose debugging tools that I typically find really useful (they’re also handy for development as well):

  • WP Crontrol is very helpful to test scheduled events. You can view a list of scheduled actions, and run these actions early as needed.
  • WP PHP Console lets you execute PHP or WordPress-specific PHP code straight from the terminal and print PHP variables in Chrome Dev Tools JavaScript console along with your normal JavaScript debugging and testing.
  • Transients Manager is insanely helpful for viewing and managing transients — especially if testing and you need to check that they exist, then clear them to start over.

The WooCommerce developer toolkit

Any well-rounded toolkit has tools for building, testing, and fixing things, and there are tons of useful tools for WordPress and WooCommerce developers to get started with a new build from scratch, build on an existing plugin or theme, or troubleshoot an existing site. 

Have any helpful tools or services of your own? Let me know! I’m always on the lookout for more.


This is a guest post by Beka Rice. Beka is the Head of Product at SkyVerge, where they work on making enterprise-level tools and strategies available to any merchant. SkyVerge is the maker behind some of the most popular extensions on WooCommerce.com, such as WooCommerce Memberships. Beka devotes much of her time to improving Jilt, which helps merchants drive more sales through automated lifecycle emails.

 

Topics Development, Ecommerce, Guides and Tutorials, Testing & Optimization, Website Technology, WordPress

Let’s get in touch

855-927-9387