Woo – Products Module

Woo – Products Module

UABB provides a powerful Woo – Products module to showcase WooCommerce products on any page. It is the most flexible module that allows you to display WooCommerce products in grid and carousel layout. We have added stylish skin options to enhance the layout design and we will be adding more in future.

The Woo – Products module of UABB has an inbuilt Query Builder that allows you to filter and show the exact range of products.

See the stunning layouts for Woo – Products on the demo page.

Below are the options available with the module –

General (Grid and Carousel layout)This option includes Grid and Carousel layout options. Classic or Modern Skin options add more style to the product layout. See how to set the layout.

QueryAn efficient inbuilt Query Builder provides all necessary filter options that allow displaying exact products. See how to use the query builder.

LayoutAllows managing Columns Gap and Image Hover Style. You can also control the display of product content like Product Category, Title, Ratings, Price, Short Description, Add to Cart Button. (?)

Quick ViewA quick view option shows the product details like title, description, price etc. in a popup/lightbox. (?)

Sale FlashAllows you to display/hide a sale bubble with a product. You can also enter Custom Flash String if required. (?)

Featured FlashProducts that are set as featured will be displayed with a flash bubble. Default string will be 『New』. You can enter Custom Flash Content if required. (?)

Note:1. This module will be visible only if you have the WooCommerce plugin installed and activated on your website.2. If the module is not visible in the UABB module list, then check if it is enabled from UABB settings. (?)

Introducing User Registration Form Module!

Introducing User Registration Form Module!

The User Registration Form module of Ultimate Addons for Beaver Builder helps you to create and design the perfect user registration forms on your website. You also have the option of redirecting the user to Custom URL, auto-login, and sending an email after successful registration using this module.

Here are the key features of the User Registration Form module –

Option to Register only with the Email fieldForm Fields – Username, First Name, Last Name, Email, Password, Confirm PasswordAlso provides Anti-Spam protection using Honeypot and reCAPTCHA featureSubmit Button customizationsInput field width option for all form fieldsOption to Hide/Show the Label fieldsSet the New User Role for User Registration Form moduleRedirect the user to a specific URL after a successful registrationAuto-Login or Send Email option after a successful registrationProvides Lost Your Password & Login Page optionsProvides Password Strength Checker optionSuccess / Error message customizations

Below are the settings available for the User Registration Form module –

Form Fields

The first tab which is the General tab of the User Registration Form module will provide you with the options to choose the User Registration Form fields. Here only by providing the Email field, you can register users to your site if required.

Other than the Email field you have the options to add Username, First Name, Last Name, Password, and Confirm Password to your Registration Form.

Another important feature we provide is the Honeypot form field, this provides an added level of security to your user registration forms from the spammers and bots. Just add the Honeypot form field and it is done. Simple, right?

You will also be able to set a size for the Form fields from extra small to extra large based on your requirements. And you will find the Required Mark option which can be enabled to add asterisk mark from here to the labels on the form.

After Register Actions

Under the General Tab, you will see After Register Actions section under which you will find various after Registration options like Redirect, Auto-Login, Send Email –

Following are the above-mentioned options with a detailed description –

Redirect After Register: After the user enters his/her details for registration he/she can be redirected to a custom URL.

Auto-Login: On Enabling this option the user after successful registration will be automatically logged in to the site without requiring to log in again.

Send Email: On enabling this option the User after Successful registration can be sent an Email about their registration on your website.

General Settings

You will find the options to display the fields below the form like – Lost your Password, Login, Password Strength Checker and options to disable all the label fields at once.

Also, the option to set the New User Role or by default it would assign the User role as per the WordPress backend setting.

Register Button

Under the Register Button tab, you will be able to Customize the Register Button as per your requirements. You can edit the text of the Register Button, set the Size, Alignment, Width and also add an Icon with its positioning before and after the text along with the Icon Spacing between the text.

Success and Error Messages

You have the option to change the Success and Error Messages under the General Tab > Success / Error Messages section –

Style the User Registration Form

Under the Style tab, we have different sections like –

Form Style section: You can set the Background type like Color, Gradient or None by default. Manage the Padding, Border, Columns Gap, Rows Gap, etc. of the Form.

Input Style section: From here you can manage the Padding, Background color, Border, and Border Active Color.

Validation section: Set the Color, Border styling, and Padding for the Success Field Validation and Error Field Validation.

Getting Started with the Ultimate Addons for Beaver Builder

