We’ve recently released an update to Storefront Pro (version 5.9 and higher) that has new functionality to make your first (Gutenberg) block on a page sit flush under the navigation.
This week we released an update to our Storefront Blocks plugin that adds a new block called the Product Block. The Product Block let’s you customize the layout of WooCommerce products and then insert them anywhere.
Here’s a few examples of how you might use the Product Block.
Create full width and full height product blocks, which would be great for landing pages
Add multiple blocks into a page so you could use this block to create a stunning looking WooCommerce page
Create a great looking home page
Insert into posts, so you can showcase your single products in your blog
With the release of WordPress 5 comes a brand new editor. The new editor , commonly known as the Block editor or the Gutenberg editor gives you many extra customization and layout options when building your wordpress ecommerce website.
In the tutorial below, I’ll show you how to build an awesome WooCommerce website using the new Gutenberg Editor.
Then you’ll need to install the WooCommerce plugin.
Here’s a video tutorial that walks you through the entire process from start to finish. You’ll learn how to buy a domain name, get hosting set up, how to install WordPress and WooCommerce, and building your Store.
How to customize the design of your WooCommerce Storefront Theme
The default WooCommerce theme Storefront is technically beautifully built but the design is a little basic for many Store Owners ‘out of the box’.
We’ve built the Storefront Pro plugin that makes it very easy to change most aspects of the design, all using the WordPress customizer.
Storefront Pro is now used by over 5000 websites and is great if you want to have more control over how your website looks.
If you want to achieve a more professional looking design for your WooCommerce Store then Storefront Pro is a great option because it’s built for the WooCommerce Storefront theme.
Ideally you would have complete control over the products that you show, and the sections of the WooCommerce shop page .
The default WooCommerce Shop Page is dynamically populated and pre-set. Normally you don’t have a lot of control in how it is designed.
However the WooCommerce Shop Page is one of the most important pages on your site, so the more control over the layout you have, the better.
Ideally you should have 100% control over the design of your WooCommerce Shop page.
There’s just 4 simple steps to take to create any layout you like for your new WooCommerce Shop Page
First create a brand new page and customize the WooCommerce Shop page design using either the WooCommerce Products Blocks plugin and / or our Storefront Blocks plugin.
The beauty of this approach is that there is absolutely no limitation on how your design the layout
Here’s a demo of Storefront Blocks in action
Once you have designed your new page that is going to be your new WooCommerce Shop page move onto the steps below.
Once you have built your new Shop page – don’t set this page to be your new WooCommerce Shop – leave the default WooCommerce shop page
These WooCommerce Storefront theme tweaks have been curated from the most common questions we’ve found on the web. We really hope you find them useful. We’ll be adding to them over the coming months. We recommend that you use a child theme for these tweaks and we’ve created a free blank WooThemes Storefront child theme for you here.
If you have any questions, please post them in the comments box below :)
Storefront Pro now makes customizing the WooCommerce theme incredibly easy
We’ve now released a plugin called Storefront Pro. This let’s you easily customize and modify the WooCommerce Storefront.
Meta slider is one of the most popular free sliders available on WordPress.org. This bit of code will stretch the slider to be full width. Add this code to your child theme’s functions.php
How to rename ‘Navigation’ in mobile view on Storefront
Paste this code into your child theme’s functions.php file
Then just modify the text here
Note: You’ll need to be using a child theme for this one to work
How to add a customer avatar in Storefront ‘My Account page’
Add the following code to your child theme’s function.php file
Then add the following css to your child theme’s custom.css file
Where can I find free video tutorials on Storefront?
We’ve produced the following free WooThemes Storefront video tutorials on a) How to set up Storefront b) How to add a parallax hero area to Storefront c) How to use the WooCommerce Storefront Customizer d) How to use the Storefront Designer.
How to customise the blog layout on WooThemes Storefront
101 Design Customizations for the WooCommerce Storefront theme
Introduction
Here’s 101 ways to customize the WooCommerce Storefront Theme
Storefront is the official theme for WooCommerce, and it’s a great theme to use if you want to build an online shop with WordPress. It’s now been downloaded over 1 milliion times – so it’s very popular, and for good reason. Storefront is a beautifully built theme; it’s lean, fast and stylish. With a bit of customization it’s a great theme to build your online business. All the customisations below have achieved by using our Storefront Pro plugin and we hope you find them useful. If you have any questions, please feel free to leave them in the comments below.
Thanks for taking the time to pootle,
Jamie m
How to customise the WooCommerce Storefront theme Primary navigation
align menu right
align logo centre
align logo inside the navigation
add a hamburger menu
add a left vertical navigation menu
change the fonts in the your menu
change the letter spacing in your menu
change your menu items to upper case
change the background color of your menu
How to customize the WooCommerce Storefront Secondary navigation
add social icons to your WooCommerce Storefront secondary menu
add email and phone number to your secondary menu
add a header bar above your secondary menu
change the fonts in your secondary menu
Customising WooThemes Storefront Search box
How to customize the WooCommerce Storefront header and search box
Create a sticky header
Turn off the default WooCommerce search in the header
Change the size of the search box in the header
Change the color of the search box background and text color
Add rounded corners to the WooCommerce search box
And cool search icon to the primary navigation
Choose whether to search for posts/pages or products from the primary navigation search
How to customize the WooCommerce Storefront mobile experience
change the layout of the mobile WooCommerce shop page
create a grid layout of products for mobile
create an user toggle product option for mobile
hide your logo on mobile
display a search box on mobile menu
change the mobile menu background color and font color
change the mobile menu icon color
change the fixed mobile footer background color and icons color
turn on and off mobile fixed footer options – my account, search and cart
How to customize the WooCommerce Storefront shop page
make WooCommerce Storefront shop pages full width
create a masonry shop page with WooCommerce Storefront
change how many columns your products are shown in
select the number of products per page with WooCommerce Storefront
change product alignment
WooCommerce Storefront flip product images
create infinite scroll product pages
display or hide product results count
display or hide product sorting
display or hide product image
display or hide product title
display or hide sale flash
display or hide product rating
display or hide product price
display or hide product add to cart button
display or hide breadcrumbs on woocommerce pages
enable enhanced woocommerce mobile styling
How to customize the WooCommerce Storefront product pages
full width Product Gallery
hero Product
hide breadcrumbs
show product sharing icons
display or hide product tabs
display or hide related products
display or hide product meta
How to customize the WooCommerce Storefront checkout pages
display or hide breadcrumbs on Cart and Checkout pages
enable distraction free Cart and Checkout
Customizing WooCommerce Storefront content
display or hide accessibility box around active links
display or hide breadcrumbs on pages
display or hide breadcrumbs on posts
display or hide breadcrumbs on archives
display or hide page title
Customizing WooCommerce Storefront fonts
change heading font, size, color and letter spacing
change heading font style. Options include bold, underline, uppercase and italic
change body font, size, color and letter spacing
change link colors
Customizing WooCommerce Storefront layout
make the website full width
add sidebars to the left or right
Customizing WooCommerce Storefront blog and posts page
Customizing the WooCommerce Storefront blog page
change the layout of your blog
create a magazine post grid layout
align featured images to the left, right and centre
change the size of post headings
change the color of headings
turn off meta information on posts
show full posts or just the excerpt
change the excerpt length
change the read more text
Customizing WooCommerce Storefront posts
Create beautiful full width posts
Create posts with the title in the featured image
Hide posts meta information
Changes post heading size and color
Customizing the WooCommerce Storefront footer
change the number of columns in the footer
change the background color of the footer
add your own custom text to replace where it says ‘Storefront designed by WooThemes.’
How to style WooCommerce Storefront footer widgets
Imagine walking into a huge department store and wanting to buy a range of different products – shoes, a watch, maybe a new hairdryer. But to your surprise, there are no signs anywhere to help you find your way around. You might wander around looking for what you need, or look for someone that can help you find what you’re looking for. But once you fail, you’ll end up simply leaving the store.
People shopping at traditional stores have made a time commitment to go shopping, and it can take a lot of effort to go to another shop across town if they don’t like the experience. But eCommerce is different, and another online store is just a Google search away.
Your online store’s navigation menu is important as it’s the primary way users will get around your store and find products they want to buy. It needs to clearly and quickly communicate everything to your customers, else you risk losing people before they’ve even started browsing your store.
Using the default WooCommerce menu options, you are limited by a lot of things. As WordPress was originally designed to be a blogging platform, it’s less effective for an online store with many sections. Your storefront needs to stand out as it is the “face” of your brand online. The default, generic WooCommerce navigation simply won’t cut it.
In this tutorial, we’ll show you how to customise the WooCommerce menu using Storefront Pro so that your online store stands out from the rest of the competition. The Storefront Pro plugin is designed specifically for creating beautiful, functional WooCommerce stores. It packs powerful tools to help you customise your WooCommerce menu and make it both unique and clear for your users.
WordPress comes out of the box with default menu functionality for your WooCommerce store. Users can add pages to the WooCommerce menu and display the menu on the top of their WordPress site. To do this, head on over to Appearance > Menus from the WordPress admin panel to create your WooCommerce menu.
Start by giving your WooCommerce menu a name and click the Create menu button. This will add a new WooCommerce menu to your site. You can add links to the WooCommerce menu, create drop-downs, and even add a home link to the menu. Additionally, you can also add WooCommerce product categories to the WooCommerce menu by selecting a category and then clicking the Add to Menu button. You might even consider adding a link to the Cart page in addition to displaying the cart widget icon.
With the default WordPress menu functionality, you can also manage the locations of multiple WooCommerce menus. You can click on the Manage Locations tab and select which WooCommerce menu will be your primary menu, the secondary menu, or the handheld menu. Once you’re done, click the Save changes button to continue.
This is what the default WordPress menu will look like on your WooCommerce store. The WordPress Customizer gives you the ability to create menus, but almost no control over how they look, where they’re displayed, or other important things that can make your store stand out. This means you can’t customise the menu to deliver a better user experience to customers.
Customising your WooCommerce Menu with Storefront Pro
The Storefront Pro WordPress plugin lets you create beautiful, functional WooCommerce stores without having to mess around with PHP or CSS. It comes with powerful tools to help you customise your WooCommerce menu and make it both unique and clear for your users. This way, you can deliver a better user experience to customers.
With Storefront Pro, users have a lot of different options for making customisations to the WooCommerce menu of their WordPress site. Here, we’ll show you the different options available on Storefront Pro.
#1. Navigation styles
Making the WooCommerce menu clear involves trying out different navigation styles to see what suits your store best. Depending on the WordPress theme you’re using, you might want to position it differently than what comes out of the box.
With Storefront Pro, customising how the WooCommerce menu is displayed on your online store is intuitive and simple. You don’t have to add any PHP, HTML, or CSS code. You can customise the navigation styles of your WooCommerce menu in just a few steps.
Go to the WordPress Customizer to start making changes to your WooCommerce menu. Go to Header and Navigation > Primary Navigation to access the different navigation settings. You can choose to display the navigation menu anywhere on your site, including left, center, or right in the header, left vertical, hamburger with labels, and center with logo in navigation.
For example, if we wanted to go with left vertical and make the text bold, it would look something like this:
You can easily change the typography of your WooCommerce menu using Storefront Pro. You can also customise the text, link, active colours, fonts, size, and much more.
Changing the background colour of the menu is very simple; all you need is to select a colour from the colour palette in the WordPress Customiser. Storefront Pro also gives you the option to toggle the header sticky or not. This means that if you set it to on, the header will move when the user scrolls through your WordPress site. This way, it’s always visible to the user.
#2. Mega menus
A “Mega Menu” allows you to combine items and submenu items to create huge custom menus that make navigation in large or complex stores a breeze. Mega menus are very simple and intuitive to create using Storefront Pro. To set up a mega menu, navigate to Appearance > Menus from the WordPress dashboard. Click on any item in your WooCommerce menu and you’ll be presented with drop-down options, including the one to create a mega menu. Tick the check box next to Make a mega menu and drag and drop them into place. Click the Save Menu button to continue.
Here’s how the mega menu will look on the front-end of your WooCommerce store:
You can use this to link directly to a specific product page or product category pages from the main menu.
#3. Adding icons
You can also choose to add icons to your WooCommerce menu items. Simply navigate to Appearance > Menu and click on the desired menu item you want to add the icon to. You can select the different icons you want to display right next to your WooCommerce menu selection and then click on the Save Menu button to continue.
Here’s how that will look on the front-end of your WooCommerce store:
You can display all sorts of icons such as a shopping cart icon, checkout icon, and shop icon.
#4. Adding social contact information
You may also display social content information and menus directly in the header, neatly above the menu. Storefront Pro makes it easy for you to add phone numbers, email addresses, and social URLs using the header section of the WordPress Customiser.
Navigate to Header and Navigation > Header Elements to access the different options to display social information. You can add your social media account URLs directly to your header and display your phone number and email right next to it. Once you’re done, click the Publish button to save changes to your WordPress site.
#5. Live search
With Storefront Pro, it is also possible to customise how the live search box appears on your WordPress site. Go to the WordPress Customizer and click the Live Search section to access the different settings for customising your live search box. You can change the design of the search box with colours and typography. You can also set the search box to either be the default size, large size, or extra-large box. Additionally, you can also set it to rounded corners; this will display a clean, round search box instead of the chunky, boxy default one.
Storefront Pro lets you create an amazing WooCommerce homepage that will make your store stand out from the rest of the competition. You can choose full-screen sliders, videos, and products to add to the homepage of your WordPress website.
Simple head on over to the WordPress customiser and navigate to Header and Navigation > Header Type and select the type of Homepage Hero you want to set. You can also set the position of the Homepage Hero and the different customisations by scrolling down. Once you’re done, click the Publish button to save changes.
Footer Customiser
You may also choose to customise the way the footer looks on your WooCommerce store. Navigate to Footer > Layout from the WordPress customiser to configure and set different settings.
You can choose to add a background image or set different colours that can help you get the exact look and feel you want. You can also select the type of footer you prefer from the Footer layout drop-down menu and add custom footer text in the text field. Once you’re done, click the Publish button to save changes to your WooCommerce store.
Blog customiser/post layouts
Storefront Pro lets you customise post layouts or single-page layouts on your WooCommerce store. You can add columns, change layouts and create the perfect blog using Storefront Pro. Navigate to Posts > Posts Page to configure and change the layout settings of your blog posts.
Once you’re ready to go, simply click the Publish button to save the changes on the front-end of your WooCommerce store.
Hide header until scroll
If you have more visual products or content on your WordPress site, you have the option to hide the header until scroll so users can focus on your content. To do this, head on over to Header and Navigation > Header Elements and tick the check box next to Make header sticky and Hide header until scroll.
Once you are ready, click on the Publish button to save changes. The header will only be displayed when users scroll on your WordPress website.
Full-Screen layout
This can help your customers fully immerse themselves in the content and the design of your WordPress website. With Storefront Pro, you can easily achieve a full-screen layout and exploit the full width of the screen.
Navigate to Content > Content Elements from the WordPress Customiser and tick the checkboxes to hide additional lines and borders from your WooCommerce store. This will create a full-screen effect and make it easier for visitors to focus on your content and products.
Page Builder support
Storefront Pro also lets you create awesome individual pages using the page builder as well as the homepage of your WooCommerce store. The page builder is intuitive to use, even for people with little coding skills. You can hide breadcrumbs from your homepage or an individual page, add a background image, customise the typography, and much more.
All of this is possible through a point-and-click interface. This means that you don’t have to use shortcodes.
Responsive mobile stores
With Storefront Pro, you can easily create responsive mobile stores. This is particularly useful for store owners that get lots of traffic from mobile devices.
To change mobile menu options, navigate to Mobile > Mobile menu from the WordPress Customiser. You can add a mobile logo or change the background and font colour. Additionally, you can choose to display the search bar on your homepage for mobile users. To do this, tick the checkbox next to Display search on mobile menu and click the Publish button to save changes you made.
Distraction-free layout
Storefront Pro lets you create a distraction-free layout for your WooCommerce store. You can use Storefront to clean up your shop page as well as the WooCommerce cart and checkout page.
To clean up the shop page, navigate to WooCommerce > Shop from the WordPress customiser and select the Hide breadcrumbs on WooCommerce pages option. You may also select the checkbox next to Hide product count on categories to further clean up your shop page.
To clean up the WooCommerce cart and checkout page of your online store, navigate to WooCommerce > Checkout and tick the checkbox next to Enable distraction free Cart and Checkout and the option next to Hide breadcrumbs on Cart and Checkout pages. Once you’re done, click the Publish button to continue.
You can do all of this without using shortcodes or changing the template manually.
Conclusion
Your WooCommerce menu should provide clear instructions and information on navigation. This helps users find exactly what they’re looking for and not get overwhelmed with basic, generic-looking navigation options that are difficult to understand.
We showed you the easiest way to customise the menu of your WooCommerce store in different ways using Storefront Pro, without needing any PHP or CSS or messing around with the template. Hopefully, you’re in a good position to take the next steps.
Ready to start customising the navigation menu on your WordPress site? Get Storefront Pro WooCommerce menu plugin today!
Storefront is a free and popular theme for building an online store using WooCommerce, the most widely-used e-commerce platform for WordPress. But is it really the best option for your business? In this comprehensive review, we’ll take a closer look at what Storefront has to offer in terms of customization, functionality, and user experience.
What is Storefront and How Does it Compare to Other WooCommerce Themes?
Storefront is a free, open-source theme developed by WooCommerce itself, meaning it is fully compatible with the plugin and regularly updated. It’s designed to be clean and minimalistic, with a focus on showcasing products and improving the user experience. Compared to other WooCommerce themes, Storefront stands out for its simplicity and ease of use, as well as its seamless integration with the plugin. However, it may not offer as many customization options as some other themes.
Customization and Functionality of Storefront
While Storefront may not have as many customization options as some other themes, it still offers a good amount of flexibility in terms of design and layout. Users can choose from a variety of color options and fonts, and there are several options for customizing the homepage and product pages. Additionally, Storefront offers built-in support for several popular WooCommerce extensions, such as adding a wishlist and product reviews.
Taking things further with Storefront Pro
While the free version of Storefront offers a great deal of functionality and customization options, some businesses may require even more features and flexibility. For these users, Storefront Pro is an excellent option.
Storefront Pro is a premium version of the theme that offers a range of additional customization options, including more color and font choices, additional layout options, and the ability to create custom pages. Additionally, it offers more advanced features like the ability to customize the checkout process, create custom headers and footers, and more.
Furthermore, Storefront Pro includes a range of design and layout options that can help you make your store look unique and professional. The Pro version also includes a set of widgets that can be used to add various elements to your homepage such as Testimonials, Featured Products, and more.
Storefront Pro also includes access to dedicated support and updates for one year, which can be renewed annually.
User Experience and Support
One of the biggest strengths of Storefront is its focus on user experience. The theme is designed to be easy to navigate and use, with clear calls to action and product displays. Additionally, Storefront offers robust documentation and support for users, with a dedicated support forum and a wealth of tutorials and guides available.
Performance
One of the most important factors to consider when choosing a theme for your online store is its performance. A slow-loading website can negatively impact user experience and drive away potential customers. Fortunately, Storefront is built with performance in mind, using clean and optimized code to ensure fast loading times. Additionally, it is optimized for search engines, which can help to improve your online store’s visibility and search rankings. Additionally, Storefront is also fully responsive, meaning it adjusts to display well on any screen size.
Storefront is also compatible with caching plugin like w3 total cache and WP Super Cache, which can help to further improve website performance. By using these plugins user can easily add browser caching, minify their code, and utilize a Content Delivery Network (CDN) to serve static files.
In summary, Storefront’s performance is one of its greatest strengths. With optimized code and design, as well as compatibility with caching plugins, it can help to ensure that your online store loads quickly and runs smoothly. This is a key factor to retain customer and increase sales.
WooCommerce Extension support
Another great advantage of using Storefront as your WooCommerce theme is its compatibility with WooCommerce extensions. WooCommerce is an open-source platform, which means it has a large ecosystem of third-party plugins and extensions that can add new features and functionality to your online store.
Storefront is fully compatible with the majority of WooCommerce extensions, which means that you can easily add new features and functionality to your store without any compatibility issues. This allows you to tailor your store to meet your specific needs, whether it’s adding a new payment gateway, integrating with a shipping provider, or adding new functionality like subscriptions or membership.
Additionally, Storefront is also compatible with popular page builders such as Gutenberg, Elementor and Beaver Builder, which can help you to easily customize the design and layout of your store. This means you can create a unique, professional-looking online store without any coding experience.
The team behind Storefront
One of the biggest advantages of using Storefront as your WooCommerce theme is that it is built and supported by the same company that develops WooCommerce itself – Automattic. This means that you can be confident that the theme is fully compatible with the latest version of WooCommerce and that any issues or bugs will be quickly addressed.
Furthermore, Storefront is actively maintained, meaning it is updated regularly with new features and security patches. This ensures that your store will always be up-to-date with the latest technology and best practices, helping to keep your online store running smoothly and securely.
Additionally, Automattic offers excellent customer support, which can help you to quickly resolve any issues you may encounter while using Storefront. The company’s team of experts is available to assist you with any questions or problems you may have, which can help to ensure that your store is up and running smoothly.
Conclusion
Overall, Storefront is a solid choice for building an online store using WooCommerce. Its clean, minimalistic design, easy customization options, and strong focus on user experience make it a popular choice among e-commerce businesses. Additionally, its seamless integration with WooCommerce and robust support options make it a reliable option for businesses of all sizes.
WooCommerce is a popular e-commerce plugin for WordPress that allows you to create an online store. One of the themes that works seamlessly with WooCommerce is the Storefront theme. In this blog post, we’ll be discussing whether the Storefront theme is free, its features, and how to customize it for your online store.
Introduction to WooCommerce and Storefront
WooCommerce is a free, open-source plugin that allows you to create an online store on your WordPress website. It’s easy to use and has a wide range of features, making it a popular choice among e-commerce website owners.
Storefront is a free WooCommerce-compatible theme that is designed to work seamlessly with the plugin. It is a simple, clean, and responsive theme that is perfect for small to medium-sized online stores.
Is Storefront a free theme?
Yes, Storefront is a free theme. It can be downloaded from the WordPress repository and can be installed on your website just like any other WordPress theme.
Features of Storefront
Fully responsive design
Customizable homepage layout
Multiple color options
Translation-ready
Easy integration with popular WooCommerce plugins
Built-in support for product ratings and reviews
How to customize Storefront
To customize the Storefront theme, you can use the WordPress Customizer. The Customizer allows you to change the theme’s colors, fonts, and layout. You can also use it to add your own logo, create a custom menu, and much more. Additionally, you can use WooCommerce-specific Customizer options to change the layout and design of your product pages.
Storefront Pro
The Storefront Pro plugin is a paid upgrade to the free Storefront theme that offers additional customization options to help you tailor the design and functionality of your online store to your specific needs. Some of the key features of the Storefront Pro plugin include:
Additional layout and color options
Customizable checkout page
Sticky add to cart feature
Additional widgets and homepage sections
Customizable header and footer
The Storefront Pro plugin is a great choice for those looking to take their store to the next level by creating a unique and personalized shopping experience for their customers. It is easy to install and use, and it works seamlessly with the free Storefront theme.
Conclusion
WooCommerce Storefront is a free, reliable theme that is perfect for small to medium-sized online stores. It is easy to use and offers a wide range of customization options. Whether you’re just starting out or have an established online store, Storefront is a great choice for your e-commerce website.
Note: The theme is designed to work seamlessly with WooCommerce.
This tutorial will show you how to get 100% control of the WooCommerce Storefront Home Page. You will be able to edit the entire design and layout of the Storefront Home Page, and no coding what so ever is required.
The WooCommerce Storefront Theme comes with a home page template that automatically brings your products and categories into a page.
You’ll typically start with the following headings
Shop by Category
New in
We recommend
Fan favourites
On sale
Best sellers
It’s great because it’s automated, however the downside is that you are then stuck with the order and layout of the page.
But don’t worry there is a really easy way for you to customize your WooCommerce Storefront home page.
To customize your Storefront Theme home page just follow the following steps
Click edit home page
Change the Page template from homepage to either default or full width.
Re-build the page using WooCommerce Blocks and Storefront Blocks
Below you can see a much more exciting WooCommerce Storefront Home page
Storefront Pro and Storefront Blocks are optional but using them will help you take your designs to the next level.
Video tutorial
How to Edit the WooCommerce Storefront Home Page in two steps
1) Change the Storefront Theme Home Page Template
First you need to go to the edit screen of the WooCommerce Home Page and change the Page Template setting that is found in the right hand customizer, underneath Page Attributes.
You need to change the template this to either Default or Full Width. Full Width is great if you want to have a full width banner on your WooCommerce Home Page.
When you change the Storefront Page Template so that it’s not Homepage none of the sections will be pulled in automatically and you’ll have complete control over what is shown on the page.
2) Build your new WooCommerce Storefront Home Page using the WordPress Block Editor
The second step is to build the WooCommerce sections and/product into our Storefront Home page. You can either use the Storefront Blocks plugin or the WooCommerce Blocks that come with WooCommerce. Storefront Blocks comes with ten premium blocks that will take your Storefront Home Page to the next level. You can see the Blocks included with Storefront Blocks here.
Storefront Blocks
You’ll find all the WooCommerce Storefront Blocks available in the Block Library.
Storefront Blocks include;
Product Table Block
Product List Block
Masonry Category Block
Masonry Product Block
Product Square Grid Block
Product Card Block
Product Normal Grid
Product Slider
Single Product Block
Product Carousel
Sale Countdown Block
Product Flip Book
WooCommerce Blocks
WooCommerce comes with it’s own set of Blocks that you can use for your customize Storefront HomePage.
WooCommerce Blocks include;
Reviews Block
Featured Category Block
Featured Product Block
Hand Picked Products Block
Best selling Products Block
Products Categories List
Products by Attribute
Product Search
Product Filter
Top Rated Products
Products by Tag
On sale Products
Best selling Products
The finished result
This is what it looks like in the block editor
If you have any questions, please feel free to leave a comment below,
These WooCommerce Storefront theme tweaks have been curated from the most common questions we’ve found on the web. We really hope you find them useful.
If you have any questions, please post them in the comments box below
Storefront Pro now makes customizing the WooCommerce Storefront Theme incredibly easy
How to make Meta Slider full width with the Storefont Theme
Meta slider is one of the most popular free sliders available on WordPress.org. This bit of code will stretch the slider to be full width. Add this code to your child theme’s functions.php
How to add extra Google Fonts to the Storefront Theme
How to rename ‘Navigation’ in mobile view on the Storefront Theme
Paste this code into your child theme’s functions.php file
Then just modify the text here
Note: You’ll need to be using a child theme for this one to work
How to add a customer avatar in the Storefront Theme ‘My Account page’
Add the following code to your child theme’s function.php file
Then add the following css to your child theme’s custom.css file
Where can I find free video tutorials on the Storefront Theme?
We’ve produced the following free WooThemes Storefront video tutorials on a) How to set up Storefront b) How to add a parallax hero area to Storefront c) How to use the WooCommerce Storefront Customizer d) How to use the Storefront Designer.
How to customise the blog layout on the Storefront Theme
Storefront is the official WordPress theme for WooCommerce, and it’s a great theme to use if you want to build an online shop with WordPress. Storefront has now been downloaded over 5 million times – so it’s very popular, and with good reason.
Storefront is a beautifully built theme; it’s lean, lightweight, and fast, which is really important for a successful e-commerce website.
However, the design customisations and layout options that come built-in to the Storefront Theme are quite limited. That’s where Storefront Pro comes in. Storefront Pro is a WordPress plugin that lets you customise the WooCommerce Storefront Theme without any coding required. Storefront Pro has been designed to boost your sales, and it includes many great features and options that are normally only available for top e-commerce stores.
Do you want to fully customize the Storefront Theme?
Storefront Pro is a plugin that lets you fully customize the Storefront Theme without any coding required. It includes many great features and options that are normally only available for top e-commerce stores.
Storefront Pro – now used on over 5000 websites worldwide!
With the help of the Storefront Pro plugin, you’ll be able to customise the design of every aspect of the Storefront Theme and build a great-looking and professional website in no time at all, with no messing about with additional code or CSS. In this post we’ve gathered together 101 ways you can customise your WooCommerce store, stand out from the crowd, and boost your sales.
WooCommerce site examples built with Storefront Pro
Storefront Pro Highlights
Storefront Theme customizer
Starter templates that you can import with one click
Customize WooCommerce Pages
Customize Blog Page
Live Search
Mobile site options
Product wish list
Product quick view
Starter templates
First off – we know how hard it can be to find the perfect design for your website, so we created Starter Pro templates that are easy to customize and come with a variety of layouts. They’re free when you purchase Storefront Pro!
With these starter templates, you’ll have an awesome looking site in no time – without having to spend hours or days designing one from scratch. These templates provide a great foundation for you to start making some of the customisations we’ve outlined below.
1. How to customise the Storefront Theme navigation
The Navigation Menu is a vital part of your site: it’s the first thing visitors will look for on your homepage if they’re hoping to browse your products, and it needs to be laid out in such a way as to make it as easy as possible for your customers to find what they’re looking for. The good news is that with Storefront Pro, you can change the layout of your navigation menu to suit your needs with just a few clicks! This section will show you how to configure the Storefront Theme’s navigation layout. This will help you create a website that is easy to get around, looks great on any device, and fits in with your brand.
Here are our first 9 tips we’ll be covering in the video below
How to align the Storefront navigation menu
How centre your site’s logo
How to align your site’s logo inside the navigation
How to add a Hamburger Menu to Storefront
How to add a left vertical navigation menu to Storefront
How to change the fonts in the your Storefront menu
How to change the letter spacing in your Storefront menu
How to change your menu items to upper case
How to change the background colour of your Storefront navigation menu
2. How to customise the Storefront Secondary navigation
The potential of the Secondary Navigation menu is often overlooked. It’s perfect for contact information, social icons and secondary menu items like ‘my account’, as well as offering an easy-to-find location for the search box Storefront Pro is a great way to add a secondary navigation bar that runs along the top of the page. It’s easy to set up and it looks good too!
You can use this space for anything you want – from your business address and phone number to social media links.
In this video, we’ll look at our next 5 tips:
How to add social icons to your WooCommerce Storefront secondary navigation menu
How to add email and phone numbers to your Storefront secondary menu
How to add a header bar above your Storefront secondary navigation menu
How to change the fonts in your Storefront secondary navigation menu
How to customize the Storefront Search box – which leads us on to…
3. How to customise the Storefront header and search box
Storefront Pro has a built-in option that lets you add a highly visible search box right in the header. Research undertaken by the Baymard Institute has shown that eCommerce sites perform better when the Search Box is clearly visible in the header, boostingconversions by up to 20%. You can also customize your header with an image, logo or even a video to make it stand out from the competition.
Here’s what the video below covers
How to create a sticky header for Storefront
How to hide the WooCommerce search box in the Storefront header
How to change the size of the search box in the header
How to change the color of the Storefront search box background and text color
How to add rounded corners to the WooCommerce Storefront search box
How to add a search icon to the primary navigation
How to choose whether to search for posts/pages or products from the primary navigation search
4. How to customise the Storefont Shop page
The Storefront Shop Page is one of your most important pages on your WooCommerce Store, and the Storefront Pro plugin adds lots of sales-boosting options to turn visitors into customers. You’ll be able to change the number of Shop Columns, add a wishlist, turn on product quick view, remove the add to cart buttons, add a sales icon, and much more. It’s like having a conversions expert in-house!
Make your store look great with these easy-to-use features that will help increase your conversion rates.
Here’s what the video tutorial below covers
How to make WooCommerce Storefront Shop Pages full width
How to create a masonry shop page with WooCommerce Storefront
How to change the number of columns for your WooCommerce products
How to select the number of Products per Page with WooCommerce Storefront
How to change Storefront product image alignment
How to flip WooCommerce Storefront product images
How to add infinite scroll for your WooCommerce Product pages
How to display or hide product results count when using Storefront
How to display or hide product sorting when using Storefront
How to display or hide product images
How to display or hide product titles
How to display or hide the sale flash icons
How to display or hide product ratings
How to display or hide product prices
How to display or hide product add to cart button
How to display or hide breadcrumbs on Woocommerce Storefront pages
How to enable enhanced Woocommerce Mobile Styling
5. How to customise the Storefront Product pages
WooCommerce Product Pages are the beating heart of your store. They’re a great way to showcase your products and increase sales.
Storefront Pro makes it easy to choose a different product page template layout for your individual WooCommerce Product Pages, allowing you to create the perfect look with just one click of the mouse! There are five pre-set Product Page designs for Storefront built into Storefront Pro, including a full screen product layout, a full width product layout and a product slider product layout.
You can even preview how each design will look before you make any changes. It’s so simple that anyone can do it! Plus, all of these templates come with additional features like custom colors and fonts so you can customise them however you want.
Here’s what the video tutorial below covers
How to add a full-width Product Gallery using Storefront
How to create a hero Product layout using Storefront
How to hide breadcrumbs on the Storefront Product Page
How to add social icons to the Storefront Product Page
How to display or hide product tabs on the Storefront Product Page
How to display or hide related products on the Storefront Product Page
How to display or hide product meta information
6. How to customise Storefront Checkout pages
We know that cart abandonment is a big problem for many stores. That’s why we created this option to help you reduce it.
When your customers are about to make their purchase, they’ll see the checkout page without any distractions – just the Cart and Checkout Pages. This will allow them to focus on completing their order with ease and confidence.
You don’t have anything to lose by turning on Distraction Free Checkout today! It’s part of Storefront Pro, so there’s no reason not to try it out and see how much of an impact it has on your store conversion rates.
Here’s what the video tutorial below covers
How to display or hide breadcrumbs on Cart and Checkout pages
How to enable distraction free Cart and Checkout
7. How to customise the Storefront blog and posts
A blog is a great way to tell stories about your business. You might want to share testimonials about recent products, explain the production process behind your top-rated offerings, announce what’s going to be on sale in the coming months, and more. But making your blog stand out can be tricky.
Do you want to fully customize the Storefront Theme?
Storefront Pro is a plugin that lets you fully customize the Storefront Theme without any coding required. It includes many great features and options that are normally only available for top e-commerce stores.
Storefront Pro – now used on over 5000 websites worldwide!
If you don’t have time to spend hours on customizing your blog – no problem! Storefront Pro has pre-made layouts that are ready for customization in minutes. You can add new posts to your heart’s content safe in the knowledge that they’ll look fantastic, all without messing around with custom CSS files or additional HTML .
Here’s what the Storefront video below will show you how to do
How to change the layout of your Storefront blog
How to create a magazine post grid layout using Storefront
How to align featured images to the left, right, and center
How to change the size of post headings
How to change the colour of post headings
How to turn off meta-information on posts
How to show full content or just the excerpt
How to change the excerpt length using Storefront
How to change the “read more” text
Create beautiful full-width posts
Create posts with the title in the featured image
Customize individual WooCommerce Storefront pages
With Storefront Pro, you can change the background of your pages to a photo, colour or video. You can also hide the header section on a per page basis and change the header colour per page. The header background image is also customizable too! There are so many features to choose from that will make your store look great!
Here’s what the video tutorial below covers
How to change the page background to be a photo, color, or video
How to hide header section per page
How to change the header colour per page
How to change the header background image per page
How to hide breadcrumbs per page
How to hide the sidebar per page
How to hide page title per page
How to hide footer per page
How to change footer background per page
9. How to customise the WooCommerce Storefront footer
The footer is a perfect place for people who are looking for information about your business or want to connect on social media. It’s also an important part of privacy content so that visitors know how they’re being tracked online.
The WordPress customizer offers a few options to customise your footer, but you can customize the footer with logos, colors, and other style tweaks with Storefront Pro. It’s easy to use and it comes with some great features for you to make your website look professional.
Here’s what the video below covers
How to change the number of columns in the footer
How to change the background color of the footer
How to add your own custom credit text to replace ‘Storefront designed by WooCommerce.’
How to change footer widget header size
How to change footer widget header color
How to change footer widget header style (bold, italic, underline, uppercase)
How to change footer widget text color
How to change footer widget text size
How to change footer widget text style (bold, italic, underline, uppercase)
How to change the widget link color
How to change widget bullet color
10. General Storefront UX Tweaks
Storefront Pro also comes with extra options to customize the content appearance of the Storefront Theme. This allows you to create a unified look across your site – from your front page to your featured products and product categories .Simple changes like enabling breadcrumbs and tweaking the colour of your hyperlinks can all make your store easier to navigate, resulting in a better user experience, more effective visitor engagement, better SEO, and increased sales. When it comes to online retail, the little things really do matter – and with Storefront Pro you’ll find out
How to display or hide accessibility box around active links
How to display or hide breadcrumbs on pages
How to display or hide breadcrumbs on posts
How to display or hide breadcrumbs on archive pages
How to display or hide page titles
How to change Storefront heading font, size, color, and letter spacing
How to change Storefront heading font style. Options include bold, underline, uppercase and italic
How to change Storefront body font, size, color, and letter spacing
How change Storefront hyperlink colours
How to make a Storefront Theme website full width
How add sidebars to the left or right using the Storefront Theme
11. How to customise the Storefont mobile experience. Customizing WooCommerce Storefront mobile pages
Mobile is the future of the web – we’ve got you covered! Storefront Pro has specific mobile options built right into the plugin. One of Storefront Pro highlights is the option to customize the mobile WooCommerce grid. This option displays your shop page in a mobile friendly grid automatically on phones and tablets. The WooCommerce mobile grid can be displayed in either grid view, or list view. But that’s not all…
Here’s what the video below covers
How to change the layout of the mobile WooCommerce Storefront shop page
How to create a grid layout of products for mobile
How to create an user toggle product option for mobile
How hide your store logo on mobile
How to display a search box on mobile menu
How to add a wishlist icon to the fixed footer
How to hide footers, headers, and sidebars in mobile view
How to change the mobile menu background color and font color
How to hide icons on mobile
How to change the mobile menu icon color
How to change the fixed mobile footer background color and icons color
How to turn on and off mobile fixed footer options – my account, search and cart
Conclusion
The WooCommerce Storefront Theme is one of the most popular ecommerce themes, and is a great framework to build a successful online store. With the addition of the Storefront Pro plugin, and the many customization options included, you’ll be able to get a professional looking website up and running in no time.
You don’t need to be a web developer or designer in order to use Storefront and Storefront Pro! The Theme and Plugin have been designed for everyone from beginners who are looking for their first site all the way up to experienced developers who want total control over every aspect of their site’s design. We’re confident that we have something here for everyone!
