Faceted Filtering for BigCommerce Products in WordPress using FacetWP

Recently, I have been working on integrating BigCommerce with WordPress more and more. I’ve already found that the BigCommerce WordPress plugin is quite amazing in how quickly it can integrate your BigCommerce store right into your WordPress site, and in how seamless it was. Combing the BigCommerce plugin with FacetWP has opened up a whole new side of possibilities for headlessly integrating your BigCommerce store into your WordPress site.


1. The first thing we will want to do is to go to our WordPress site’s admin panel and install the Bigcommerce plugin. Download the zip file [click “Clone or Download” > Download Zip]. Then go to the WordPress admin and go to Plugins > Add New. Once you are here, press “Upload Plugin”.

Wordpress Plugins Dashboard showing the available plugins as an example

2. Go to Plugins > Installed Plugins, find the plugin, and activate it.

3. Go to BigCommerce > Welcome and follow the instructions to connect your BigCommerce store.

Wordpress Dashboard showing the BigCommerce panel

4. You should land on the setting page. For now, make sure you have some products in your BigCommerce store with product options, then go ahead and press “Sync Now”.

5. Download and install FacetWP using the same technique we used for the BigCommerce plugin.

6. Now we are ready to create a new facet: Navigate to Settings > FacetWP and click on “Add New” next to “Facets”. Choose the following configuration options (change accordingly):

Wordpress Dashboard opened to the Setting panel

For data source, you can choose bigcommerce_options_data for now, as that’s where our data will be coming from. Hit save and reindex.

7. Still on the FacetWP settings page, Click “Copy Shortcode”. Then click on Pages > Add New Page.

8. Create a new page which will be your BigCommerce category page. I’m just creating a test page here to make things simple. As long as you’re using WordPress’s default text editor, you should see a button above the content field that says “Add Products” with the BigCommerce icon. Click that button. I’m going to go ahead and choose the Shop All category from the category dropdown for now. Press “Embed Products”.

Wordpress Dashboard showing the BigCommerce Plugin overlayed to embed dynamic product listings

9. You should now see a shortcode in your Page content field. In essence, this is your category page. Using a more advanced page editor or using normal HTML, surround the shortcode with a div with the class “facetwp-template”. Outside of your category div, paste your FacetWP shortcode for the facet you created earlier. I used fusion editor for quick column styling, however, I’ll show you the general concept in HTML as well.

Wordpress page showing an example of how to display the BigCommerce products using shortcode

10. Save the page, and if all went well, you should see what looks like part of a JSON object inside some checkboxes on your page.

Example page showing the products and JSON

11. Next, we need to dive into some code. Go ahead and download, install, and activate the FacetWP helper plugin from the resources above. Login to your server and from your WordPress root directory, go to wp-content/plugins/custom-hooks and open custom-hooks.php. Each of the following code blocks can be inserted right underneath the previous code block.

12. This step is optional, but let’s start by making labels appear over our facets. Copy and paste this code into the file:

Copy to Clipboard

13. In my scenario, I’m looking to filter by product size. Let’s add “Product Size” as a post attribute (BigCommerce products are treated as posts) in our FacetWP dropdown when picking a data source. Copy the code below into the same file making sure you change “post_BCsize” and “Product Size” accordingly.

Copy to Clipboard

14. If all went well, you should see “Product Size” in any facet’s data source drop-down.

Wordpress Dashboard showing the BigCommerce settings panel correctly displayed "Product Size" as a Data Source

15. Back to custom-hooks.php, we need to fill that new data source with data. Currently, it’s empty. Let’s fill it in with the BigCommerce options data. Add this to custom-hooks.php making sure you change the code accordingly.

Copy to Clipboard

16. Now we need to parse the bigcommerce_source_data data and modify it to only grab the labels of the products options that we want, before it hits FacetWP’s index. Luckily, I’ve already done this for you. Add the following code and make sure you change it accordingly.

Copy to Clipboard

17. You will need to do this for each product option that you would like to sort by.

18. If all went well, you should see your beautiful filters on your category page!

19. Please consider buying FacetWP if you like it!

BigCommerce Plugin showing an example of how to add products to a Wordpress page