Have you ever felt the need to style radio buttons and checkboxes in your Gravity Forms? We have introduced Radio Button and Checkbox Styling options.
Author 诗语
How to display exact WooCommerce product with Query Builder?
Many users would want to filter and showcase WooCommerce Products on their website. The Woo – Products Module provides an inbuilt Query Builder that allows you to either display All Products or filter them by applying Custom Query or even select each product Manually.
Below are the options available for product selection-
1. Custom Query > Products: This allows choosing exact products to display. You can manually choose products by entering product name.
Match these products – Select this option and start typing name for the products in the input field below. Only entered products will display.Match all products except – Select this option and start typing a name for the products in the input field below. All products will display excluding the products entered here.
2. Custom Query > Other options:This option allows filtering products depending on the Category, Tag or Author. Below are the available options –
Product categoriesProduct TagAuthors
Above all option have drop-down. Select a related option from the list and enter a name for the Category/Tag/ Author in the input field available below drop-down. A query will be formed on the basis of the option selected from the drop-down and name entered in the input field.
Note: Try different combinations with above settings to display exact products.
3. Filter
Filter By
Featured – Choosing this option will display WooCommerece Products from the above list that are set as featured. (?)Sale – Choosing this option will display WooCommerece Products from above list that are set for sale. (?)
Order, Order by
Choose an option from the drop-down menu to arrange products and the order you wish to display them in.
Offset
It is a number of products that should be excluded from the above Products or Custom Query list.For example – If you have 15 products and set offset to 5 then products from number 6th to 15th will be displayed. That means the first 5 products will be excluded and the rest 10 products will be displayed.
4. Exclude Current Product
If you wish to exclude currently displaying product from all product list to avoid a duplicate appearance, use this option.For Example – If available products are X, Y, Z and they come under same category A. If products from category A set to display on all single product page. Then while viewing X product, all products including X will be displayed at the bottom of the page. To avoid the duplicate appearance of X select to Exclude Current Product. So that only Y and Z will be displayed on X product page. Similarly, Y will be excluded from its single product page and X, Z will display.This option is useful when you design a template.
Where can I find Row Separator?
The Ultimate Addons for Beaver Builder comes with a set of Row Separators that you can use across your website.
Since, this is a feature that enhances row settings, you will find the Row Separator feature in Row Settings -> Effects tab.
Refer this screenshot –
To know more about how to use the Row Separator module effectively, please refer to this article.
How to enable Pagination for Advanced Posts module
Finding it difficult to find the Pagination even after enabling the Pagination under the Grid and Feeds layout.
Here』s what needs to be done to find the Pagination below the Grid Layout.
Step 1: Let』s say you have 30 number of posts and under the posts, you want to display the pagination. So you would need to set the Posts Count to 30 from the Query Tab of the module. Refer below image
Note: If you want to show all of your posts then you can use the select All option under the Number of Posts to Display and follow the below steps similar to the Custom option.
Step 2: Now under the Style tab of the Module if you would need to set Posts Per Page to 5. This would display 6 pagination Numbers below the Grid Layout of the Advanced Posts module.
Here』s a screenshot of how the Pagination would be displayed below the Posts.
So basically, how the pagination works is that it divides the total number of posts by posts per page and accordingly displays the pagination below the posts.
WP CLI Commands
Ultimate Addons for Beaver Builder v1.3 adds support for some WP-CLI command.
In case you have not heard of WP-CLI
WP-CLI is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs and much more, without using a web browser.
Activate your license of Ultimate Addons for Beaver Builder using WP-CLI
wp brainstormforce license activate uabb
Deactivate your license of Ultimate Addons for Beaver Builder using WP-CLI
wp brainstormforce license deactivate uabb
PS – In the commands above, don』t forget to replace with your actual purchase key.
BTW, Recently we contributed a WP-CLI command to Beaver Builder plugin core to clear its cache
wp beaver clearcache
This will clear the beaver builder cache on your site.
wp beaver clearcache --network
This will clear the beaver builder cache on all the WordPress multi sites.
Sticky Video
UABB』s Sticky Video feature allows sticking the video on page scroll. Your video will float along the left or right side of the browser window. So, as the reader scrolls the content both the video and your marketing messages will stay in focus.
To make the video sticky, enable it from Sticky Video tab.
For sticky video feature you get different alignments options for the video, Call to Action Bar and settings to control every part of the sticky video. Below are the key features –
Different alignments for sticky video across the edgesAdd a background for the video and manage its spacing and styleInfo bar to display the description for the videoResponsive supportClose button customizationsDrag sticky video across the window in the frontend
VIDEO SIZE
Specify the width of the Video in px. The video height and width will apply as per the Aspect Ratio set for the video. The aspect ratio for video can change from General > Video > Aspect Ratio.For example – If 16:9 ratio is set for video then the sticky video width and height will apply as per the selected ratio.
STICKY ALIGNMENT & SPACING
Sticky Alignment: Manage the position of the sticky video across the edges of the window. Below are the available positions –
Top Left Top Right Bottom Left Bottom Right Center Left Center Right
Spacing from Edges: You can manage the spacing around the video. This spacing will apply from the edges of the screen. Note: Spacing will depend on Sticky Alignment selected. For example – For Top Left alignment, only spacing will apply from the top and left edges of the video.
BACKGROUND SIZE & STYLE
You can add the background to the sticky video. Background size and color option will be available.
MANAGE STICKY VIDEO ON RESPONSIVE DEVICES
Under Sticky Video section, you get an option to Hide the Sticky Video on responsive devices. Here, you can select multiple devices on which you want to hide the sticky video.
CLOSE BUTTON
You can Enable/Disable the close button for the sticky video. Controls to manage the style of the close button are available.
INFO BAR
This option allows adding informative text under the sticky video. Here, you can display the description of the sticky video which provides information about the video currently playing on the page.
You can manage the color, background color, typography and padding to the Info bar. The text field supports the HTML content so, you can apply the custom style to the Info Bar content.
DRAGGABLE SUPPORT
The sticky video can be dragged anywhere on the screen using this feature. You can move the sticky video anywhere within the viewport by clicking and dragging it. The sticky video supports the draggable functionality by default.
Note: The drag functionality do not work in the backend editor of the Beaver Builder and on Mobile devices.
How to use Row Separator feature effectively?
A webpage is often made up of a number of rows and sections. Separating these rows and sections with a simple horizontal line is old fashioned. The Ultimate Addons for Beaver Builder has a row separator module that allows you to use artistic separators that separate one row from the other.
Here are a few Details you would want to know about this module.
How to use a Row Separator?
1. Add a New Page or open an existing one in the Page Builder.
2. Insert a row on the page.
3. Click on Row Settings
4. Go to the Effects tab in the Row Settings.
You will find around 14 Separator options for the Top and bottom.You can select the separator you wish to use for each.
5. Select the Type of Row Separator you wish to insert
You can then…
Set width in percentage and size in pixelsSet the Size for Medium-sized devices and small-sized devicesSelect a background color for the same
6. Save Settings
Overlay Effect in Advanced Menu
Have you ever wanted to use the Overlay effect for Advanced Menu on your website? The Ultimate Addons for Beaver Builder has introduced this feature in version 1.6.0.
You can use this feature by following the steps mentioned below.
Step 1:
Open the Advanced Menu Settings and select the menu that you had created in Dashboard > Appearance > Menu
Step 2:
Select Responsive Toggle in the Responsive Tab.Hamburger Icon: Hamburger icon will be shown.Hamburger Icon + Label: Hamburger icon will be shown followed by a user entered label.Menu Button: A label entered by user will be shownNone: No Toggle button will be shown.
Step 3:
Select Responsive Layout > Overlay in the Responsive Tab.
Step 4:
Select Effects for the Overlay Menu.
Step 5:
Enter Animation Speed for the Effect selected in step 4.
Step 6:
Select appropriate Responsive BreakpointsDisplay on All Devices: Show Overlay effect on all devices i.e desktop, tablet, and mobile devices.Display on Medium and Small Devices Only: Show Overlay effect only in tablet and mobile devices.Display on Small Devices Only: Show Overlay effect only on mobile devices.Enter Custom Breakpoint: Select Custom to enter a custom breakpoint.
How to Set Featured Products in WooCommerce?
Featured Product option allows highlighting specific products that can be promoted easily on site. A flash bubble can be set for a featured product with UABB Woo Products Module.
A product can be set as featured by three methods-
1. From WordPress backend, navigate to Products > All Products and select the Star in the featured column. Make sure to enable Featured option from Screen Options.
2. From a WordPress backend, navigate to Products > All Products and Quick Edit the product. Tick the checkbox for featured.
3. From a WordPress backend, navigate to Products > All Products and Edit the product. In the right sidebar, search for the Catalog visibility option and Edit it. Tick the checkbox for This is a featured product.
How to Upgrade a Product License from 1 year to Lifetime?
We give you several license options you can opt for while buying a product. In case you wish to upgrade a plan in the near future, you can do so easily.
If you have purchased a product with an annual package, i.e. a 1 year license, and wish to upgrade it to a lifetime license, you will have to follow the steps mentioned below.
1. Login to your account and open the following page.
https://store.brainstormforce.com/purchase-history
2. You will then find the 「View Licenses」 link. Click on it.
3. Click on the 「View Upgrades」 link.
Note: You』ll be able to see this link only if you have purchased a 1 year license.
4. Click on 「Upgrade License」
5. You will then be redirected to the checkout page. Make necessary payments and complete your purchase.