Storefront Tag Archives - Page 2 of 5

How to Edit Footer Credit Text in Storefront Theme

March 20, 2017 By John Leave a Comment

Like most themes, Storefront theme comes with a generic footer text. As a WooCommerce store owner, this doesn’t really help your site so you will want to change it.

Why Edit Footer Credit Text Area?

Well, you certainly wouldn’t want the default one. You can edit your site footer credit text area to include your business name and declare your copyright. You can also use this area to include whatever best fits your needs.

But first off…

How Do You Edit the Edit Footer Credit Text in Storefront Theme?

By editing your e-commerce store’s footer, you can make it a part of your strategy. You can easily edit it if you know how to code. However, this can prove challenging to the average user. In this case, there’s a plugin for that. Just follow the steps below:

Head over to your WordPress Dashboard and go to plugins
Click on “Add New”. In the Search field, input “Storefront Footer Text” and press Enter.
Click on ‘Install Now’ on the plugin and then click Activate.
Once Activated, head over Appearance > Customizer
Under the Footer section, you will find a text area for you to enter your custom credit text. You can use HTML tags so you can be creative when adding your footer text.
When you’re done, just click on Save.

What Can I Add to My WooCommerce Store’s Footer Credit Area?

There are a lot of things you can add to your store’s footer credit section. Below are just some of them.

Declare Copyright and Other Important Declarations

The most common use of this area is to declare a copyright. This has three elements: the copyright icon, the company name and the year that you started the e-commerce store/business up to the current year.

If there are other important declarations that you want to add for legal purposes, you can add them in this section as well. Some websites have been known to use this area to declare the use of cookies.

Here’s how it looks like on the Costco website.

Contact Details

In addition to copyright information, you can add your contact details on the footer credit section to increase your credibility. You can add your phone number, address, email as well as a link to your contact us page.

Social Media Icons

You can add social media icons in this section in a way that is not intrusive. When you add social icons at the top of your page, it can be a distraction from your website’s goal. But when you add it at the bottom of your site, it becomes another way for you to engage with your visitors if they ignored your main call-to-action.

Show Security Seals and Certificates

Newegg.com adds the security seals on their footer credit section along with their social media icons. You can add your own Norton Security Seal here.

Payment Options

You can also add icons of the payment options that you accept on your e-commerce store. This makes it easier for your visitors to know what payment options you accept without having to look for the FAQ section.

Add Other Important Links

You can also use the footer credit area to add other important links such as your terms and conditions and privacy policy. This is how Amazon does it.

No matter what you put on your footer credit text area, it must be an element that helps you achieve your e-commerce store’s goals.

Did this plugin help you edit footer credit text in Storefront? Did you experience any problems using it? What elements did you add to your footer credit area? Let us know in the comments.

How to Create a Child Theme for Storefront

February 26, 2016 By John 2 Comments

Optimizing your website usually means making changes to your theme. These changes can range from simple to complex. It’s easy to make changes on your website but the problem is that you will lose all your changes when you update your theme.

There are ways to update your theme without losing your customizations and the best way is to use a child theme. In this post, we will teach you how you can use a child theme to make the website development process easier.

We’ll teach you how to create a child theme for Storefront theme. Storefront is the official theme for WooCommerce. It’s a good parent theme to work on as it’s built with the same high standards as WooCommerce. It is entirely free and 100% compatible with WooCommerce.

What is a Child Theme

A child theme is not a full theme. It only inherits all the code, styling and functionality of the main or parent theme. Changes made in a child theme do not affect the parent theme. This allows users to tweak a theme without having to worry about losing the customizations when updating the theme. Using a child theme is best practice for altering an existing theme.

A parent theme is the default of all your WordPress themes. It contains the templates, design and functionality needed to run your website on WordPress. Note that parent themes are different from theme frameworks. A parent theme is a complete theme that you can use right away while a theme framework like Genesis is a developmental template.

