Skip to content


In this section of the User Guide we will discuss how to install and set up the WooCommerce eCommerce plugin with Caledon.

Caledon comes with WooCommerce integration, which allows you to easily create an online shop. For more information on installing and configuring WooCommerce, please visit this page:

In order to set up WooCommerce with the Caledon theme, follow these steps:

  1. Navigate to Plugins > Add New from your WordPress admin panel.

    Plugins New

  2. Type “WooCommerce” in the search field.

  3. Locate "WooCommerce - excelling eCommerce" in the search results and click on Install Now.

    WooCommerce Plugin

  4. Once the installation has completed, click on Activate Plugin.

  5. You will now see a notice saying “Welcome to WooCommerce – You're almost ready to start selling :)". If you plan on importing demo content, click on Skip Setup. Otherwise, click Install Pages.
  6. If you plan on importing demo content, you should first set the product image sizes in order to achieve the same look as on our demo sites. Navigate to Appearance > Customize and click on WooCommerce, and then the Product Images. There you will be able to set the main image width and the thumbnail image width. Please note that under the Thumbnail cropping section you should either select Uncropped or Custom ​aspect ratio. If you choose to crop the images to a Custom aspect ratio, please make sure that the images are set to identical dimensions for both the product list and the product single.
  7. See Importing Demo Content in the Getting Started section of this user guide and perform the process explained there.
  8. Create a page for your shop. Then navigate to WooCommerce > Settings > Products > Display and choose the page you create as your Shop Page (in the "Shop Page" field).

    WooCommerce Page Attributes

Creating Products

To create a new shop product, please navigate to Products > Add Product. Here you can set up all the standard WooCommerce options for each product, as well as some custom theme options:

Codebean Product Meta

  • Dimension for Product List Shortcode - Choose a layout for the featured image when this product is displayed in the Product List shortcode when it is set to the Masonry layout.
  • Show Title Area - Choose whether to show a title area for this product or not.
  • Disable Content Top Padding - Set this option to "Yes" if you want to disable the padding above the content.
  • Show New Sign - Enable this option to see mark (Sold or Sale) on single product and on product lists