UI messed up after latest update

[id.manage]

Hi Guys, may I ask you how can I get my previous UI back? After updated to the latest WCFM Ultimate, I find my UI has been messed up. For instance, the left bar has got unmatched shadow around. Store distance has got a tail!

Is there anyway I can get my previous UI back? Thank you!

[id.manage]

This reply has been marked as private.

[Sushobhan]

Hi,
Thanks for getting in touch with us!
To be sure it’s coming from WCFM Ultimate, please deactivate the plugin and check if the old UI comes back. If not then the style is coming from some other place, may be the theme.
But if Ultimate is causing this, then send us your site url along with your requirements.
Looking forward to helping you.
Thank You!

[id.manage]

Hi Thank you for the quick reply. It’s probably not ultimate, but it should be from one of WCFM I updated yesterday. The UI changed immediaely after I updated them. And it’s the change on the page of [wcfm_stores] . Would you please let me know how can I change the style back?

[Sushobhan]

Sorry, unless I know how it was looking earlier it’s hard for me. Alternately, you have to share your website url and mark the places specifying the changes required. That’s the only way. Thank You!

[id.manage]

This reply has been marked as private.

[Sushobhan]

Hello,
Please use the following CSS-

.wcfmmp-store-search-form {
    box-shadow: none !important;
}
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li .store-wrapper {
    box-shadow: none !important;
    border: 1px solid #efefef;
}
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap li.coloum-3 .store-footer {
    min-height: 110px !important;
    height: 110px !important;
}
#wcfmmp-stores-wrap ul.wcfmmp-store-wrap p.store-phone {
    background: none !important;
    border-radius: 0 !important;
}

If you aren’t sure where to add this, follow this tutorial- https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
Now to fix the location slider current position , use the following JS-

jQuery( function ( $ ) {
  if ( $( '.wcfmmp-product-geolocate-search-form' ).length > 0 ) {
    setTimeout(function() {
      $( '#wcfmmp_radius_range' ).trigger( 'input' );
    }, 0 );
  }
} );

It’s better if you can include this only on this page. There are various ways of achieving that. Read more from here- https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/
Let me know how it goes.
Thank You!

[id.manage]

Hi, the first part is perfect. I got my original UI back. Thank you so much. But I am having strouble to add JS code. I used Custome JS to add the code with condition of working only on this page as the post suggested, but my google map disappeared, and both distance mark and the number moved to the very left end of the slider.

[Sushobhan]

[edited]
Sorry! I think I used the wrong selector. Also, I have realized it would be easier to add this using PHP, that way we can easily add restriction to load it only on this page. Remove my earlier JS snippet and use this PHP snippet instead-

add_action( 'wcfmmp_store_lists_after', function() {
    ?>
    <script>
        jQuery( function ( $ ) {
          if ( $( '.wcfmmp-store-lists-radius-filter' ).length > 0 ) {
            setTimeout( function () {
              $( '#wcfmmp_radius_range' ).trigger( 'input' );
            }, 0 );
          }
        } );
    </script>
    <?php
} );

Add this code to your child theme’s functions.php
In case you do not have a child theme then add code using this plugin – https://wordpress.org/plugins/code-snippets/
Let me know how this goes.
Thanks!

[id.manage]

This reply has been marked as private.

[Sushobhan]

Hi,
It seems your theme stying makes table header font-size bigger and hence the overlapping issue. You can fix this by using the following CSS-

#wcfm-main-contentainer table thead th {
    min-width: 40px;
    font-size: 14px;
}

You can further adjust these values as per your UI.
Thank You!

[id.manage]

Hi, I’ve tried but it doesn’t work. I even changed the font size, and also tried to use !important, but the font still looks that same. I wonder why?

[id.manage]

Update: I changed a browser and found it finally works. Thank you. The colour of the arrow is a bit dim. Wish we could change the UI easily. Thanks again for your help!

[Author]

Posts