Creating a store front child theme and modifying the user interface – 1 .

This post illustrates the process of creating a storefront child theme.  Storefront is the official theme for the WooCommerce plugin that changes your WordPress installation into a eCommerce shop.

The WooCommerce site is at https://woocommerce.com/

The plugin itself would suggest installation of the Storefront theme. Storefront can be downloaded at: https://woocommerce.com/storefront/
In case you haven’t learned the art of making child themes please look up our previous post at Creating a child theme.
Let us summarize the process over here:
1. Create a new theme and create two files functions.php and style.css.
2. In the style.css file mention the original theme as the template.

/*
Theme Name: Storefront Child
Author: Rishabh
Author URI:https://www.facebook.com/rishabh.baranwal.35
Template: storefront
Version: 1.0.0

*/

3. In the functions.php file enqueue the style.css from the parent theme.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles()
{
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

This should get the child theme up and running.

<?php
/**
Storefront child theme
*/
$theme = wp_get_theme( 'storefront' );
$storefront_version = $theme['Version'];
function mytheme_add_woocommerce_support() { 
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );
?>

This things are define compulsory :-
1. $theme -> Theme Name
2. $storefront_version -> Version
3. function mytheme_add_woocommerce_support() -> this is for to add product and editing in the theme.
Note – If you can’t define the add_theme_support(‘woocommerce’); then it can not allow to use the product and also not allow to add your modification in the theme it works by itself.

After this go to your dashboard -> appeareance -> theme and then activate the storefront child theme.

Now add the w3css.css to look your theme beautiful. Let’s learn how to add css in function.php.

Firslty make a file name w3css.css inside the storefront child folder and add the code in that file, after making
add the given code in function.php inside the my_theme_enqueue_styles()

wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/w3css.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);

This is the w3css style, for adding own style
1. make a class in style.css file .
.site-title a{.site-title a{
color: red;
}

By doing this the Site title color can be changed.

Before :-

After :-

 

 

Leave a Reply