How to add extra WooCommerce checkout fields

One feature that we feel WooCommerce really lacks out of the box, is the ability to add additional WooCommerce checkout fields to the checkout page. Having the ability to add these extra fields gives you the opportunity to capture data about your customer or their order that you ordinarily would not be able to capture.

There are many different reasons as to why you would want to capture this data. They include:

  • You may need to customize the order based on a customers preference
  • Or maybe you want your customer to be able to leave a note for a gift purchase
  • Another use for checkout fields is for marketing research, you could ask your customer how they found your website
  • And lots more!

Whatever your need is for adding extra WooCommerce checkout fields, in this guide we’re going to take you through the process from start to finish of getting them setup on your store. Let’s get right in to it!

Step 1: Install a WooCommerce checkout fields plugin

We said at the very start of this guide that additional checkout fields do not come standard with WooCommerce. This means that we’re going to have to install a plugin to create the fields. The good news is that there are a ton of different plugins for you to use.

In fact, we here at WP Geeks are busy working on our very own WooCommerce checkout fields plugin. We’re quite excited about it and are anticipating a launch really soon.

Until then, we recommend that you install the Flexible Checkout Fields plugin from the WP.org plugin repository.

Download the plugin and install it to your WordPress/WooCommerce website. Once you’ve activated the plugin, move on to step 2.

Step 2: Add the extra checkout fields to WooCommerce

Great, the plug is now installed and activated. Let’s go ahead and set up the additional fields we require. There are a number of different places where you can add the fields. They are:

  • Billing section – underneath the billing form fields
  • Shipping section – below the shipping form fields
  • Order section – below the order notes field
  • Custom – You are also able to define custom sections

Decide on which section is best for your field or fields. Navigate to “WooCommerce” on the WP Admin sidebar and then click on “Checkout Fields”. You’ll now notice a bunch of tabs corresponding to the sections above. Choose the section where you would like to add your field and click the corresponding tab.

Now, you’ll see an interface on the left hand side to add the specific field. Choose the type of field you want to add, specify a label, and give it a name.

For this guide, we’ll add a new text field which allows a customer to add a message for a gift purchase. We’ll add this to the order section.

Add WooCommerce Checkout Field
Adding a new WooCommerce checkout field

Step 3: Add additional field specific configurations

Now that the field has been added, you can customize it by clicking the little down arrow next to the field on the right hand side. We’ve made our field required. Go ahead and customize your fields as you see fit.

WooCommerce Checkout Fields Setting
Configuring the WooCommerce checkout field

Step 4: Test the fields on the frontend of the store

Lastly, it’s a good idea to make sure that the fields are both showing up on the frontend of the website when you checkout and that submitting an order captures the data as expected.

WooCommerce Checkout Fields
Our WooCommerce checkout field on the frontend

That’s all there really is to it. We really hope you found this guide useful and were able to setup the WooCommerce checkout fields on your own store. If you got stuck somewhere, let us know in the comments below and we’ll do our best to help you out.

How to add testimonials to WordPress

There is not much better validation for your product, business or website, than to display testimonials from real life customers and people. Having these show up in prominent areas of your website, where they can easily be seen and read, is a surefire way to grow trust with your audience.

Adding testimonials to WordPress is not as straight forward as it could be though. As you may be aware, it cannot be done out of the box. You have to install a testimonials plugin as a first step and then configure it to fit your brand. Choosing the right plugin and knowing what to configure can get confusing.

Don’t worry! We’ve created this guide as an ultimate resource on setting up testimonials in WordPress. We’re going to walk you through the step by step process of getting a plugin installed, all the way through to displaying them on the frontend of your website. Without further ado, let’s get started!

Step 1: Install a WordPress testimonials plugin

To start off with (and as we discussed earlier), we need to find a testimonials plugin that can integrate with your WordPress theme.

Here at WP Geeks, we’ve started building out our own testimonial plugin for WordPress. We’re pretty excited about it as it is jam packed with features and templates. Unfortunately, it’s not quite ready for release just yet! As soon as it does become available, we will make an announcement on our blog. Keep an eye out.

