Add a Product Search Screen and Results Template - Elementor Wordpress Tutorial

With No Extra Plugin - you can easily add a Search Page and ensure the results are filtered to just show Products.
Add a Product Search Screen and Results Template - Elementor Wordpress Tutorial
Hire us to work on your Website! [e-mail] or visit websquadron.co.uk
Get Elementor Pro: be.elementor.c...
Get Elementor Cloud Hosting: trk.elementor....
Support us: paypal.me/Webs...
Mastery Membership: websquadron.co...
Indeed we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room): amzn.to/3feqH18
Soundproof Panels (to provide a dark setting, and prevent sound bounce): amzn.to/3HVfwqa
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs): amzn.to/3GlBvGw
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports): amzn.to/3tiukLA
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air): amzn.to/3K2tGaU
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs): amzn.to/3r8YcYc
Floodlights (positioned to glow onto the walls): amzn.to/33mRqWD
LED Light stands (either side of me): amzn.to/3Iaerez
Fifine Dynamic Microphone: amzn.to/3osbxu2
Floating Shelves: amzn.to/3Fhxyl1
Hanging Pendant Light Holders: amzn.to/3qgwnhg
Vintage Light Bulbs: amzn.to/3K0bQ8B
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer....
Artists: brokeinsummer.com
Contact: brokeinsummer....
Music provided by Audio Library Plus
- Get Elementor Pro here --- be.elementor.c...
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/i...
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at [e-mail]
PPPS: We only build with Elementor Pro

[@tutupkaleng]

Thank you mister, your tutorial is very helpfull 👍👍

[@HatchbackAmbience]

Web Squadren, your dedication to content like this is unmatched. Thanks for everything!

[@denniscarroll]

I've been working with Elementor for 3 years and your videos are still the best on TH-cam. You've got the perfect personality and presentation. Thanks so much!

[@RichardWadeUK]

Excellent demo mate... I usually avoid the native search as it would be a mess of results (typically utilising Crocoblock instead), but this is a great way to finesse what's readily available... And I love the full screen search bar too. Didn't know it was possible!

[@websquadron]

Yup the full screen is my fave too :)

[@svetlanaklinova4876]

Thank you. Perfectly explained exactly what was stated. Without getting distracted by style changes and unnecessary chatter

[@keendrop4172]

thank you. great help. well can you please do "Empty search results with woocommerce"

[@websquadron]

As in reset the search?

[@keendrop4172]

@@websquadron Show Message When product is Empty during search. Ex like " Product, not found"

[@elementordesigner]

hy. thanks for the contet. but i need other information.
Let's say I have a single post made with custom post type, and over it I have the magnifying glass button. Is it possible to make the result shown in a mega menu (small) and when clicking on a result, it just replaces the single post?

[@jomotioncreative]

sweet! quick question: - how do you get fallback for "sorry no results found" using the template?

[@joeparty1]

You saved my life. Thanks for the great tip.

[@aLvaRo7z]

But... What can we if the information I what to show is not a product? Just some content or options in a specific page of my website

[@sallamkashif]

What if we have both Products and Blog Posts in our website???

[@omranmumith8331]

what if you alreaddy have a search button but just want to change the layout into full screen
?

[@dko_binging]

How can I make the search process faster after a user clicks on the search button

[@ninnx3]

Thank you so much! I honestly love your content!

[@earnwithhannan]

You did super😍

[@saraj2628]

If we have jet engine's list
It works?

[@omalevictor4544]

You are a life saver. I was having a hard time trying to figure this out. Thank you for saving me under 7mins !!!! 🙏

[@WTPleo]

Hi Imran, is the search form widget is gone? I just have the regular search widget and it doesn't have 'skin' option at all. It's just a regular search bar.

[@websquadron]

Yup they refined it to show live or static results.

[@WTPleo]

@@websquadron thanks man! I knew I wasn't going crazy haha

[@wajidhussain8143]

Great Vidoe. Thanks

[@robson-martin]

Very helpful, thanks a lot.

[@MarkLouisCornea]

Thanks man, love the way you teach, very direct to the point.

[@websquadron]

My pleasure!

[@nichucanon]

How can I hace a serch result page for products and another one for Blog posts?

[@websquadron]

You'd need to mess around with the Query results coming back: th-cam.com/video/CbfZCjFLJNg/w-d-xo.html
Pop that code into ChatGPT to refine it to work for you.

[@Itt_shiv]

Thankyou so much ❤