Why You Should Use a Child Theme

There are thousands of themes out there that you can use for your WordPress installation. The problem is they all look generic and may not exactly fit your website needs. Modifying the theme with CSS is recommended. Here are some reasons why you should use a child theme:

Speed Up Site Development

Child themes allow you to quickly add or modify specific functions or template files. It allows you to significantly speed up site development as you would not need to write a lot of code from scratch. You’ll get a great deal of flexibility especially from powerful theme frameworks like Genesis.

Preserve Theme Changes

Themes get updates from time to time. These updates are important as these address security exploits that come to light. Updating your theme will wipe all the changes you made to the base theme. However, if you use a child theme, you can preserve any changes you make to the child theme when you update the base theme.

Safe Fallback

Creating or editing a theme entails a lot of work. However, when you make customizations on a child theme, you have your parent theme’s codes and functionality as fallback in case you mess up something. The child theme will only change a specific function or style when you want it to.

Secure Your Site

WPBeginner found out that 83% of hacked WordPress sites are not upgraded properly. The safest way to update your theme is by using a child theme.

When to Use Child Themes

If you are in any way customizing your theme, then you should be using a child theme. Using a child theme is best practice.

If you are not familiar with CSS and PHP, creating your own child theme can be a challenge. You would also need to learn about the functionalities of your parent theme.

Robust frameworks can be more challenging as they have their own filters and hooks.

How to Create a Child Theme

Setting up a child theme for any WordPress theme is easy but you need to pick a good parent theme. Not all themes can be good parent themes. We recommend Storefront or the Genesis framework.

A good parent theme is a solid foundation for your site. You will be building your child theme over it so it has to be flexible and coded properly.

You can use plugins to generate a child theme or you can do it manually. You just need three things to start: child theme directory, style.css file and functions.php file.

Child Theme Folder

This folder will serve as the container for your stylesheet and function files. It is ideal to use the name of your parent theme as folder name and append it with “-child”. In this case, we named our directory “Storefront-child”. Make sure that your child theme’s directory name has no spaces to avoid possible errors. For the meantime, you can create this folder in your computer.

Child Theme Stylesheet

This is a basic style.css file. You need to set this stylesheet to inherit the styles from your parent theme. To do that, insert the stylesheet header below and replace them with relevant details. Note that customizations done here will override parent theme styles.

/*
 Theme Name:   Storefront Child
 Theme URI:    http://sitename.com/storefront/
 Description:  Storefront Child Theme
 Author:       Nick J
 Author URI:   http://sitename.com
 Template:     storefront /*this is case sensitive*/
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, full-width, responsive-layout, accessibility-ready
 Text Domain:  storefront-child
*/
/*Theme customisations start here*/

We won’t teach you how to use CSS. It is impossible to cover that in one article. You can learn CSS here or have a developer do the CSS tweaks on your website.

Child Theme Function

Previous methods suggest that you use “@import” in your stylesheet to load your child theme. This is no longer considered best practice. You just need to “enqueue” your parent theme’s stylesheet in your child theme’s functions.php file. To do this, you can use “wp_enqueue_scripts action” and use “wp_enqueue_style()”.

The stylesheet for your child theme is usually loaded automatically. If not, you will need to enqueue it as well. You also need to make sure that the child stylesheet gets priority. You can use the code below instead. This code sets ‘parent-style’ as a dependency so your child-theme stylesheet loads after it.

<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Activation

To add a child theme to your WordPress themes, you need to create a .zip file of your child theme folder. You can use 7-zip or Winrar to do this. Make sure that you have your style.css and functions.php inside your child theme folder.

It is best to take note and keep records of other plugin settings before you activate your child theme. Once you’re done, you can upload this in your WordPress via Appearance > Add Themes.

WordPress will install your child theme just like any other theme. Once installed, you need to activate this by clicking on ‘Activate’.

You can also choose to activate your child theme later when you go to Appearance > Themes.

