The Beginners Guide to WooCommerce: Order Reports – Part 3

The first tab of reports in WooCommerce is for the “Orders” which an online store owner receives during a particular duration of time. This section is further divided into four sub-sections which provides a store owner with more and well refined filtered results. Of these four, I discussed the first two sub-sections (i.e. Sales by date & Sales by product) in my last two articles. So today, I will explain the details and functioning of the third part of Order reports which is Sales by category

Sales by category

As the name explains its meaning Sales by category will display all the order reports w.r.t categories which are a part of your online store. You can see the reports for the entire category as a whole. If I talk in terms of a much detailed view, Sales by date and Sales by product allow online store owners to study their store performance much deeply as compared to Sales by category

However, if you want to get a quick overview of your store’s performance then this option serves best for this purpose. Just in a glance you can closely observe the total earnings, loss & profit which is generated from the sales.

Sales by category

To access to this part of the plugin go to via WooCommerce > Reports > Orders > Sales by category.

Sales by category layout

You will find a layout similar to one which I discussed in case of Sales by date and Sales by product. Which means that various filters which display results for reports with different time spans are available in the first row. These filters are based upon Year, Last Month, This Month, Last 7 days and a Custom date. Towards the end of this first row is a button for Export CSV which allows the online store owners to download any of the reports in .csv file format.

There again exists a column below the first row to the left. Here is where you can select a category. Enter the name select the category and its reports will be displayed.


In this search bar you can add single or multiple categories or subcategories. A button called Show to display the reports. To make things simpler and consume less time next to the Show button are the options for All & None, which allow you to add or remove all the categories from the Search bar in a single click. 

All categories in sales by category

Let’s me explain this scenario by considering that I clicked All and the Search bar displayed all the categories I had in my online store. In my case, the store offered mainly 7 different categories & subcategories i.e. Clothing, Hoodies, T-shirts, Music, Albums, Singles & Posters. You can remove any of these entries simply by clicking the cross.

sales by category report

To view the order reports click Show. As a default, the time filter is set to Last 7 Days so the first set of reports will be displayed for this time period.

sales by category report last 7 days

The layout and format of the reports is also the same with a column displaying all the details being individually stacked up. However, the contents are different. Now, there are no graphs, points or lines instead online store owners will view reports of his categories in the form of bar charts. 

Likewise, the entries in the column lists the amount generated by each category or sub-category individually. Last but not the least, in case you hover your mouse over any of these rows, it will turn that section in purple on the bar chart. 

The above figure shows that the rightmost bar appears purple which indicates that the mouse is positioned on the last row i.e. sales in Posters category. In the previous figure this bar was originally red in color. 

Based on these facts I am adding the reports for other time filters as well.

This Month

sales by category report this month

I am taking January 2015 as the reference month so the above figure shows report for This Month. All the previous explanation applies in this case as well.

Last Month

sales by category report last month

Sales by category order reports for the Last Month will correspond to the results for December 2014.


sales by category report yearly

Last but not the least is the yearly report of sales by category. All the results are beautifully displayed in vibrant colors making it quite easy for online store owners to monitor his store’s performance in a single glance. 


This is it for today, l hope to have made things pretty clear by now. In the next article I will discuss the last part of order reports. If you have any queries regarding today’s post you may ask in the comments.

from Tuts+ Code – WordPress

Weekly News for Designers (N.305)

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter for some more amazing design articles, resources and freebies.

New Tools & Resources

The iOS Design Guidelines (Updated for iOS9).
The iOS Design Guidelines

U.S. Web Design Standards, open-source UI components and visual style guide.
U.S. Web Design Standards

Corpus, a collection of CSS things.
Corpus collection of CSS things

Retini, a super fast & simple retina (@2x & @3x) converter.
Retini simple retina converter

clipboard.js, a modern approach to copy text to clipboard.

Icono, pure CSS icons, with only one element.
Icono pure CSS icons

Base, a starting point for Meteor applications.
Base starting point Meteor applications

Supercharge Your Site with the Monstroid WordPress Theme.
Monstroid WordPress Theme

Learning Resources, Tutorials & Tips

Web Design is Now Completely Boring by Owen Williams.
Web Design is Now Completely Boring

Typography Tips for a More Comfortable Read by Luke Jones.
Typography Tips for a More Comfortable Read

Building an Enterprise CSS Framework by Stef Sullivan Rewis.
Building an Enterprise CSS Framework

Dealing With Long Words in CSS by Michael Scharnagl.
Dealing With Long Words in CSS

An Elastic SVG Progress Loader by Lucas Bebber.
An Elastic SVG Progress Loader

Tips for Mastering Your Next Website Redesign by Vincent Sevilla.
Tips for Mastering Your Next Website Redesign

Good Reading for Freelance Designers

