Storefront and WooCommerce How-To Articles

How to Specify CSS Styling on a Single WordPress Page

March 5, 2015 By John Leave a Comment

Understanding a bit of CSS is a useful skill for a website owner. Now, suppose you wanted to apply a line of CSS styling on just a single page instead of the entire site. Learning how to target your CSS to specific pages can solve hours of frustration when a code snippet isn’t readily available on the internet.

Let’s use this example: we’re going to hide the page title of just the Home Page.

The basic CSS for hiding a page title will usually look like this:

.main-title {
display: none;
}

When you copy the code above and place it in your styles.css file, it should hide all the page titles in the website. Normally, we’d stop there if that was what we wanted but we just want to hide the page title on the home page.

Basically, the code right now is targeting the display attribute for the main-title element. There is however no indication of which main-title is targeted. Is it the main-title on the home page? Is it the main-title on the About page? For cases like these, all main-titles will be affected.

To target a specific page, you need to add another selector and it looks like this:

.home .main-title {
display: none;
}

The “.home” part is the part that indicates which main-title we are targeting.

Now, our next challenge will be figuring out what to write in the “.home” part. For that, we need to look at the page source. Look for the start of the <body> HTML. You will then see something like this:

Notice those classes? Those are what we use for the selectors. We can’t just use any of those though because other pages might be using the same classes and if that’s the case, those other pages will be affected by your CSS as well. We have to find the class unique to that page and in this case it is “home”.

On this next example, the unique class which is also the page ID is “page-id-155”. When we make use of “.page-id-155”, we are basically specifying that only that page should be affected by any CSS you write next to it.

However, there are cases where you might have trouble finding the unique class or the page ID is not indicated as one of the classes. In this case, you should go edit that page in the WordPress dashboard. Once you are in the edit page, check out the URL in the address bar. The number corresponding to post= is your page ID that you can then use to target that page.

That’s about it. And do keep in mind that this knowledge isn’t simply limited to your page titles. Here are some more applications:

Hiding the widget area for some of your pages.
Reducing/enlarging the main content area depending on the current page.
Keeping font/color styling on specific pages

When you know the unique class or page ID you can target specific pages with your CSS styling now and I hope it helps you make your website become the best it can be.

Now you know how to specify CSS styling on a single WordPress page. Got questions? Head over to the comments section.

Choosing a Color Scheme For Your Online Store

March 9, 2015 By John Leave a Comment

Choosing a color scheme for your online store might be an arbitrary decision based on your color preferences.

Usually peoples intuition for their color scheme is pretty good. But should you leave it to chance?

Spending a couple hours to learn the theory of color basics is recommended. If it does nothing else it will affirm the decisions you have made based off of your own intuition. But more likely it will or give you some deeper knowledge to craft your color scheme and result in increased sales.

Color Basics

Basically, some colors look good together and some colors don’t.

Through mathematics and the invention of the color wheel we can see patterns of why this might be.

There is a great tool I use called Kuler that lets you choose a color and will then give you other colors that match based on rules you can choose from.

I will show you an example of this soon, but first I just want to discuss what impact choosing a base color will have on your brand.

Emotional Color

Colors have emotional meaning to your visitor and the color scheme you decide on for your brand needs to take this into account. It is no accident that fast food restaurants all use red to make you hungry, and IBM uses its corporate blue to represent trust.

Before you choose a color scheme, here are a few good exercises to identify a personality for your brand.

Think of twenty words that describe your brand.
If your brand was a car what sort of make would it be?
What sort of feelings do you want to be associated with when someone sees your brand?

To learn more about what each color means here is a good article. http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/

Existing Brand Assets

If you already have a logo then you will often find that the colors you chose were intuitively based on some form of emotional color theory.

If you discover you have chosen incorrectly and it is too costly to update your printed material from the old colors you can leave your logo as is and just add some secondary colors that will give your brand the emotional meaning you were looking for.