Once installed or activated, you can apply any edits to functions.php and to the stylesheet directly on the child theme files

Popular Child Themes for Storefront

If creating your own child theme is proving to be a bit too difficult for you, you can always purchase one.

There are a handful of child themes for Storefront right now. Note that you should install Storefront base theme first before installing these child themes.

Boutique

Boutique is simple and easy to customize. You can start selling after you create your color theme, add your logo and content.

Deli

If you want to add more personality to your store, you can use Deli. This child theme is great for small businesses. It has color schemes and textures that are inspired by nature.

Conclusion

Having a child theme is best practice when doing development work on your WooCommerce site. More importantly, using a child theme allows you to freely update your theme without losing any customizations you made on the child theme. A good and solid foundation is important for child themes. Hope this article has been helpful. Do you have any questions about child themes or anything you’d like to add? Let us know in the comments.

How to Make WooCommerce Pages Full Width in Storefront Theme

April 23, 2015 By John 20 Comments

EDIT: Storefront now has a full-width page template so you no longer need to use the custom code in this article. To remove the sidebar on WooCommerce pages, you can set the page template to Full Width.

If you are using Storefront theme and you want to use the Full Width template for your store and other pages, you might come across a problem. After you’ve set your page to the Full Width template, you can still see the sidebar. And that’s not the case with the other pages, since setting the template to Full Width effectively hid the sidebar.

shopimage — Here is a shop page that is supposed to be full-width but still shows the sidebar

And here is a product page which is supposed to be full-width but still shows the sidebar

This happens because all WooCommerce pages use the templates on the WooCommerce plugin. They do not use the Storefront templates. To resolve the problem, add the following code to your child theme’s functions.php.

add_action( 'wp', 'woa_remove_sidebar_shop_page' );
function woa_remove_sidebar_shop_page() {

if ( is_shop() || is_tax( 'product_cat' ) || get_post_type() == 'product' ) {

remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
add_filter( 'body_class', 'woa_remove_sidebar_class_body', 10 );
}
}

function woa_remove_sidebar_class_body( $wp_classes ) {

$wp_classes[] = 'page-template-template-fullwidth-php';
return $wp_classes;
}

This code would remove the sidebars on the product page, product categories, and the shop page. It would also add the page-template-template-fullwidth-phpclass that causes the layout to be in full width.

Now you know how to make WooCommerce pages full width in Storefront Theme! If you have further questions please let us know.

How to Edit Storefront Theme Header

March 6, 2017 By John 24 Comments

Editors Note: We have decided to retire the plugin mentioned in this article as the compact mode of the plugin no longer works with the new version of Storefront theme.

Editing a theme’s header is difficult for the average WordPress user. However, we’ve made it easier to do this for Storefront theme. With just a few clicks, you’ll be able to edit the format of the header, hide header elements, or change background, text and link colors.

But Why Storefront?

Storefront is the best theme to use with WooCommerce, which is the most popular e-commerce platform on WordPress. The theme was made and is being updated by the same people who created WooCommerce so compatibility will never be an issue. If you are already using Storefront theme on your WooCommerce store, then good for you. If not, you should consider using it to prevent any issues in the long run.

We’ve come across many WooCommerce stores that had a lot of problems due to conflicts with the theme. Each and every time, we recommended the use of Storefront theme. And each and every time, using Storefront fixed the problem.

Hence, we’ve created the Storefront Header Picker Plugin to make editing your header that much easier.

How to Install Storefront Header Picker Plugin

You install the plugin just like any other plugin.

Go to your WordPress Dashboard and click on “Plugins”.
Click on “Add New” and search for “Storefront Header Picker”.
Click on “Install” and then activate the plugin.

How to Edit Storefront Theme Header

To edit your Storefront theme header, click on Appearance > Customize > Header.
Here you can choose between three header types: Default, Compact, and Centered.
You can also choose to hide the product search bar and the cart. Just check/uncheck the corresponding boxes.
At the bottom, you can change text and header colors.
Once done, just click on “Save & Publish”.