In the meantime, we recommend that you install the WP Testimonials plugin which can be downloaded from the WP.org plugin repo.

Go ahead now and download the plugin. Once downloaded, install it to your WordPress website and activate it. Once you’ve completed those steps, move on to step 2.

Step 2: Decide on and configure the testimonial settings

Now that the plugin is installed. Let’s do some basic setup. What we really need to decide here is how and where do we want the testimonials to display? Some of your options are:

  • On the homepage in the content area
  • On a repeating sidebar using a widget
  • Inside the content of a specific post or page

Or potentially, you want to have the testimonials show on a combination of the above options. It’s really up to you, but you should make a decision as we’ll be adding the testimonials in step 4.

Using the plugin we’ve recommended, all the configuration settings can be done in step 4 on the widget or the shortcode. We’ll get to that shortly.

Step 3: Add the testimonials from your customers/visitors

Great, we now know where we want to show the testimonials on our site, but we currently don’t have any to actually show. So let’s go and add them. Navigate to “WP Testimonials” on the WP Admin sidebar. Then click “Add New” to add a new testimonial.

Once here, add the title, the content of the testimonial and additionally, there are a bunch of meta data fields to optionally fill out as well. These include:

  • Client Name
  • Job Title
  • Company
  • URL

Fill in the data fields that are applicable to your business or website. Create as many testimonials as you have available. You can also categorize your testimonials using the “Category” taxonomy on the right hand side.

WordPress Testimonials
Adding a new WordPress testimonial

Step 4: Setup the testimonials to display on the frontend

Finally! It’s now time to display the testimonials on your WordPress site. Remember in step 2 we discussed your options for display? Cool, you’ll use that now as we’re going to go through adding the testimonials using both the shortcode (for post/page content) and widget (for a repeating sidebar).

Show testimonials using a shortcode

Navigate to the post or page where you would like to show the testimonials. Edit the page and place your cursor to the position where you would like them to display. Use one of the following shortcodes for display:

  • [sp_testimonials] – Simple grid listing
  • [sp_testimonials_slider] – Slider listing

Show testimonials using the sidebar widget

If you want to show the testimonials on your sidebar, then navigate to “Appearance” and click “Widgets”. Locate the “WP Testimonials” widget and add it to your sidebar.

You now have a ton of configuration options available to you. You are able to edit the design, how many testimonials should show up and many more settings. Configure the options that are relevant to your website, brand or theme.

WordPress Testimonials Widget
WordPress testimonials widget options

Once you’ve saved the posts, pages and/or sidebar widget, go ahead and visit the site on the frontend to make sure that it is all displaying as you expected. You may have a bit of back and forth here, tweaking the styling and configurations as you go.

Step 5: Bonus: Add a form to your website to allow visitors and customers to send in their own testimonials

Lastly, before we sign off. We definitely recommend that you add a form to allow your visitors and customers the ability to submit testimonials. You can do this using a WordPress plugin like Contact From 7 or Ninja forms.

And that’s all there is to it. We hope you found this guide super useful. Do let us know if you ran in to any hurdles and we’ll try our best to help you out in the comments below.

How to setup Pinterest for WordPress

Connecting Pinterest to your WordPress blog can really help both drive traffic to your site and also grow your Pinterest followers. There are many different ways in which you can connect Pinterest to your WordPress website. The most common way would be adding buttons that allow your users to pin your images. Additionally, adding a social button or a Pinterest feed to your sidebar is also a good way to integrate the two platforms.

One lesser known but extremely effective integration between Pinterest and WordPress is having your WordPress posts and images automatically pin when they are published. Did you even know that you could do that?

In this guide, we’ve created the ultimate resource for connecting WordPress and Pinterest. We’re going to walk you through, step by step, each of the different ways to connect WordPress and Pinterest so that you can get more traffic and grow your following.

Adding a Pinterest “Pin It” button to your WordPress site