Getting Started with the Ultimate Addons for Beaver Builder

An Overview:

The Ultimate Addons for Beaver Builder is an addon built to enhance your experience of working with the easiest page builder, Beaver Builder. With over 60+ advanced and creative modules and 200+ page and section templates, UABB with Beaver Builder is all you』ll need to build websites in minutes.

Let us take a quick tour through the plugin

1. To begin with: Let』s Install the Plugin

Installing the plugin is a matter of minutes! You can install the Ultimate Addons for Beaver Builder like any other plugin on your WordPress website. Purchase the plugin, download it from our store and install it through the plugins page. You can refer to the document here to know more.

Note: Make sure you at least have the Beaver Builder Lite version or Pro version to use the Ultimate Addons for Beaver Builder.

2. Let us now activate the license…

License activation is an important step so that you do not miss out on the privileges you deserve after buying a licensed copy of our plugin. In order to register your copy and activate the license of UABB you will have to follow a couple of easy steps. You can refer to the document here to know more.

3. Begin working with Templates…

The Ultimate Addons for Beaver Builder comes with over 200+ well designed templates that make building websites fun and easy. To use Sections and Page Templates, you need to install them first from the Template Cloud settings. Here is an article from our knowledge base that will help you know more. You can also refer to the set of articles here to know more about working with templates.

4. Building your First Page with UABB…

The Ultimate Addon for Beaver Builder is built to suit and match the interface and environment that Beaver Builder has. Therefore, you can simply drag and drop modules seen under Add Content -> UABB Modules, and proceed with the settings. Here is an article that will help you build a page with Beaver Builder and the Ultimate Addons for Beaver Builder.

Now, that you』ve succeeded in building a page, go on and build an entire website; Yes, in minutes!

Few other things we think you should know:

You can upgrade your license from an annual one to a Lifetime

(If you have a 1 year license now)Sure. If you choose to upgrade to lifetime license, it only costs the difference you already paid. Please see more details here.

UABB offers Global Settings

The Ultimate Addons for Beaver Builder lets you set some Global settings that can be applied to a particular module throughout the site. To know more about the global settings, you can refer to the article here.

You can disable unwanted modules

We understand the pain of piling up everything, although you might use only a few. Therefore, we let you disable the modules you do not wish to use on a site. This in turn reduces the server requests. You can enable these modules again when required. To know more about enabling / disabling modules, you can refer to the article here.

Row separators can be found in Row Settings

Unlike other modules, Row Separator settings are found when you edit a row. Learn how to use this module here.

We have articles that will help

You』ll find a number of articles published in various categories that promise to help and guide you while working with the Ultimate Addons for Beaver Builder. You』ll find them here.

Finally, we take pride in offering world class support.

Go ahead and create your website. May it be as awesome as you are!

Introducing – FAQ Module for Beaver Builder!

Introducing – FAQ Module for Beaver Builder!

Did you ever have a requirement where you need to add FAQs to your website? The FAQ module will now allow you to create FAQ pages or add FAQs with little to no effort and in turn, increase your click-through-rates.

Before getting into detailed information, let』s take a quick look at the key features of the module –

Quick and Easy SetupLayout options from Grid / Accordion (default)Display custom Content in the moduleOverall Customization optionsSelective Schema insertionSchema Integration as per latest Google Guidelines

Now, let』s see how you add a FAQ module and create FAQ pages with ease and also see all the key features of the module in the process –

Start with dragging-n-dropping into the Beaver Builder editorEdit or remove the default Strings as per your requirement to the Title and ContentStyle the FAQ as per your website style layoutEnable SchemaReview and verify the page on Google Structured Data Testing ToolAnd that』s it.

How to Select the Layout Options?

Navigate to the General tab > Settings > Layout to Select the Layout Options.

Here you will be able to choose from the Layout options like – Grid / Accordion ( Default )

You can also choose the Grid layout and select the Columns to be displayed.

How to Enable Schema for the FAQ Module?

Navigate to the General tab > Schema > Enable Schema Markup and choose Yes.

This will insert Schema Integration to your page.

How to Verify the FAQ Schema Added to Your Page?

Google provides a Structured Data Testing Tool. Visit this link – Tool Link.

There you will find two options to test your Structured Data containing Schema –

You can either copy your page URL and add it in the Page URL section or copy your page』s source by pressing ( CTRL + U ) and Paste it in the Code Snippet section. And press Run Test button below it.