A Note on Contrast

Black, white and shades of grey can be used in addition to the color scheme you choose for your site and you can use these to create contrast. Dark colors on light colors and vice versa (light colors on dark colors) stand out more on the page than two colors closer in shade.

You can use this to highlight a particular element on a page by making the contrast of its background greater.

Into Action

To show you an example, I will use the logo from a company Wooassist manages: www.iotagarden.com.au

https://www.dropbox.com/s/k09mmys93n967as/Screenshot%202015-01-09%2012.16.15.png?dl=0

Here are some notes when we re-designed the IOTA site about 12 months ago.

We don’t want to change things too much so we will stick with the two base colors of light and dark blue that are used for the logo.

I would like to introduce one more color that is a bit brighter and contrasting with the current blues that will liven up the site.

I am thinking maroon, but we can use adobe Kuler to see what a good contrasting color is mathematically.

These are the colors from the logo.
Light blue #8da5aa
Dark blue # 005293

Without going too much into the details of how Adobe Kuler works, the end results speak for themselves. When I enter base color dark blue # 005293, the complimentary color was a brown.

That didn’t suit the objectives of livening the site up so if we look at the triad relationship I can see the magenta color I was originally thinking of #a01410

And if we look at how these colors look together touching each other and apart you can see Kuler’s maths have not let us down. These colors look great together.

So here you can see with just a couple hours research and a couple of tools we were able to come up with a color scheme that suited our existing brand assets, while at the same time achieving our new objectives.

What color best represents the feeling of your brand?

How to Change the Arrows in Pagination for Storefront and WooCommerce

March 18, 2015 By John 2 Comments

When looking at category pages for posts and WooCommerce products in Storefront theme, you can navigate to different pages by clicking on the default left and right pointing arrows. Notably, most themes would use a “Previous” or “Next” text instead of an arrow. If you want to change these arrows to text, it is easy enough to do by tweaking a few lines of code. Just follow the steps below.

Change the Arrows in Pagination for Storefront Theme

Since Storefront does not have a default filter for pagination, we’ll need to remove the function of the default pagination and replace it with our own function. Notably, the code in the function `woa_sf_paging_nav_replace` is just a copy of the original pagination function in Storefront and we just need to replace the text in the ‘prev_text’ and ‘next_text’ parameters. You don’t need to touch the other attributes.

Go to your functions.php and find the following code:

---- php-code ----

add_action( 'init', 'woa_sf_change_pagination_init' );
 
 
function woa_sf_change_pagination_init() {

 //remove current function used for Storefront's pagination
      remove_action( 'storefront_loop_after', 'storefront_paging_nav', 10 );

 //replaces pagination function with our own function
      add_action( 'storefront_loop_after', 'woa_sf_paging_nav_replace', 10 );
}
 
 
function woa_sf_paging_nav_replace() {
 
 global $wp_query;

      $big = 999999999; // need an unlikely integer
      $translated = __( 'Page', 'storefront' ); // Supply translatable string

      echo '<nav class="storefront-pagination">';

      echo wp_kses_post( paginate_links( array(
           'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
           'format' => '?paged=%#%',
           'current' => max( 1, get_query_var( 'paged' ) ),
           'prev_text' => '<',
           'next_text' => '>',
           'type' => 'list',
           'total' => $wp_query->max_num_pages,
           'before_page_number' => '<span class="screen-reader-text">' . esc_attr( $translated ) . ' </span>',
 ) ) );

 echo '</nav>';
}

---- /php-code ----

Where it says:

'prev_text' => '<',
'next_text' => '>',

Change it to:

'prev_text' => 'Previous',
'next_text' => 'Next',

Change The Arrows in Pagination for WooCommerce Products

Editing the pagination for WooCommerce products is a bit simpler. We just need to find and use the filter `woocommerce_pagination_args`.
Head over to your functions.php and look for:

