Search: AI, Hybrid, Classic

  • Pricing
  • Help
    • My Licenses
      • Login
      • Download
      • Why us
      • Contact us
    • Features
      • Google Retail Search
      • Weaviate
      • Elasticsearch
      • OpenSearch
      • Solr
      • Algolia
      • Roadmap
      • Artificial Intelligence
      • Hosting
      • Releases
    • Documentation
    • Support
    • Testimonials
    • Live Demos
    • Blog
Menu
  • Pricing
  • Help
    • My Licenses
      • Login
      • Download
      • Why us
      • Contact us
    • Features
      • Google Retail Search
      • Weaviate
      • Elasticsearch
      • OpenSearch
      • Solr
      • Algolia
      • Roadmap
      • Artificial Intelligence
      • Hosting
      • Releases
    • Documentation
    • Support
    • Testimonials
    • Live Demos
    • Blog
Search
Search
Search
Search

Home » Your configuration journey, step by step » Add-ons » WooCommerce add-on

WooCommerce add-on

331 views 0 January 27, 2021 Updated on February 4, 2021

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

Image Screenshot-2021-01-27-at-10.40.57-1024x865.png of WooCommerce add-on

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

Image Screenshot-2021-01-27-at-10.42.20-1024x168.png of WooCommerce add-on

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

Image Screenshot-2021-01-27-at-10.59.27-869x1024.png of WooCommerce add-on

Add a new term.

Image Screenshot-2021-01-27-at-11.00.10-1024x379.png of WooCommerce add-on

You should end up with something like this.

 

Create a product

Image Screenshot-2021-01-27-at-10.33.48-1024x466.png of WooCommerce add-on

Create your product.

Image Screenshot-2021-01-27-at-10.36.56-1-1024x387.png of WooCommerce add-on

Click on “Attributes”, and if one doesn’t already exist, click on “Add”.Image Screenshot-2021-01-27-at-11.01.29-1024x316.png of WooCommerce add-on

Choose one or multiple values, then save.

 

Create a variable product

Image Screenshot-2021-01-27-at-11.10.30-1024x589.png of WooCommerce add-on

Create a normal product.

Image Screenshot-2021-01-27-at-11.12.53-1024x382.png of WooCommerce add-on

 

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

Image Screenshot-2021-01-29-at-10.10.48-1024x379.png of WooCommerce add-on

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

Image Screenshot-2021-01-27-at-11.14.32-1024x377.png of WooCommerce add-on

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

Image Screenshot-2021-01-27-at-11.40.41.png of WooCommerce add-on

Choose one of the attribute terms we created earlier.

Image Screenshot-2021-01-27-at-11.40.31-1024x525.png of WooCommerce add-on

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

Image Screenshot-2021-01-25-at-12.28.45-1024x381.png of WooCommerce add-on

First we need to create an index.

Image Screenshot-2021-01-25-at-12.29.01-1024x228.png of WooCommerce add-on

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

Image Screenshot-2021-01-25-at-12.29.07-1024x180.png of WooCommerce add-on

Click on “Create a free test index”.

Image Screenshot-2021-01-25-at-12.29.34-1024x192.png of WooCommerce add-on

 

Activate the WPSOLR WooCommerce extension

Go to “Activate extensions”.

Image Screenshot-2021-01-25-at-12.29.43.png of WooCommerce add-on

Click on “WooCommerce” in the sidebar.

Image Screenshot-2021-01-25-at-12.31.11-1024x629.png of WooCommerce add-on

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

Image Screenshot-2021-01-29-at-11.06.01-1024x486.png of WooCommerce add-on

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.

Image Screenshot-2021-01-25-at-12.31.30-1024x68.png of WooCommerce add-on

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

Image Screenshot-2021-01-25-at-12.31.50-1024x262.png of WooCommerce add-on

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

Image Screenshot-2021-01-29-at-11.33.35-1024x129.png of WooCommerce add-on

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

Image Screenshot-2021-01-25-at-12.31.54.png of WooCommerce add-on

Then save.

 

Configure the WooCommerce fields to index.

Image Screenshot-2021-01-25-at-12.32.20.png of WooCommerce add-on

Select “Data” in the sidebar.

Image Screenshot-2021-01-25-at-12.32.37-1024x689.png of WooCommerce add-on

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

