Changing the Number of Product Columns in WooCommerce

Been working on a WordPress theme that will support WooCommerce. Needed to display less columns per row on the product category page. Fortunately changing the number of product columns in WooCommerce can be done with built in WooCommerce functionality.

WooCommerce Column Filter

I found WooCommerce documentation on a filter that we can use. It is a simple WordPress / WooCommerce filter that allows you to filter the WooCommerce loop and choose the amount of columns to be displayed. Really happy no extra coding on my part was needed really. More information on implementation you can check out here below.

WooCommerce Filters in Roots Sage

Code you can use inside WooCommerce templates in a Sage based theme is the following:

/**
*
* Change number or products per row to 2
* https://docs.woocommerce.com/document/change-number-of-products-per-row/
*
**/
 add_filter('loop_shop_columns', __NAMESPACE__ . '\loop_columns');
 if (!function_exists('loop_columns') && is_tax('product_cat')) {
 function loop_columns() {
 return 2; // 2 products per row
 }
 }

For working with filters in Sage you need PHP namespaces  – Roots Sage Blog Post on this. That is why the filters are slightly different. Also see I added an extra condition to load it on the Product Category page.

Column Filter in Non Namespaced themes

For regular themes not using namespaces you can use the following add_filter:

// Change number or products per row to 3
 add_filter('loop_shop_columns', 'loop_columns');
 if (!function_exists('loop_columns')) {
 function loop_columns() {
 return 3; // 3 products per row
 }
 }

as shown in the WooCommerce Documentation. It is similar to the Sage implementation as you can see. This a just a little simpler. And it can also be added to the functions.php file in your theme.

Filter Location Caveats

Do make sure you add the filter to the WooCommerce template and not to functions.php if you are working with conditionals directly this way. See more information on conditional tags in WooCommerce documentation here . Also conditional tags in the WordPress Codex is a good place for you to look into. It is not impossible as shown below, but it depends on how it is loaded there.

Functions File Workaround

Did in the end try a workaround to add it to files being included in function.php despite using WooCommerce conditionals. Took some effort on my part though. Initially when I added this function:

function loop_columns() {
 if (is_product_category()) :
 return 2; // 2 products per row
 endif;
 }
add_filter('loop_shop_columns', __NAMESPACE__ . '\loop_columns');

to extra.php which is loaded into functions.php I got this error on product pages (category pages were fine and loaded the columns dictated):

( ! ) Fatal error: Uncaught DivisionByZeroError: Modulo by zero in /srv/www/domain.com/current/web/app/plugins/woocommerce/includes/wc-template-functions.php on line 250

which referred to the WooCommerce loop:

if ( 0 === ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 === $woocommerce_loop['columns'] ) {
 return 'first';
 }

And the DivisionByZero PHP error refers to a trial to divide a number by zero using the division operator %. More information on it here. Googling I found a lot of sites suffering from this error. Some due to the use of a plugin WooCommerce Product Archive Customizer . No quick solutions or explanations really though.

In the end I figured I needed the function to tell what amount of columns to display in other situations not equal to the condition. So I created this function that did work:

function loop_columns() {
 if (!is_shop()) {
 return 2; // 2 products per row
 } else {
 return 4;
 }
}
add_filter('loop_shop_columns', __NAMESPACE__ . '\loop_columns');

Decided to change the condition here and use shop. Might revert to product_category at a later stage, but this seems to work for me. And it saves me loading another WooCommerce template in my theme!

NB Function is loaded at the end of the extra.php

Columns of Choice Displayed

If you did all this changing the number of product columns in WooCommerce should have been a lot easier than we both thought. It is also code that you can adjust with ease in the future. A win win situation!

WooCommerce Storefront Theme Configuration

To set up your site with WooCommerce and for it to look well you need a theme that is built with WooCommerce in mind. WooCommerce works with a specific set of templates to turn WordPress into an ecommerce site and these templates should be styled in the style of your theme.

Storefront

In this tutorial we shall install WooCommerce’s Storefront. It is a great WordPress theme that is free and created by the people running WooCommerce. And therefore this theme will work with the WooCommerce plugin out of the box and work of the bat. Follow the earlier mentioned link, download it and then go to appearance > themes . There you need to click on the button add new:

add new theme

Uploading WooCommerce Storefront

Next step it to click on upload theme and upload the zipped file

upload theme

Uploading of zipped theme file:

upload zipped theme

And then do not forget to activate the theme:

activate storefront theme

WooCommerce Storefront Options