---- php-code ----

woa_wc_change_pagination_init() {

    add_filter( 'woocommerce_pagination_args', 	'woa_wc_woocommerce_pagination' );
}

function woa_sf_woocommerce_pagination( $args ) {

	$args['prev_text'] = '<';
	$args['next_text'] = '>';

	return $args;
}

---- /php-code ----

Where it says:

$args['prev_text'] = '<';
$args['next_text'] = '>';

Simply change it to:

$args['prev_text'] = 'Previous';
$args['next_text'] = 'Next;

Or replace ‘<‘ and ‘>’ to whatever text you prefer.

You just learned how to change the arrows in pagination for Storefront and WooCommerce. Did this post help solve your problem? Do you have any questions? Let us know in the comments.

How to Create a Sitemap for your WooCommerce Store

March 19, 2015 By John 2 Comments

You might have heard about XML sitemaps and that it’s good for your website’s SEO but don’t really know what it is. Or maybe you don’t know how to create a sitemap for your WooCommerce store. We can help with that. For starters, Google defines a sitemap as:

…a file where you can list the web pages of your site to tell Google and other search engines about the organization of your site content.

In short, a sitemap tells search engine crawlers about the structure of your site. Whenever you add something new to your website, whether that’s a new blog post, a new page or a new WooCommerce product, your sitemap is updated and communicates with web crawlers to tell search engine that there is something new on your website.

Even without a sitemap, the content on your website will still eventually be crawled by search engine crawlers but if the structure of your website is not well-organized, some pages may not be indexed. Also, having a sitemap will make crawling your website easier and much sooner. And if you have a new website, you probably don’t have a lot of other websites linking to your pages so it is highly likely that some of your pages may not get indexed. Having a sitemap almost ensures that all your pages get indexed.

How to Generate a Sitemap for Your WordPress Site

There are a couple of plugins that you can use to create a sitemap for your e-commerce website. We’ll list them down here.

How to Create a Sitemap Using WordPress SEO by Yoast

WordPress SEO by Yoast is the all-in-one plugin for your SEO needs. It is easily one of the best SEO plugins in the WordPress plugin repository. It has a lot of useful features and that includes the creation of a sitemap. If you are already using WordPress SEO by Yoast, then look nowhere else for creating your own XML sitemap. If you are not using WordPress SEO yet, I would suggest joining the bandwagon that is unless you are already using an SEO plugin that works well for you.

To enable XML sitemaps in WordPress SEO, go to SEO and click on XML sitemaps. Afterwards, just tick the box where it says “Check this box to enable XML sitemap functionality” and then “Save Changes”. When that’s done, just click on the button below and you will be taken to your sitemap.

How to Create a Sitemap Using Google XML Sitemaps

Creating a sitemap with the Google XML Sitemaps plugin is very easy. Simply download and install the plugin here. After you activate the plugin, just head over to Settings and click on XML-Sitemap. You should see a section that indicates the URL for your sitemap. There are a bunch of other settings that you can tweak. The default settings are good as is but if you want to change anything depending on your needs, feel free to do so.

How to Create a Sitemap Using XML Sitemaps

To create a sitemap using the XML Sitemaps plugin, simply install the plugin from this link. Activate the plugin and head over to yourdomain.com/sitemap.xml. That’s your sitemap. There are a few settings that you can tweak if you head over to Settings and click on XML Sitemaps.

Adding a Link to Sitemap for Your WooCommerce Store

Most SEO experts say that adding a link to your sitemap on your website does not serve any purpose since the search engines find the sitemap through the robots.txt file or when you manually submit the sitemap to Google Webmaster Tools or Bing’s. Some disagree however and mention that having a link in the footer adds value.

If you do want to add a link to your sitemap on your WordPress site’s footer, it is very easy to do. Just go to Appearance and click on Widgets. Afterwards, drag a text widget to the footer where you want to have the link. Just link your sitemap using HTML code.

