Woocommerce: Instructions for using the StoreFront theme

If you are looking for the optimal theme for Woocommere, you can refer to the list of places to buy WordPress themes here. 

But if you are in the process of learning Woocommerce to make a sales website, a free theme is enough. 

Read more:

12 beautiful sales themes

In this article, I would like to introduce you to a popular free WordPress theme for Woocommerce. 

It’s StoreFront .

Some advantages of this theme:

Before installing this theme, we will add sample data to have data when running the theme.

Add sample data (Dummy Content) for Woocommerce

Woocommerce provides you with sample data that includes multiple products. This makes it easy to evaluate the theme’s functions and operations.

First of all, you need to download the Woocommerce plugin . Next, you unzip. You should see the directory /woocommerce/dummy-data/ . Inside the folder there are many files but we use dummy-data.xml file .

Now go to Tools -> Import -> WordPress . If this is your first time using WordPress Importer, you will have to install the plugin.

If it’s already installed, click Run Importer and select the dummy-data.xml file.

Select the user and remember to select ‘ Download and import file attachments ‘

Note: If you have timeout, install this plugin .

In the Product management screen you will see many added products:

Install Storefront theme

To install the theme , go to Appearance -> Appearance -> Theme and enter ‘ StoreFront ‘ in the search box

You install and activate the theme.

Home page settings

This theme does not display the homepage by itself. Therefore, you have to create a new page and choose a Homepage theme for it

You go to Pages -> Add New Page to create a page. You name it Home, the content is blank. In the Interface section, select Homepage.

Next you create a new page called Blog or News. Content you leave blank and do not set anything else

Next, go to Settings -> Reading and set up the main page and posts page according to each one you just created:

Save and now visit the homepage to see the interface of this theme.

Some main parts on the interface :

• Shop By Category : Display product categories. By default it will display 3 categories in alphabetical order on the category name.
• New In : List of latest products.
• We recommended : List of latest featured products. If you want the product to stand out, go to the product manager and star the corresponding star.
• Fan Favorites : Latest Top rated products
• On Sale s : The latest products are on sale.
• Best Sellers : The newest hot selling products

Menu

StoreFront has 2 menu positions, Primary (main) and Secondary (secondary). The main menu appears below the logo. The submenu appears to the right of the logo next to the search box

If you have no menu in primary value, the theme will simply display all the existing pages of the website. However for the submenu position will not be visible until you assign a menu to that position.

So after activating the theme, you won’t see anything in this location.

Widget insertion area

The Storefront theme supports us with 6 widget insertion positions including:

• Below Header
• Sidebar
• 4 in Footer

You can see in Appearance -> Widgets

Customize theme

You can customize the theme at Appearance -> Customize . Here, you can change the logo, color, layout….

Translate more Storefront into Vietnamese

This theme does not have Vietnamese language yet. If you need to translate it, you can install the Loco Translate plugin . See how to use the Loco Translate plugin to Vietnameseize the theme here . 

Advanced Storefront Customization

When customizing, you should avoid editing directly because the editing code will be lost when you update the theme. In order not to lose, you can create a child theme for Storefront.

Another way you can use the Theme Customizations plugin. You go to Appearance -> Storefront , click Download Theme Customizations. 

To install the plugin , go to Extensions -> Install New . Then select Upload plugin. Select the zip file you just downloaded. Finally activate the plugin to use. 

In fact, this plugin creates a few files for you. You need to customize anything just open the corresponding file and add the code. 

All the code below you add to the file custom/functions.php .

Now let’s try to do some customizing the Storefront theme:

1. Removed some elements from the homepage

In the file template-homepage.php , you see the following declaration:

<!--?php
/**
* Functions hooked in to homepage action
*
* @hooked storefront_homepage_content - 10
* @hooked storefront_product_categories - 20
* @hooked storefront_recent_products - 30
* @hooked storefront_featured_products - 40
* @hooked storefront_popular_products - 50
* @hooked storefront_on_sale_products - 60
* @hooked storefront_best_selling_products - 70
*/
do_action( 'homepage' ); ?-->

From this code we know which hompage action hook has a function to hook into. So, if you don’t want an element to show the homepage, simply remove the function from the homepage hook.

For example, if you want to delete Fan Favorite and We Recommend, use the following code:

/**
* Xóa đi các thành phần không sử dụng trong homepage
* @hook after_setup_theme
*
* template-homepage.php
* @hook homepage
* @hooked storefront_homepage_content - 10
* @hooked storefront_product_categories - 20
* @hooked storefront_recent_products - 30
* @hooked storefront_featured_products - 40
* @hooked storefront_popular_products - 50
* @hooked storefront_on_sale_products - 60
* @hooked storefront_best_selling_products - 70
*/
function tp_homepage_blocks() {
/*
* Sử dụng: remove_action( 'homepage', 'tên_hàm_cần_xóa', số thứ tự mặc định );
*/
remove_action( 'homepage', 'storefront_featured_products', 40 );
remove_action( 'homepage', 'storefront_popular_products', 50 );
}
add_action( 'after_setup_theme', 'tp_homepage_blocks', 10 );

Note : You can use the homepage-control plugin  to control the display and order of components on the homepage.

2. Adjust the number of items displayed outside the homepage

By default, the Shop by Category section displays 3 pieces. But we can fix it by modifying the parameter to the filter hook declared at inc/storefront-template-functions.php .

The Shop by Category section is declared as a filter as follows:

$args = apply_filters( 'storefront_product_categories_args', array(
'limit' => 3,
'columns' => 3,
'child_categories' => 0,
'orderby' => 'name',
'title' => __( 'Shop by Category', 'storefront' ),
) );

Here is our custom code

/**
* Tùy biến Product by Category
* @hook storefront_product_categories_args
*
*/
function tp_product_categories_args( $args ) {
$args = array(
'limit' => 6,
'title' => __( 'Danh mục sản phẩm', 'thachpham' )
);
return $args;
}
add_filter( 'storefront_product_categories_args', 'tp_product_categories_args' );

Names of custom hooks outside the homepage for your reference

Epilogue

Above you know a free theme to use for Woocommerce. You know how to customize the basic as well as advanced for this font.

If you have any problems, leave a comment below.