The DigiCommerce Product Add To Cart Block displays a fully functional add to cart button with product variations for DigiCommerce products. This Pro block automatically integrates with DigiCommerce product pages and handles the complete purchase workflow including license variations and checkout process. This block is perfect for creating custom single product templates that you can easily build with our DigiFusion theme and its Pro version.
Adding the DigiCommerce Product Add To Cart Block
Navigate to the single product page or template where you want to display the add to cart functionality. Click the block inserter (+) and search for “Product Add To Cart” in the DigiBlocks DigiCommerce category. The block will be added with sample variations and an add to cart button to show how it will appear on the frontend.
Content Configuration
Button Text
Customize the text displayed on the add to cart button using the Button Text field in the Content panel. The default text can be modified to match your brand voice, such as “Add to Cart”, “Purchase Now”, or “Buy License”.
Product Variations
The block automatically displays available product variations from DigiCommerce, such as different license types or pricing tiers. In the editor, sample variations are shown including Personal License ($29) and Commercial License ($99) to demonstrate the layout.
Layout Settings
Button Alignment
Control the horizontal positioning of the add to cart button:
Left – Aligns the button to the left side of the container
Center – Centers the button horizontally
Right – Aligns the button to the right side
Button Width Options
Choose how the button spans across the available space:
Auto – Button width adjusts automatically based on text content
Full Width – Button stretches to fill the entire container width
Custom – Set a specific pixel width using the Custom Width control
When Custom width is selected, use the responsive controls to set different widths for desktop, tablet, and mobile devices.
Color Customization
Normal State Colors
Configure the default appearance in the Colors style panel:
Background Color – Set the button’s background color
Text Color – Choose the color for button text and icons
Hover Effects
Define color changes when users hover over the button:
Background Hover Color – Background color during hover state
Text Hover Color – Text color change on hover
Variation Styling
Customize how product variations appear:
Background – Background color for variation options
Text – Text color for variation labels and prices
Border – Border color around variation selections
Selected variations automatically inherit the main button color for consistency.
Typography Controls
Configure how text appears on the add to cart button:
Font Family – Choose from available Google Fonts
Font Size – Set responsive sizes for desktop, tablet, and mobile
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
Spacing Configuration
Container Spacing
Padding – Internal spacing around the entire add to cart block
Margin – External spacing around the block
Button Spacing
Button Padding – Internal spacing within the add to cart button for comfortable clicking areas
All spacing controls include responsive settings for different screen sizes.
Border and Styling Effects
Button Border Radius
Control the roundness of the add to cart button corners using responsive controls. Set different border radius values for each corner or use uniform rounding.
Variation Border Radius
Separately control the border radius for product variation selection options to create consistent or contrasting styling.
Advanced Features
Animation Effects
Add entrance animations to make the add to cart section more engaging when users scroll to it. Choose from fade, slide, zoom, and bounce animations with a preview button to test effects before publishing.
Visibility Controls
Control when the add to cart block appears:
Hide on Desktop – Hide the block on larger screens
Hide on Tablet – Hide on medium-sized devices
Hide on Mobile – Hide on smaller screens
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
HTML Anchor
Add a unique anchor ID to enable direct linking to the add to cart section. This creates a web address fragment that can be used in navigation menus or internal links.
Additional CSS Classes
Apply custom CSS classes for advanced styling or integration with third-party tools. Separate multiple classes with spaces.
Integration with DigiCommerce
The block automatically integrates with DigiCommerce functionality:
- Displays actual product variations from the current product
- Handles license selection and pricing updates
- Processes secure checkout workflow
- Manages digital product delivery after purchase
- Integrates with DigiCommerce payment gateways
Responsive Design
All styling options include responsive controls allowing different configurations for desktop, tablet, and mobile devices. The variation layout automatically adapts to smaller screens by stacking options vertically when needed.
Frontend Functionality
On the live site, the block provides complete add to cart functionality including variation selection, quantity controls where applicable, and secure checkout integration. The preview in the editor shows the visual layout while the actual purchasing functionality is available only on published DigiCommerce product pages.