Creating a Custom WooCommerce Cart Template with JupiterX

Designing your cart page for your WooCommerce store is a piece of cake with the JupiterX WooCommerce Builder. Follow these steps to create a customized cart experience for your customers:

Getting Started

Navigate to JupiterX > Layout Builder > Add New.
Enter a name for your new template and then click Create Template.
Click on the + symbol to add a new section and search for the Cart widget.
Drag the Cart widget into your layout. Or, if you prefer, select one of the pre-designed cart Blocks to insert.

Customize Your Cart Layout

Layout Options:

Choose 'One column' or 'Two columns' for your layout.
Select vertical alignment (top, center, bottom) for column content.
Adjust the main column width with the provided slider.

Cart Section Options:

Toggle to show or hide the heading of the cart section.
Decide if you want to display the cart table headers ('Product', 'Price', etc.).
Show or hide product thumbnails.
Pick a display style for the remove item option (text or icon).
Show or hide the coupon code input form.

Cart Totals Section Options:

Control the visibility of the cart totals section heading.
Add a 'Continue Shopping' button if desired.

Custom Text Areas

Enter your desired text for:

Apply Coupon Button.
Update Cart Button.
Update Shipping Button.
Cart Totals Title.
Checkout Button.

Style Your Cart Widget

Sections Styling

Cart: Choose the background type, adjust padding and margin, set the border type, border radius, and box shadow for the cart section.
Cart Totals: Set the background color, padding, margin, border type, border radius, and box shadow for the cart totals section. Typography Styling:
Heading, Header, Product Name, Descriptions, Links, Info, and Total: For each text element, choose the color, typography, and adjust the margin as needed. Button Styling:
Primary Button: Customize the typography, text color, background type, color, image, box shadow, border type, border radius, and padding for the primary button.
Secondary Buttons: Customize the typography, text color, background type, color, image, box shadow, border type, border radius, and padding for secondary buttons. Form Fields Styling:
Fields:
- Set the background color, border type, border radius, padding, box shadow for the form fields.
- Customize the typography, text color for placeholders, and entered values.
- For radio buttons, adjust the size, spacing, and color for both normal and checked states. Divider Styling:
Divider: Set the color, weight, and gap for dividers used between cart items. Remove Link Styling:
Remove Link: Customize the typography and color for the remove link in normal and hover states.
Customize Section:
- Add Customization: Click the '+' icon to add more customization levels for different sections of your Cart widget, such as Table Heading, Quantity Inputs, Coupon Form, Update Cart Button, and Thumbnails.

Publishing Your Cart Template

After customizing, hit Publish.
Apply the template conditionally so it only appears on the Cart page by choosing "WooCommerce" > "Cart" in the display conditions.

With JupiterX, you have the power to create a shopping cart that not only functions perfectly but also aligns with your brand's style and enhances the overall shopping experience for your customers. Happy customizing!