How to create a child theme for storefront?

To create a child theme for store front create a folder named ‘storefront child'(this naming rule is not compulsory, you can give any other name).
There are two compulsory files to be present in this folder named ‘style.css’ and ‘functions.php’.
Code to be written in ‘style.css’

/*
Theme Name: Storefront Child
Author: Champak
Author URI: http://hypatiasoftwaresolutions.in
Template: storefront
Version: 1.0.0
*/

‘functions.php’ is used for creating new functions and overriding predefined functions.

Child themes are used for changing parts of the original theme while not disturbing the original theme.

Storefront is the default theme for woocommerce, the very successful e-commerce plugin for wordpress.

Now we will see how to modify items from our newly made child theme.
Ex:- To change the shape of single product image from square/rectangle to circle/oval, first of all install woocommerce plugin in your website.
Now from directory ‘your_website/wp-content/plugins/woocommerce/templates/’ copy all the files and folders.

Now make a new folder in your child theme directory and name it as ‘woocommerce’. Under ‘woocommerce’ directory paste all the files copied from templates directory in woocommerce.

Now open folder named ‘single-product’ . In that folder there are individual files for every part of a single product. To change the shape of product image first of all write the following code in ‘style.css’ 

.round
{
border-radius:50%;
}

Now open file named ‘product-image.php’ 
In this file go to line 44:
Code at line 44:

$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );

Image before changes:-

Here add ’round’ (or css class name defined in style.css)
Edited code:

$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image round" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );

This modification will let you to make your product image circle/oval.
Image after applying changes:-

 

 

Leave a Reply