The EDD Cart block allows you to create a customized shopping cart page for your Easy Digital Downloads store. This block displays cart contents with full control over styling, layout, and visual presentation, helping you create a professional cart experience that matches your brand.
A well-designed cart page is crucial for completing sales and reducing cart abandonment. With this block, you can customize every aspect of your cart’s appearance, from header typography and button styles to product listings and pricing displays. Create a cart page that instills confidence and guides customers smoothly toward checkout.
Adding the EDD Cart Block to Your Pages
Follow these steps to add an EDD Cart block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks > Easy Digital Downloads, drag and drop the Cart block into the desired section of your page.
The EDD Cart block is located under Easy Digital Downloads and can be added to create a custom cart page.
Step 2: Customize the Design
Once added, click on the EDD Cart block to open its settings. In the Styles tab, you can customize the visual appearance of your cart.
Headers:
- Typography: Control the font properties for cart headers like “Your Cart” or section titles, including font family, size, weight, and style
- Header Color: Set the color for header text to match your brand
Buttons:
- Button Style: Choose the visual treatment for cart buttons like “Update Cart” or “Proceed to Checkout”. Options include Flat (modern flat design), 2D (subtle depth), Vintage (classic look), Ghost (transparent with border), or Link (plain text link)
- Button Color: Set the background color for cart action buttons
- Border Radius: Adjust the roundness of button corners. Higher values create more rounded buttons, while zero creates sharp corners
Cart:
- Cart Border Color: Set the color for borders around the cart table and elements
- Cart Border Width: Adjust the thickness of borders (Top, Right, Bottom, Left) around cart elements
- Background Color: Set the background color for the cart table or container
- Product Text Color: Choose the color for product names and descriptions in the cart
- Product Typography: Control the font properties for product names and descriptions
- Price Text Color: Set the color for price displays in the cart
- Price Typography: Customize the font properties for prices
- Total Text Color: Choose the color for cart total amounts
- Total Typography: Control the font properties for total amounts, including subtotals and grand totals
- Links Color: Set the color for clickable links within the cart (like “Remove” or product links)
- Link Typography: Customize the font properties for cart links
The Styles tab provides comprehensive options for customizing headers, buttons, and all cart display elements.
Step 3: Configure Advanced Options
In the Advanced tab, you can further customize your EDD Cart block:
Spacing:
- Margin: Control the outer spacing around your cart block (Top, Right, Bottom, Left). This determines how much space appears between the cart and surrounding elements
- Padding: Adjust the inner spacing within your cart block (Top, Right, Bottom, Left). This creates breathing room between the cart content and its edges
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your cart block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS
- Custom Attributes: Add any HTML attributes to the cart wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., data-cart|edd-cart)
Device Visibility:
- Hide on Desktop: Hide the cart block on desktop screens
- Hide on Tablet: Hide the cart block on tablet devices
- Hide on Mobile: Hide the cart block on mobile devices
Animation Effects:
- Entrance Animation: Choose from various animation effects that play when the cart scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more
The Advanced tab provides options for spacing, custom attributes, device visibility, and animation effects.
Step 4: Save Your Changes
Once you have finished configuring the EDD Cart block and customizing its appearance, make sure to save your work.
You’ve successfully added an EDD Cart block to your page! This customizable cart display helps you create a professional shopping experience that matches your brand and guides customers smoothly toward checkout. Experiment with different colors, typography, and button styles to create a cart page that builds trust and reduces cart abandonment.