Can Web Design Still be a Viable Career Option? By Nicole Boyer.
Can Web Design Still be a Viable Career Option

Generalizing Your Skills Will Never Make You a Design Specialist by Addison Duvall.
Generalizing Your Skills Will Never Make You a Design Specialist

Free UI Kits, Fonts & Icons

30 Recently Released Free Icon Sets for Web Designers.
Free Icon Sets for Web Designers

Liquid, a free web GUI kit (PSD).
Liquid free web GUI kit

Relancer, a free display font by Ryan Molag.
Relancer Free Display Font

10 free vector Halloween patterns (AI, EPS & JPG).
10 free vector Halloween patterns

…and finally

Pure CSS Moonwalk by Rafael González.


Browse the Weekly News Archives →

The post Weekly News for Designers (N.305) appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine

WP_Query Arguments: Date

In this series on WP_Query, you’ve been learning how to use the WP_Query class to create custom queries in your theme files or plugins.

This part of the series will take you through the arguments you can use to create both simple and complex date queries, to output posts published on, before, after or between given dates.

I’ll show you what parameters are available to you and how to use them to write your queries. But first, a reminder of how arguments work in WP_Query.

A Recap on How Arguments Work in WP_Query

Before we start, let’s have a quick recap on how arguments work in WP_Query. When you code WP_Query in your themes or plugins, you need to include four main elements:

  • the arguments for the query, using parameters which will be covered in this tutorial
  • the query itself
  • the loop
  • finishing off: closing if and while tags and resetting post data

In practice this will look something like the following:

The arguments are what tells WordPress what data to fetch from the database and it’s those that I’ll cover here. So all we’re focusing on here is the first part of the code:

As you can see, the arguments are contained in an array. You’ll learn how to code them as you work through this tutorial.

Coding Your Arguments

There is a specific way to code the arguments in the array, which is as follows:

You must enclose the parameters and their values in single quotation marks, use => between them, and separate them with a comma. If you get this wrong, WordPress may not add all of your arguments to the query or you may get a white screen.

Date Parameters

You can also use parameters to query for posts with a publish date on a given date. You can be as specific as you like with dates, using years and months for example to retrieve a number of posts.

You can write a simple set of arguments or you can use date_query to create nested arrays and run more complex queries. Let’s start with the simpler arguments.

Simple Date Arguments

The parameters you can use to query by date are:

  • year (int): Four-digit year (e.g. 2015).
  • monthnum (int): Month number (from 1 to 12).
  • w (int): Week of the year (from 0 to 53). The mode is dependent on the "start_of_week" option which you can edit in your Settings page in the admin.
  • day (int): Day of the month (from 1 to 31).
  • hour (int): Hour (from 0 to 23).
  • minute (int): Minute (from 0 to 60).
  • second (int): Second (0 to 60).
  • m (int): YearMonth (e.g. 201502).

So imagine you’re running an events site that uses the publish date for each event to denote the event start date. To want to display all events, past and future, happening in 2015, here are the arguments you’d need:

Note that I’ve used future and publish for the post status, as posts scheduled for a future date aren’t queried by default.

Or if you wanted to automatically display events happening this year, and not update your query every year, you could first get the current year and then pass that in your query arguments:

Complex Date Arguments

To use multiple date parameters to create more complex queries, you use the date_query parameter. This gives you access to more parameters:

  • year (int): Four-digit year (e.g. 2015).
  • month (int): Month number (from 1 to 12).
  • week (int): Week of the year (from 0 to 53).
  • day (int): Day of the month (from 1 to 31).
  • hour (int): Hour (from 0 to 23).
  • minute (int): Minute (from 0 to 59).
  • second (int): Second (0 to 59).
  • after (string/array): Date to retrieve posts after. 
  • before (string/array): Date to retrieve posts before. 
  • inclusive (boolean): For after/before, whether exact value should be matched or not.
  • compare (string): An operator you use to compare data in the database to your arguments. Possible values are '=', '!=', '>', '>=', '<', '<=', 'LIKE', 'NOT LIKE', 'IN', 'NOT IN', 'BETWEEN', 'NOT BETWEEN', 'EXISTS', and 'NOT EXISTS'.
  • column (string): Database column to query against: the default is 'post_date'.
  • relation (string): OR or AND, how the sub-arrays should be compared. The default is AND.

The date_query parameter is formatted like this:

You can also create multiple arrays and define how they will be compared using the relation parameter. The below example will return queries that match the arguments in both arrays:

While the code below will fetch posts that match the arguments in either array (or both):

Let’s illustrate this with an example. Let’s say you’re working on a college website and want to display posts from this academic year. The academic year runs from 1 September 2014 to 31 August 2015, so you’d need to find posts in the relevant months and years:

Note that the month parameter takes a string for its arguments, not an array.

The before and after Parameters