Let’s first take a look at how to add a button to your WordPress website that allows your visitors to pin images that they see on your posts.

Step 1: Install a Pinterest “Pin It” for WordPress plugin

With most Pinterest integrations for WordPress, we need to install a plugin. Luckily, there are a ton of really good plugins for Pinterest and WordPress. Starting off, let’s add a “Pin It” plugin to our site. This will add a button on every image that a user can click to pin the image.

Here are WP Geeks, we’re busy building the ultimate Pinterest plugin for WordPress. It’s jam packed with features and includes a super intuitive interface for managing the plugin. Unfortunately, it’s not quite ready for release yet, we’ll be announcing the plugin shortly on our blog. Keep an eye out.

In the meantime, we recommend that you install the Pinterest Pin It Button plugin from the WordPress.org plugin repository. Go ahead and download and install the plugin. Once installed, activate it. You’re now ready to move on the step 2.

Step 2: Configure the plugin and specify where/when the “Pin It” button should show

Now that the plugin is installed, we need to decide where and when to show it. Should you show it on pages, posts, custom post type? And should it only show on hover or permanently on every image?

These are decisions that only you can make and will largely depend on the type of website you’re running. To configure the settings, navigate to “Pinterest PinIt Button” on the left hand side WP Admin menu. Click the link and you’ll be taken directly to the settings page.

WordPress Pinterest Settings
Settings page for the WordPress Pinterest plugin

Configure the plugin as desired and make sure to save the changes.

Step 3: Test the “Pin It” button on the website

Everything should be setup and good to go now. You should now spend some time testing and making sure the button displays as you want it to.

Navigate to a post which has images on it. Look out for the “Pin It” button overlay on the image. At the bottom of every post you should also see a button to be able to pin the actual post.

Test that clicking on both these buttons actually pins the post and images to Pinterest. Working? Great!

Pin It Button For WordPress
Preview of the “Pin It” button for WordPress

Now that we’ve included a Pin It button, look out for step by step instructions for adding a feed to your sidebar using a widget and to any post or page using a shortcode.

If you got stuck anywhere in this guide, please let us know in the comments and we’ll try our best to help you out! Happy pinning 🙂

How to add an Instagram feed to WordPress

If there’s two things in this world that we really love, it’s WordPress and Instagram. Unfortunately, they integrate together like oil and water! Adding an Instagram feed to your WordPress website can be a pain in the butt. If you’ve tried to get a simple Instagram feed to show on your WordPress website and have come up short, don’t worry, you’re definitely not the only one.

We feel your pain. And that’s why we’ve written up this guide. To show you, step by step, how to get your Instagram feed showing up on your site. We’re going to break it down in to the smallest, easiest steps and you’ll have your feed displaying on your website in no time.

Let’s get in to it.

Step 1: Install an Instagram feed plugin for WordPress

The very first thing we need to do is install a plugin. WordPress makes it really easy to embed a single Instagram image on to a page (just paste the link in to the post editor), but when it comes to displaying a feed, we unfortunately need a plugin.

Here are WP Geeks we’re brewing up an Instagram feed plugin for WordPress ourselves. We’re really excited to share it with the world, but unfortunately, we’re still polishing off the edges.

In the meantime, we’re not going to leave you hanging. And so, we recommend that you install the Instagram Feed plugin found on the WordPress.org plugin repository. Go ahead and download the plugin and then install and activate it. Once you’ve done that, let’s move on to the next step.

Step 2: Connect your Instagram account

In order for this plugin to work, it needs to be connected to your Instagram account. This is so that the website has permission to fetch and show images from Instagram.

Navigate to “Instagram Feed” on the WP Admin sidebar and click the link. You’ll immediately be taken to a screen which allows you to connect your Instagram account. Click the “Connect an Instagram Account” button and follow the steps to get your account connected.

Connect WordPress to Instagram Feed
Connect your Instagram feed/account to WordPress

Once you’re connected, let’s configure some settings.

Step 3: Configure your Instagram feed WordPress settings

