WooCommerce Design, Shipping, Payments, and Troubleshooting FAQs

Written by Job on February 2, 2018 Blog.

Over in WooCommerce Customer Support, we get a pretty good overview of what people struggle with when getting started with WooCommerce based on recurring questions we receive.

We put our heads together and bundled these questions about WooCommerce into four topics: Design, shipping, payments, and troubleshooting.

Read on to fast-track your WooCommerce learning with our top 10 FAQs and their answers.

How do I design my store the way it looks in my mind?

WooCommerce works out-of-the-box with a wide range of themes, but you might have a specific look in mind. That’s great! We’ve tried to make it as easy as possible to edit and customize your store and, depending on your chosen theme, there are a few ways to make your design ideas a reality.

1. Designing WooCommerce with Storefront

Storefront is our free flagship theme, an intuitive and flexible option offering deep integration with WooCommerce. If you’re using Storefront, there are a few things we recommend.

The free Homepage Control plugin allows you to reorder elements on the homepage – the name of the plugin is indeed self-explanatory.

If you’re OK with some custom PHP, we’ve created Storefront Hooks: Actions and filters with all the hooks you can plug into. There are also quite a few customization snippets available therein.

If you’re unfamiliar with PHP, then using Storefront extensions will go a long way in assisting you. Storefront Powerpack in combination with Storefront Mega Menus are two favorites for changing its look and can be purchased together in the Storefront Extensions Bundle.

Storefron't customizer in action
Storefront’s integration with the WordPress Customizer means you can change headers, footers, font, colors, and layouts in your store, without touching code.

2. Designing WooCommerce using other WordPress themes

One strength of open-source software is you can do whatever you like. This includes choosing any WooCommerce-compatible theme! You can learn how to customize all WooCommerce templates to your liking by using template structure and overriding templates via a theme.

If going this route, it’s a good to get in the habit of checking template files at every release of WooCommerce to ensure customizations do not become outdated. You can also browse the full WooCommerce Developer Codex, which contains snippets for changing the look of WooCommerce.

If you’re uncomfortable with editing templates and using shortcodes, we have extensions to help without you having to touch code:

  • Checkout Field Editor allows you to customize fields in checkout. Hide existing fields, change their required status, or add extra fields with a few clicks.
  • Catalog Visibility Options provides the ability to use WooCommerce as a catalog for visitors and/or only gives access to loyal customers to purchase online. Set the visibility of prices and add-to-cart buttons based on user roles.
  • One Page Checkout showcases the few products you sell and takes customers from the product page straight to the cart and checkout. Gives all steps of the purchase process on one page.

How does shipping work for WooCommerce?

Shipping can quickly become a fairly complex matter. The more requirements your configuration has, the more complex your shipping setup will be. Keep it as simple as possible.

3. How to get started with shipping

In all cases, you need to set up shipping zones. Shipping zones are geographical areas that have the same shipping costs or calculations.

For example, if the cost per weight is the same for the whole of Arizona, but not outside of that, then Arizona should get its own shipping zone. You could also create a shipping zone called ‘local’ for your home country, and create a ‘rest of world’ zone for anything beyond that.

4. Setting up methods per WooCommerce shipping zone

Once shipping zones are set up, you can then add shipping methods for each. Some are configured manually: Set flat rates and free shipping with WooCommerce core, or purchase Table Rate Shipping for more complex configurations.

Certain carriers, such as UPS or Canada Post, enable you to connect the carrier and a specified shipping zone to automatically generate rates of that company. Based on products in the order, shipping rates are calculated for you.

Shipping methods screen in WooCommerce
Scroll down to Shipping Methods on the screen that appears. Disable an existing Shipping Method by using the button. Or select Add Shipping method to use a different one.

Browse all of our Shipping Carriers.

5. Adding dimensions and weights to enable variable pricing

Except when using flat rates, you need to add product dimensions and weights to your shippable products. This is done when editing the product, scrolling down to Product Data and using the Shipping tab:

Shipping screen showing dimensions fields
Add dimensions when editing the product, using Shipping in the product data section.

Often when shipping cost calculations go wrong or aren’t possible, it’s because no product dimensions were entered for the shipping provider to calculate shipping cost. More at: Adding dimensions and weights.

How do I choose the right payment gateway?

There are a lot of payment gateways available for WooCommerce. This is both good and slightly overwhelming!

On WooCommerce.com alone, there are approximately 100 different payment gateway extensions; and on other marketplaces, even more. How do you choose the best one?

Part of finding the right gateway is your own research. We built the software to connect WooCommerce to those payment systems, but are cautious in providing exhaustive information (e.g., on fees) for the simple reason that there are aspects we don’t have input on.

We provide a guide called Which Payment Option is Right for Me? And below, we’ll walk you through the main things that can help narrow it down.

6. Keep country and currency in mind

On WooCommerce.com, there’s a country filter for WooCommerce Extensions that lets you select your country and find out if the payment gateway is available in your country and currency.

WooCommerce.com payments extensions with filter-by-country
Pick your country from the dropdown.

A great first step is to rule out gateways that aren’t applicable to your region.

7. Does your store need recurring payments functionality?

Functionality requirements can limit payment options and help you narrow your search.

For example, our most asked-for payments functionality is Subscriptions (e.g., A monthly snack box or online magazine).

Not all payment gateways are compatible with a system of recurring payments as there are technical and security challenges that come with taking customers’ money on a scheduled basis. For that reason, Prospress, the developers of our popular WooCommerce Subscriptions extension, have a Subscription Payment Methods & Gateways Guide that lists all compatible payment options available on the WooCommerce.com.

Considering specific functionality you require, payment-wise, might narrow your search considerably.