An alternative to the example above is to define the dates before and/or after which you want to display posts, using the before and after parameters. These take three arguments:

  • year (string): Accepts any four-digit year: empty by default.
  • month (string): The month of the year (1 to 12). The default is 12.
  • day (string): The day of the month (1 to 31). The default is the last day of the month.

You can also use a string for the date, as long as it’s compatible with the php strtotime format.

So returning to my example of displaying posts for this academic year, I have two more options. Firstly, I could use a nested array with the year and month parameters:

There are a couple of things to note here:

  • I’ve used 'relation' => 'AND' because the posts need to have been published after my start date and before my end date.
  • For each of the nested arrays, I’ve used 'inclusive' => true to ensure that WordPress fetches posts published during September 2014 and August 2015.

I could also write this query using a string for the dates:

Note that because of the way date strings work, it’s more reliable to use exclusive dates. This is because if you use a date string, this will be converted to 00:00 on that date. So to make it work, either use the time in your string as well, or do as I’ve done and use the day before the date you want to show posts from (and after the date you want to show posts until).

Something else you can do with date parameters is display posts published today. Going back to my events site, let’s say I want to display a big banner on my home page on the day when an event is happening. I can write a query for this and then output details of the event if one is found. Here are the arguments:

Using the date() function returns the current date—I’ve used this three times to ensure I get the correct day, month and year. Note that I’ve also included the post_status argument to ensure that an event happening later today is included.


Sometimes you don’t just want to query all the published posts. By using the WP_Query class you can create much more specific queries to output posts by date, including the posts you published on a given date, before a date, after a date or between a pair of dates.

The date_query arguments combine with other parameters such as post_status, which is covered in more detail elsewhere in this series.

from Tuts+ Code – WordPress

50 Free Resources for Web Designers from September 2015

The tremendous thing about the design community is that we all love to share. We really do. Whether we share our thoughts and ideas via an in-depth article or by giving advice/feedback on a forum, or even by freely offering high-quality resources. The sharing is what makes our community truly great! Here are this months 50 best free resources for web designers from September 2015:

Free Font Families

Ozneo Light Font.

Dreamers Brush Font.

Charlevoix Free Typeface.

Lumberman Font.

Relancer Display Font.

Hack – Typeface Designed for Source Code.

Free Wireframe Templates & UI Kits

iOS 9 UI Kit (PSD)

iOS 9 Keyboard Kit (Sketch)

Nerdial App UI (PSD & Sketch)

Liquid Web GUI Kit (PSD)


Wireframe Template (Sketch)

PerfectKit Modern UI Kit (PSD)

Apple Watch Wireframes (Sketch)

Atelier UI Pack (Sketch)

Phone, iPad and Watch Templates (PSD)

Nest Material Design UI Kit (Sketch)

Free Icon Sets

Uniicons Icon Set (PSD)

Line Icons Pack (AI)

Illustricons Icon Pack (EPS, SVG, PNG & AI)

Social Flat Icon Set (AI, EPS & SVG)

Simple Line Icons (Web Font)

Birply Icons Vol3 (AI & SVG)

Set of Material Design Hand Gestures (PSD, AI & PNG)

Set of Star Wars Avatars (PNG, PSD & AI)

50 Flat Icons (AI, EPS, SVG & Sketch)

The Website Icon Set (36 Icons, AI, EPS & PSD)

Kvasir 180+ Free Flat Icons (PNG & PSD)

Line Icons Pack (AI, EPS, SVG, PSD & PNG)

Free Themes & Templates

Light Bootstrap Dashboard (HTML & CSS)

Tography Lite (WordPress)

Paper UI Kit (HTML & CSS)

Libre, Long-Form Writing Blog (WordPress)

Skrollr – A Theme for Telling Stories (WordPress)

Luna Personal Blog Template (PSD) UI Kit (HTML & Sketch)

​ActiveBox Template (HTML & CSS)

Transparent Dashboard (PSD)

Arkenea Website Template (PSD)

Free Mockup Templates

Wine Bottle Mockup (PSD)

Bottle Mockup (PSD)

Poster Mockup (PSD)

Packaging Mockups (PSD)

Monitor Mockup (PSD)

iPhone Outline Mockups (Sketch)

Photorealistic Macbook Mockup (PSD)

Animated iPhone Mockup (PSD)

Pebble Time Round Template (Sketch)

Stylish Apple Watch Sport Black Mockups (PSD)

Woman T-Shirt Mockup (PSD)

Responsive Devices (PSD)

Youtube Channel 2015 Template (PSD)

Everything Else

16 Vintage Grunge Textures (PSD)

100 Lens Flare Brushes (Photoshop)

16 Vector Vintage Badges (AI & EPS)

The post 50 Free Resources for Web Designers from September 2015 appeared first on Speckyboy Design Magazine.

via Speckyboy Design Magazine