Let’s go ahead and click on the “Customize” tab on the Instagram Feed settings page. You’re now able to manage the look and feel of the widget from this page and integrate the feed seamlessly to your theme.

Some of the more important customizations that you should take in to consideration here are:

  • Number of images – How many images should be displayed on the feed?
  • Width and height of the feed – This should fit your WordPress theme
  • The color – Important for staying on brand
  • Grid options – How many rows and columns do you want to display

There are a ton more options for you to customize and play around with. Go through them all until you find the perfect setup for your theme.

WordPress Instagram Feed - Settings
Settings available for WordPress Instagram Feed

Step 4: Add the Instagram feed widget to your sidebar or shortcode to your posts/pages

It’s now time to actually display the feed on the website. You can do this in two ways:

  1. Add a widget to your sidebar
  2. Add a shortcode to your post

You can add the widget by accessing “Appearance” and then clicking on “Widgets”. Choose the “Text” widget and paste this shortcode in to the widget text area:

[instagram-feed]

Similarly, for posts and pages, find the piece of content that you would like to add the Instagram feed to and paste the same shortcode where you would like it to appear.

Lastly, once you’ve save the widget or post/page, check on the frontend of your website that everything is displaying as expected.

We really hope that this guide helped you get Instagram setup on your WordPress website or blog. Do let us know if you ran in to any trouble along the way in the comments below, and we’ll be glad to help you out where we can.

How to create WooCommerce PDF invoices

Being able to offer your customers a PDF invoice adds a certain kind of professional feel to your business and online store. It’s also extremely useful for customers who may require invoices for their own accounting purposes. The challenge however, is that you are not able to generate WooCommerce PDF invoices out of the box.

Adding this functionality to WooCommerce is actually really easy though. In this guide we’ll walk you through the process step by step. We’re going to need to install a WordPress plugin and do a few small configurations. Let’s start with the plugin.

Step 1: Install a WooCommerce PDF invoices plugin

As mentioned, we need to install a plugin for WooCommerce that allows our customers to generate PDF invoices for the orders that they make on the site. There are actually a number of plugins available that provide this feature.

To let you in on a little secret, we’re actually in the process of developing our own WooCommerce PDF invoices plugin. We’re not quite ready just yet to release it, but will be announcing the release shortly on our blog.

While that plugin is being finished off, we do have a recommendation for you for an existing PDF plugin for WooCommerce. That plugin is called WooCommerce PDF Invoices and can be found on the WordPress.org plugin repository.

Go ahead now and download and install the plugin. Once it’s installed, make sure that you activate it and then move on to the next step.

Step 2: Decide when to send a PDF invoice to your customer

There is really just one important decision to make when enabling PDF invoices and that is at what point of the sale do you want the customer to receive an invoice? And that translates to what email should you attach the PDF invoice to? Some of your options are:

  • Send PDF invoice when a new order is generated. This is generally before payment and processing.
  • Send the PDF invoice once processing is completed.

Depending on your type of product and business, you may choose either of the above options. You are also able to send it on both of the above emails that get sent out.

To configure the above option, hover over the “WooCommerce” tab on the left hand side menu in WordPress and click “Invoices”. From this page you’ll see an “Attach to Emails” setting which you can adjust. Select which option you would like.

WooCommerce PDF Invoices - Settings
Setting up WooCommerce PDF Invoices email options

Step 3: Configure the PDF invoice settings and template

You should now continue to configure the PDF invoice settings. From the same settings page that we configured in step 2, you are able to configure more email options. Select the options that are appropriate for your products and business.

Next, move on to the “Template” tab. From this tab you can edit the look and feel of your invoice that gets sent out. Go ahead and configure the options to match your brand. You can also adjust localization and formatting settings here.

WooCommerce PDF Invoices - Template
You’re able to adjust the template settings for the PDF invoice

When you’re happy, hit “Save Changes”.

Step 4: Test that the PDF invoice gets sent