On the next page, you will see detected Schema results – where you will need to find the FAQPage schema. If there are no errors or Warnings, your page is ready for Rich Search results to be displayed for Google.

Click on the FAQPage schema and you will find the Question and Answers you have provided in the respective Name and Text fields of the Schema Markup.

How to Preview the FAQ Schema Added to Your Page?

Google provides another tool called a Rich Results Test tool. Visit this link for the tool.

Even here you will find two options to test your page』s Rich Results for they would display on Google Search.

You can either copy your page URL and paste it in the URL section or copy your page』s source by pressing ( CTRL + U ) and Paste it in the Code section. And press Run Test URL/Test Code button below it.

The following option – 「Googlebot smartphone/Googlebot Desktop」 is just beside the Test URL/Test Code button, you will have the option to preview in 「Smartphone/Desktop」, you do not require to change here anything. But you can preview your Rich Result in Desktop view too.

Next, you will see a page that says, Page is eligible for rich results. Click on Preview Results and you will see an example of how your FAQs can be viewed on Google Search Results.

Go ahead and try out the FAQ module on your FAQ page, and make them eligible for Google Search easily,

How to Create a Facebook App ID for Login Form Module?

How to Create a Facebook App ID for Login Form Module?

Social Login also has the option of Facebook login allowing your users to login with their Facebook Account easily.

Here are the steps the user will need to follow to generate Facebook』s App ID for the Social Login of the Login Form module –

Visit the Facebook Developers page and log in if you aren』t logged into Facebook. Make sure you are not logged in using your Business Account.

If you have already created a Facebook App before, skip to Step 2: How to Create an App for Facebook App ID.

Note: From version 1.24.2, you will need to copy the App Secret and paste it in the Social Login Settings in the backend. Step 3: How to get the App Secret ID?It is necessary for the App ID and App Secret for the Facebook Login to be visible on fronent

Step 1: Setup your Facebook Developer Account

If you are a new user and never registered to the Facebook Developer console, click on the Getting Started Button on the top left corner.You will see a Welcome Screen modal-popup to Facebook for Developers. Now clicking on Next will Create a Facebook Account for Developers.You must select Developer and you are done. Now, click on the Create First App.

Step 2: How to Create an App for Facebook App ID?

Open the My Apps menu button on the top-right corner, and select the Create App option.A Popup will open, enter a Display Name to identify the App ID. Now click on the Create App ID on the modal right corner.You will be redirected to Add a Product page, choose the Facebook Login by clicking on Set Up.Select WWW as the Platform for this App.On the next screen, enter the Site URL where you will be using the App ID and click on Save. Also, make sure your site has an HTTPS protocol for the App ID to work as expected. i.e. the site URL should have an https at the beginning.Now go to Settings > Basic below the Dashboard in the left sidebar. Here you will find the App ID which needs to be copied and pasted in the backend of the Social Login.And under the Product section in the left sidebar, choose Facebook Login product and click on Settings which will open the Client OAuth Settings.Here you will need to enter the Valid OAuth redirect URIs which will be the same you have entered in the backend.And you are done.

Step 3: How to get the App Secret ID?

You can find this setting – On the App ID screen( Facebook Developers Console page > Settings > Basic ).

The App Secret ID is encrypted and you will see it like this – *********

Click on the Show option on the same field and you will be asked to log in to see the App Secret Key.

You will need to paste the App Secret in the UABB Backend – Social Login Settings tab – Social Login > Facebook > App Secret and Save the Changes.

If you want to add the Google Social Login, visit the following link on How to Create a Google Client ID for Login Form Widget?

Translating Ultimate Addon for Beaver Builder with GlotPress

Translating Ultimate Addon for Beaver Builder with GlotPress

Ultimate Addon for Beaver Builder is translation ready out of the box. This means that all the strings in the plugin can be translated to your language very easily. In this article, let』s explore how you can get it in your own language.

Contributing your Localization through GlotPress

We maintain our translations on a GlotPress project. If you want to contribute translations to your language, just register for an account on the same GlotPress project and start contributing to the translations.

When any language is more than 90% translated we add that language to the plugin so that it is available to all the users. But if your language is not 90%  translated, you can still download the language manually and start using it, We encourage everyone to contribute translations so that all the users will benefit from it.

Downloading translations manually

Head over to https://translate.brainstormforce.com/glotpress/projects/bb-ultimate-addon/ and look for your language in the list.

Now scroll down on the page where you will see the options to export the translations