It will then offer you the option to follow a guide to get started with Storefront which can be useful. It will show you a screen with news on Storefront, options to enhance the theme with (paid) extensions such as:

  • menus,
  • product hero
  • Designer
  • Reviews
  • Blog customizer
  • WooCommerce Customizer

Get started with Storefront

Storefront Welcome Screen here below is where they will indicate whether or not WooCommerce has to be installed, how you can enhance Storefront:

Storefront Welcome

 

This as well as what (paid) child themes are available for Storefront like Outlet for $39:

Outlet Storefront Child theme

 

Dummy Content

You can add dummy content to it if you start out from scratch. This will give you the demo look and a start to begin building your site with. Dummy content in my opinion is very useful to start out with. But if you prefer not to you skip this section. Click on link to dummy content and you will see this Github repo file you can then check as raw content and then save that to a file with the same or another same with the extension .xml. This you can then import.

dummy data

To import the dummy xml content you save the xml file and upload it using the WordPress Importer under Tools > Import.

dummy data xml file

 

When you pick WordPress to import WordPress data

Import WordPress Data

you may have to install the WordPress importer plugin and once that is done you can import the dummy data. Choose the xml file from your PC and upload it.

dummy data xml file import

You can then choose to attach all data to an existing user or the user it was created with. It is called assigning authors. And you can also decide whether or not to import the file attachments. As the latter often does not work you could skip and and just deal with the content instead.

assign authors and import attachments

You will probably get warning that there are errors or that importing of this or that failed – a new importer has been in the works for some time – but most if not all dummy data should get imported anyways. Here a screenshots of dummy products:

dummy products

Pretty useful to see what type of products can be added and to see what configurations are possible. You will however have to delete or adjust all imported content at a later stage.

Besides general dummy data you can also import dummy tax rates, product variations and general products. See overview at Github of all dummy data files here.

Well that is it for this post. The next one in this series will be one configuring WooCommerce in general!

WooCommerce Installation

As mentioned in a previous post introducing WooCommerce I would explain how you can install WooCommerce.  In this article we will go through the steps for doing just that. We will start out with a WordPress website, assuming you have taken care of that. Based upon that setup we will install WooCommerce and do the basic setup.

Logging into the backend

To do the WooCommerce installation go to the WordPress Dashboard or backend. This means you need to go to domain.com/wp-admin most of the time. You will be redirected to wp-login and there you can enter your username and password to login.

Logging into WordPress

If you were logged in already you will see the Dashboard right away.

WordPress Dashboard

Installing WooCommerce Plugin

There go to plugins > add new in the sidebar menu. Then search for WooCommerce – in Rhand‘s favorites (my nick) I added it already – and click on install now.

installing WooCommerce Plugin

After the installation make sure you choose activate the plugin as well:

Activate Plugin

WooCommerce Guided Setup

We then are sent to the WooCommerce guided setup. A really user friendly way to setup your ecommerce site using WooCommerce. You can skip the setup and do it later, but we do think it smart to set up most if not all necessary information right away.

WooCommerce Guided setup

Page Setup

Next page in the guided tour that comes up is the page setup. Here it will tell you what essential pages will be stored.

WooCommerce Page Setup

It will also tell you these can be managed from the pages section on your WordPress website. It will also tell you where menu items can be added. The pages that will be created are:

  • Shop
  • Cart
  • Checkout
  • My Account

Product pages and categories you will be adding yourself later on.

Store Locale Setup

The next step is the store locale. You will have to indicate

  • where the store is based,
  • what currency the store will be using,
  • which units you will be using for product weight and
  • what units you will be using for product dimensions

Store Locale Setup

Many nations will be using the metric system, but customers in the UK or US for example will be using the imperial system. After this shipping and taxes are up.

Shipping and Tax

In most countries sales tax are charged and most shops do ship physical goods, but not all and not every nation applies the same rules. So this is where you check whether you will be using shipping and whether taxes will be charged.

Shipping and Tax Setup

Let’s say you pick both and have sales tax and you ship goods. This is what you will see:

Sales Tax and Shipping picked

So now you could enter shippings costs for x $ per order or item or both. You will now also be able to choose to show prices including or excluding sales tax or VAT. And there is also a neat option to import some starter tax rates. Will will discuss this in detail some other time. The same goes for more complicated setups with different shipping rates per product type, location and weight.

Payments

Important part of any ecommerce setup is the payment methods. WooCommerce comes with PayPal out of the box. Just need to add your email address and you are ready to roll.

