Kadence + WooCommerce Tutorial (Turn Starter Templates into Stores in 20 mins)

You’ll learn to build a WooCommerce store, starting with any of the Kadence Starter Templates. Kadence theme has some great WooCommerce customization features, but at the moment there is only one ‘shopping’ template. With this tutorial, you can take any of the other templates (in this case we use the ‘Agency’ template) and build it into a store.

How to Build an eCommerce Store Using Kadence Theme and WooCommerce

We have a complete video tutorial for this below, but the basic steps for this process are:

  1. Start with a fresh install of WordPress
  2. Install and activate Kadence theme
  3. Install Kadence Starter Templates Plugin
  4. Choose your preferred template, in our example below we chose “Agency’
  5. Install WooCommerce plugin plus your prefered payment gateway. We prefer using either Stripe or Payal. There is a tutorial on this section here on our YouTube.
  6. Setup the headers and titles for your shop, you will do this through the theme customizer.
  7. Edit your cart and checkout pages. We found using the regular header rather than the transparent header here gave a better result more easily.
  8. You can add products to any other pages using the ‘woocommerce blocks’ that you will find in your editor. We found ‘hand picked’ products works well for featuring certain products. For example, on the front page.

The CSS we used in the tutorial is here:

/* Turn of zoom pointer in woocommerce product */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    pointer-events: none;
}

/* add background color to the 404 page header */
.error404.transparent-header #masthead {
    background-color: var(--global-palette1);
	position: relative;
}


/* center the title on woocomm block grid */
.wc-block-grid__product .wc-block-grid__product-title {
    text-align: center;
}

/* center the price on woocomm block grid */
.wc-block-grid__product-price {
    text-align: center;
}

If you want to be fancy and use a gradient on the 404 page, here is the code to do that. You’ll need to find the RGB values and the angle you need (use the gradient tool in the customizer to find the values to suit your style).

.error404.transparent-header #masthead {
    background: linear-gradient(135deg,rgba(43,109,254,1) 1%,rgba(0,242,255,1) 100%);
	position: relative;
}

Overall, the number of features included for free by the Kadence theme is excellent. Usually themes don’t include so many WooCommerce customization features in a free version. If you’re looking a building a new WordPress site, Kadence is certainly a theme to consider. With the use of the Kadence starter templates, combined with Kadence blocks plugin, even beginners can achieve some professional styling in their site. This is honestly the first time I’ve actually enjoyed using the Gutenberg builder and been able to get something beautiful built very quickly.

Similar Posts