Woo Popup - Customizer
Default theme settings may differ if you have imported one of the OceanWP prebuilt website templates for WordPress. This is because these templates come with their own Customizer settings. However, the way you use the Customizer to adjust your website remains the same.
The OceanWP Customizer Woo Popup panel enables you to display and style a special popup that appears once a user adds a product to their cart. It is used to increase conversion and sales.
You can use the default Woo Popup content with a content builder, or a custom template.
Woo Popup is designed for the free WooCommerce eCommerce plugin.
Woo Popup is an OceanWP premium feature, available with the OceanWP Pro Bundle and Ocean eCommerce Pro.
Upgrade now to get access to this and many other features, premium full website templates, dedicated customer support and more.
The Woo Popup panel in the Customizer will appear when you install and activate this premium OceanWP extension.
Woo Popup requires AJAX to be enabled in order to function.
To enable AJAX on Woo archive pages, navigate to WP Dashboard, WooCommerce > Settings > Products > General, and check the option for Enable AJAX add to cart behavior on archives.
To enable AJAX on single products, you don't need any additional plugins because OceanWP already provides this feature for you.
Navigate to Customize > WooCommerce > Single Product, Single Product Add to Cart section, and Enable AJAX Add to Cart.
Available Woo Popup options include:
- Display Popup While Customizing,
- Default Popup Content section:
- Custom Popup Content section:
- Styling and Colors section:
- Width (px),
- Height (px),
- Padding (px),
- Border Radius (px),
- Colors:
Display Popup While Customizing
The Display Popup While Customizing option enables you to preview the popup live in the Customizer while styling and customizing it (instead of having to click the Add to Cart buttons to trigger it).
Content Builder
The Content Builder option enables you to choose which items you want to display, as well their order of display.
Available items include:
- Title,
- Content,
- Buttons (Continue Shopping, View Cart),
- Bottom Text.
Title Text
The Title Text option enables you to add a custom title for the popup, and is related to the Title item of the Content Builder.
Content
The Content option enables you to add custom content for the popup, and is related to the Content item of the Content Builder.
You can use regular text or shortcodes, especially OceanWP WooCommerce related shortcodes.
Continue Button Text
The Continue Button Text option enables you to add custom text for the Continue Shopping button, and is related to the Buttons item of the Content Builder.
Go Cart Button Text
The Go Cart Button Text option enables you to add custom text for the Go to Cart (View Cart) button, and is related to the Buttons item of the Content Builder.
Bottom Text
The Bottom Text option enables you to add custom text, and is related to the Bottom Text item of the Content Builder.
You can use regular text or shortcodes.
Custom Template Select
The Custom Template Select option enables you to choose a custom template you created via OceanWP > My Library, to replace the default Woo Popup content, ie. everything related to the Content Builder.
Width (px)
The Width (px) option enables you to adjust the width of the popup.
This option is always measured in pixels (px).
Height (px)
The Height (px) option enables you to adjust the height of the popup.
This option is always measured in pixels (px).
Padding (px)
The Padding (px) option enables you to add padding (spacing) surrounding the popup content.
This option is always measured in pixels (px).
Border Radius (px)
The Border Radius (px) option enables you to adjust the border radius (corner roundness) of the popup.
This option is always measured in pixels (px).
Popup Background
The Popup Background color option enables you to apply color to the popup background.
Background Overlay
The Background Overlay color option enables you to apply color to the website overlay which appears when the popup is displayed.
Check Mark Background
The Check Mark Background color option enables you to apply color to the background of the check mark animation.
Check Mark Icon
The Check Mark Icon color option enables you to apply color to the icon of the check mark animation.
Title
The Title color option enables you to apply color to the default popup title item.
Content
The Content color option enables you to apply color to the default popup content item.
Continue Button Background
The Continue Button Background color option enables you to apply regular and hover color to the Continue Shopping button background.
Continue Button Text
The Continue Button Text color option enables you to apply regular and hover color to the Continue Shopping button text.
Continue Button Border
The Continue Button Border color option enables you to apply regular and hover color to the Continue Shopping button border.
Cart Button Background
The Cart Button Background color option enables you to apply regular and hover color to the View Cart button background.
Cart Button Text
The Cart Button Text color option enables you to apply regular and hover color to the View Cart button text.
Cart Button Border
The Continue Button Border color option enables you to apply regular and hover color to the Continue Shopping button border.
Bottom Text
The Bottom Text color option enables you to apply color to the default popup bottom text item.
Found an error in this doc or believe it needs improvement?
Send us a prepurchase ticket, include the URL of the page, and add suggestions and more details about how we can make things better for you.
That's it!
Enjoy building your WordPress website with OceanWP!