Offline payments are also easy to add. There are the following options to check / select:

  • Cheque
  • Cash on Delivery
  • Bank Transfer

The cheque is no longer used a lot, but a lot of customers do want to use bank wires as well as the cash on delivery option. There are also options to work with Stripe, iDEAL (Netherlands), Authorize.net and many other payment providers. For those WooCommerce extensions have to be added. This can be done a little later on.

WooCommerce Payments

Store is ready

After this the final screen will tell you that your store is ready. They will ask you if you would like to share non sensitive data for diagnostics. They will also show you some places you can get tutorials at. You will also be able to add your first product or WooCommerce’s dummy data to get started. We will discuss this in more detail the next time.

All set!

Your store is ready

Introduction to WooCommerce

Been wanting to write this introduction to WooCommerce blogpost for quite some time now. What is WooCommerce all about and is WooCommerce good for me and my business endeavours? How does WooCommerce compare to an eCommerce system like Magento? How can I set it up? Does it work with my local payment provider? Who is behind WooCommerce? This being an intro to WooCommerce I will not answer all your questions right away, or at least not in great detail. But I will however get you two acquainted and explain to you why we love WooCommerce as we love WordPress.

WooCommerce

WooCommerce is an eCommerce system that works in harmony with the state of the art Content Management System WordPress.

WordPress is web software you can use to create a beautiful website, blog, or app. We like to say that WordPress is both free and priceless at the same time.

The company behind WordPress, Automattic, recently bought WooCommerce. It realized WooCommerce is the best ecommerce extension WordPress has on offer and decided the two should join forces.

WooCommerce is a plugin or extension that turns a WordPress website into an online store. It is a very powerful plugin that allows you to sell just about anything, anyway you want, from anywhere, using just about any payment gateway you would like to use. During the installation process WooCommerce guides your way using breadcrumbs and specific steps to get your store up and running. Really nice.

WooCommerce, a great eCommerce Choice

WooCommerce is great for many reasons. It works in harmony with WordPress, thereby dipping in the greatest ecosystem globally provided by the best open source CMS in the world, WordPress. Two, is is very easy to use and easy to setup – see earlier mention of setup process. Unlike other systems out there like Magento or Prestashop, WooCommerce is very intuitive and you do not need nerdlike skills to run you shop. No commandline voodoo needed here. And no sudo or root server access needed like Magento 2 now needs. Magento even agrees with me settings things up is hard here

We know it’s challenging to install the Magento software.

Well with WooCommerce it is a breeze.

And finally one more great reason to go WooCommerce, the variety of options and themes. There are many WooCommerce themes to choose from. Themes that run well with WordPress and WooCommerce. Check out themeforest and other places and you will be blown away. And the extension variety it is also awesome. Sure you will spend some bucks, but still cheaper than other markets like Magento Commerce and way better options.

Setting up WooCommerce

So how can I get started? How can I get my shop setup online to start selling my products? Or how can I create a catalog to show off my stuff for my customers to buy in my shop offline later on? As stated it is not hard to get up and running. But it depends on your skills and how far you are in the process with your online store / website in general.

If you already have WordPress as a site up and running it is easy. If you have some webdesign or nerdy skills even better. You will just install the plugin and can start configuring. One thing to keep in mind is that your theme may not be WooCommerce compatible. This means most of the time that you can show your products, but that the styling will be horrible. So make sure you check this.

If you are starting with a shop from scratch you will have to setup WordPress, WooCommerce, pick and or buy a theme, create a site structure and other things. Things can perhaps be daunting at first and this is not the best way to go for all people who want to sell online. Here below a long list and short list of things to think about.

Things to think about – Long List

Whether you have a site up and running or are starting from scratch you will need to figure out things like:

  • page to load the store
  • menu item for shop
  • product categories
  • product varieties
  • product descriptions
  • product images
  • no of products
  • pricing
  • discounts
  • taxes
  • currency
  • email templates
  • cross sells and upsells
  • payment gateways
  • delivery options

As you can see quite a list, but also a list containing many items you should be familiar with dealing with selling products in the real world. Best to work these out with your web developer.

Things to think about – Short List

Before you start populating your store you should think about things like:

  • shop structure – categories, sub categories, type of products
  • amount of products
  • product varieties, product descriptions and or images
  • shop location on site
  • payment options

These are things you can, and often better can, work out alone. You know your product, you know your market, you know the payment providers you would like to work with. And if there is uncertainty in any area, you again contact your developer.

Follow Up Posts

This will be a series of posts. In the next posts we will cover topics such as :

