Using WooCommerce

All Ignition Framework based themes come with out of the box WooCommerce support. In this article we’ll provide some info regarding the integration and highlight some of its key features.

To create an online stored based on an Ignition Framework based theme you will need to install and activate WooCommerce. Once the plugin is installed and activated it will create a set of default required pages like the shop, cart, checkout and my account.

Plugin installation can either be done under Plugins > Add New in your WordPress dashboard just like any other plugin, or via the theme’s onboarding page on your way to import the sample content under Appearance > Theme Options > Sample Content.

If the theme’s demo features an online store it is possible to import its sample content which will include sample products for the store. Instructions can be found here this article.

After WooCommerce has been activated (and optionally the sample content is imported), the product listing can be found in the Shop page. The appearance of the shop page on Ignition Framework themes can be customized under the WooCommerce > Product Catalog panel in the Customizer.

Shop Layout

Product Catalog

There are four shop layouts available:

1. Content / Sidebar: In this layout the products will be presented on the left hand side and the shop sidebar containing the shop widgets will appear on the right. example
2. Sidebar / Content: In this layout the products will be presented on the right hand side and the shop sidebar containing the shop widgets will appear on the left. example
3. Full width boxed: In this layout the product listing will take up the entire content width and the widget sidebar will be moved in a button operated drawer. example
4. Full width narrow: Same as the full width boxed layout with a narrower content area.

Shop widgets can be added under Customize > Widgets > Shop (the sidebar is visible when a shop related page is viewed).

In the same tab users can also choose to display an alternative image when each product is hovered ( the first gallery image ), set the number of products which will display on each product listing page, display a single or dual column shop listing on mobile devices, modify the appearance of cross-sells, up-sells, related products and more.

Single product options

On the single product view WooCommerce by default displays the featured image and below it the rest of the product gallery’s images (if any). Framework based themes offer alternative layouts for product images. The layouts can be found under WooCommerce > Single Product. The options are:

• Default: The product gallery thumbnails are displayed below the featured image on the left hand side of the single product view.
• List: The product gallery images are displayed one below the other in the same size as the featured image. In this layout the product’s title, price and short description stick to the top of the page until users scroll past the image list.
• Thumbnails left: The product gallery thumbnails are presented to the left of the featured image.
• Thumbnails right: The product gallery thumbnails are presented to the right of the featured image.

The column number of the related and up-sells sections below the product’s content can be configured under WooCommerce > Product Catalog in the Customizer.

Store Notice

You can toggle the visibility of the store notice text so you can promote your events and products site-wide.

Product Images

In this tab you can choose if and how all product thumbnails are being cropped.

Chekout

In the Checkout tab you can customize the appearance of the checkout page. Set the required form fields, the Terms and Conditions page as well as the Privacy Policy page and short text which will be displayed in the checkout page.

Shop page

The shop page’s layout can be customized using the framework’s page customization options. All shop related pages, such as product category listings and single products will inherit any options set under the shop page, for example if you set up a shop page with a transparent header and a background image, they will be inherited on product listings and single products. Pages like the cart, checkout and my account do not inherit these options due to the way they are created (essentially a shortcode is added in their content) and need to be configured separately to match the rest of the shop. However they will inherit global options for pages set in the Customizer.

Shortcodes

The framework offers three very useful shortcodes for online stores. These are the following:

• [ignition-site-search post_type="product"]

  This shortcode will create a simple site search field which with the added post_type parameter restricts the results to just products. Very useful for helping customers find products they are looking for. The shortcode is ideal for top bar or header content areas.

• [ignition-minicart-button]
  

  Again a shortcode perfect for any top bar or header content area, it will display the WooCommerce minicart allowing users to quickly access and modify their cart. example.

• [ignition-wc-search]
  

  This shortcode creates a flexible, AJAX powered search box for products. It can be placed in the header to give customers quick access to everything the store has to offer.

• [ignition-wc-login]

  This shortcode will display a “My account” link (in case the user is already logged in) or a “Login” link. Use it under Customize > Top Bar in any content field you wish.

For more info regarding the above shortcodes and any other provided by the framework check out this article. WooCommerce also comes with some built-in shortcodes information for which you can find here.