mmm. Until we get an addon plugin sorted for Elementor, we are only supporting that Posts widget, and not the Archive Posts widget.
I would need to refer this to the plugin developer, Ross, if that is OK with you? You would need to set the shop back to using that Archive Posts widget and the skin.
The style of the search I can help you with. Any annotated screenshots (of what you want) you can make to help me would be appreciated. You will need to upload images to an external file sharing site, like dropbox, and share the link(s) with me.
However, the style of the results comes from your theme or Elementor. That we have no control over, and I am sorry I cannot help you with that.
I would start at a basic setup, so just your theme, elementor Pro, WooCommerce and Search & Filter Pro.
Make the form with Ajax OFF, and set to WooCommerce display results method and test. Note that you must have defined the WooCommerce shop page in WooCommerce (in the Products settings).
IF that works, then enable Ajax, where I think the Ajax Container needs to be set to .products
Get all that working and then look to Ele Custom Skins.
AnonymousInactive
Wondering how to get some eyeballs here.
I have tried every combination of selectors and options within Elementor Pro, Woocommerce, Ele Custom Skin and Search & Filter Pro, including custom ID’s and classes for the shop archive container. The integration with Ele Custom Skin and Woo does not work, and I suspect it’s Ele Custom Skin since this is not listed as a 3rd party. Only the price filter and search bar work.
I tried the demo version (https://wordpress.org/plugins/search-filter/) and the category and other taxonomies filters work, but I have to “submit” each request.
At the moment, my login does not work (at least as an admin), I assume you switched it back off.
When set to Post Type Archive, a form takes control of the template for the archives page of the post type. With two forms on the page doing the same thing, there is the possibility that the two forms will conflict. One form will always be hidden, but it is still active. Also, when you select an option in one form, the other form will not know that this has happened.
So, we normally recommend just the one Post Type Archive form per post type. This does mean that, where you want the forms to be different between mobile and desktop, your only options are to style them differently, but the field types would still be the same (for example, a field cannot be checkbox on desktop and dropdown select on mobile). This also means that the form has to remain in the same location on the page, and that can be an issue requiring careful planning.
In any event, the form is currently set to ‘Custom’ display results method.
I had thought that you wanted to be able to select more than one filter term before submitting the form. with Auto Submit ON, for each selection, the form will submit. with Auto Submit OFF, of course you must add a submit button to the form to allow the user to send the query.
As to whether the form would work, it does not look setup to integrate with Elementor right now? As per this post:
https://support.searchandfilter.com/forums/topic/how-can-i-search-elemntor-column-while-retaining-the-design-of-that-column/#post-209754
I am not sure it is normal to use a Post Grid element for WooCommerce (you did not mention it was WooCommerce) in Elementor. I think there is already a template for WooCommerce in Elementor or your theme, so you would set the form to WooCommerce display results method, and show our form on the page using our form widget, with no special code or javascript needed.
I think that the Ajax Container needs to be .products for WooCommerce, the pagination selector I would have to check.
There are two Search operators you can use within a taxonomy (such as Product Category):
AND
OR
The default is AND and this would have the effect of making less results as you select more terms.
Conversely, OR will increase the number of results as you add more terms.
It is possible you have the wrong one selected in the field setting.
As to layout/styling. Some custom CSS can do as you want. I have had other users set the field as checkbox, but hide the checkboxes and style the terms more as tags (with border etc), but that is easy to do, if we can get this working OK.
Many other users have WooCommerce and Elementor working OK, so it should work.
The style of the search I can help you with. Any annotated screenshots (of what you want) you can make to help me would be appreciated. You will need to upload images to an external file sharing site, like dropbox, and share the link(s) with me.
However, the style of the results comes from your theme or Elementor. That we have no control over, and I am sorry I cannot help you with that.
AnonymousInactive
Hello,
Just bought SF, and now doing a test setup. On a sample page, I have added a text widget with the following inside:
[searchandfilter id="106"]
[searchandfilter id="106" action="filter_next_query"]
<script>(function ( $ ) {
"use strict";
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
});
}(jQuery));</script>
I have followed the Elementor setup documentation to create the SF shortcode and implement it on the page.
The page just contains the text widget, and after that the posts widget – nothing else. When I save and view the page, it only show the search box and tags filter, but the posts widget does not display at all.
Any ideas? Please let me know what info you need from me.
Ronald