Image Screenshot-2021-01-26-at-17.02.31-1024x194.png of WooCommerce add-on

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

Image Screenshot-2021-01-26-at-17.03.30-1024x216.png of WooCommerce add-on

Select the taxonomies you want to use.

Image Screenshot-2021-01-26-at-17.07.29-1024x784.png of WooCommerce add-on

Select the fields you want to use.

Image Screenshot-2021-02-04-at-14.53.30.png of WooCommerce add-on

Then i’m going to choose “Orders”.

Image Screenshot-2021-02-04-at-14.56.15-1024x620.png of WooCommerce add-on

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

Image Screenshot-2021-01-25-at-12.34.48.png of WooCommerce add-on

Then save.

 

Configure the WPSOLR suggestions

Image Screenshot-2021-01-29-at-11.57.27-1-1024x328.png of WooCommerce add-on

Click on “Suggestions”.

Image Screenshot-2021-01-29-at-12.00.17-1024x717.png of WooCommerce add-on

Image Screenshot-2021-01-29-at-12.00.27-1024x263.png of WooCommerce add-on

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.

Image Screenshot-2021-01-29-at-12.29.11-1024x459.png of WooCommerce add-on

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

Image Screenshot-2021-01-29-at-12.29.28-1024x637.png of WooCommerce add-on

Image Screenshot-2021-01-29-at-12.29.34.png of WooCommerce add-on

Copy the id and post it in jQuery selectors.

Image Screenshot-2021-01-29-at-14.34.45-1024x466.png of WooCommerce add-on

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.

Image Screenshot-2021-02-04-at-10.26.52-1024x147.png of WooCommerce add-on

Image Screenshot-2021-02-04-at-10.29.06-1024x675.png of WooCommerce add-on

Image Screenshot-2021-02-04-at-10.27.26-1024x385.png of WooCommerce add-on

We have on last thing to configure.

Image Screenshot-2021-02-04-at-15.01.02-1024x92.png of WooCommerce add-on

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

Image Screenshot-2021-02-04-at-16.40.42-1024x670.png of WooCommerce add-on

Image Screenshot-2021-02-04-at-16.40.50-1024x444.png of WooCommerce add-on

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.

Image Screenshot-2021-02-04-at-16.46.35-1024x330.png of WooCommerce add-on

As you can see, WPSOLR suggests the correct order.

Image Screenshot-2021-02-04-at-16.47.49-1024x341.png of WooCommerce add-on

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

 

 

Configure the WooCommerce fields to use as filters.

Image Screenshot-2021-01-27-at-09.01.44.png of WooCommerce add-on

Click on “Filter” in the sidebar.

Image Screenshot-2021-01-27-at-09.14.39-1024x703.png of WooCommerce add-on

Image Screenshot-2021-01-27-at-09.14.54-1024x659.png of WooCommerce add-on

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.

Image Screenshot-2021-01-27-at-09.15.10-1024x703.png of WooCommerce add-on

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

Image Screenshot-2021-01-27-at-09.15.47-1024x710.png of WooCommerce add-on

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

Image Screenshot-2021-01-27-at-09.16.22-1024x710.png of WooCommerce add-on

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.

Image Screenshot-2021-01-27-at-09.16.41-1024x829.png of WooCommerce add-on

Then click on the button below.

Image Screenshot-2021-01-27-at-09.16.55-598x1024.png of WooCommerce add-on

Then associate the colors to the attribute selected in products.

Image Screenshot-2021-01-27-at-09.17.12.png of WooCommerce add-on

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

Image Screenshot-2021-01-27-at-09.17.33-1024x655.png of WooCommerce add-on

Image Screenshot-2021-01-27-at-09.17.43-892x1024.png of WooCommerce add-on

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.

Image Screenshot-2021-01-28-at-09.17.24-1024x713.png of WooCommerce add-on

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

Image Screenshot-2021-01-29-at-09.27.14-1024x661.png of WooCommerce add-on

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

Image Screenshot-2021-01-27-at-12.11.38-1024x513.png of WooCommerce add-on

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

 

Add WPSOLR facets widget to your search sidebar

Image Screenshot-2021-01-27-at-12.13.44-1024x478.png of WooCommerce add-on

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.

 

 

 

 

Image Screenshot-2021-01-29-at-09.28.45-1024x528.png of WooCommerce add-on