Lastly, it’s a good idea to make sure that everything is working as expected. What we generally do is create a test order that we end up voiding. You can do the same and check your email for the attached PDF invoice once the order is created or processed.

Easy peezy, lemon squeezy! We hope you enjoyed this guide and found it useful. Let us know if you ran in to any “gotchas” during the process in the comments below and we’ll do our best to help you out.

How to add a request a quote button to your WooCommerce store

Certain businesses and online stores require a customer to request a quote before making a purchase. However, this is not standard WooCommerce functionality. Maybe you’re one of these businesses or websites that require WooCommerce quote functionality? Great! In this guide we’re going to walk you through adding the ability for customers to request a quote before a purchase is made.

So, why would you want to have customers request a quote before making a purchase. Well, there are many reasons:

  • You sell a customized product tailored to the specific needs of a customer
  • You sell a service that is not fixed in scope
  • You may not carry stock of a certain product and need to confirm with your supplier that they have stock before confirming the purchase
  • And many, many more additional use cases…

If you fit in to one of the categories above, or have a different use case for adding the quoting functionality, read on as we take you step by step through setting it up.

Step 1: Install a WooCommerce quote plugin

As mentioned above, quoting in WooCommerce is not shipped out of the box. We need to install a plugin to be able to do this. The great news is that there are a number of plugins that you can install to get setup for quoting.

Here at WP Geeks, we’re busy creating a super awesome WooCommerce quote plugin. We’re a month or two out before the launch of the plugin, so for now, we’re going to recommend another plugin for you to install to get up and running.

The plugin that we recommend you install for now is called WooCommerce Request A Quote and you can download it from the WordPress.org plugin repository.

Go ahead and download it, install it and finally activate it on your WooCommerce store. Once done, move on to the next step.

Step 2: Choose a quote strategy

Before we move on to actually configuring the plugin, you need to decide on a strategy for quoting. This will very much depend on your product inventory, how many products you keep and your business model. One of the key decisions to make here are:

  1. Should all your products that are sold on your site require a quote before they can be bought or only a subset of your products?
  2. Should all customers and user roles on your site request a quote or maybe only a specific user role or type of customer?

Depending on your decisions above, you’ll need to configure the plugin settings differently. Since we can’t cover all use cases in this guide, we’re going to assume that we need all products in the store to request a quote before they can be bought. And, every type of customer who visits the store will also need to request a quote before they are able to purchase.

Step 3: Configure the quote and product settings

Based on our decisions in step 2, lets configure the plugin. Navigate to “YITH Plugins” and click on “Request a Quote”. From this page, you can configure the plugin.

For our demo site, we’ve used the “Request A Quote” page as the page for the form. We’ve also simply used the text “Add to quote” as our button CTA. Decide on the settings that best suit your own business case and click “Save Changes” when done.

WooCommerce Quote
Setting up WooCommerce quote functionality

Step 4: Test the “Add to quote” button and functionality

Everything should now be setup as required. You’ll notice that when you visit a product page, a new button has been added to it that allows you to request a quote for the specific product you’re viewing.

WooCommerce Request A Quote
Button added to be able to request a quote

Start running a few tests to make sure it’s setup as required. Add a number of products to your quote and finally go to the request a quote page and submit your details. You should receive an email with the details of the quote.

And that’s all there is to it! We hope this guide was helpful to you. Let us know if you have any questions or you ran it to issues getting this setup. We’d love to hear from you.

How to add custom WooCommerce product tabs to your product pages

If you’re using WooCommerce to sell products on your website, you may have come across the need to add additional and important information to your product pages. Naturally, one of the places that makes the most sense to add additional information about your products to is the tabs section below the product description. But how do you add new custom WooCommerce product tabs?

Well, that’s what were going to explore in this guide. We’ll run you through all the steps that are needed to be able to add tabs with the product information that you want to display.

Adding WooCommerce product tabs to the product page is not default or out of the box functionality, so we’re going to use a plugin to help us out. Don’t worry though, it’s really simple to implement and as mentioned, we’ll show you exactly how.