8. Compare features carefully to make sure your gateway is just right

When you’ve chosen a payment services provider, for example PayPal, you’re not in the clear just yet. PayPal has quite a few options, subsidiaries, and codebases; and different PayPal extensions are most suitable for different requirements. Fear not! We have a PayPal comparison table.

PayPal Standard PayPal Pro PayPal Pro Hosted PayPal Advanced PayPal Express
Where is your business located 200+ Countries around the World UK, US, Canada and Australia* (*requires a PayPal Pro Payflow account) Australia, France, Hong Kong, Italy, Japan, Spain, UK US and Canada Available in the same countries as PayPal Standard
*PayPal Credit in US only

WooCommerce broke my site, what next?

It’s difficult to put an exact number to it, but we estimate that 25% of all problems reported by customers is a conflict between WooCommerce and other code running on the website.

If someone reaches out for help troubleshooting a broken site, we start with the two steps below.

About 25% of all problems our customers report with WooCommerce is some kind of conflict between WooCommerce and some other code that is running on the website.

9. Troubleshooting a broken site: System Status report

First we check the System Status report. This report is found at: WooCommerce > Status. The status is descriptive. Generally, it’s best to avoid much of the color red on that page. At Understanding the System Status Report, we explain all elements of the report in detail, but we find that there are two areas in particular that cause issues:

The server environment: This is the place your website lives. You can almost compare it with a gated community. All residents (the sites) in the community comply with a set of rules and, if breached, then there might be trouble. In the case of WooCommerce, your hosting company provides the server environment, and some of their preferences may contradict the requirements of WooCommerce. If you see red in this section, it’s best to reach out to your hosting company.

Templates: Many themes duplicate WooCommerce template files and make changes to them to match styling of the theme. That’s great but problematic when these templates create conflict with WooCommerce functionality, or if the theme developer forgets to update a template to work with the newest version of WooCommerce. To understand if your theme is causing conflict, switch to Storefront (always tested with the latest version of WooCommerce) or Twenty Seventeen. If changing to either theme solves the problem, it’s your theme. At that point, it is best to contact your theme developer.

Troubleshooting

10. Troubleshooting a broken site: Conflict check

Second, we perform a conflict check. If everything in the System Status looks okay, we need to confirm that no other plugins are causing a conflict with WooCommerce. Ideally, start by installing the Health Check plugin and run some tests. If that shows nothing, disable all plugins and re-enable one by one. After each one re-enable, test if the problem persists. We’ve got a great Troubleshooting Self-Service Guide to assist you.

When testing, common sense often helps to find the problem faster. For example, if there’s a problem with the product edit screen, then it might be a good idea to first focus on all plugins that add aspects to this screen, for example, an add-on for products.

Because we wanted to share more

We said 10, but there are a couple more gems we just had to share. Below are five additional tips based on WooCommerce Happiness FAQs:

  • Emails: If you have problems with emails being sent, your order might be stuck in “pending” status  due to the IPN, or an actual email problem. We’ve got a great WooCommerce Email FAQ tutorial you can check out.
  • Order Statuses: We often get questions on why an order is processing if payment has already been processed. The simple explanation is that order processing indicates that the shipping still needs to happen; if your payment is not yet completed, the order status should be “Pending payment.” More at: Order Statuses and their Relationship to Payment Gateways.
  • PayPal’s Instant Payment Notifier (IPN) is a key element to this payment gateway because it updates your WooCommerce order. It can, however, sometimes cause challenges and we’ve tried to list as many of those as possible so you can start troubleshooting straight away.
  • Backups and Security: We cannot begin to stress how important it is to keep your site secure and backed up. Install an SSL certificate on your site so sensitive data and details of customers are encrypted. Your hosting company can help with setting that up, but here’s a guide on SSL and https to get you started.
  • Software: An import security step is to use up-to-date software, so new versions of WordPress and its plugins should be installed when released. Updating can be challenging, so we also have a tutorial on how to update WooCommerce. A key aspect is having a good backup system. Any of the premium Jetpack plans provide a solid safety net should things go south.

———-

And that’s a wrap! We trust these solutions will be helpful as you navigate open-source waters of WooCommerce and sail forward with a stable, secure, and beautifully customized store.

Compiled by Riaan, Dustin, Shaun, Kenin, Phil, Hannah, Allen, Marina, and Job.

cta-banner-10-product-page-v2_2x

6 Responses

  1. FOTOGRAF ŚLUBNY LUBLIN
    February 3, 2018 at 1:14 am #

    it’s really helpful article

  2. shane29
    February 5, 2018 at 5:08 am #

    I am starting out on the adventure of doing Woocommerce websites so any information I can read is helpful as this post is above. https://webexpresions.co.za

  3. Abel
    February 7, 2018 at 5:42 pm #

    Nice post. Thanks for making it easy to follow with the clear steps to take.

  4. Guy Haines
    February 27, 2018 at 5:53 pm #

    How are we to address images that were hard cropped at various sizes to fit our designs. I have many clients for sites I built or sites I manage that are not updating because this changed.

    • Job
      February 28, 2018 at 11:42 am #

      Hey Guy, thanks for getting in touch with us. Several questions regarding the newer approach to images have been answered already in the comments on the developer blog post on the image improvements. Your best bet is to go through the list there.

      Alternatively, either opening a ticket with a Happiness Engineer at My Account > Tickets on this website if you’re are a paying user, or going to the WooCommerce forums for help might be good approaches.

  5. BlueThunder
    February 27, 2018 at 11:07 pm #

    Very nice tips. We built our entire online store using Woocommerce and are very pleased with it.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment
%d bloggers like this: