What is the WPSOLR WooCommerce extension?

WooCommerce is one of the most popular plugins in WordPress and is by far the most used ecommerce plugin. Ecommerce features are very important for websites nowadays even  if you don’t plan on running a traditional online store. Many blogs also sell merchandise on the side. The WPSOLR WOoCommerce extension makes it possible to use WPSOLR with WOoCommerce therefore increasing search performance.

 

Create an attribute

Go to “Attributes” in “Products” and choose a name.

Then click on “Configure terms” on the newly created attribute.

Add a new term.

You should end up with something like this.

 

Create a product

Create your product.

Click on “Attributes”, and if one doesn’t already exist, click on “Add”.

Choose one or multiple values, then save.

 

Create a variable product

Create a normal product.

 

Then choose “Variable product” in Product data. Select “Attributes” in the sidebar, then “Add” if one doesn’t already exist.

Choose the values you want and click on “Used for variations”.

Choose “Variations” in the sidebar. Select “Add variation” and “Go” if one doesn’t already exist.

Choose one of the attribute terms we created earlier.

Then choose a photo for the variable, a price, a sale price if you want and choose “Manage stock?” if you want to be able to configure stock quantity. When you’re done update the product.

 

Create an index

First we need to create an index.

Click on “Connect your indexes”, then create the index. Since i am on a test website i am going to choose “Click to generate a free index to test WPSOLR”.

Click on “Create a free test index”.

 

Activate the WPSOLR WooCommerce extension

Go to “Activate extensions”.

Click on “WooCommerce” in the sidebar.

The second and fourth options replace WooCommerce with WPSOLR for orders, category and shop search. The third option replace WooCommerce with WPSOLR to sort content in drop-down list.

Activate the WPSOLR Theme extension

Click on “Use this extension” and then “Collapse facet hierarchies”. This will be useful for the product categories filter. By default they will be collapsed and you will have to click on a button to see child categories.

Configure the WPSOLR search

Click on the first checkbox and click on the others if you want the features described in the photo.

Next, select “Define your search with ‘index-name’.

And click on “Presentation” then select the “Search” checkbox.

Click on one of the checkboxes above if you want to replace search in admin for one of these objects.

Then save.

 

Configure the WooCommerce fields to index.

Select “Data” in the sidebar.

Select the data you wish WPSOLR to search in. I’ve selected “Products”.

Then choose if you want to also replace search in admin.

Select the taxonomies you want to use.

Select the fields you want to use.

Then i’m going to choose “Orders”.

Then i’m going to check the box on the right to replace search in admin. Choose the fields that you want to use.

Then save.

 

Configure the WPSOLR suggestions

Click on “Suggestions”.

Click on the “Status” checkbox, then give your suggestion a name. Fill in the jQuery selector. I will show you how to get it in the next step. This selector will determine which search bar the suggestions will be applied on. Then choose “Products”. This will suggest you products.

To get the selector, go to the search bar you want the suggestions to apply to and right-click. Then choose inspect

Copy the id and post it in jQuery selectors.

Search for a product to test that everything works correctly. If you want to add suggestions for the frontend part of website as well you just have to repeat what we did before.

We have on last thing to configure.

Inspect the search you want the suggestions to apply to and copy the id.

Since in my case the id for the order section and the product section are the same, I will not create new suggestions. I’m just going to click on “Orders” on the Product suggestion. WPSOLR can filter the correct extensions automatically. This means you will not have product suggestions in the product section and vice versa. However you should know that if you do create a new suggestion with an id that is already in use, one of the suggestions will not work.

As you can see, WPSOLR suggests the correct order.

And here it doesn’t suggest a product, which is what we want.

 

 

Configure the WooCommerce fields to use as filters.

Click on “Filter” in the sidebar.

Choose the fields you want to use as filters. By default they will look like the above picture. If you want something specific, like a slider you would have to first make the fields in question use floating point number instead of text in the “Data” section from before.

Then choose “Range Slider – Ion.RangeSlider js library” in “Layout”. Choose a skin that will determine the appearance of the slider.

You can do this for multiple filters, as long as they use floats instead of text.

If you want to be able to see the colors to click on in filters, you can choose “Color picker” in “Layout”. If you want to see variant products thumbnails in search, click on the checkbox below.

Then click on the button below.

Then associate the colors to the attribute selected in products.

You can also add a filter to only view the products that are on sale.

Click on “Override each item label” if you want to change the facet value. I chose yes and no. When you’re done click on save.

If you want to be able to see if the product is in stock, you can use the “_stock_status” filter.

If you want to be able to see product categories as a tree click on the “Select to display the facet as a tree” checkbox.

 

 

Send Data to index

Click on “Index selected post types in index ‘index-name'”.

 

Add WPSOLR facets widget to your search sidebar

Click on “Customize”, “Widgets” and “Sidebar”. Then add the WPSOLR Facets widget.

 

Search and use filters

You can now search you website to ensure everything is working fine.

 

 

 

 

As you can see, you can now see the product categories in a tree. This makes it easier to tell which category is the parent of another category.

If you click on a product you can see the category it belongs to and its parent category. If I click on “Accessories”, it will take me to its product category page.

You can see that the filters adjust for the category page. Here, it only displays the child category.

If you select a color in the Pa color, it will display the products of that color. The thumbnail also changes if the product is a variable product. In this example, the product Hoodie with Logo is red.

In this one it is green.

If you click on “yes” on “By Wpsolr on sale” only the products that are on sale are displayed.

If you click on “instock”, only the the products that are in stock will be displayed.

You can test that suggestions are working correctly.