• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Neil Curtis

Learn how to make money online

  • Home
  • About
  • Start an Online Business
  • Latest Articles
  • My Resources
  • Contact

Add a filter product search to your website [video]

By Neil on April 2, 2014

Add a filter product search to your website

This tutorial walks through how to use the WP Views plugin to add a list of products to the home page and allow them to be filtered by site visitors. All turbo trainer products are shown and these can be filtered by Brand, Resistance, and Price. This is part of a series of tutorials that are slowly showing you how to build the turbobiketrainer.com website. Go to the main case study page to see all stages in this series.

Prerequisites

The case study website is set up on the WordPress Genesis Framework and the Metro Pro child theme. Also the Types & Views plugins are used to set up and style custom post types and then display them on the homepage.

– See more on Genesis and why I use their Framework and child themes.

– See more on the Types & Views plugins and why I use it.

LIKE WHAT YOU’VE READ?
I publish new tutorials all the time so it would be great let you know when something is ready for you to check out. I also have lots more to share with you about how to easily customize and style your WordPress website, so why not join my gang.

TELL ME MORE >>

Reader Interactions

Comments

  1. Jo says

    January 12, 2015 at 12:20 pm

    Best,

    first of all thank you for your amazing tutorials! i already learned so much from it.

    I wonder if you would be so kind to help me.
    I’m in a new job in a new team where i need to file up a catalog online with more then 400 products (crystals in this case)

    now i am following your video to create a search/filter engine function on a page. but i need to create some of my custom types as (single line) or (multiple line) fields. as i didn’t figure out to read the data from the excel and make it go in the checkboxes i first created. so i stepped away and used single lines etc..

    for example some of my fields would be chakras , i can then choose every single time for which chakras the specific crystal would be good. so i have always one or more awnsers. being one of the 7 chakras, so i have 7 possible awnsers. but in the excel file it goes like ( root, sacral, third eye) for example. so if i make checkboxes it didn’t read it well and i never got the different ones checked.

    now i made custom query filters with different values (from a single line field, no checkbox or no numeric). and it doesn’t get my crystals listed.. i asume there is a problem with the filtering options as it probably never is my required value as i created them myself..

    the value would be on the search engine
    all
    root
    sacral
    third eye
    crown chakra
    etc.

    now it doesn’t find any products as within the line of the cutsom field it would be written as

    root, sacral, crown

    can you help me figure this out?? it would be amazing!!

    Reply
  2. Neil Curtis says

    January 19, 2015 at 8:03 am

    Hi, have you managed to get this working yet? Sorry for the slow reply.
    Just to get things straight, do you have a search area in your filter where people type in one of the words, and then when you hit the button no results are shown?

    Does it show any items before the search, or is it a case of no items showing up ever when you display your custom view on your website?

    Neil

    Reply
  3. Peter deP says

    February 23, 2015 at 5:14 pm

    Hi Neil:

    Great toots – much appreciated.

    Question: Is there any way you’ve discovered that allows the -image- title as opposed to the -product- title to show up on graphics in the alt and title tags?

    Many thanks.

    Best wishes,
    Peter deP
    Monday – 18:14h.
    23-February-2015

    Reply
    • Neil Curtis says

      February 26, 2015 at 2:47 pm

      Hi Peter, sorry for taking a couple of days to reply.
      Unfortunately I have never done this. I’ve just had a quick play to see if I could find a solution but I couldn’t.

      I’m sure this must be a possibility. Have you tried using the Toolset support forum, they are normally pretty good from my experience.

      If you find an answer I’d love to hear back from you.

      Good luck, Neil

      Reply
      • Peter deP says

        February 26, 2015 at 4:12 pm

        Hi Neil:

        It was a passing thought at the time of the tutorial but I may well follow it up as It’s now got me intrigued. If I find any solution, I’ll be sure to let you know. Many thanks.

        Best wishes,
        Peter deP
        Thursday – 17:11h.
        26-February-2015

        Reply
  4. Uri says

    March 24, 2015 at 10:52 am

    My version is little different.
    I can not find the ‘AND’ relationship of the filters.
    Can you please point where is is in the current version?

    Reply
    • Neil Curtis says

      March 27, 2015 at 3:23 pm

      You should have an area called “Query Filter” in Views and if you click edit on this it will open up all your filters. At the bottom there is the option to select AND.

      Let me know if you have troubles.

      Neil

      Reply
      • Uri says

        March 29, 2015 at 6:07 am

        Found it.
        Thank you!

        Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Copyright © 2021 · NeilCurtis.me · Website powered by the Genesis Framework and uses the Maker Pro Theme

/* ----------------------------------------- */ /* Content Template: Guides Layout - start */ /* ----------------------------------------- */ #ninetypercent { width: 90%; margin: 0 auto; } #profilebox { border: dashed 2px #ccc; background: #E8E8E8; padding: 10px; padding-bottom: 15px; margin-bottom: 20px; } #profileimage { float: left; max-width: 150px; margin-right: 3%; } #profilebio { font-size: 90%; } #stepfont1 { float: left; font-size: 30px; font-weight: bold; padding: 5px; padding-left: 3%; background: #f96e5b; width: 100%; min-width: 280px; color: #FFFFFF; } #arrow { float: left; } #UWBwrap { padding-top: 10px; border-top: solid 3px #ccc; border-bottom: solid 3px #ccc; } /* ----------------------------------------- */ /* Content Template: Guides Layout - end */ /* ----------------------------------------- */