WooCommerce Sequential Order Numbering

Those who have been working with WooCommerce may have noticed that the order numbers are not sequential (seems like certain orders are missing in action) and may have been wondering why they are not neatly in order and seem to skip numbers every now and then.

Why WooCommerce Orders are not Numbered Logically

Well the reason why is because WordPress Post IDs are used and if an x no of ids have been taken after the latest order the new number will get a different ID number. It may be that a new page or post with a certain ID no has been created or a Custom Post Type. See a more thorough explanation here at Speaking Bites.

WooCommerce Sequential Order Numbering Plugin

If you find this annoying and you want to have the numbers in order there is a nice plugin you can use for this. It is called WooCommerce sequential order numbers and the free version can be downloaded from the WordPress Plugin repository here. The author summarizes the plugin as follows:

This plugin extends WooCommerce by automatically setting sequential order numbers for new orders. If there are existing orders at the time of installation, the sequential order numbers will start with the highest current order number.

NB So it does not fix earlier discrepancies, but will make sure future orders follow each other nicely and orderly.
There also is a Pro version. This version offers more than just allowing you to make orders follow each other number wise. In addition to this it allows you to:

  • set the starting number
  • add a custom prefix*
  • add a custom suffix*

* ie, you’d prefer something like WT101UK, WT102UK, etc

WooCommerce Order Date and Time

If you just starting to set up WooCommerce and are doing some testing you might notice that the dates and or order time your test orders where done are not correct. Perhaps they are several hours off, perhaps almost a whole day!

WooCommerce Order Date and Time

WooCommerce will show orders made based on the time you or a customer ordered combined witht the timezone set in WordPress under settings > general. When you set up WordPress it will default to UTC time or Universal Time Coordinated or the good old GMT.

WordPress Timezone

So if you want to change the WooCommerce order date and time  and post date and time to be correct and correctly indicated you need to adjust the timezone under settings > general in your Dashboard.

WooCommerce Order Date and Time

As soon as you have selected the correct timezone the time will be re-calculated based on the server time and timezone picked. The reason for picking UTC is explained by Otto in this WordPress support thread. Basically kept there for now and kept there in the past for PHP4 legacy reasons.

 

Featured Image: El Tiempo by Ignacio Sanz

FBA for WooCommerce

Some of you may have found me on the web as I used to develop the Checkout by Amazon WordPress Plugin. Well as I have been too busy with other projects and as Amazon has changed its API details often I stopped developing. The good news is that Never Settle,
a company located in Lakewood, Colorado decided to create a plugin that allows you to fulfill orders using Amazon FBA and that works with Woocommerce!

So Imagewize decided to spread the news, reach out to clients who would be interested in getting FBA + WordPress + Woocommerce up and running with us using this great plugin. I am currently setting up this plugin for two clients and I can tell you it works really well. The setup is really easy and it pretty much works out of the box.

NS FBA for WooCommerce Setup

Setting up NS FBA to integrate Amazon’s  FBA with WordPress and Woocommerce is really easy. You download and install the plugin like any other plugin. Then you go to the plugin’s settings page. When you set things up in the backend you need

  • AWS Access Key ID
  • AWS Secret Access Key
  • Amazon Merchant ID
  • Amazon Marketplace ID
  • Application Name: Application Version
  • Test Inventory SKU

[vcex_button url=”https://wooaid.com/contact-us/” title=”Contact Me” style=”graphical” align=”left” color=”black” size=”large” target=”self” rel=”none”]Need Help Setting Thing Up?[/vcex_button]

 

 

Amazon Web Services Keys

The Keys and IDs you can get registering the app at the Amazon Market Place following this link and pick “I want to access my own Amazon seller account with MWS” in the first step. We assume that:

  • You have active FBA service on your Amazon Seller account
  • You have a Pro Amazon Seller account (and not an individual account)

Also see some information on a NS FBA Support Page here.

Amazon Marketplace ID

Amazon Marketplace ID you will get when you register using the link indicated earlier at Amazon Seller Central.

NS FBA Settings Page Screenshot:

NS FBA Settings

Here a YouTube Video on NS FBA:

Testing NS FBA

The plugin has an option to test the settings to check that FBA for WooCommerce works and that your WordPress site is connected to Amazon’s FBA. Just enter an non existing SKU and click on “Synch Inventory”:

NS FBA Inventory Check

The inventory and MWS Services can also be checked using the button added for that purpose:

NS FBA Testing
If the MWS test works you will get an error message meaning the connection has been made.