Select the format to be 『Machine Message Object Catalog  .mo』 and then select export.

Make sure the name of the exported file is  for example, Great Britain English should be en_GB.mo

Upload the file on your server

The file that you just downloaded should be uploaded in – /wp-content/languages/plugins/bb-ultimate-addon/

Notes –

The language of your WordPress installation should be the same as you want for our plugin. To change the language of WordPress, go to – Dashboard > Settings > General.The file should have a correct name so WordPress can read it. You may refer this article for more information.

Translating UABB using Loco Translate

Translating UABB using Loco Translate

Loco Translate is a great WordPress plugin that makes translating any WordPress plugin or theme very easy by allowing you to edit translations in your WordPress dashboard.

Step 1: After you have installed and activated Loco Translate on your site, Go to Loco translate -> Plugins and select Ultimate Addons for Beaver Builder

Step 2: Click 『New Language』 to select your language

Click New Language to select your language

Step 3: Select your language in WordPress Language dropdown, Select system directory to store the translation files. The files stored in the system directory are not lost after plugin updates.

Options to be selected in loco translate

Step 4: Now click on any string you want to translate to your language, Add your translation in the text field. When you are done with adding your translations, just click save.

Add translations and save them

Note –

Make sure you have changed your WordPress language to the language you want to use.

Also worth Checking –

Translate UABB using Poedit.Translating UABB using Glotpress – The official methodBasics of Glotpress

DIY Troubleshooting

DIY Troubleshooting

Are you unable to edit modules or see that changed values are not being saved? Try the following method.

You will need to temporarily deactivate all plugins for few minutes except UABB and Beaver Builder. Then, activate them one by one, until the problem returns. This will help you understand which plugin is causing the problem.

Here』s a brief video of how you can debug this issue –

If you find out that our plugin is causing this issue, you can surely open a support ticket so that we can look into the issue and resolve it at the earliest.

While if you have any further questions, you can Get in touch. We will be happy to help!

How to Create a User Registration Form using Beaver Builder?

How to Create a User Registration Form using Beaver Builder?

Looking to create a user registration form using Beaver Builder?

Well, we have the easiest solution for you. User Registration Form module of Ultimate Addons for Beaver Builder allows creating such forms with ease and convenience.

Let』s see how you can create and add a user registration form for your website in three simple steps –

Note: Make sure you have the Membership option enabled under the WordPress General Settings under Dashboard -> Settings -> General -> Membership. This would allow any user to register on your website.

Also, below the same option you need to set the New User Default Role, this role will be set for the new user when he/she registers on your website.

Let』s say you have a Membership site, and you require the user to register on your website and to have a default User Role as Subscriber.

So here you will have to set a default User Role, this role will be set for the user when he/she registers on your website.

To know more about all the User Roles the WordPress provides, refer to the following article.

Now, let』s see the steps –

Step 1: Create a User Registration Form Using the Module

To create a user registration form, make sure you have the UABB plugin updated to version 1.22.0 and the module is activated.

Next, create or add a New Page and edit the page where you want to add the User Registration Form module.

Now, drag and drop the module, and you will see the default Form Fields.

You can either remove or add other fields like Username, First Name, Last Name, and Confirm Password.

On individual edit form field, you have the option to manage the Required, change the field type, edit the Label, Placeholder, Enable Required and Input Width option.

Other than that, you will be able to add or remove the Label of the field.

Step 2: Configure Your Form Settings

To configure, visit the General Settings section, here you will be able to do the following –

New User RoleChoose After Registration Actions

Let』s see this section in detail –

New User Role

Let』s say you have a Membership site, and you require the user registering on your website to have a default User Role as Subscriber.

So here you can set a default User Role, this role will be set for the user when he/she registers on your website.

To know more about all the User Roles the WordPress provides, refer to the following article.

Choose After Registration Actions

We provide the following Actions which can be performed after the User registers using the Registration Form module –

Redirect After RegisterHide After RegisterAuto LoginSend Email

Let』s see them in detail –

Redirect After Register: Using this option you can redirect the user after successful registration to a Thank You page or a login page. You can paste the required Page URL in the URL field under this option.

Hide After Register: Sometimes you might require hiding the registration form after the user has successfully registered. This option will hide the Registration Form and display the Successful message and provide a link to visit the login page for logging in to the respective website. You can find the option in the General settings section.

Auto Login: This option will get the user to logged in to your website automatically after registration. The user will not require to login after registration as he will be directly logged into the website after the successful registration.