Image Screenshot-2021-01-29-at-09.29.16-1024x236.png of WooCommerce add-on

Image Screenshot-2021-01-29-at-09.55.22-1024x424.png of WooCommerce add-on

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.

Image Screenshot-2021-01-29-at-09.59.51-1024x478.png of WooCommerce add-on

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.

Image Screenshot-2021-01-29-at-10.00.18-1024x470.png of WooCommerce add-on

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

Image Screenshot-2021-01-29-at-10.07.39-1024x532.png of WooCommerce add-on

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.

Image Screenshot-2021-01-29-at-10.09.56-1024x525.png of WooCommerce add-on

In this one it is green.

Image Screenshot-2021-01-29-at-10.27.07-1024x517.png of WooCommerce add-on

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

Image Screenshot-2021-01-29-at-10.29.00-1024x500.png of WooCommerce add-on

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

Image Screenshot-2021-02-04-at-10.29.56-1024x496.png of WooCommerce add-on

You can test that suggestions are working correctly.

 

Was this helpful?

Yes  No
Related Articles
  • Hybrid search
  • Question Answering
  • Cohere
  • OpenAI
  • HuggingFace
  • CLIP

Didn't find your answer? Contact Us

Previously
Polylang add-on
Up Next
Cross-domain search add-on
Expand All Collapse All
  • What is it WPSOLR ?
    • The standard WordPress SQL search
    • The WPSOLR search with Elasticsearch, Apache Solr, or Algolia
  • Your configuration journey, step by step
    • Install Apache Solr
    • Hosted Apache Solr and SolrCloud Services
    • Install Elasticsearch
    • Elasticsearch Hosting
    • Configure your indexes
      • Create a Google Retail search index
      • Create a Weaviate index
        • Transformers
        • CLIP
        • HuggingFace
        • OpenAI
        • Cohere
        • Question Answering
        • Hybrid search
      • Generate a test Apache Solr index
      • Generate a test Elasticsearch index
      • Create an Apache Solr index
      • Create a SearchStax SolrCloud index
      • Create an Elastic Elasticsearch index
      • Create an Amazon AWS OpenSearch index
      • Create an Algolia index
      • Create an Elasticsearch index
      • Create an Opensolr Solr index
      • Create a Qbox Elasticsearch index
      • Create an ElasticPress Elasticsearch index
      • Create an Aiven Elasticsearch or OpenSearch index
      • Create a Bonsai Elasticsearch index
      • Create an Amazon AWS Elasticsearch index
      • Create an ObjectRocket Elasticsearch index
      • Create a Cloudways Elasticsearch index
      • Create an Alibaba Cloud Elasticsearch index
      • Create a Compose Elasticsearch index
      • Connect to an Apache Solr index
      • Connect to an Elasticsearch index
    • Add-ons
      • bbPress add-on
      • YITH WooCommerce Ajax Search add-on
      • SEO add-ons
        • Yoast SEO add-on
        • All in One SEO add-on
      • Listable add-on
      • ACF add-on
      • Advanced Scoring add-on
      • Cron Scheduling add-on
      • Theme add-on
        • Filters layouts
          • Radiobox & Checkbox Layout
          • Numeric Range Layout
          • Colour Picker Layout
          • Range Slider Layout
        • Add Ajax to the current Theme
        • Collapse taxonomy hierarchies
        • Custom Facets CSS
      • WPML add-on
      • Premium add-on
        • Manage more than one Elasticsearch or Solr index
      • PDF Embedder add-on
      • Geolocation add-on
      • AI Natural Language APIs add-on
        • Amazon Comprehend
        • Google Natural Language
        • Aylien Text Analysis
        • MeaningCloud
        • Qwam Text Analytics
      • Toolset Types add-on
      • AI Image and OCR APIs add-on
        • Google Vision
        • Amazon Rekognition
      • Embed Any Document add-on
      • MyListing add-on
      • Polylang add-on
      • WooCommerce add-on
      • Cross-domain search add-on
      • Directory+ add-on
      • Toolset Views add-on
      • Listify add-on
      • Jobify add-on
      • Query Monitor add-on
  • Quick start
Login
Support
Privacy policy
  • Terms and Conditions
  • © 2020 wpsolr.com. All Rights Reserved.
Youtube
Roadmap