The Cart block allows you to seamlessly integrate a WooCommerce shopping cart into any SeedProd page. It displays the items a customer has added, provides real-time cart updates, and gives you full control over the cart’s visual style — from field colors and button design to typography and border settings.
Use this block to build a fully custom WooCommerce cart page that matches your brand, without touching any code. Once your page is published, simply designate it as your cart page in WooCommerce settings so customers are directed to it automatically.
Adding the Cart Block to Your Pages
Follow these steps to add a Cart block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks > WooCommerce, drag and drop the Cart block into the desired section of your page.
Step 2: Configure Style Settings
Once added, click on the Cart block to open its settings. In the Styles tab, settings are organized into five sections.
Headers:
- Header Color: Set the text color for section headers within the cart.
Buttons:
- Button Style: Choose a visual style for cart buttons — Flat, 2D, Vintage, Ghost, or Link.
- Button Color: Set the background color for cart action buttons.
- Border Radius: Adjust the corner roundness of cart buttons using a slider.
Fields:
- Field Background Color: Set the background color of input fields within the cart (such as coupon code and quantity fields).
- Field Text Color: Set the text color inside input fields.
- Field Border Color: Set the border color of input fields.
- Field Border Width: Set the border thickness on each side of input fields.
Alerts:
- Info Highlight Color: Set the color used for informational alert messages.
- Error Highlight Color: Set the color used for error alert messages.
- Success Highlight Color: Set the color used for success alert messages.
Cart:
- Cart Border Color: Set the border color of the cart container.
- Cart Border Width: Set the border thickness on each side of the cart container.
- Border Radius: Adjust the corner roundness of the cart container using a slider.
- Background Color: Set the background color of the cart container.
- Text Color: Set the general text color within the cart.
- Font Family: Choose the font used for cart body text.
- Header Background Color: Set the background color of the cart header row.
- Header Font Family: Choose the font used for cart header text.
- Header Color: Set the text color of the cart header row.
Step 3: Customize the Design
In the Advanced tab, you can further customize the layout and behavior of your Cart block.
Spacing:
- Margin: Set the outer spacing around the block on all four sides, with independent controls for desktop, tablet, and mobile.
- Padding: Set the inner spacing inside the block wrapper on all four sides, with per-device controls.
Attributes:
- Custom Class: Add one or more custom CSS classes to the block wrapper for targeted styling.
- CSS ID: SeedProd automatically generates a unique CSS ID for this block. You can use it to reference the block in custom CSS or JavaScript.
- Custom Attributes: Add custom HTML attributes to the block wrapper element. Enter each attribute on a new line using the key|value format.
Device Visibility:
- Hide on Desktop: Toggle to hide the block when viewed on desktop screens.
- Hide on Tablet: Toggle to hide the block when viewed on tablet screens.
- Hide on Mobile: Toggle to hide the block when viewed on mobile screens.
Animation Effects:
- Scrolling Effect: Apply a scroll-triggered animation to the block, including Vertical Scroll and Horizontal Scroll options with direction, speed, and viewport offset controls.
- Mouse Effect: Apply a mouse movement-driven parallax effect to the block.
Step 4: Set as Your WooCommerce Cart Page
After publishing your page, navigate to WooCommerce > Settings > Advanced and set your new SeedProd page as the designated cart page. This ensures customers are sent to your custom cart page when they click the cart icon or proceed from a product page.
Step 5: Save Your Changes
Once you have finished configuring the Cart block and customizing its appearance, make sure to save your work.
You’ve successfully added a Cart block to your page! With full control over button styles, field colors, typography, and cart container styling, you can create a WooCommerce cart experience that feels completely native to your brand. Don’t forget to assign the page as your cart page in WooCommerce settings so your customers always land in the right place.