If you are not sure how to do this, use the code below and just replace the URL with your sitemap’s URL:

<a href=”http://yourdomain.com/sitemap.xml”>XML Sitemap</a>

Submitting your Sitemap to Search Engines

When you get your sitemap ready, you should submit it to search engines using Webmaster Tools. Before you do this however, you need to verify your website with Webmaster Tools. You can check our post about the WordPress SEO plugin by Yoast which has links to some useful resources that can help you verify your site if you haven’t done that yet.

How to Submit Your Sitemap to Google Webmaster Tools

To submit your sitemap to Google Webmaster Tools, log in to your account and click on the website that you want to add a sitemap to. On the left sidebar, you should see Site Configuration, click that and then click on Sitemaps. There should be an Add/Test sitemap button in the upper right corner. Add your sitemap and then click on Submit.

How to Submit Your Sitemap to Bing Webmaster Tools

To submit your sitemap to Bing Webmaster Tools, log in to your account and click on Sitemaps. Then click on Submit a Sitemap. A text box should appear where you can specify the URL to your sitemap. Save your settings.

The Verdict: Which one is for you?

Between the XML sitemap plugins mentioned above, which one is for you? WordPress SEO by Yoast has a ton of other features and is one of, if not the best SEO plugin for WordPress. If you are already using this plugin for your SEO, then there’s no reason to get another plugin to get a sitemap. You’ll just be adding extra bloat to your site by going with another plugin. Between Google XML Sitemap and XML Sitemap Plugin, there’s not much of a difference. Both are easy to set up but Google XML Sitemaps has a slight advantage for having more options such as:

Automatically notifying search engines whenever you post new content
Creation of an HTML sitemap
Compressing the sitemap
Adding the sitemap URL to the robots.txt file

Got some questions about sitemaps? Let us know in the comments.

How to Install WooCommerce on your WordPress Site

April 8, 2015 By John Leave a Comment

Getting started on a WooCommerce store all starts with installing WooCommerce. It’s pretty simple and straightforward, but if you don’t know how to install it, we’ll help you out. There are two ways to install WooCommerce and we’ll detail them both in this post.

How to Install WooCommerce through the WordPress Plugin Repository

On your WordPress Dashboard, head over to Plugins then click on Add New.
On the search bar, type in WooCommerce and press Enter. WooCommerce should appear as the first plugin in the search results. To make sure, check that it is the one published by WooThemes and that you are not installing some other plugin.
Just click on Install Now and wait for the plugin to install and activate.

How to Install WooCommerce by Upload

The other method of installing WooCommerce is by downloading and uploading.

Head over to the WooThemes website to download the latest version of WooCommerce.
After that, go to your WordPress Dashboard. Click on Plugins and then Upload Plugin.
Choose the WooCommerce installer that you just downloaded and click on Install Now.
After that, just wait for the file to finish uploading. It should install and activate by itself.

How to Install WooCommerce via FTP

Here’s a bonus – another means of installing WooCommerce. This is a little bit more complicated than the first two methods since you need to access your WordPress install files. It is not recommended for the average user since you might alter the install files for your WordPress site. Doing so can cause your website to go down. Use this only if the other two methods fail or if you really know what you are doing.

For this method, you’ll need an FTP client like FileZilla. You’ll need this to upload the plugin file to your WordPress install. And since you need to log in to the FTP server, you’ll need the login information for that too. If you don’t know the login information, you can contact your hosting provider. Here’s are the steps:

Download the WooCommerce plugin and extract the file.
Log in to your FTP server using FileZilla or any other FTP client. Navigate to the wp-content/plugins directory of your WordPress install.
Place the extracted folder in the wp-content/plugins folder.
After that, head over to the plugin page of your WordPress site and activate the WooCommerce plugin.

Now that you know how to install WooCommerce, you’re just a few steps away from setting up your own e-commerce store.