Send Email: This option will send an email to the User with a message that he/she has been successfully registered to your website. You can customize the email content under the Email section.

You can also use this feature and use a single Email Form field to register a user. Refer to this article on How to Create a Registration Form with Only Email Field in Beaver Builder?

Further, you can Style the user registration form from the Style tab of the module, you can refer to this article to help you Style and understand the options for the form styling.

This completes the creation and configuration process for the User Registration Form module. Now the form is ready to be used on the Live Website.

Step 3: Add the User Registration Form to Your Website

Just like any other Beaver Builder module, you can directly drag and drop to add this module. Or you can save the section containing the module and fetch the Saved Module, Saved Row on the required registration page.

Here are a few more ways as mentioned in this article to help add this or any other module in the Beaver Builder editor.

Example: User Registration Form on a WooCommerce Page

Let』s say for example we want to create a custom WooCommerce – My Account Page. Let』s name the page as Custom Account Page –

Now, click on the Launch Beaver Builder button, and you will be taken to the Beaver Builder editor.

Using the above-mentioned steps we can create a similar Registration Form and Save the same which we will be using on the Custom Account Page.

You can style and design or modify the form completely as per your requirement.

Lastly, to set the page as My Account Page visit the WordPress Dashboard and under – WooCommerce > Settings > Advanced > Page Setup > My Account Page select the My Account Page as – Custom Account Page

This would display the page containing UABB』s User Registration Form module on the WooCommerce Account page.

Conclusion:

There you go, you are now ready to register users using the Registration Form module of UABB! You can create a stylish Registration Form for your website using Beaver Builder and UABB.

Go ahead and visit your Beaver Builder editor to create a stylish Registration Form for your new users.

Introducing the How-to Schema Module for Beaver Builder!

Introducing the How-to Schema Module for Beaver Builder!

UABB brings a new module which now allows creating How-to pages or articles. And on top of it, you will have Schema Markup added to the page, without a single line of code.

Let』s see how you create How-to Pages using the module.

Before diving in, let』s take a quick look at all the features –

Automatic Schema Integration as per latest Google GuidelinesQuick and Easy SetupHelp with Default textsOverall Customization options

Let』s see the key features in details –

Quick and Easy Setup

So to get started, you will just need to drag-n-drop the How-to module in the Beaver Builder editor.

The How-to module can basically be used on How-to pages which contains a How-to in their title and contains steps to achieve certain requirements.

It is required to have How-to in the Title of the Page and contain steps. Other than that a How-to page can have Section Step Title, Estimated Cost, Duration to complete the task.

Also, you can add relevant images to each of the steps so that they display those Images in the Google Rich Snippets once ranked accordingly.

Overall Customization Options

Just like every UABB module has every feature which can be customized as per your requirement.

Even in the How-to module, you will be able to customize every part of the content added from the module.

You will find all the styling options under the Style tab of the module –

Box Style section: From here you can manage the Alignment, Background Color, Padding, and Border

Title section: The Title section will allow changing the color and managing the margin-bottom.

Description section: This section allows changing the Description』s color and manage the margin-bottom.

Image section: This section can set alignment, width, padding and add Border to the Images of the Image.

Steps section: This section has Section Title Color and Margin option as well as the Image Width for the Images added to the individual Steps.

Automatic Schema Integration

The module helps to automatically integrate Schema from the required fields of the module and in turn, increase the Click-Through Rate(CTR) of your page on Google Search Results.

Let』s say if you don』t have your website at the top of Google Search Results, and your competitor』s website result is on the top spot. While if you are at the number three spot, so with schema-enhanced rich snippets will attract more attention and, in turn, might lead to higher CTR.

We have made sure every field is mapped using the Google Preferred JSON-LD schema markup so that you do not have to write a single line of code to integrate schema on your How-to Page.

According to the Schema.org, there are two fields which are required for the How-to Schema type. They are Title and Steps.

Google has laid down some content guidelines on where and where not to use this Schema Type.

One more important thing to note for the How-to Schema is that – the Rich Results on Google will only be displayed on mobile devices and not on the desktop.

Here』s the list of Properties we are providing in our module –

NameDescriptionImageEstimated CostEstimated TimeSupply ToolsSteps

You can also take a look at the fields that we have mapped with the properties. Here are the definitions of the How-to fields.

Also, you can test the Schema after addition on your page using the Rich Results Test Tool provided by Google.