Compact-Layout-How-to-Edit-Storefront-Theme-Header — Compact Layout

Will This Work for Any Other Theme?

Unfortunately, this plugin will only wok for Storefront theme. It makes use of Storefront action hooks and filters. Activating the plugin when you are using a different theme will bring up a warning message.

Did this plugin help you edit your Storefront theme header? Do you have any questions about the plugin? Let us know in the comments.

How to Make a Sticky Header in Storefront Theme

February 5, 2016 By John 65 Comments

REVISED 03/04/2020 : Updated stickyheader.js path file

One popular trend in web design today is making the logo and the navigation bar to stick to the top. There are many names for this type of layout. Sticky, floating or persistent headers, and floating navigation are all the same thing.

Developers can “stick” their navigation at the top using simple CSS code. This helps visitors to click on other pages from the navigation menu while scrolling. Here’s how:

Preparation

Before anything else, you should install a child theme on your site. Additionally, you can install customization plugins such as My Custom Functions and Simple Custom CSS. We recommend using these plugins if you are not comfortable working with code as errors can break your site.

The test site looks like this at the start of this tutorial. In this case, the logo is centered. If you want to learn how to center the logo in Storefront theme, you can check out this post. The search bar and secondary menu was also removed.

Adding the CSS

To make this header layout stick to the top, just paste the CSS code below at the bottom of your style.css file.

#masthead {
		position: fixed;
		top: 0;
		width: 100%;
}

One obvious design pitfall here is that the large default header of Storefront is too big. It gets in the way of the page contents and is too distracting. To solve that, we need to make our header layout smaller first.

We aim to end up with this layout.

To achieve this, we need to do some CSS positioning. The positioning values of the elements depend on the size of your elements. If you have a different sized logo, play around with the height value in the CSS code to move it around. Here is a good article to get familiar with CSS positioning techniques. The code below will position and resize the header elements. It also applies the “position: fixed; top:0;” to the masthead. Paste this to your style.css file.

@media screen and (min-width: 768px) {
  	/*resizing the logo image */
	#masthead .custom-logo-link img {
		width: auto;
		height: 40px;
	}
  
	/*positioning the main-navigation */
	#masthead .main-navigation {
		text-align: right;
		position: fixed;
		top: 0;
		right: 300px;
		padding: 0;
		width: auto;
	}
  	
	
	/*positioning the logo*/
	#masthead .custom-logo-link {
		position: fixed;
		top: 0;
		margin: 0;
		padding: 0;
	}
    /*adjusting default margins and paddings*/
    #masthead .site-header-cart .cart-contents{
        padding:1em 0;
    }
    #masthead .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
        padding: 1em 1em;
    }
    #masthead .site-branding{
        margin-bottom: 1em;
    }
	
	/*positioning the cart-menu */
	#masthead .site-header-cart {
		width: 14% !important;
		position: fixed !important;
		top: 0;
		right: 12%;
		padding: 0;
	}
	
	/*applying the position fixed on the masterhead */
	#masthead{
		position: fixed;
		top: 0;
		width: 100%;
	}
    /*removing the site search*/
    #masthead .site-search{
        display:none;
    }

Note that as the page scrolls down, the header stays on top. We have achieved the basic sticky header layout that is not intrusive to the content. It is concise and doesn’t get in the way of the rest of the page.

If you are happy with this, it’s okay to stop here. If you want to take it up to another level, a very common variation of the sticky header is the shrinking header. The shrinking header allows a default full header view when you are at the top of the page. When you start scrolling, the header automatically resizes itself to get out of the way. If you want more coding challenge, read on.

The Shrinking Header

First is to create a js file in your theme’s /assets/js/ folder.

Copy and paste the code below and save it as “stickyheader.js” to the js folder of your theme.

