In this article, we're going to explain how to set up the Woocommerce plugin and talk about the integration with X and Pro.

  1. Getting Started
  2. Adding a Product
  3. How to Use Woocommerce in Cornerstone/Content Builder
  4. Woocommerce Image Size Changes
  5. Further Reading
  6. Summary

Getting Started

WooCommerce is the most popular WordPress plugin for creating an online shop using your existing WordPress site. The X and Pro themes are compatible with the Woocommerce plugin. Follow the steps below to install the Woocommerce Plugin:

X > ValidationExtensions Overview
  1. Go to X/Pro > Validation.
  2. Scroll down the page to find the Woocommerce, then click the Install button.
  3. Wait till the installation process is finished.
  4. After the installation is complete, click the Go Active button.
  5. You will be redirected to the plugins page which you can click the Activate link to activate the plugin.
  6. After the activation, you can go to X/Pro > Validation menu and scroll down to see the plugin is installed.
WooCommerce ActivateWooCommerce Activated

After that you activated the plugin, you will be prompted to follow with step by step setup of the shop which will ask you typical question as which country the shop should be in, which currency and so on.

Adding a Product

Follow the steps below to add a product using the Woocommerce plugin:

  1. Go to WordPress Dashboard > Products > Add New.
  2. Add the Name of the product.
  3. Use the Standard WordPress editor to add the description of the product.
  4. Add a Price of the product.
  5. Add the main image of the product. Clicking the Set Product Image link will show the standard WordPress media dialog to choose the image.
  6. Add a gallery to the product by clicking the Add Product Gallery Images link. The process is like the step 5 but you can select more than one image.
  7. Add Product Tags to make sure you have proper keywords regarding the product.
  8. Add the Category of the product.
  9. Publish the product.
WooCommerce Product MenuWooCommerce Add Product

Click here for more detailed information about the Woocommerce Products.

How to Use Woocommerce in Cornerstone/Content Builder

By default, the Cornerstone in the X theme and the Content Builder in the Pro theme is not available while editing the product and you have access to the standard WordPress editor. But you can enable the builder following the steps below:

X > Validation
  1. Go to X/Pro > Settings.
  2. Find the Permissions section and search for the Products, click the power icon before the Products item to enable the builder for the Product custom post type.
X / Pro Permissions

Now if you go to edit or add a product you will see a new tab available in the editor to edit the product using the Cornerstone in the X theme and Content Builder in the Pro theme:

Cornerstone Content Builder

The builder will be available only to change the description section of the product. The layout of the single product page cannot be changed using the builder and instead you need to use the customization techniques in the Woocommerce PHP files.

Woocommerce Image Size Changes

The X and Pro themes do not interfere with the default image settings of the Woocommerce plugin. So you can set the proper image sizes using the native controls of the plugin. Click here for more information.

Further Reading

This article barely scratched the surface of the Woocommerce capabilities. If you are interested in learning the plugin features in more depth we suggest that you check the official documentation.


We learned how to install the Woocommerce plugin and add a basic product as an example in this article. We also talked about the relationship of the X and Pro builders with the products and linked to proper resources to learn more about the plugin and how to setup the image sizes of the products.

See something inaccurate? Let us know