So, let’s get in to it.

Step 1: Install a custom WooCommerce product tabs plugin

The first step is to install the plugin that will allow the tabs to be added. Now, you have a few choices here as there are a number of plugins available that can add this functionality to WooCommerce for you. In fact, here at WP Geeks we’re in the process of creating our very own WooCommerce product tabs plugin.

Our plugin is not quite ready yet, but in the meantime, we can still get product tabs added to your online store by using another plugin. The plugin that we recommend that you use for now is called Custom Product Tabs For WooCommerce and can be downloaded from the WordPress.org plugin repository.

Go ahead and install the plugin and once you’ve activated it on your store, move on to step 2.

Step 2: Decide what type of tab you would like to add (global or product specific)

It’s time now to make a decision about what type of tabs you want to add to your products. This will be unique to each individual store and product. There are two main types of product tabs that you can create. They are:

  1. Global tabs – These are tabs that are created for use across all products. You create the tab once, add the information that you need and then re-use it across all products. This is very useful if you want to include the same tab on multiple products and not have to re-type all the information.
  2. Product specific tabs – These are thats that only apply to 1 specific product. It’s custom designed just for a single product. It cannot be re-used on another product.

Based on the purpose of the product tab that you want to add, you should know which type of tab to create. In this guide, we’ll set up one of each tab type.

Step 3: Setup a global tab for multiple products

Navigate to “Custom Product Tabs” and you’ll see an interface which allows you to create global tabs. To add a new tab, click the “Add Tab” button at the top of the page. Type in a title, name and the tab content in to the fields provided and then click “Save Tab”.

Custom WooCommerce Product Tabs - Global
Adding a custom WooCommerce product tab globally to our demo store

Your tab is now ready to be used on any product that you wish. We’ll get to adding global tabs to a product in step 5.

Step 4: Add a individual product tab to a product

Now, let’s navigate to a single product to add a custom tab just for that product. So click on “Products” on the WP Admin sidebar and select the product that you would like to add the tab to. Upon clicking the title, you will be directed to the edit page of the product. Scroll down to the “Product data” meta box.

You’ll now see a new submenu item in the meta box called “Custom Tabs”. Click that and you’re now given the opportunity to create a custom tab, just for this product. So add a title and the tab content. Once done, click “Save Tabs”

WooCommerce Product Tabs
Adding a single WooCommerce product tab to our product

Step 5: Assign the global tab to a product

Ok, let’s go ahead and assign the global tab that we created in step 3 to this product as well. To do that, click the “Add a Saved Tab” button. A modal will present itself and give you the ability to add the tab we created earlier. Go ahead and add the global product tab that we created.

Choose Custom WooCommerce Product Tab
Modal selection for the global product tab selector

Great! Now save the product and visit the actual product page. You should now be seeing a product page with the two additional custom WooCommerce product tabs.

We told you this was going to be easy! 🙂 We hope you enjoyed this guide and found it useful. Did you perhaps get stuck on any of the steps above? Maybe something isn’t working out as you expected. Feel free to let us know in the comments and we’ll try our best to help you out.

How to add a WooCommerce product table to your store

WooCommerce is without a doubt the number one piece of e-commerce software on the market at the moment. What we really love about WooCommerce is the many extensions available and the ability to easily customize your site at the click of a button. Adding a WooCommerce product table (instead of the standard product grid) is no different. Using a simple plugin and a shortcode, you’ll be able to add one to your store in no time.

In this guide we’re going to walk you through the process of setting up a WooCommerce product table on your own site. Let’s get in to it.

Step 1: Install a WooCommerce product table plugin

As mentioned above, adding a product table to your store requires a plugin to be installed. There are many plugins available that give you the ability to add a product table. In fact, we here at WP Geeks are in the process of developing one of our very own WooCommerce product table plugins.

Our plugin is not quite ready just yet, but in the meantime and for the purposes of this guide, we recommend that you install the Woo Product Table plugin from the WordPress.org repository.

