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.

The post Using WooCommerce appeared first on CSSIgniter.

You will notice that only three options are there. These are the possible options cropping options for your thumbnails

1. Using this option will crop all your images to a square.
2. You can choose the aspect ratio you what. For example, you can use 16:9 for landscape images or 9:16 for portraits.
3. Leave the images as they are without cropping them. Make sure you are using the same image sizes for all your products if you select this option.

Remember that the ratio option is only for the listing images! Your single images will always be proportional to your original image and the gallery thumbnails will be square.

So after making these changes, you will need to refresh all your thumbnail images! Notice that WooCommerce will automatically generate the new image sizes for you. This may take a little while to process, but it runs in the background. If you want to see the status of the background regeneration, you can go to WooCommerce → Status where you will notice a notification like this

If the automatic regeneration hasn’t started, you can force it by navigating to WooCommerce → Status → Tools and clicking the Regenerate button in the end.

The Main Image and Catalog Width

You may notice that the Main image width and Thumbnail width settings are missing from your Customizer screen. Don’t worry, your theme has declared WooCommerce support and predefined those settings, so they are removed from the customizer.

Changing Image Sizes

You can override the images sizes your theme has initially declared to WooCommerce by adding In your child functions.php these code portions mentioned below.

Change your catalog images with a specific size:

add_filter( 'woocommerce_get_image_size_thumbnail', 'ci_theme_override_woocommerce_image_size_thumbnail' );
function ci_theme_override_woocommerce_image_size_thumbnail( $size ) {
    // Catalog images: specific size
    return array(
        'width'  => 750,
        'height' => 430,
        'crop'   => 1,
    );
}

Change the Single Product image:

add_filter( 'woocommerce_get_image_size_single', 'ci_theme_override_woocommerce_image_size_single' );
function ci_theme_override_woocommerce_image_size_single( $size ) {
    // Single product image: square
    return array(
        'width'  => 750,
        'height' => 750,
        'crop'   => 1,
    );
}

Change gallery thumbnails:

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'ci_theme_override_woocommerce_image_size_gallery_thumbnail' );
function ci_theme_override_woocommerce_image_size_gallery_thumbnail( $size ) {
    // Gallery thumbnails: proportional, max width 200px
    return array(
        'width'  => 200,
        'height' => '',
        'crop'   => 0,
    );
}

Have a look here on how to create a child theme.

If you get stuck somewhere you can open a new thread in our support forums in you need additional assistance.

The post How to change image sizes in WooCommerce appeared first on CSSIgniter.