Documentation

Learn how to set up, customize, and expand the functionality of WooCommerce

Snippets


Documents

  • Add informational bar to the Storefront header

    On our Storefront demo, you may have noticed the black bar beneath the navigation that includes informational text. This is possible by adding basic HTML to a text widget placed in the Header widget region. To recreate, add a text widget to your Header widget region and insert the following code: This file contains bidirectional Unicode text that […]

  • Add static content to the Storefront header

    Adding static content to the Storefront header requires hooking a function that outputs your content into storefront_header. You can control the position of the markup via the priority set. For example, the following snippet would add a ‘row’ between the site title / secondary navigation / search and the primary navigation. This file contains bidirectional […]

  • Add, Delete or Change a Custom Logo

    Add a Logo Add a custom logo using the WordPress custom logo theme feature, if you’re using Storefront 2.0+ and WordPress 4.5+. 1. Go to: Appearance > Customize. 2. Open Site Identity. 3. Click Select Logo. 5. Save & Publish. Remove or Change a Logo 1. Go to: Appearance > Customize. 2. Open Site Identity. 3. […]

  • Change the ‘Menu’ button text

    On handheld devices the navigation toggle button says ‘Menu.’ To change this you can use a custom translation or use the storefront_menu_toggle_text filter: This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more […]

  • Create a social icon menu

    Storefront’s secondary navigation menu location is ideally positioned to display links to your social media profiles with instantly recognizable icons. This modification automatically replaces links to popular social networks with icon equivalents. We recommend adding snippets like this to your site via a plugin like Code Snippets. This will make sure that your custom code isn’t lost […]

  • Customize links in the handheld footer bar

    Customizing the links in the handheld footer bar is fairly straightforward and handled via the storefront_handheld_footer_bar_links filter. Removing a link Using the following snippet would remove all links. Pick and choose according to which you want to keep. This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. […]

  • Display post excerpt instead of full content

    If you wish to automatically display the post excerpt on your archive / search results page etc (instead of using the <!– more –> tag), use: This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode […]

  • Remove the ‘box’ around active links

    By default, when you click a link in Storefront you will notice a box appear around it. This is an accessibility feature that was added in 1.4. You can read more about that here. In some cases, you might want to change or even remove the feature (although that is not recommended). Doing so is […]

  • Remove the ‘page’ icons in the Storefront navigation

    By default the Storefront handheld navigation displays a small ‘page’ icon next to each link. This is removed with CSS: This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode […]

  • Remove the handheld navigation bar

    Storefront 2.0 introduced a navigation bar to the responsive design, including links to the account section, search form and cart. To remove this feature, use this snippet: This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden […]

Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.