Support » Theme: Storefront » Mysterious white space in mobile. No text but have links. Possible to customize?

  • Resolved boppar

    (@boppar)


    As an ex-user of Opencart many things are new to me with WordPress.

    There is something weird when I look at my site in mobile view.

    At the bottom of the screen is a white field. Nothing written on it. However the field have 3 areas with three links. My account, search bar and the cart.
    https://prnt.sc/pwgn8r

    Is there any way to customize this mysterious field?

    • This topic was modified 3 months, 1 week ago by boppar.
Viewing 13 replies - 1 through 13 (of 13 total)
  • Jarret

    (@jarretc)

    It should have icons by default, you can see what it looks like in the default theme

    https://i.snipboard.io/QmLwBy.jpg

    So you may have some CSS that is inadvertently hiding those icons somewhere in your source code.

    As far as customization, the function itself responsible for that footer area is located in /inc/woocommerce/storefront-woocommerce-template-functions.php starting on line 613

    boppar

    (@boppar)

    @jarretc Hi Jarret.
    I tried without any CSS in Appearance/Custom CSS. It didn’t help.

    I also tried disabling the plugins one by one, and refreshing cache. It continues the same way.

    I use Storefront and try to use as few plugins as possible to keep the site clean and fast.

    Any other ideas why the icons doesn’t show up?

    Jarret

    (@jarretc)

    If the site in question is the one you mentioned in your other recent topic I think the issue is with color settings you have configured in Appearance->Customize->Footer

    If you have the Text or Link color set to white there from what I can tell that would also define the color of the icons in the handheld footer bar as it is referred to.

    To test, if you do have either the Text or Link colors in those settings set to white, can you change them to black temporarily and see if that resolves the issue?

    Jarret

    (@jarretc)

    Actually, it looks like the Link Color setting in the Header section in the Customizer controls the color of those icons. Do you have that Link Color in Appearance->Customize->Header set to white?

    boppar

    (@boppar)

    @jarretc
    Yes, it’s the site you mentioned.

    You’re right, it was because the link colour in header was set to white. I changed it to red and it worked. Thanks a lot Jarret!

    Is there any way to remove “My account” from this handheld footer bar?

    Jarret

    (@jarretc)

    Yes, they have documentation on that here:

    https://docs.woocommerce.com/document/customize-the-links-in-the-handheld-footer-bar/

    If you’re just looking for the code you would place the following into your functions.php file of your child theme

    add_filter( 'storefront_handheld_footer_bar_links', 'bop_remove_account_footer_link' );
    function bop_remove_account_footer_link( $links ) {
    	unset( $links['my-account'] );
    	return $links;
    }
    boppar

    (@boppar)

    Thanks Jarret.
    I was just reading this document when you made your post.

    I tried to put the code in the custom CSS and it didn’t work. After reading your post I understand I should put the code in functions.php file of child theme.

    This far I havn’t had the need for a child theme. I’ll create one and try it out. I’ll get back with the result.

    Jarret

    (@jarretc)

    No problem! If the child theme route is too complicated for you, we can resort to hiding the My Account link with some CSS. Technically, it will still be there in the source code but a typical visitor to the site would never see it.

    boppar

    (@boppar)

    @jarretc
    That would be great to hide the My Account link with some CSS.

    I appreciate a lot if you could tell me how to do it.

    Jarret

    (@jarretc)

    Sure, the following CSS should work

    .storefront-handheld-footer-bar .my-account {
      display: none;
    }
    
    .storefront-handheld-footer-bar ul.columns-3 li {
      width: 50% !important;
    }

    Additionally, I noticed that when you set the header link color to red it also changed the color of the cart section to the right of the main navigation. To fix this, use the following CSS

    ul.site-header-cart li a {
      color: white !important;
    }
    boppar

    (@boppar)

    That worked like a charm! Thanks Jarret.

    If I could bother you with one last question. In header (desktop) there is the value of the purchase, number of items and the cart symbol.

    It seems like by default in Storefront the number of items is written with a faded text. is it possible to disable that fade, so the number of items are more visible?

    https://prnt.sc/pwsmt8

    Jarret

    (@jarretc)

    Yes, try this

    .site-header-cart .cart-contents .count {
      opacity: 1 !important;
    }
    boppar

    (@boppar)

    @jarretc

    Thanks, Jarret.
    You have been to great help! Amazing support!

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.