Want to level up your WooCommerce store without installing a bunch of plugins? In this Kadence Shop Kit tutorial, I’ll show you how to take your WooCommerce store to the next level with Kadence Shop Kit.
I’ll walk you through all the basics, including installing Kadence Shop Kit, and help you understand how to make the most of its features.
Ready to learn? Let’s get straight to it.
How to use Kadence Shop Kit
All you need to follow this Kadence Shop Kit tutorial is a WooCommerce website and either a Kadence Shop Kit or a Kadence Full Bundle subscription.
If you don’t have a website, follow my Cloudways tutorial to set one up for free.
Why use Cloudways? Read my Cloudways review to understand why I recommend using Cloudways to host WooCommerce sites.
I’ve also written detailed reviews about the Kadence Theme, Kadence Blocks, and even Kadence Shop Kit. Give those a read if you haven’t subscribed to Kadence yet.
Once you’re ready, follow the rest of my Kadence Shop Kit guide.
Download and install Kadence Shop Kit
Go to Kadence’s website and buy Kadence Shop Kit or log in to your Kadence account if you already have a Kadence premium subscription.
Select Download Files in your Kadence account dashboard.
Depending on your plan, you’ll see a list of all Kadence premium products you can access.
Find the Kadence Shop Kit plugin listing, select Download, and save the file on your computer.
Log in to your WordPress admin panel and go to Plugins > Add New.
Select Upload Plugin to open the plugin upload form. Click Choose File, upload the Kadence Shop Kit plugin file, and select Install Now. Once the plugin installs, choose Activate Plugin to complete the installation.
You’ll then see a notification asking you to activate Kadence Shop Kit. Select Click here to activate.
On the Kadence Plugin Activation age, enter your API License Key and API License Email. You can find both of those inside your Kadence account under License Keys.
Finally, click Activate to complete the Kadence Shop Kit plugin activation process.
Once it activates, you’ll see the “Shop Kit” menu item in your WordPress admin settings menu.
Selecting Shop Kit takes you to the Kadence Shop Kit dashboard, where you can turn on or off all the different Kadence Shop Kit features.
Kadence Shop Kit adds tons of functionality to your WooCommerce store.
For a detailed breakdown of everything Shop Kit offers, read my Kadence Shop Kit review, where I test each feature, share my honest opinions, and compare website performance before and after installing Shop Kit.
Create product page layouts
The custom product template builder in Kadence Shop Kit is my favorite feature. It lets you design different product page layout templates and assign them to products or product categories to give your store a unique look and feel.
Let’s see how to create a custom product template and assign it to products on your WooCommerce store.
Go to the Shop Kit dashboard in your WordPress admin, select Product Templates, activate the Enable Product Templates toggle, and click Save.
Refresh your screen to update your WordPress admin dashboard. This step is necessary because Kadence adds a new section called “Woo Templates” to the Products menu, and you won’t see it unless you refresh your screen.
After refreshing your screen, go to Products > Woo Templates and click Add New to create your custom product page template using the WordPress editor.
Inside the editor, Kadence will ask you to choose the type of template you want to create: Single Product, Product Catalog Loop Item, or Product Archive.
Choose Single Product.
Next, you can choose a pre-built template or design your custom product page template from scratch. We’ll select a pre-built template for this Kadence Shop Kit tutorial to keep things simple.
Select a template from the available options and wait a few seconds as Kadence imports it into the editor.
Once the template imports, enter a descriptive title for your template, like “Custom product template” or “Custom template for tshirts,” and click Save draft.
Depending on the template you choose, you may need to enable other Shop Kit features like Product Gallery for the template to display correctly.
Now, you can use this template as is or customize it to suit your needs. For instance, you can reposition the Product Rating block under the Product Title and change the Rating Style color to a shade like #FFC000.
Kadence uses special blocks called Woo Template blocks for these templates. That makes it easy for you to customize their templates and build new ones from scratch using the standard WordPress block-building workflow.
If you haven’t used blocks to build a WordPress website, read my Kadence Blocks tutorial to learn how you can use Kadence Blocks to design your site.
Once you’re done customizing the template, it’s time to configure its display settings. That includes assigning to one or more products, product categories, or product tags.
Click the Template Settings button button and configure the following settings:
- Display Settings: Select Single Product. Optionally, select a Product Category or Product Tag using the Group option from the Select Product By dropdown.
- User Settings: Set as All Users.
- Device Settings: Select All Devices.
- Expires Settings: Activate Enable Expires and set a date and time for the element to expire. Alternatively, leave it disabled to use the element without an expiry date.
Click Publish to save the template, and then go to the front end of your store to verify everything displays correctly.
For this Kadence Shop Kit tutorial, I’ve assigned set the custom product page template to display for products in the Tshirts category on my store.
So if I open a product from the Tshirts category, this is how the product page layout appears:
And if I open a product from a different category, like Mugs, here’s how the product page layout appears:
That’s how easy it is to create custom product page templates with Kadence Shop Kit. You don’t need to mess with code or worry about breaking your site.
Customize product variation swatches
The default WooCommerce product variation selection tool is a basic dropdown that isn’t very user-friendly.
Luckily, with Kadence Shop Kit, you aren’t forced to use the default dropdown selector or hunt for variation swatch plugins that bloat your store with unnecessary code.
You can easily configure the variation selection interface to be a radio box, color or image swatch, or even a better-looking dropdown if that’s what you like.
Setting up custom variation swatches is super easy with Shop Kit. Here’s how you can do it.
Go to the Shop Kit dashboard in your WordPress admin, select Variation Swatches, and activate the Enable swatches control with variations toggle.
I’ve also enabled the Show variation label above selection area option because I think it looks better than the default label positioning. You can leave it disabled if you like.
As soon as you switch the toggle, you’ll see more settings you can configure for your product variation swatches. You can use them to define global defaults that will apply to the swatches on your store.
Don’t worry. You won’t be stuck using them.
Kadence gives you the flexibility to override the global defaults inside each product. So, you have complete control over how your products display on the front end.
Configure the defaults as you like. For instance, here’s how I’ve set it up:
- Choose a default swatch type: Radio boxes.
- Choose a default swatch label option: No label.
- Choose a default swatch size option: 50x50px.
- Dropdown “Choose an option” text: Empty to use the default value.
Finally, click Save to update your settings.
Here’s how the variation swatches look on my store after making that change:
Pretty cool, right?
I’ve selected the default swatch type as Radio boxes because it works instantly without any extra configuration.
You can also set it up to display Color or Image swatches. But you’ll need to assign a color or image for each swatch individually inside all your products for them to work.
And if that’s the case, follow these steps to add color and image swatches to your products.
Go to Products > All Products in the WordPress admin and edit a variable product of your choice.
Scroll down to the Product Data tab, select Variation Swatches, expand the attribute tabs to reveal the Variation Style settings, and set the Variation Style to Color and image swatches.
Next, select an attribute and configure its variation swatch settings. You can assign a color or an image to each variation using the Attribute Color or Image dropdown.
Configure the swatch settings as you like. For example, I’ve assigned a product image to each color attribute.
You can repeat this process for other attributes as well. I’m only doing it for the color attribute for my T-shirt because I want to use a radio box for the size.
Once you’re done configuring the variation swatches, scroll up and click Update to update your product. Then, go to the front end to verify everything displays correctly.
Here’s how my product page looks now:
That looks far better now. All it took was a few simple tweaks, and we took WooCommerce’s basic product page up several notches in terms of design and usability thanks to Kadence Shop Kit.
Add custom tabs to product pages
Custom tabs are a cool way to add information to a product page without making it too crowded. They help you share additional information about your products so they can make informed decisions.
Kadence Shop Kit makes it easy to add custom tabs to product pages without any code. Here’s how you can set it up on your website.
Go to the Shop Kit dashboard in your WordPress admin, select Global Tabs, activate the Enable Global Tabs toggle, and click Save.
Kadence adds a new section called “Product Tabs” to the Products menu, and you won’t see it unless you refresh your screen.
So refresh your screen, go to Products > Product Tabs, and click Add New Product Tab.
As with all things Kadence, you can design your product tab content inside the WordPress block editor.
I’ll show you how to create a returns policy tab for this Shop Kit tutorial.
Enter a title for your custom tab, such as “Returns Policy tab”. Then, add your content inside the block editor.
Once you’ve entered your content, scroll to the bottom of the editor to access the Tab Settings and configure the following details:
- Tab Title: Enter a descriptive title for the custom tab, such as “Returns Policy”.
- Display Type: Select which products you want to add the custom tab. For example, I’ve selected Add to products of a specific category.
- Choose which category: This setting displays based on my previous selection. I’ve selected the Tshirts category on my store.
- Choose tab priority: Configure where you want to display the tab. A priority value of 0 will show the tab first, and anything above 40 will display it last. I’ve set it to the default 40.
Click Publish to update your changes, and then go to the front of your store to check if everything displays correctly.
Here’s how the custom tab content displays on my store:
Update your product gallery style
First impressions matter. And when it comes to the product page, nothing makes a lasting impression like a product gallery that instantly captures your customer’s attention.
Kadence Shop Kit’s custom gallery layouts empower you to show off your products from all the best angles, highlight different product details, and even arrange the images exactly how you want.
Here’s how to use Shop Kit to make your product gallery look extra amazing in a few minutes.
Go to the Shop Kit dashboard in your WordPress admin, select Product Gallery, and activate the Enable Product Slider Gallery toggle.
When you switch the toggle, more settings appear inside the Product Gallery settings tab. Let’s walk through each of those settings one at a time.
First, choose a gallery type. Kadence has seven preconfigured gallery layouts for you to choose from. You can also use the device selection tabs to select a gallery type for each device type.
The settings that follow update based on the gallery type you choose.
For example, if you select the Thumbnails beside slider on the left option, you’ll see thumbnail width and column settings. You won’t see those options if you choose a different gallery type, such as Images in a tile layout.
While the gallery type you select here will apply globally to all products in your store, you can set different gallery types using Shop Kit’s custom product page layouts feature.
For now, I’ll select the Thumbnails beside slider on the left gallery type for this Kadence Shop Kit tutorial, but you can choose whichever you like best.
Next, you can set custom image sizes for your product gallery. To set it up, activate the Enable Custom Size for Gallery Images toggle and then set the Product Image Width and Product Image Ratio.
Then, configure your product image thumbnail settings using the slider for Thumbnail Width % and Select How Many Thumbnail Columns Are Visible At A Time. You can also configure both values separately for Desktop, Tablet, and Mobile devices.
Next, set the Slider Transition mode and Slider Transition Speed to your preferred values. Those settings will only apply if you set Slider Auto Play to True.
The slider won’t autoplay if set to False. So keep that in mind when you’re setting it up.
You can also set the Slider Pause Time to control how long each image in the gallery is displayed on the product page.
Shop Kit gives you the ability to magnify product images on hover. That way, your customers don’t need to click on the image to open it in a lightbox and then zoom into the image.
Activate the Enable Product Image Hover Zoom toggle to enable the hover magnification feature, or turn it off if you prefer the Lightbox feature. I’ve left it turned off for my store.
Shop Kit also gives you a Show Slide Arrows On Product Image? setting. By default, this is set to False, but you can set it to True to add arrows on the product image.
You can Enable thumbnail hover selection if you like or leave it turned off if you want customers to click thumbnail images to load them.
The Enable Lightbox toggle is switched on by default. You can leave it as it is or turn it off if you want to use the product image hover zoom feature instead.
If you’re using the Lightbox, set the Lightbox Style to Dark or Light, depending on your store theme, and decide whether to Show Caption Overlay On Images by setting it to True or False.
The last gallery setting, Enable meta area for shortcode override, adds a box to each product where you can put a shortcode or HTML content to customize the product gallery.
You can activate the setting if you want to customize your product gallery even more. But for most users, I’d suggest leaving it disabled.
Finally, once you’ve customized your gallery settings, click Save and check your changes on the front.
Show product brands
WooCommerce doesn’t support brands out of the box. Luckily, Kadence Shop Kit gives easy access to that functionality without paying for a separate extension.
Shop Kit adds brands as a separate taxonomy in WordPress. So just like you have product categories and tags, Kadence creates a new product taxonomy for brands.
Here’s how you can set up product brands using Kadence Shop Kit.
Go to the Shop Kit dashboard in your WordPress admin, select Product Brands, and activate the Enable Product Brands Options toggle.
When you switch the toggle, more settings appear inside the Product Brands tab. Let’s configure each of those one at a time.
First, you need to set the Singular Custom Name and Plural Custom Name for your brand taxonomy.
By default, it’s set to “Product Brand” for a single brand and “Product Brands” for multiple brands. However, you can change it to “Brand” and “Brands” or any custom value you want for your store.
Next, set the URL Custom Slug for your Brands page. Shop Kit uses product-brands by default, but you can change it to something shorter, like brands.
The following section contains the Product Brands Single Output settings, which let you define how the brands display on product pages.
Start by selecting where the Brand will display on the product page. By default, the Single Product Page Output is set to None, but you can set it to a different value like Above Title or Below Title, Above Price.
Then, decide how you want the brand to display by setting Show As Text Or Image to Image or Text.
That choice depends entirely on how you’ve designed your product page layout. Text is the safest option, but images are more user-friendly.
If you select Image, you can further customize the appearance and behavior of the image by setting the Single Product Page Brand Image Width, activating Enable to Hard Crop Image with a specific height for brand logos, and activating Link Image to Brand Page.
The final section of the page contains the Product Brands Archive Output settings that let you define how brands display on the archive, aka category pages.
By default, Archive Page Output is set to None, but you can set it to display in up to seven locations like Above Image and Below Add to Cart.
Like the product page, you can also control how brands are displayed using the Show As Text Or Image setting.
Again, this is entirely dependent on your store design and the location where the brand will display.
If you set it to display as Image, you can set the Archive Page Brand Image Width, activate Enable to Hard Crop Image, and even activate Link Image to Brand Page.
Once you’ve configured the settings, click Save to update your changes.
Refresh your page and then go to Products > Brands to set up your brands.
The workflow of adding brands is the same as adding new product categories or tags. Enter the Name, set the Slug, set a Parent Brand (optional), enter a description of your brand, upload a Brand Image, and click Add New Brand to save it.
Repeat the process to add multiple brands to your WooCommerce store.
Once you’ve created all brands, go to Products > All Products, edit your products one at a time, assign a brand using the Brands setting, and click Update to save your changes.
The Shop Kit brand configuration only applies to the default product and archive page templates in WooCommerce. If you’re using a custom template for either of those, you’ll need to manually add the Brand block to your templates.
The brand will display on your storefront once you’ve set it up. Here’s how the brand displays on one of my product pages:
Add custom checkout fields
The default WooCommerce checkout is good. Sure, it’s a bit basic, but it’s not bad.
However, your only options to add additional fields to the default checkout or edit the existing fields are to add a third-party plugin or edit the theme code.
The only problem is that finding a reliable plugin is challenging, and messing with the theme code can easily break your store.
Thanks to Shop Kit, you have a better option to customize WooCommerce checkout with custom fields.
Here’s the step-by-step process to add custom fields to the checkout page with Kadence Shop Kit.
Go to the Shop Kit dashboard, select Checkout Editor, activate the Enable Checkout Fields Editor toggle, and click Save.
Refresh your screen to update your WordPress admin dashboard, and then go to WooCommerce > Checkout Manager.
The Shop Kit Checkout Manager is a dashboard that lists all the fields on the checkout page categorized into three tabs: Billing Fields, Shipping Fields, and Extra Fields.
You can add, remove, enable, disable, and rearrange the fields for each section separately and even set up validation rules.
Let’s say you want to add an additional billing field for the customer’s Tax ID. Here’s how you can do it.
Click Add field inside the billing fields tab.
Configure the New Checkout Field settings as follows:
- Type: Set the type of checkout field you want to create. I’ve selected Text for my custom Tax ID checkout field.
- Name: Enter a value for the field, such as billing_tax_id. This value is only used for managing data on the backend.
- Label: Enter a descriptive label to display on the checkout page.
- Placeholder: Add a placeholder to display inside the checkout field when it’s empty.
- Class: Use the default value.
- Validation: Leave it blank.
- Required: Check this setting to make it compulsory for checkout.
- Clear Row: Check this setting.
- Enabled: Check this setting to enable the custom field.
- Display in Emails: Check this to add the custom field value to confirmation emails.
- Display in Order Detail Pages: Check this to show the field value on the order detail page.
Once you’re done configuring all the settings, click Add New Field to add your custom checkout field to the Billing Fields table and click Save changes to update your changes.
By default, the new checkout field will be added to the bottom of the table and will display at the end of the billing details section on the checkout page. However, you can drag and rearrange the field to show higher up as needed.
Remember to click Save changes after making changes to the checkout fields.
Verify the checkout field displays correctly on the front end. I also recommend placing a test order to verify the values display correctly on the order details page and in your confirmation emails.
Here’s how the custom tax ID checkout field appears on the checkout page of my store:
Add snack bar notices
Shop Kit’s snack bar notices are one of my favorite features. They transform the standard banner-style WooCommerce notices at the top of the page into modern, dismissable notices that appear as small popups at the bottom of the screen.
The best part? Setting it up is easy!
Here’s how you can modernize your store notices with Kadence Shop Kit.
Go to Shop Kit > Snackbar Style Notices, activate the Enable Snackbar Style Notices toggle, and click Save to change the add-to-cart confirmation banner to a snackbar notice.
You also have the option to change the banner notices for the cart and checkout pages to snackbar-style notices.
All you need to do is activate the Enable Snackbar Style Notices for Cart Page and Enable Snackbar Style Notices for Checkout Page toggles and click Save.
Here’s how the add-to-cart notice looks after those changes:
Ready to take your store to the next level in 2026?
There you have it. I’ve explained how to use Kadence Shop Kit from scratch. Now, it’s your time to act.
Spin up a test server and give Kadence Shop Kit a try. I’m confident it won’t disappoint. Read my Kadence Shop Kit review to learn why.
If you try it but don’t like it, you can always contact the Kadence team within 30 days of subscribing to get a refund on your purchase.
If you have questions about this Kadence Shop Kit tutorial, get in touch with me. I’m here to help!
