User Interfaces

Landing Page

Figure 1.1 : Funnel Landing Page

The landing page is the first page of the site where the user interacts with. To be able to do this, you first have to set up the front page of the WordPress site. See how to change the WordPress front page. Choosing which tool to use for building the page is up to the user. for example Elementor, WP Bakery, etc. It is a necessity to add the variation ID and relevant product id you are promoting on the page to the front page meta description. see figure 1.2: Landing Page meta. Generally, this need to be applied to any product promo page created on the site.

Figure 1.2 Landing page Meta

Opt-in Form

Figure 1.3 : Opt-in Form Popup

It is necessary to use an opt-in form in order to collect email addresses from users. This can be a page, part of a page or maybe a popup integrated with the opt-in-form shortcode. This will integrate a small form to collect the email of the user and some additional details required to register the user to Earnware.

To integrate the form shown in figure 1.4, the following shortcode must be used. It is possible to override the form style by changing the theme style.

[opt_in_form]

Additionally, users are allowed to change the default redirection path of the user registration process by adding the following attribute to the shortcode. Default will be the checkout page of the product

[opt_in_form redirect_to="redirection path"]

and also the page type which is checked during each page submission by the funnel plugin. Default will be the checkout page. There are several predefined page type to use. see Enums

[opt_in_form page_type="page type"]

The attribute doesn't change the form's look, but it adds some hidden variables that will be needed for the next step.

Figure 1.4 : Shortcode HTML representation

Checkout Page

Figure 1.5 : Checkout Sample Page

Checkout page also can be a typical WP page integrated with the checkout form short code with different look and feels.Main checkout page can be divide into several sections. These section defer to the style use within the shortcode.

[checkout_page] , [checkout_form_v2] , [checkout_form_canada_v2] 

Item Options

The pricing schemes for the Main Item are presented to the user in a variety of ways.

Figure 1.6 : Item Options

The user has the option of defining these options in the back-end of system checkout page. Can be access by WP-admin > pages > checkout page you defined

Figure 1.7 : Item options setup

Static section : Contact Details, Shipping Details, Card Details

These are some static form segments to get user information

• Figure 1.8 Static Form Segments
• 

  User Contact Info

• 

  User Shipping Info

• 

  User Card Info

Order bumps

The dynamic order bump section is editable from the back-end.

Figure 1.9 : Order bump

Modification area built using custom fields plugin can be access by following wp-admin > pages > Checkout page.

Figure 2.0 : Order bump edit

Order Details area

As a final step, you will see the detailed summary of the order as well as the grantee option with the checkout button.

Figure 2.1 : Order Summary

In the user interface, the user is given the option to add grantees to a product that the client can choose from, and change the checkout button style and text in this area from the back-end.

• 2.2 Order Detail segment
• 

  Guarantee Edit Area

• 

  Checkout Button Edit Area