Customize Web Campaign Pop-Ups for WooCommerce Stores

Pop-ups are crucial in WooCommerce marketing, helping store owners capture leads, recover abandoned carts, and increase conversion rates. Whether you want to welcome visitors with an exclusive offer, encourage cart recovery, or retain existing users, customizing your pop-ups ensures they align with your store’s branding and goals. In this article, we’ll discuss how to create fully customized, conversion-optimized pop-ups that align with your WooCommerce store’s marketing strategy using WebToffee E-commerce Marketing Automation.

1. Navigate to Web Campaigns from the WebToffee Marketing sidebar menu.
2. This will open the campaigns dashboard, where you can manage and create campaigns.

To begin customizing your pop-up, let’s first head to the pop-up editor:

1. If you are creating a new campaign:
   1. Click “Create New Campaign.”
   2. Select the campaign type (Welcome, Cart Recovery, Exit Intent).
   3. Choose a pre-designed template to customize.

2. If you are editing an existing campaign:
   1. Scroll to the “Your Web Campaigns” section.
   2. Find the campaign you want to modify.
   3. Click Edit to access the campaign settings.

3. After selecting a template, hover over the Sign-up Screen (Step 1) and click “Edit Template.”

1. Click on any text block (e.g., “Jump on This Deal!”).
2. Modify the text content by double-clicking on it.
3. Customize the font size, font color, text alignment, and padding from the right-side panel.

1. Click on an input field (e.g., Email).
2. Modify the placeholder text (e.g., “Enter Your Email”) and error message.
3. Change the background color, width, height, and padding from the right panel.

1. Click on the CTA button (e.g., “Get My 10% Off”).
2. Modify the text by double-clicking.
3. Customize button actions from the right panel:
   • Submit Form & Close – No success screen, just closes after submission.
   • Go to Next Step (Success Screen) – Default option.
   • Close Pop-up – Closes the pop-up without submitting.
   • Link to Another Page – Redirects users to a URL.
4. Adjust font size, width, height, and background color.

1. Click on the “No Thanks” or close button.
2. Customize its appearance, text, and action.

1. On the left panel, you’ll find additional blocks:
   • Text
   • Buttons
   • Images
   • Countdown Timers (for urgency)
2. Drag and drop elements into the pop-up to customize it further.

1. The Block Toolbar allows you to move, duplicate, or delete a block within the editor for quick and easy customization.
2. Click on a block in the editor, and the toolbar will appear.

1. Click on the Success tab at the top of the editor.
2. Modify the thank-you text or any message displayed.
3. Customize font size, color, and alignment from the right panel.

1. Click on the Coupon Code block.
2. Select an existing coupon from the dropdown on the right panel.
3. Customize size, font, and color to fit the design.

1. Click on the button (e.g., “Continue Shopping”).
2. Modify its text, size, and color.
3. Change its action to either:
   • Close the pop-up
   • Redirect users to the shop page

Once you’ve customized both the Sign-up Screen and Success Screen,

1. Click “Save” to store your changes.
2. Click “Finish Editing” to apply the changes to your campaign.