[@megaimageuk]

How do I add this search box to the already made header? Thank you

[@websquadron]

Use the Search Widget

[@fudiccaitanddigitalsolutio4550]

What if you want to out 2 search bar with different post?

[@websquadron]

Then you’d have to set display conditions for the search template

[@arnarasyid5393]

loved your video. by the way, what if I have product archive and post too? should I make 2 separate search pages or I can use 1 for 2? thanks in advance

[@websquadron]

Won't work well by going to 2 separate pages as it's not that clever (i think).

[@arnarasyid5393]

@@websquadron do you have any suggestions?

[@websquadron]

@@arnarasyid5393 I'd have to investigate that, but that's paid consultation.

[@mdshohaibsarker5835]

THANK YOU for help and Subscribed :)

[@ArielOmbiang]

Keep it doing another tricks man, big help for me as amateur, already done subs mate.

[@David-zp8rx]

Do you know if there is a way to change that blue x icon, also white space text input field for previous searches?

[@litimhmida2793]

How can i add categories filter to that search bar or is there a plugin that can do that?

[@josh6061]

Thanks a lot!

[@mehdib3801]

thank you

[@chevallinvestisseur909]

Where do I see what people actually searched?

[@OmarFaruk-mv9yg]

How to show a message if the search term doesn't match with any product?

[@websquadron]

That would need some custom JS to be added

[@OmarFaruk-mv9yg]

@@websquadron I already acheived that by usong product archive element instead of product element

[@RayRoman-m3z]

This a great video, however, do you have to use an e-commerce product search? What if I want to build something similar to this, but when the search items come up I don't want to see pricing, etc, just the product.

[@websquadron]

You could build a loop grid that only shows what you want in the results search page

[@Ife-Emmanuel]

Really helpful

[@lerouxfourie4717]

Just want to say thank you! You really assisted me!

[@websquadron]

Awesome :)

[@miribreueredelstein3517]

thanks for the great video. i have followed all the instructions. yet, it doesn't apply the template to the search results. in the theme builder, it shows my search result template in the instances "search results" but it's still not showing in the front. any way to fix this? thanks in advance!

[@websquadron]

Hi. This is a difficult one without seeing your site, but that would fall under 1-2-1 Consultation. Could be a setting. Note that it does show the results on a another page as it's not an AJAX on the same page solution.

[@GermanHoops1]

Hey. My question is can you make a search bar for any site and then only show posts from a certain category which you choose with this feature?

[@websquadron]

Technically yes but I’ll need to test it out

[@unsignedhub]

Thanks a lot for this video. Very helpful.

[@Z0inks69]

You are absolutely underrated my friend. Extremely simple and easy to do! Thanks a ton!

[@drivindevil]

"Trust Me" - Thats Crypto !!!

[@momastudio1601]

Thank you, but there is a problem because it does not show "no products found" when there are no products that match your search. How can it be done?

[@websquadron]

That would need some separate JS to be added.

[@kevganhiga]

Good demo! Can you si a video using jetsearch crocoblock plugin?

[@websquadron]

I'll think about that :)

[@AiForEveryMind]

thank you so much for the tutorial man, i know im new but ive watched half of your videos. I do have 1 question though, how can i create a search bar only for a spicific category. For example i'm on a product page with only lead generation products and i only want the user to search products from lead generation. How can i do that ?

[@websquadron]

You could modify the Search Template to have a query in the setting that is restricted to that category.

[@AiForEveryMind]

where can i get the quary
@@websquadron

[@JEVIZEMAL]

Hello, I don't have products widget in elementor. How can I get it?

[@websquadron]

Do you have EL Pro?

[@JEVIZEMAL]

@@websquadron yes

[@butiettapontresina3913]

cool, it works! thank you!

[@brandondahlberg5315]

Thanks man! really helpful

[@AlvaroLuksic]

great thank you helped me a lot!

[@Xtazy51]

thanks! you're the best

[@dunamisdramani5693]

Thank you.

[@chi_bot8648]

Nice, Are you able to add AJAX to this search? So we get preview of the products name(Instead of a history of searches words)as we type in the searchbar

[@websquadron]

Not yet no

[@chi_bot8648]

@@websquadron Is this something you can do or not?

[@websquadron]

@@chi_bot8648 we have to explore the solution and that comes as a 1-2-1 consultation thus we don’t do for free

[@oko6359]

Thank you man!

[@genomxxx]

Smart and creative method good job ✌