Styling the Cart recommendation section

A Cart section that feels like it belongs

The GoScript Smart Cart Recommendations WordPress plugin includes a compact set of styling controls for the recommendation section. They are designed to help the cards sit naturally beside your existing Cart, totals, and checkout actions-without asking you to build or maintain a second storefront design system.

Use these controls to reinforce the visual language your customers already recognise: the spacing, colours, borders, and text emphasis that make your store feel consistent.

Shape the recommendation cards

The basic styler includes controls for the presentation of each recommendation card:

Card backgroundChoose a background colour that makes the section clear without competing with the main Cart.

Border and radiusSet a border colour and corner radius that echo the surfaces already used in your theme.

Grid gapAdjust the space between cards so the section remains easy to scan at your selected column count.

Start from the design language already present in your Cart. A small adjustment to border contrast, card radius, or spacing is often enough to make recommendations feel intentionally integrated.

Set the right visual emphasis for product details

You can choose the product-title colour, price colour, and Add to Cart link colour for the recommendation cards. These controls help you create a clear hierarchy: product names should remain easy to read, prices should be easy to spot, and the next action should be visible without overwhelming the checkout path.

• Use a product-title colour with enough contrast against your selected card background.
• Choose a price colour that fits the emphasis shoppers already expect on product values.
• Use an Add to Cart link colour that makes the interaction easy to find and aligns with your broader call-to-action treatment.
• Review the combination with product images and descriptions enabled or hidden, since each choice changes the card’s visual balance.

Tune the section heading

The section-title size control lets you make the recommendation heading feel appropriately present within the Cart page. Combine it with the title you set in Cart placement settings to give shoppers a simple, confident introduction to the products below.

A heading that is too quiet can make a useful section easy to miss; one that is too prominent can interrupt the Cart’s natural hierarchy. Test the title beside your Cart headings and totals to find a balanced result.

Focused controls, not a separate page builder

Smart Cart Recommendations intentionally keeps its styling controls scoped to the recommendation section. It does not provide a visual page builder, typography matrix, hover builder, animation system, per-breakpoint design canvas, carousel, or slider.

That focused scope gives you practical control over the parts that matter most while allowing WooCommerce and your active theme to remain the foundation of the overall Cart design.

Review the real Cart experience

1. Choose a representative Cart with eligible recommendations and save your styling changes.
2. Review the section beside Cart items, totals, coupons, and checkout actions on desktop.
3. Check narrow mobile layouts, where the recommendation grid reduces to one column.
4. Confirm text, prices, and Add to Cart links remain easy to read and tap.
5. Keep only the changes that make the section feel more naturally part of your store.

Saving Settings clears the recommendation cache, so you can refresh the Cart and review each meaningful styling update immediately.