Go ahead and do that and once installed, activate the plugin and move on to the next step.

Step 2: Configure the product table columns and layout

Now that the plugin is installed, we should define what columns and product data we want displayed in the table and how we want it to look like on the frontend of the website.

Navigate to “WPT Table” on the WP Admin sidebar. From this page, you’ll see 4 different tabs with configurations for setting up the plugin. The most important tab is the first one called “Column”. This tab allows you to define what columns you would like to show on the product table.

WooCommerce Product Table

Deciding on which columns to display is an important step and worth taking some time to put some thought in to. Columns provide your potential customer with the information they need to be able to purchase the product. Put yourself in to a customers shoes and think about what information do you need to be satisfied that you can now go ahead and buy.

It’s also worth adding columns that can help sell the product for you. One such column would be “Customer Rating”. If your products have a number of positive ratings, this can add validation to your potential customer that because other people love it and they will also. It makes the decision of purchasing the product easier for them.

Once you’ve decided on which columns to add to the table, go ahead and select them on the settings page and click “Generate Shortcode”. This shortcode is important, so copy it and move on the step 3.

Step 3: Enable to table on the frontend by using the product table shortcode

Ok, it’s time to put this table to use! To show the table on your website, you need to use the shortcode. Since you copied the shortcode in step 2, it should be on your clipboard. Go ahead and navigate to “Pages” on the WP Admin sidebar. Choose a page or create a new page on which you would like to show the product table.

Open the page and paste in the shortcode, lastly, save the page. Here is what the page shortcode looks like on our demo store.

WooCommerce Product Table Shortcode

Navigate to the page that you added the shortcode to on the frontend and you should now see a beautiful product table with a list of your products displaying. That’s all there is to it.

We really hope that this guide helped you add a WooCommerce product table to your site. If you ran in to any issues, then be sure to let us know in the comments below and we will try our best to help you out.

How to add WooCommerce product filters to your store

WooCommerce provides some basic filtering and sorting capabilities out of the box. You can for instance filter products by category, price, rating etc and sort by price. However, that’s about as much as you get. If you need any advanced WooCommerce product filters, then you’re out of luck.

The good news is though, that we can implement some of these more advanced product filters using a WooCommerce plugin. Some of the options you may want to filter on are:

  • Product color
  • Product code
  • Product size
  • Product weight
  • Product height
  • Product length
  • Product shipping options
  • Product categories and tags
  • Product rating
  • Product locations
  • And more!

Whatever the filtering that you would like to implement, this guide will show you how to get it set up. So let’s get started.

Step 1: Install a WooCommerce product filters plugin

As mentioned in the intro, the only way to get advanced filters setup on your site is to install a plugin. Here at WP Geeks we’re busy creating our own, extremely flexible, WooCommerce product filter plugin. Unfortunately, it’s not quite finished yet. In the meantime, we recommend that you install the WooCommerce Products Filter plugin from the WordPress.org plugin repository.

Go ahead and install the plugin to your WordPress website. Once installed, activate it and move on to the next step.

Step 2: Setup the filters in the plugin settings

Great! The plugin is now installed and activated. The next step is to setup the filters that you would like to enable on the store. Have a quick think about your products and the filtering options that would be most useful to your customers. It’s always a good idea to put yourself in to the shoes of your customers to best figure out how you should configure your store.

Have a good idea of the filters you want to enable? Excellent. Now Navigate to “WooCommerce” on the left hand side WP Admin menu and click the “Settings” submenu. Lastly click the “Products Filter” tab at the end of the menu.

You’re now presented with a whole host of options for configuring the plugin. The most important is the first tab of settings where you enable the filters. Based on which filters you decided to add to the store, go ahead and enable them on this settings page. You may also want to change the look and feel of the WooCommerce product filters. You can do this on the “Design” tab.

Here is an example of our demo store where we have enabled the “Price” and “Category” filters.

WooCommerce Product Filters

Step 3: Add the filter widget to your sidebar

