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”.
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):
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”.
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.
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:
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.
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.
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.