When using Woocommerce theme is certainly not always be able to support your  booth show best .  The reason for WooCommerce plugin it will be adding a few components required, such as store displays, booths, carts, … that if the theme is not optimized display uses these components it can not be nice because using the default display of WooCommerce. Besides theme for WooCommerce wich often has  the cart on  menu quite nice and comfortable.

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

Why’re the beginners should use storefront theme?

There are several reasons to put this theme into their guidance because there are so many themes present should not which one I will guide. It is very good for beginners to learn WooCommerce is because:

  • Completely free and open source.
  • Compatible with plugin support as Origin Page Builder design or Visual Composer to design a layout for each page.
  • Structural support HTML5 and Schema standard SEO.
  • Customize area fully customizable..
  • Easy to use.
  • Responsive support.
  • There are supported the extension Storefront Designer to support more professional customization.
  • Code friendly with programmer. Customizable easy if you master the action hook and filter hook
  • Supports multiple child theme(paying).

Add sample data (Dummy Content) for Woocommerce

First you download plugin Woocommerce  on your computer and unzip. When unzipped, you in the directory / woocommerce / dummy-data /  you will see sample data files. But here, we are only using dummy-data.xml file.

Finally you visit the website -> Tool -> Input -> WordPress (WordPress Importer plugin installed if you have not already) and upload files up dummy-data.xml.

Putting the product on your user and check the Download and import file attachments and Submit.

If your network is a little slow and getting timeouts, create php.ini or .user.ini in host / localhost and add:

01
max_execution_time = 200

Announced after the successful data entry form.

Check you will find it has plenty of sample products are fully configured.

Install and activate Storefront

To install this theme, you access the Layout -> Themes -> Add New and type the search theme “storefront”. After installation is complete, you activate it.

Homepage setting

This theme does not itself show home that you must create a new page and establish interfaces for its Homepage.You go to the page -> Add a new page to create a page, you can name the Home Page, content vacated and set the Layout is Homepage . At the same time you create a new site called Blog or News, content to empty and do not set anything else.

Then you visit Settings -> Read and set the main page and page-by-page article that you just created.

Save  and come back the homepage to see the results.

The homepage incudes :

  • Shop by Category: Shop by Category: Show the list of products included in the website. By default it displays 3 categories in alphabetical order according to the name list. You can edit the list to add avatars to.
  • New In: A list of newest products.
  • We Recommend: A list of the latest product highlights, to set up a highlight your products into product management page and type in its corresponding asterisk.
  • Fan Favorites:The newest products are most appreciated.
  • On Sales: The newest products are discounted.
  • Best Sellers:  The best-selling new products

Setting regional which inserts widget

Storefront theme  support for our 6 widget insertion position include:

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

You can see in the Layout -> Widgets.

Custom features in theme

This theme provides a custom Interface  -> Customize and there you can set the logo, change the color, texture, ….

Customizing  Storefront  raise

Like I said above, the storefront is a theme capable of highly customizable thanks to the action and filter hook hook. If you are already familiar with the code, you can see the file inc / template-functions.php-storefront to see through some private functions declared in this theme so you can customize it with the filter hook.

Set child theme before customizable

  • style.css – Customize  CSS of theme.
  • functions.php – Add custom PHP code in the theme.

Then you go to Layout -> Add New -> Upload and upload this theme up and activated as usual.

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

Remove some components display at homepage

In the file template-homepage.php of this theme you’ll have a declaration section as follows:

01
02
03
04
05
06
07
08
09
10
11
12
13
<?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' ); ?>

With the above paragraph we will know at the homepage hook action will have  any function which was  hooked up and to remove the components not want to show off our homepage, then simply remove it from the hook function homepage . . For example, you want to remove the Fan Favorite and We Recommend the following code in functions.php with:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * Delete elements unused in the 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() {
 /*
 * Use: remove_action( 'homepage', 'function_name_remove', the default order );
 */
 remove_action( 'homepage', 'storefront_featured_products', 40 );
 remove_action( 'homepage', 'storefront_popular_products', 50 );
}
add_action( 'after_setup_theme', 'tp_homepage_blocks', 10 );

Adjust the amount that appears in the item outside homepage

All items shown to the homepage we can update the show out. For example, the default Category Shop by displaying three but we can change it, by editing parameters on its hook filter that has been declared in inc / template-functions.php-storefront.

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

01
02
03
04
05
06
07
$args = apply_filters( 'storefront_product_categories_args', array(
 'limit' => 3,
 'columns' => 3,
 'child_categories' => 0,
 'orderby' => 'name',
 'title' => __( 'Shop by Category', 'storefront' ),
) );

And now I declare another function to filter back to the hook storefront_product_categories_args.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
/**
 * Customizable Product by Category
 * @hook storefront_product_categories_args
 *
 */
function tp_product_categories_args( $args ) {
 $args = array(
 'limit' => 6,
 'title' => __( 'Product Categories' )
 );
  return$args;
}
add_filter( 'storefront_product_categories_args', 'tp_product_categories_args' );
You do the same with the other sections and each section is declare a function like that, or if you are using PHP 5.4, you can write more concise technical use Anonymous functions trong PHP to collect on a function for easy management .
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/**
 * Customizable position which outside homepage  
 * @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' => __( 'Product Category', 'category1' )
 );
 return $args;
 } );
 return $args
 /* New In */
 add_filter( 'storefront_recent_products_args', function($args) {
 $args = array(
 'limit' => 12,
 'title' => __( 'New Product', 'product1' )
 );
 return $args;
 } );
 
 /* And so on.... */
}
add_action( 'after_setup_theme', 'tp_homepage_blocks_custom' );

Name hook which customizable   outside home page:

  • 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

 Conclusion

Does this theme is very easy to use, doesn’t it ? Only a few steps only are we made a simple page on your WordPress shop with Woocommerce plugin combination of quite beautiful already. Regarded as the show finished, we will learn more about the settings in the later video .

Thanks for your reading. If you have any question with this blog, don’t hesitate to leave a comment. I will reply to it as soon as possible.

Leave a Reply

Your email address will not be published. Required fields are marked *

Flash Sale! GET EXTRA 50% OFF FOR ALL PURCHASES. CODE: WSBFCM50 Join Club!
Flash Sale! GET EXTRA 50% OFF FOR ALL PURCHASES. CODE: WSBFCM50 Join Club!