How to Style the Highlight Product Section?

CartFlows allows you to highlight a product on the checkout page to make it more noticeable to customers. This feature helps draw attention to specific products by displaying custom highlight text and styling.

You can customize the text, border color, text color, and background color of the highlighted product section to match your checkout design.

How to Access the Highlight Product Styling Options

Step 1: Open Funnels

From the WordPress dashboard, navigate to: CartFlows > Funnels

Step 2: Open the Checkout Step

Select the required funnel and locate the Checkout step.

Click the Settings (Cog icon) on the checkout step to open its settings.

Step 3: Add Products to Checkout

Go to the Products tab and add the products you want to display on the checkout page.

Once products are added, scroll down to Product Options and enable the Enable Product Options toggle.

Step 4: Enable Highlight for a Product

Under the Selected Products section, click the Settings (Cog icon) for the product you want to highlight.

Enable the Highlight option and enter the highlight text according to your requirements.

Step 5: Customize the Highlight Styling

To further customize the highlight section, open the Design tab in the checkout step settings.

In the Design tab, you can modify the styling of the highlighted product, including:

• Highlight text color
• Highlight background color
• Highlight border color

These options allow you to adjust the appearance of the highlighted product so it stands out on the checkout page.

If you are using CartFlows native Gutenberg, Elementor, or Beaver Builder checkout forms, the Product Options styling will be available while editing the checkout form inside the respective page builder. This allows you to customize the product option styling directly within the page builder interface.

Step 6: Save the Changes

After making the required changes, click Update / Save to apply the settings.