How to redesign a WooCommerce mobile cart in Divi

A WooCommerce cart that works well on desktop can still feel crowded and difficult to scan on a phone. In one mobile-only redesign, the cart was rebuilt around clearer product cards, stronger visual grouping, simplified order details, and more obvious checkout actions while preserving the existing desktop experience.

The site used WooCommerce with Divi. The finished implementation combined Divi layout changes, custom CSS, JavaScript, WooCommerce settings updates, and carefully scoped mobile-only behavior. After staging review, the redesigned cart was approved, deployed to production, and tested successfully.

Issue background

The existing mobile cart presented too much information in a dense layout. Product details, shipment groupings, pricing, quantity controls, and checkout actions were all available, but the experience was harder to scan on smaller screens.

The redesign aimed to improve the mobile experience without unnecessarily changing desktop. The requested direction included:

• Cleaner product cards with image, name, price, quantity, and subtotal.
• More readable grouping for products shipping from different manufacturers.
• A clearer Cart Summary area.
• A more convenient mobile checkout action near the bottom of the cart.
• Simplified mobile-only product metadata.
• Updated shipping messaging, including FREE! where applicable.

Several details required explicit decisions before development, including how customers would remove items, whether desktop should receive the same extra checkout button, whether manufacturer labels should remain, and which secondary fields should be hidden on mobile.

Diagnosis

This was primarily a responsive UX problem rather than a WooCommerce data or checkout failure.

The existing cart contained useful ecommerce information, but not all of it deserved equal visual weight on mobile. The team reviewed which elements were essential for completing a purchase and which could be simplified or hidden at smaller breakpoints.

The final mobile requirements included:

• Retaining a visible red X for item removal rather than requiring customers to set quantity to zero.
• Adding an additional Proceed to Checkout button on mobile because desktop already had a floating checkout summary.
• Keeping manufacturer or “Ships from” information where applicable.
• Hiding the availability field on mobile while retaining it on desktop.
• Hiding the “After Volume Discount” label on mobile.
• Hiding the PaintCare footnote for the time being, while keeping the implementation easy to re-enable if required later.

The work also had two different technical layers. Theme files such as CSS and JavaScript could be tracked in Git, while Divi builder settings and WooCommerce configuration changes were stored in the database and therefore required separate deployment handling.

Resolution steps

The mobile cart redesign was implemented in stages.

1. Restructure cart products into mobile cards. Each item was reformatted so the product image, name, price, quantity, and subtotal were easier to scan on small screens.
2. Keep remove-item controls obvious. A red X remained available so customers could remove an item directly instead of relying on a quantity-zero workflow.
3. Improve shipment grouping. “Ships from” sections were restyled into clearer blocks. When multiple manufacturer groups appeared in one order, stronger visual separation was added between them.
4. Align quantity and subtotal values. These values were right-aligned so subtotals followed a consistent visual column. On narrower screens or with longer prices, the subtotal could wrap beneath the quantity instead of overcrowding the row.
5. Simplify mobile-only product details. Availability and “After Volume Discount” information were hidden from the mobile layout while remaining available where appropriate on desktop.
6. Refresh the cart heading styles. The “Products in Cart” heading was adjusted to visually match the Cart Summary section for a more consistent hierarchy.
7. Add a second mobile checkout action. A Proceed to Checkout button was placed near the bottom for customers who had already scrolled through the full cart. It was not added to desktop because the desktop checkout panel already followed the user.
8. Refine Divi spacing. Mobile and tablet padding and margins were reduced in several rows and sections, including the cart summary and notices, so the layout used the available screen space more efficiently.
9. Update the cart summary styling. Divi module spacing and box-shadow settings were adjusted to make the summary feel more visually distinct and polished.
10. Improve mobile notice typography. Alert text, such as minimum-order messages, was reduced in size so it fit more comfortably on phone screens.
11. Update supporting product recommendations. The “Forget anything?” carousel was adjusted so price and Add to Cart controls appeared together in a cleaner row.
12. Update shipping messaging. WooCommerce shipping settings were changed so qualifying shipping displayed FREE! and the cart reflected the intended shipping-message behavior.
13. Remove unnecessary payment messaging from the cart. WooCommerce payment settings were adjusted so selected payment-related content no longer appeared on the cart page.
14. Update JavaScript behavior. The child theme’s script.js was changed to remove unwanted items from the cart summary display and support the redesigned interaction.
15. Keep the PaintCare footnote reversible. The footnote was hidden as requested, but the implementation was left behind a simple switch so it could be restored quickly if a future requirement changed.
16. Track file-based changes in Git. CSS and JavaScript edits were committed to the repository, while Divi and WooCommerce database-backed changes were documented separately for deployment.
17. Review on staging before launch. The completed redesign was presented on staging for review and approved before production deployment.
18. Deploy and test the live cart. File and database changes were pushed to production, and the live version was tested after launch.

Separating file-based and database-based changes was especially important in this project. A Divi redesign may involve both theme code and settings stored in WordPress, so a production deployment needs to account for both rather than assuming a Git push alone contains the entire feature.

Final outcome

The redesigned WooCommerce mobile cart was successfully launched and tested. Product information became easier to scan, manufacturer shipment groups were clearer, mobile-only fields were simplified, checkout actions were easier to reach, and the Cart Summary and related sections received more consistent visual treatment.

The desktop experience remained intentionally different where that made sense. For example, the extra checkout button was kept mobile-only because desktop already used a floating checkout panel, and the availability field remained visible on desktop.

The broader lesson is that a good mobile cart redesign is not simply a smaller version of the desktop cart. It should prioritize the information and actions customers need most on a phone, while preserving desktop behaviors that already work well. On Divi and WooCommerce sites, it is also important to plan for both code changes and database-backed builder settings during deployment.

If your WooCommerce cart is difficult to use on mobile or your Divi cart layout needs a responsive redesign, contact Freshy. Our WordPress team can help improve cart UX, responsive WooCommerce layouts, Divi templates, CSS, JavaScript, and deployment workflows.