[Woocommerce] How to use Storefront theme

When using Woocommerce, surely not every theme can support the display of your store the best. The reason in the WooCommerce plugin it will have a few more mandatory display elements such as store, store, cart, etc., but if the theme you are using is not optimized to display these components, it may not be beautiful for you. because it uses the default display of WooCommerce. In addition, themes dedicated to WooCommerce will often have a nice and convenient menu cart section.

When accepting to use Woocommerce, if you want your store to be beautiful, you will definitely need to buy some paid Woocommerce-specific themes at WooThemes or ThemeForest (more rich) but you should only use the paid theme for Woocommerce when you really know how to use it.

So if you are a beginner, I recommend you to use the theme StoreFront if you need a simple sales interface completely free but maximum support for Woocommerce.

Refer: Storefront on Github

Why should newbies use StoreFront theme?

There are many reasons for me to include this theme in the tutorial because there are so many themes right now, so not all of them I will guide. It’s great for WooCommerce beginners because:

• Completely free and open source.
• Good compatibility with design support plugins like Origin Page Builder or Visual Composer to design the layout for each page yourself.
• Supports HTML5 structure and SEO standard Schema.
• Fully Customize Custom Area.
• Easy to use.
• Responsive support.
• There is support for the Storefront Designer extension for more professional customization support.
• Programmer-friendly code. Can be easily re-customized if you master action hooks and filter hooks.
• Lots of support child theme (paid for).

That’s all, although not too much functionality, but at least it’s not too redundant so this theme will be extremely light.

Add sample data (Dummy Content) for Woocommerce

Woocommerce sample data is a pre-made data pack of some products so that we can easily test functions or themes. The purpose I ask you to add this sample data in is so we can see how the theme fully displays.

First you Woocommerce plugin download to your computer and unzip it. When you unzip it, go to the folder /woocommerce/dummy-data/ will see sample data files. But here we just use the file dummy-data.xml.

Finally, you access the website -> Tools -> Import -> WordPress (install the WordPress Importer plugin if you haven’t already) and upload the dummy-data.xml file.

Bring the products to your user and tick Download and import file attachments and then Submit.

If your network is a bit slow and timeout, create php.ini or .user.ini file in host/localhost and add:

[code]max_execution_time = 200[/code]

Thông báo sau khi nhập dữ liệu mẫu thành công.

Check it out and you’ll see that it has quite a few fully configurable sample products.

Install and activate Storefront

To install this theme, go to Appearance -> Appearance -> Add New and type search theme “Storefront“.

Once it’s installed, activate it.

Home page settings

This theme does not display the homepage by itself, you have to create a new page and set up the Homepage interface for it. You go to the [textmarker color=”247BFF”]Pages -> Add New Page [/textmarker]to create a page, you can name the page as Home, leave the content blank and set the Appearance as Homepage.

At the same time you should create a new page called Blog or News, the content is blank and nothing else is set up.

Then you access [textmarker color=”247BFF”]Settings -> Read[/textmarker] and set up the main page and posts page according to each page you just created.

Save and go to the homepage to see the results.

First of all, I would like to explain through the meaning of the components on the homepage of the Storefront theme such as:

• Shop by Category: Display the product categories in the website. By default it will display 3 categories in alphabetical order on the category name. You can edit the category to add an avatar to it.
• New In: List of latest products.
• We Recommend: List of latest featured products, to set a product to featured you go to the product management page and tick its corresponding star.
• Fan Favorites: The newest products are top rated.
• On Sales: The latest products are on sale.
• Best Sellers: The newest hot selling products.

Set widget insertion area

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

• Below Header
• Sidebar
• 4 Footers (Footer 1, Footer 2, Footer 3 and Footer 4)

You can see in Appearance -> Widgets.

see more: Instructions for using widgets in WordPress.

Customization feature in the theme

This theme offers some customization at [textmarker color=”247BFF”]Appearance -> Customize[/textmarker] and there you can set logo, change color, layout, etc.

Translate Storefront theme into Vietnamese

This theme is currently not available in Vietnamese language, so you may see some English words like Product Categories, Recent Products,….if you need to translate it, you can install a plugin. Loco Translate and see details how to use this plugin to translate here.

Advanced Storefront Customization

As I said above, Storefront is a highly customizable theme thanks to its action hook and filter hook. If you are familiar with the code, you can see the file inc/storefront-template-functions.php to take a look at some of the native functions declared in this theme that you can customize with filter hooks.

Should see: How to use filter hooks in WordPress

Install child theme before customization

When customizing the theme, avoid editing or adding code directly to the theme because it will be lost when you update the new theme version later. In order not to lose it when updating, create a child theme for Storefront. I have created a simple child theme with 2 files:

• style.css – Customize the theme’s CSS.
• functions.php – Add custom PHP codes in the theme.

Download Storefront Child Theme

Then you enter [textmarker color=”247BFF”]Appearance -> Add New -> Upload[/textmarker] and upload this theme and activate it as usual.

All the code below you will insert into the functions.php file of this child theme.

Remove some elements from the homepage

In the template-homepage.php file of this theme you will see a declaration as follows:

/**
* 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' );  ?>

With the above paragraph, we will know which functions will be hooked into the action hook homepage, and to remove the elements that do not want to be displayed on the homepage, we simply remove that function from the hook. homepage. For example, if I want to delete the Fan Favorite and We Recommend sections, I have the following code in functions.php:

/**
* 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 );

I commented quite clearly in the code, so you can read it yourself.

Adjust the number of impressions on items off the homepage

All items are displayed outside the home page, we can change the amount displayed. For example, the default Shop by Category section displays 3 items, but we can change it by modifying the parameter to its filter hook that was declared at inc/storefront-template-functions.php.

For example, the Shop by Category section is declared as a filter like this:

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

And now we declare another function to filter the hook storefront_product_categories_args.

/**
* 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’ );

You do the same with the other parts and each part declares such a function, or if you are using PHP 5.4, you can write more concisely using the technique Anonymous functions in PHP to collect into a function for easy management.

/**
* Tùy biến các mục ngoài trang chủ
* @hook after_setup_theme
*
* @locate /inc/storefront-template-functions.php
* @function storefront_product_categories_args
* @function storefront_featured_products_args
* @function storefront_popular_products_args
* @function storefront_on_sale_products_args
* @function storefront_best_selling_products_args
*/
function tp_homepage_blocks_custom() {
 /* Shop by Category */
add_filter( ‘storefront_product_categories_args’, function($args) {
$args = array(
‘limit’ => 6,
‘title’ => __( ‘Danh mục sản phẩm’, ‘thachpham’ )
);
 return $args;
} );
 /* New In */
add_filter( ‘storefront_recent_products_args’, function($args) {
$args = array(
‘limit’ => 12,
‘title’ => __( ‘Sản phẩm mới’, ‘thachpham’ )
);
return $args;
} );
 /* And so on…. */
}
add_action( 'after_setup_theme', 'tp_homepage_blocks_custom' );

Names of custom hooks off the homepage:

• storefront_product_categories_args: Shop by Category
• storefront_featured_products_args: We Recommended
• storefront_popular_products_args: Fan Favorite
• storefront_recent_products_args: New In
• storefront_on_sale_products_args: On Sales
• storefront_best_selling_products_args: Best Sellers

Epilogue

Is this theme very easy to use? With just a few steps, we have a simple shop page on WordPress with the combination of the Woocommerce plugin and it is quite beautiful. Assuming the display we’ve taken care of, we’ll learn more about the settings in the next video.