(function($){
	$(document).ready(function () {
		$(window).scroll(function() {
			  if ($(this).scrollTop() > 100){  
				jQuery('#masthead').addClass('sticky');
			  }
			  else{
				jQuery('#masthead').removeClass("sticky");
			  }
        		});
	});	
})(jQuery);

The code basically says it will add the “sticky” class to the header when you’ve scrolled 100px from the top. Else, it will remove it.

Adding the jQuery file to WordPress

Next step is to tell WordPress to include the JS file you just created. Copy and paste the code below to the My Custom Function plugin.

$path = get_stylesheet_directory_uri() .'/assets/js/';
if (!is_admin()) wp_enqueue_script('stickyheader', $path.'stickyheader.js', array('jquery'));

After this, your JS file will load together with the other js files within your theme. Every time you scroll down, your script will now add the class “sticky” to your header. At this stage, you will not see anything happen yet. This is because we haven’t styled our sticky class yet.

The CSS Code

To style the sticky class, copy this code to your style.css file. Same as before, this is just CSS positioning and resizing. The only difference this time is we attached the “sticky” class on the selectors.

@media screen and (min-width: 768px) {
  	/*resizing the logo image */
	#masthead.sticky .custom-logo-link img {
		width: auto;
		height: 40px;
	}
  
	/*positioning the main-navigation */
	#masthead.sticky .main-navigation {
		text-align: right;
		position: fixed;
		top: 0;
		right: 300px;
		padding: 0;
		width: auto;
	}
  	
	
	/*positioning the logo*/
	#masthead.sticky .custom-logo-link {
		position: fixed;
		top: 0;
		margin: 0;
		padding: 0;
	}
    /*adjusting default margins and paddings*/
    #masthead.sticky .site-header-cart .cart-contents{
        padding:1em 0;
    }
    #masthead.sticky .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
        padding: 1em 1em;
    }
    #masthead.sticky .site-branding{
        margin-bottom: 1em;
    }
	
	/*positioning the cart-menu */
	#masthead.sticky .site-header-cart {
		width: 14% !important;
		position: fixed !important;
		top: 0;
		right: 12%;
		padding: 0;
	}
	
	/*applying the position fixed on the masterhead */
	#masthead.sticky{
		position: fixed;
		top: 0;
		width: 100%;
	}
    /*removing the site search*/
    #masthead.sticky .site-search{
        display:none;
    }
	
}

The jQuery script above inserts the sticky class to the master head. We just need to implement the CSS positioning as we did before using the sticky class selector.

For example, our selectors will now be “#masthead.sticky”. We just insert “.sticky” to our selectors so it will only be implemented when we scroll down.

When everything is done, we will be able to see the full header on top of our page.

When scrolling down, the compact header replaces the full sticky header.

We hope you found this tutorial helpful. If you have any questions or if this didn’t work for you, drop a comment in the comments section and we’ll see what we can do.

Why Edit Footer Credit Text Area?

How Do You Edit the Edit Footer Credit Text in Storefront Theme?

What Can I Add to My WooCommerce Store’s Footer Credit Area?

Declare Copyright and Other Important Declarations

Contact Details

Social Media Icons

Show Security Seals and Certificates

Payment Options

Add Other Important Links

What is a Child Theme

Why You Should Use a Child Theme

Speed Up Site Development

Preserve Theme Changes

Safe Fallback

Secure Your Site

When to Use Child Themes

How to Create a Child Theme

Child Theme Folder

Child Theme Stylesheet

Child Theme Function

Activation

Popular Child Themes for Storefront

Boutique

Deli

Conclusion

But Why Storefront?

How to Install Storefront Header Picker Plugin

How to Edit Storefront Theme Header

Will This Work for Any Other Theme?

Preparation

Adding the CSS

The Shrinking Header

Adding the jQuery file to WordPress

The CSS Code

Get started today

Get 2 Hours of FREE SUPPORT

Free eBook

Quick Links

Wooassist

Connect