The WooCommerce Product Add To Cart Block creates a customizable add to cart button with optional quantity input for WooCommerce products. This DigiBlocks WooCommerce category block automatically integrates with WooCommerce cart functionality and presents it in a fully customizable format with comprehensive styling options, hover effects, and responsive design.
This block is perfect for creating custom single product templates using the Site Builder feature from our DigiFusion theme and its Pro version, giving you complete control over how add to cart functionality appears throughout your WooCommerce store.
Adding the Product Add To Cart Block
Navigate to any post, page, or custom template where you want to display WooCommerce add to cart functionality. Click the block inserter (+) and search for “Product Add To Cart” in the DigiBlocks WooCommerce category. The block will be added with a placeholder button that demonstrates how the actual add to cart button will appear on single product pages.
Content Configuration
Button Customization
Button Text – Customize the text displayed on the add to cart button. Default text adapts to WooCommerce settings and product types (e.g., “Add to cart”, “Buy now”, “Read more” for external products).
Quantity Input Options
Show Quantity Input – Toggle the display of a quantity input field next to the add to cart button, allowing customers to specify how many items they want to purchase before adding to cart.
Quantity Input Width – When quantity input is enabled, control its width using responsive controls with a range of 50-200 pixels for precise sizing across all devices.
Layout Configuration
Button Alignment
Control how the add to cart button aligns within its container:
Left – Aligns the button to the left side of the container
Center – Centers the button within the available space
Right – Aligns the button to the right side of the container
Button Width Options
Choose how the button fills its container space:
Auto – Button width adjusts automatically based on text content
Full Width – Button expands to fill the entire container width
Custom – Specify exact button width using responsive controls with a range of 100-500 pixels
Color Customization
Normal State Colors
Configure default colors in the Normal tab of the Colors panel:
Background Color – Sets the button’s background color with support for alpha transparency
Text Color – Controls the color of button text and icon elements
When quantity input is enabled, additional color controls appear:
Quantity Background – Background color for the quantity input field
Quantity Text – Text color within the quantity input
Quantity Border – Border color for the quantity input field
Hover State Colors
Define interactive color changes in the Hover tab:
Background Hover Color – Background color the button changes to on hover
Text Hover Color – Text color change when users hover over the button
All color controls support alpha transparency for creating sophisticated color effects and maintaining brand consistency.
Typography Styling
Configure button text appearance with comprehensive typography controls:
Font Family – Select from Google Fonts or system fonts
Font Size – Responsive controls with pixel, em, or rem units
Font Weight – Select from available font weights
Font Style – Normal or italic styling
Text Transform – None, uppercase, lowercase, or capitalize
Text Decoration – Add underline, overline, or line-through effects
Line Height – Control line spacing with em or pixel units
Letter Spacing – Adjust character spacing with responsive controls
Default settings include 16px font size on desktop, 15px on tablet, and 14px on mobile with font weight of 500 and line height values of 1.5, 1.4, and 1.3 respectively for optimal readability.
Spacing Controls
Container Spacing
Padding – Control internal spacing within the add to cart container
Top Padding – Space above the button and quantity input
Right Padding – Space to the right of container content
Bottom Padding – Space below the button and quantity input
Left Padding – Space to the left of container content
Margin – Set external spacing around the entire add to cart block
Top Margin – Space above the add to cart block
Right Margin – Space to the right of the block
Bottom Margin – Space below the add to cart block
Left Margin – Space to the left of the block
Button Spacing
Button Padding – Control internal spacing within the button itself for precise clickable area sizing
Top Button Padding – Space above button text
Right Button Padding – Space to the right of button text
Bottom Button Padding – Space below button text
Left Button Padding – Space to the left of button text
Border and Radius Styling
Button Border Radius
Apply rounded corners to the add to cart button using responsive border radius controls supporting both pixel and percentage units for complete design flexibility.
Quantity Input Border Radius
When quantity input is enabled, independently control its corner rounding with the same responsive border radius options as the button.
Interactive Features
Hover Effects
Visual Feedback – Smooth color transitions and subtle upward movement (translateY) provide immediate visual feedback when users hover over the button
Transition Animations – All hover effects include smooth 0.3s transitions for professional interaction
Active State – Button returns to normal position when clicked, providing tactile feedback
Quantity Input Integration
Focus States – Quantity input includes focus styling with border color changes and subtle box shadow effects
Input Validation – Automatically enforces minimum quantity values and proper number formatting
Responsive Behavior – Quantity input adapts its width responsively and maintains consistent styling across devices
Advanced Features
Animation Effects
Add engaging entrance animations to the add to cart section:
Animation Selection – Choose from fade, slide, zoom, bounce, and other animation effects
Preview Functionality – Test animations directly in the editor with the Preview Animation button
Animation Timing – Animations trigger when users scroll the block into view
Responsive Visibility
Control block visibility across different devices:
Hide on Desktop – Conceals the add to cart block on desktop screens (992px and above)
Hide on Tablet – Hides the block on tablet devices (768px to 991px)
Hide on Mobile – Removes the block from mobile displays (767px and below)
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
Additional Options
HTML Anchor – Create a unique anchor link for direct navigation to the add to cart section
Additional CSS Classes – Add custom CSS classes for advanced styling or targeting
WooCommerce Integration
The block seamlessly integrates with WooCommerce functionality:
Product Type Support – Automatically adapts button behavior for simple, variable, grouped, and external products
Cart Integration – Maintains full WooCommerce cart functionality including quantity validation, stock checking, and cart updates
AJAX Support – Works with WooCommerce AJAX add to cart functionality when enabled in theme or plugins
Variation Support – Integrates with variable product selections and updates appropriately
Stock Management – Respects inventory settings and shows appropriate messaging for out-of-stock products
Button Behavior
Simple Products – Direct add to cart functionality with optional quantity selection
Variable Products – Integrates with variation selection and enables cart addition when all variations are chosen
Grouped Products – Adapts to grouped product functionality and quantity requirements
External Products – Changes behavior to redirect to external product URLs
Security and Performance
Nonce Verification – Maintains WooCommerce security standards with proper nonce verification
Performance Optimization – Lightweight implementation that doesn’t impact page load times
Accessibility – Includes proper ARIA labels and keyboard navigation support
Responsive Design
All styling options include device-specific controls for desktop, tablet, and mobile screens. Button sizing, typography, spacing, and layout elements can be adjusted independently for each breakpoint to ensure optimal cart functionality across all devices.
The block maintains its functionality and styling consistency whether used in single product templates, product comparison pages, or custom WooCommerce layouts created with the DigiFusion theme’s Site Builder feature.