Search Results for 'Elementor'

[Trevor]

The titles of filters are optionally added by you the designer. It is this setting (which you should leave blank, and, by default, it is blank):

https://www.screencast.com/t/W8BjhumkF

You might find the filters better styled if you add the select2 script to them, as described here:

https://support.searchandfilter.com/forums/topic/configure-harvesthq-in-elementor-pro/#post-238775

The only other thing I notice is that the fields are all the same width, for which you would need custom and responsive CSS. This search on our forum should give you some snippets to look at:

https://support.searchandfilter.com/forums/search/.select2-container/

[Anonymous]

Hi there,

I am using Elementor (Post Widget) and CPT Ui and Search & Filter Pro.

I’ve created a CPT ‘Team’ which contains 2 taxonomies ‘Roles’ and ‘Skills’.

I then created a Search From that pulled both the above taxonomies under Available Fields.

When I set up the filter and test it on the frontend, I can only get it sorted to ‘Roles’ and not ‘Skills’. When I select anything from Skills, it loads the same content without any change.

I hope you can help with this issue. Thanks!

[Anonymous]

<?php
/**
 * Template name: Freelancers page
 *
 * @package Freelancer
 */

get_header();
?>
<?php echo do_shortcode( '[elementor-template id="499"]');?>

<section class="container-flex">
	<div class="left-column">
    <h3>Categorieën</h3>
<?php echo do_shortcode('[searchandfilter id="73"]' );?>  
	</div>
	<div class="right-column">

			<div class="header-right-column">
				<h1><i class="fa fa-handshake-o" aria-hidden="true"></i>Freelancers - Ready To Work</h1>
			</div>

	<?php 

    $currentPage = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $args = array(
    'post_type' => 'freelancer',
    'search_filter_id'=> 73,
    'posts_per_page' => 3,
    'paged'=>$currentPage
    );

    $query = new WP_Query($args);

    if($query->have_posts()): ?>

          <?php while ($query->have_posts()) : $query->the_post(); ?>

          	<div class="post-inhoud">

              <div class="flex-box">
                <div class="box-left">

                  <?php if( get_field('profielfoto') ): ?>
                    <img />" />
                  <?php endif; ?>
                  
                </div>

                <div class="box-right">
                     <h3><?php the_title(); ?></h3>
                     <h4 class=""><?php the_field('functie'); ?></h4>
                </div>

              </div><!-- end of .flex-box-->

				
					<?php the_category(); ?>

				<p class="meta"><i class="fa fa-map-marker" aria-hidden="true"></i><?php the_field('locatie_freelancer'); ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-money" aria-hidden="true"></i>€ <?php the_field('uurprijs'); ?>,- per uur&nbsp;&nbsp;&nbsp;&nbsp;
				<i class="fa fa-calendar-o" aria-hidden="true"></i>Beschikbaar per week: <?php the_field('beschikbaarheid'); ?> uur</p>

				<p><?php $summary = get_field('omschrijving_vaardigheden');
          echo substr($summary, 0, 150); ?><a>"> ....lees verder.. </a></p><br> 
	

				<a>"><button type="button">Naar profiel <i class="fa fa-chevron-right" aria-hidden="true"></i></button></a>
          		

          	</div><!--end of .post-inhoud-->

          	<?php endwhile; ?>

           <?php else : echo "<p class='geen-zoekresultaat'>Er zijn geen zoekresultaten!</p><br>"; ?>

	        <?php 

          $GLOBALS['wp_query']->max_num_pages = $query->max_num_pages;
          the_posts_pagination( array(
             'mid_size' => 3,
             'prev_text' => __( 'Vorige pagina', 'freelancer' ),
             'next_text' => __( 'Volgende pagina', 'freelancer' ),
             'screen_reader_text' => __( 'Posts navigation', 'freelancer' )
          ) ); ?>

           <?php endif; ?>
           <?php wp_reset_postdata(); ?>

	</div><!--end of .right-column-->
	
</section>

<?php
get_sidebar();
get_footer();

[Trevor]

Hi Johan

I can see that you are using Elementor Pro, but the grid does not appear to be their Posts widget? Is that correct? Is it made with a widget from another plugin?

The form is set to ‘Custom’ display results method, but how did you link that to the grid?

[Trevor]

Ah. Now I see. That style is applied by your device and browser to all form select boxes. It is not done with CSS.

The only way to take control of ‘select’ elements is to use a JavaScript plugin library to replace them. For WordPress, the best choice is to use Select2. See this post:

https://support.searchandfilter.com/forums/topic/configure-harvesthq-in-elementor-pro/#post-238775

[Anonymous]

Hey Trevor –

The non-working issue on our dev site was user error (did not update the display results URL) – so no issue here.

Regarding the broken image sizing (in conjunction with Elementor) however, is still an issue. I have a piece of CSS code to circumvent this

.elementor-post__thumbnail__link {
max-height: 200px;

If this is removed via web-dev tools you can see the issue. It looks like on search an entire DIV and class is being removed in the process. If you refresh the search results they will load as intended. Strange, no?

[Trevor]

To do that would likely break the plugin, as it relies on the existing structure. However, we do allow you to use Select2. see this post:

https://support.searchandfilter.com/forums/topic/configure-harvesthq-in-elementor-pro/#post-238775

[Anonymous]

As stated in the title – since updating Elementor and WordPress to recent versions – our search & filter plugin is no longer filtering content as intended. https://dev-privitar.pantheonsite.io/resources/

Additionally, it looks like the display of results on our PROD server are not rendering correctly post filter: https://www.privitar.com/resources/ When filtering, the aspect ratio breaks.

[Trevor]

I think this post will be of interest:

https://support.searchandfilter.com/forums/topic/configure-harvesthq-in-elementor-pro/#post-238775

[Trevor]

If you are using the Elementor Posts widget, you can use a plugin called Ele Custom Skins to make a ‘Custom’ skin (you are currently using the ‘Classic’ skin that comes with Elementor (it also has a ‘Cards’ skin).

Our extension supports ‘Custom’ skins made by the Ele Custom Skins plugin (free or Pro versions). The Ele Custom Skins plugin allows you a lot of flexibility in design, and even to add Custom Fields and many other content types.

I suggest you explore that plugin.