Skip to content
Help Center
  • Pricing
  • ProductsExpand
    • Premium BundlesGet all the tools you need in one bundle
    • Kadence ThemeLightning-fast performance theme for modern websites
    • Kadence BlocksDrop in ready designs with advanced controls for pixel perfect websites
    • Kadence Shop KitCreate a more effective WooCommerce shopping experience
    • Kadence ConversionsBoost sales and build engaged audiences with popups and banners
    • Kadence InsightsEasily create A/B tests. Optimize your pages to drive higher conversions.
    • View All Products
  • AI Starter Templates
  • Blog
  • SupportExpand
    • Help CenterProduct Questions? Not sure how to do something? Start here
    • Support TicketsNeed help? We love to help our customers
    • About usCrafted with love in Missoula, Montana
    • Contact usPre Sale Questions? Need help purchasing?
Account Account
Get Kadence
Kadence Shop Kit
  • Features
  • Pricing
  • HelpExpand
    • Documentation
    • Submit a Ticket
    • Feature Requests
    • Roadmap
    • Changelog
Help Center
Kadence Shop Kit

Shop Kit Setup

  • Kadence Shop Kit – Product Badges
  • Kadence Shop Kit: Variation Swatches
  • Kadence Shop Kit: Product Galleries
  • Kadence Shop Kit – Advanced Reviews
  • Kadence Shop Kit – Product Brand Configuration
  • Kadence Shop Kit – Open Affiliate/External Products In A New Tab
  • Enable Custom Add to Cart Text
  • How to Set Variation Options
  • Shop Kit 2.0 – Building a Product Template
  • Kadence Shop Kit: Size Charts
  • Enable and Add Global Tabs
  • Snackbar Style Notices
  • Kadence Shop Kit Conditional Cart Banners
  • Checkout Coupon Modal
  • Kadence Shop Kit – Customize Checkout
  • Extra Category Description
  • How to Install & Activate Kadence Shop Kit
  • How to Add Gutenberg Editor to WooCommerce

Woo Template Blocks

  • Woo Template Block – Product: Upsell
  • Woo Template Block – Product: Custom Actions
  • Woo Template Block – Product: Add to Cart
  • Woo Template Block – Product: Title
  • Woo Template Block – Product: Price
  • Woo Template Block – Product: Gallery
  • Woo Template Block – Product: Image
  • Woo Template Block – Product: Short Description
  • Woo Template Block – Product: Description
  • Woo Template Block – Product: Meta
  • Woo Template Block – Product: Tabs
  • Woo Template Block – Product: Rating
  • Woo Template Block – Product: Related
  • Woo Template Block – Product: Upsell
  • Woo Template Block Product: Additional Information
  • Woo Template Block – Product: Reviews Block
  • Woo Template Block – Breadcrumbs
  • Woo Template Block – Product: Notice
  • Woo Template Block – Product: Brand
  • Woo Template Block – Archive: Main Query
  • How to Enable Woo Template Blocks
  • Select a Product for Preview in Woo Template

Kadence Shop Kit

  • Woo Template Block – Product: Custom Actions
  • Home
  • Knowledge Base
  • Kadence Shop Kit
  • Kadence Shop Kit
  • Woo Template Blocks

Woo Template Block – Product: Add to Cart

Every pre-designed Woo Template comes with a Product: Add to Cart block. You can manually add one by adding a new block and searching for the Product: Add to Cart block. When you view all of your blocks the Product: Add to Cart block will be under a block group named Woo Template Blocks. If you need to know how to enable these blocks, refer to How to Enable Woo Template Blocks.

New Product Add To Cart Block
Woo Template Blocks

In the Block Settings of a Product: Add to Cart block, the first setting is labeled General Settings, where you will see the following;

Show Quantity – This option will show the quantity of the product being purchased. This will enable users to add multiple instances of the same product to their cart at once. You can raise or lower the quantity number by using the up and down arrows in the quantity box. If you enable the Show Quantity option, you will see an additional Block Setting named Quantity Input where you can adjust additional settings for your quantity box.

Alignment – The Alignment options are available if you are not using the Force Button FullWidth option. The Alignment options allow you to align your button either on the left, center, or right side of its parent container.

Force Button FullWidth – This option will allow you to make your add-to-cart button a full-width button. Enabling this option will remove the options to Show Quantity and remove the Alignment options.

Add To Cart General Settings

Button Settings

The Product: Add to Cart block has the standard Kadence button settings. You can change the button’s text color, background color, and border color. You can set a regular color and a color for whenever the button is being hovered over. You can also adjust the border’s width and radius settings.

The Typography Settings will modify the text on your add-to-cart button. These settings include options to adjust the; font-size, line height, letter spacing, text transformation, font family, and font weight. You can also add additional padding to the text inside of your button.

Add To Cart Button Settings
Add To Cart Typography Settings

Quantity Input

If you enable the Show Quantity option, you will have a Block Setting named Quantity Input. The Quantity Input settings give you the same options you had for your button, except these settings will be applied to the Quantity Input Box on the side of your button. You can adjust the color, border, typography, and spacing settings for the Quantity Input Box.

Product Quantity Input Settings

Spacing Settings

You have the ability to adjust the Spacing Settings for your Product: Add to Cart block. These settings will allow you to adjust the margin and the padding of your block. You can adjust the padding or margin for desktop, tablet, and mobile devices.

Spacing Settings
Advanced Settings


Advanced

The final setting is the Advanced setting. You can create HTML Anchors or add Custom CSS classes to your block. An HTML Anchor allows you to create a unique web address that links to the block’s position on the page. Additional CSS Class(es) enables you to add one or multiple CSS classes that will be applied to this block.

Woo Template Block – Product: Custom ActionsWoo Template Block – Product: Title
  • Pricing
  • Products
    • Premium BundlesGet all the tools you need in one bundle
    • Kadence ThemeLightning-fast performance theme for modern websites
    • Kadence BlocksDrop in ready designs with advanced controls for pixel perfect websites
    • Kadence Shop KitCreate a more effective WooCommerce shopping experience
    • Kadence ConversionsBoost sales and build engaged audiences with popups and banners
    • Kadence InsightsEasily create A/B tests. Optimize your pages to drive higher conversions.
    • View All Products
  • AI Starter Templates
  • Blog
  • Support
    • Help CenterProduct Questions? Not sure how to do something? Start here
    • Support TicketsNeed help? We love to help our customers
    • About usCrafted with love in Missoula, Montana
    • Contact usPre Sale Questions? Need help purchasing?
Account Login
  • Features
  • Pricing
  • HelpExpand
    • Documentation
    • Submit a Ticket
    • Feature Requests
    • Roadmap
    • Changelog