Title: Mobile usability with Storefront
Last modified: August 26, 2020

---

# Mobile usability with Storefront

 *  [andyrjames](https://wordpress.org/support/users/andyrjames/)
 * (@andyrjames)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/)
 * Hi,
 * I’m trying the search out on a client’s development site which uses the Woocommerce
   Storefront theme.
 * All seems to work fine. Happy with the response time, especially considering 
   there are over 150,000 products.
 * Only thing that’s stopping adding this to the live site is on mobile:
 * Storefront drops the top search box to the bottom of the screen (you click on
   the magnifying glass) but the Advanced Woo Search results go off the bottom of
   the screen.
 * Try a search for: Danfoss
 * You can only see part of the results. It’s difficult to scroll down and you can’t
   get to the bottom of the list.
 * Would maybe prefer to see the search results go above the search box or the screen
   be allowed to scroll somehow.
 * Is this a possibility?
 * Cheers,
 * Andy
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmobile-usability-with-storefront%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 15 replies - 1 through 15 (of 37 total)

1 [2](https://wordpress.org/support/topic/mobile-usability-with-storefront/page/2/?output_format=md)
[3](https://wordpress.org/support/topic/mobile-usability-with-storefront/page/3/?output_format=md)
[→](https://wordpress.org/support/topic/mobile-usability-with-storefront/page/2/?output_format=md)

 *  Plugin Author [ILLID](https://wordpress.org/support/users/mihail-barinov/)
 * (@mihail-barinov)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13322033)
 * Hi,
 * Please tell me what plugin version number you are currently using?
    This issue
   seems to be solved in the latest plugin releases.
 * Regards
 *  Thread Starter [andyrjames](https://wordpress.org/support/users/andyrjames/)
 * (@andyrjames)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13322053)
 * Hi Mihail,
 * Thanks for the response.
 * Version 2.09
 * No updates pending on the site.
 * Cheers,
 * Andy
 *  Plugin Author [ILLID](https://wordpress.org/support/users/mihail-barinov/)
 * (@mihail-barinov)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13331919)
 * Looks like I managed to solve this issue.
    I will add all necessary changes to
   the next plugin release.
 * Regards
 *  [vasudevb](https://wordpress.org/support/users/vasudevb/)
 * (@vasudevb)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13333087)
 * Hey I am facing the same issue. Noone is able to see the product because the 
   fixed button opens down and out of the screen…i have version 2.09 too and it 
   is showing as latest version. Is there any update on this thread which I cannot
   see…please share here too…it can really help.
 *  Thread Starter [andyrjames](https://wordpress.org/support/users/andyrjames/)
 * (@andyrjames)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13333100)
 * In the post I see just above:
 * ILLID (@mihail-barinov)
    8 hours, 10 minutes ago Looks like I managed to solve
   this issue. I will add all necessary changes to the next plugin release.
 * Regards
 * Which is great news.
    👍👍
    -  This reply was modified 5 years, 9 months ago by [andyrjames](https://wordpress.org/support/users/andyrjames/).
 *  [vasudevb](https://wordpress.org/support/users/vasudevb/)
 * (@vasudevb)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13333118)
 * Thanks…
 * Hopefully the next plug-in releases soon…especially since you have 150,000 products
   🙂
 * Thanks [@mihail-barinov](https://wordpress.org/support/users/mihail-barinov/)
 *  Thread Starter [andyrjames](https://wordpress.org/support/users/andyrjames/)
 * (@andyrjames)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13333139)
 * Indeed.
 * More than 300,000 on the client’s live site.
 * This plugin seems to search much faster than native wordpress and gives the user
   instant feedback to typing.
 * Looking forward to the fix.
 * Cheers Mihail!
 *  Plugin Author [ILLID](https://wordpress.org/support/users/mihail-barinov/)
 * (@mihail-barinov)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13337800)
 * Next plugin release is planned on September 7.
    If you don’t want to wait till
   this date you can make some changes in the plugins source code to add integration
   for Storefront theme. I can help you with this if you want.
 * Regards
 *  [vasudevb](https://wordpress.org/support/users/vasudevb/)
 * (@vasudevb)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13337845)
 * That will be very helpful especially since I will start sharing the website to
   consumers from 2nd September
 *  Plugin Author [ILLID](https://wordpress.org/support/users/mihail-barinov/)
 * (@mihail-barinov)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13343578)
 * Please open advanced-woo-search/assets/js/common.js file, find lines
 *     ```
       resultLayout: function () {
   
                       var $resultsBlock = $( d.resultBlock );
                       var offset = self.offset();
                       var bodyOffset = $('body').offset();
                       var bodyPosition = $('body').css('position');
                       var bodyHeight = $(document).height();
                       var resultsHeight = $resultsBlock.height();
   
                       if ( offset && bodyOffset  ) {
   
                           var width = self.outerWidth();
                           var top = 0;
                           var left = 0;
   
                           if ( bodyPosition === 'relative' || bodyPosition === 'absolute' || bodyPosition === 'fixed' ) {
                               top = offset.top + $(self).innerHeight() - bodyOffset.top;
                               left = offset.left - bodyOffset.left;
                           } else {
                               top = offset.top + $(self).innerHeight();
                               left = offset.left;
                           }
   
                           if ( bodyHeight - offset.top < 500 ) {
                               resultsHeight = methods.getResultsBlockHeight();
                               if ( ( bodyHeight - offset.top < resultsHeight ) && ( offset.top >= resultsHeight ) ) {
                                   top = top - resultsHeight - $(self).innerHeight();
                               }
                           }
   
                           $resultsBlock.css({
                               width : width,
                               top : top,
                               left: left
                           });
   
                       }
   
                   },
       ```
   
 * and replace with
 *     ```
       resultLayout: function () {
   
                       var $resultsBlock = $( d.resultBlock );
                       var offset = self.offset();
                       var bodyOffset = $('body').offset();
                       var bodyPosition = $('body').css('position');
                       var bodyHeight = $(document).height();
                       var resultsHeight = $resultsBlock.height();
   
                       if ( offset && bodyOffset  ) {
   
                           var styles = {
                               width: self.outerWidth(),
                               top : 0,
                               left: 0
                           };
   
                           if ( bodyPosition === 'relative' || bodyPosition === 'absolute' || bodyPosition === 'fixed' ) {
                               styles.top = offset.top + $(self).innerHeight() - bodyOffset.top;
                               styles.left = offset.left - bodyOffset.left;
                           } else {
                               styles.top = offset.top + $(self).innerHeight();
                               styles.left = offset.left;
                           }
   
                           if ( bodyHeight - offset.top < 500 ) {
                               resultsHeight = methods.getResultsBlockHeight();
                               if ( ( bodyHeight - offset.top < resultsHeight ) && ( offset.top >= resultsHeight ) ) {
                                   styles.top = styles.top - resultsHeight - $(self).innerHeight();
                               }
                           }
   
                           // @since 2.10
                           styles = AwsHooks.apply_filters( 'aws_results_layout', styles, { resultsBlock: $resultsBlock, form: self } );
   
                           $resultsBlock.css( styles );
   
                       }
   
                   },
       ```
   
 * Also please use following code snippet
 *     ```
       add_action( 'wp_footer', 'storefront_footer_action' );
       function storefront_footer_action() { ?>
           <script>
               window.addEventListener('load', function() {
                   function aws_results_layout( styles, options  ) {
                       if ( typeof jQuery !== 'undefined' ) {
                           var $storefrontHandheld = options.form.closest('.storefront-handheld-footer-bar');
                           if ( $storefrontHandheld.length ) {
                               if ( ! $storefrontHandheld.find('.aws-search-result').length ) {
                                   $storefrontHandheld.append( options.resultsBlock );
                               }
                               styles.top = 'auto';
                               styles.bottom = 130;
                           }
                       }
                       return styles;
                   }
                   if ( typeof AwsHooks === 'object' && typeof AwsHooks.add_filter === 'function' ) {
                       AwsHooks.add_filter( 'aws_results_layout', aws_results_layout );
                   }
               }, false);
           </script>
           <style>
               .storefront-handheld-footer-bar .aws-search-result ul li {
                   float: none !important;
                   display: block !important;
                   text-align: left !important;
               }
               .storefront-handheld-footer-bar .aws-search-result ul li a {
                   text-indent: 0 !important;
                   text-decoration: none;
               }
           </style>
       <?php }
       ```
   
 * 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.
 *  Thread Starter [andyrjames](https://wordpress.org/support/users/andyrjames/)
 * (@andyrjames)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13344049)
 * Hi Mihail
 * Much better!
 * If you go to the test site in the first post using a mobile and search for: oventrop
 * You get a single (correct) result.
 * Search for: grundfos
 * The top 3 results are off the top of the screen when the mobile keyboard is visible
   with no way to scroll to them.
 * Backing out of the mobile keyboard displays the list correctly allowing full 
   scroll.
 * Cheers!
 * Andy
 *  Plugin Author [ILLID](https://wordpress.org/support/users/mihail-barinov/)
 * (@mihail-barinov)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13349734)
 * Hm, did you change your theme. Now I can’t find search form fixed to the bottom
   on mobile devices.
 *  Thread Starter [andyrjames](https://wordpress.org/support/users/andyrjames/)
 * (@andyrjames)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13349775)
 * No change of theme and no updates to Storefront recently.
 * I can still see it on mobile.
 * Tap the magnify glass centre bottom and up slides the quick search box.
 * Type in: fujitsu and your results appear.
 * Works on my android phone and narrowing the screen on Chrome or Firefox.
 * Cheers,
 * Andy
 *  [vasudevb](https://wordpress.org/support/users/vasudevb/)
 * (@vasudevb)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13352819)
 * Thanks for sharing it but didnt work with me…
 * I’ll wait for 7th September
 *  Thread Starter [andyrjames](https://wordpress.org/support/users/andyrjames/)
 * (@andyrjames)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/#post-13352858)
 * Did you copy the code out of the email notification or the post above?
 * The code in the email won’t work.
 * Just a thought.
 * Cheers,
 * Andy

Viewing 15 replies - 1 through 15 (of 37 total)

1 [2](https://wordpress.org/support/topic/mobile-usability-with-storefront/page/2/?output_format=md)
[3](https://wordpress.org/support/topic/mobile-usability-with-storefront/page/3/?output_format=md)
[→](https://wordpress.org/support/topic/mobile-usability-with-storefront/page/2/?output_format=md)

The topic ‘Mobile usability with Storefront’ is closed to new replies.

 * ![](https://ps.w.org/advanced-woo-search/assets/icon-256x256.png?rev=3303984)
 * [Advanced Woo Search - Product Search for WooCommerce](https://wordpress.org/plugins/advanced-woo-search/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/advanced-woo-search/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/advanced-woo-search/)
 * [Active Topics](https://wordpress.org/support/plugin/advanced-woo-search/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/advanced-woo-search/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/advanced-woo-search/reviews/)

## Tags

 * [mobile](https://wordpress.org/support/topic-tag/mobile/)

 * 37 replies
 * 3 participants
 * Last reply from: [andyrjames](https://wordpress.org/support/users/andyrjames/)
 * Last activity: [5 years, 8 months ago](https://wordpress.org/support/topic/mobile-usability-with-storefront/page/3/#post-13507766)
 * Status: not resolved