Before the filters will show up on your store, they need to be added to a sidebar. To do this, we need to add a widget. Navigate to “Appearance” and then click the “Widgets” submenu.

Once you’re on the widgets editor, locate the “WOOF – WooCommerce Products Filter” widget and add it to your sidebar. There is some configuration you can do here. The most important is setting the title.

Finally, make sure the widget is saved to the sidebar. Here is what our demo settings look like for the widget.

WooCommerce Product Filter - Widget

Step 4: Test the WooCommerce product filters on the front end

By now you should all be ready to go and the filters will be activated on your store. However, it’s good practice to make sure it’s all running smoothly. Go to your store’s frontend and start applying the filters to the product results. Make sure there is no unexpected behaviour and it’s a good user experience.

You may have to do a few small design tweaks to get it looking on brand.

And that concludes this guide. Did you find it useful? We sure hope so. Let us know if you got stuck anywhere or if there were any issues that you encountered during the setup. We’ll be happy to answer any of your questions in the comments below.

How to compare WooCommerce products

Having the ability to compare WooCommerce products in your online store can help your customers choose the right product for them. Product comparisons are especially useful when you are selling a product with slight variations or specs. Having a table with the different product specs listed is extremely intuitive for a customer. There is little wonder why the likes of Apple uses comparison tables for their products on their website.

Adding a comparison table to WooCommerce unfortunately does not ship as a standard feature of WooCommerce. However, the good news is that there are many different plugins that you can use to add this feature to your own store.

In this guide, we’ll show you exactly how you can add a table to compare products. From picking the right plugin, to installing it and actually adding a table to your site. Let’s get started.

Step 1: Install a plugin to compare WooCommerce products using a table

As mentioned above, we need to find and install a plugin first before we can do any setup and configuration. There are many different plugins available to do this, which makes it difficult to pick the right one. Let us help you pick the right one.

Here at WP Geeks we’re in the process of building out a WooCommerce product comparison plugin. Unfortunately, it’s not quite ready yet for release (you can follow updates on this blog via our blog).

While we’re waiting for that plugin to be launched, we recommend that you install the Product Compare for WooCommerce plugin which is found on the WordPress.org plugin repository.

Download the plugin and install it to your WooCommerce store. Once installed, move on to the next step.

Step 2: Configure the comparison table settings

Now that the plugin is installed, it’s time to configure the plugin. Navigate to “WooCommerce” on the WP Admin sidebar and click “Compare Products” on the submenu. You should now see the settings page for the plugin which looks like this:

Compare WooCommerce Products - Settings

From this page you can select the attributes that you would like included on the comparison table. Plus customize what the compare button and the look and feel of the actual table should look like. You’re also able to customize the label text to change the wording to suit your brand/business.

The most important setting that you’ll most likely want to modify is the color scheme. Navigate to the “Style” tab to update the colors.

Once you’re happy, move on to step 3.

Step 3: Add the WooCommerce comparison table sidebar widget

For this plugin to work, you need to include the sidebar widget to your theme. This adds an area to your theme where the products that are selected for comparison can be viewed. Additionally, it provides a button which should be clicked when the user is ready to compare products.

Without adding the widget, the plugin will not work and you will not be able to compare WooCommerce products.

To add the widget, go to “Appearance” > “Widgets” on the WP Admin menu. Find the widget called “WooCommerce Products Compare” and add it to your sidebar widget area. This is what it looks like on our demo store.

WooCommerce Product Comparisons - Widget

Step 4: Test that you are able to compare WooCommerce products on your store

Lastly, make sure everything is working by navigating to the frontend of your store. You should now see that under each product, there is a new button added called “Compare”. You can click this, and as you do so, it adds the product to the sidebar widget that we added in Step 3.

Once you’ve selected two or three products for comparison, click the “Compare” button on the sidebar widget and you should be taken to a page which shows the comparison table of the products you selected.

And that is all there is to it. We hope that you found this guide useful! Feel free to let us know if you ran in to any issues getting the plugin setup and we’ll do our best to assist you in the comments below.