Form Result Layout

Hi,

Maybe you can explain in pictures what layout for search results you want to have?

Usually you can modify this layout with custom styles. Also PRO plugin. version has additional search results layouts.

Regards

Good Day, Thank you for your reply.
at this stage the result dropdown looks like this when you search
https://photos.app.goo.gl/AqVm6QbvnW9ForDb8

i would like to make it look something like this or close to it https://photos.app.goo.gl/emTXQcDt8zcVG5LC6

@mihail-barinov , any Idee’s for me on how I can do this. I can do this by editing your core-files but this will be deleted everytime your plugin gets updated. that is why I would like to know of hooks and just a tip on what to do so that i can change it.

Please try to use following code snippet:

add_action( 'wp_enqueue_scripts', 'aws_wp_enqueue_scripts', 999 );
function aws_wp_enqueue_scripts() {
    $script = '
        function aws_results_html( html, options ) {

           html = "";
        
           if ( ( typeof options.response.products !== "undefined" ) && options.response.products.length > 0 ) {
           
              html += "<table style=\"max-height:400px;\">"; 
              
              html += "<thead>"; 
                  html += "<tr><th>Part No</th><th>Image</th><th>Name</th></tr>"; 
              html += "</thead>"; 
              
              html += "<tbody>"; 
              
              jQuery.each(options.response.products, function (i, result) {
              
                  html += "<tr class=\"aws_result_item\">";  
              
                  html += "<td>";  
                      if ( result.sku ) {
                          html += result.sku; 
                      }
                  html += "</td>";  
                  
                  html += "<td>";  
                      if ( result.image ) {
                          html += "<span class=\"aws_result_image\"><img src=\'" + result.image + "\'></span>";
                      }
                  html += "</td>";  
          
                  html += "<td><a href=\'" + result.link + "\'>" + result.title + "</a></td>";  
                  
                  html += "</tr>";  
                   
              });
              
              html += "</tbody>"; 
            
              html += "</table>"; 
              
              
              if ( options.data.showMore && options.data.showPage ) {
                  html += "<ul><li class=\"aws_result_item aws_search_more\"><a href=\"#\">Show More</a></li></ul>";
              }
            
           } else {
              html += "<ul><li class=\"aws_result_item aws_no_result\">No results</li></ul>";
           }
           
           return html;
           
        }
        AwsHooks.add_filter( "aws_results_html", aws_results_html );
    ';
    wp_add_inline_script( 'aws-script', $script);
    wp_add_inline_script( 'aws-pro-script', $script);
}

You need to add it somewhere outside the plugins folder. For example, inside functions.php file of your theme or use some plugin for adding code snippets

Also, after adding this code you will need to go to the plugin settings page and click the ‘Clear cache’ button.

@mihail-barinov , wow thank you that worked. your a champion. you saved me a lot of hours of work and this is for the FREE version. I will diffenitly tell my boss to go for the paid version now. support is out of this world. 5 stars for this.

Glad to help!