分類： 入門

How to Exclude WooCommerce Products with Woo-Products Module?

Many times, you would want to display all the products. But, at the same time, you might want to exclude some particular products. You can do this using the Woo – Products module.

The Query Builder of the Woo – Products module allows you to either display All Products or filter them as per your requirements. You can exclude particular products from a particular list using options listed under the Query tab.

Below are the available options:

Exclude Product
Start typing the product name and select it manually to exclude from the product list.For Example- If available products are X, Y, and Z. Selecting All Products option will display X, Y, Z products. But if you wish to exclude Y product then type Y in the text box. It will exclude the Y product from the list and will display only X and Z.

Exclude Current Product
If you wish to exclude currently displaying product from all product list to avoid a duplicate appearance, use this option. Set the toggle to exclude current product.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 opt to Exclude the 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 be displayed

Styling Gravity Forms Radio Buttons and Checkboxes

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.

How to Set Multiple Column Fields in CF7 Styler Module?

We often need to set multiple form fields in columns, while designing a form. This is where we need to write some custom CSS code to design the form. With the Contact Form 7 Styler module, it is very easy to display fields in multiple columns by using predefined column classes listed below. You just need to add Custom CSS Class as required in the CF7 wrapper shortcode. Please take a look at the screenshots below.

You can add a class to the wrapper of the div as shown below.

One Column Display

uabb-cf7-col-1

Two Column Display

uabb-cf7-col-2

Three Column Display

uabb-cf7-col-3

Four Column Display

uabb-cf7-col-4

Five Column Display

uabb-cf7-col-5

Six Column Display

uabb-cf7-col-6

How to set Grid and Carousel layout for WooCommerce products?

The General tab in the Woo – Products Module allows you to select a layout and skin for your WooCommerce products.

Below are the available options:

Layout

Query Builder will allow you to choose products to be shown. And with the layout option, one can arrange them well.

1. Grid

This layout will display products in a 「rows and columns」 structure.WooCommerce products will display in the Grid layout.More options like a number of Columns and number of Products Per Page will be available under Grid Options. (?)Based on the Grid Options, you can set pagination style using the Pagination tab. You can set the Pagination Type and Alignment.

2. Carousel 

This layout will display products in a slider.More options will be available under Slider Options. (?)Choose Arrows and/or Dots for navigation.Select Total Product number, Products to Scroll at a time.Choose slide to Autoplay and to activate an Infinite Loop.Manage the Transition Speed.

Skin 

Skin is predefined style options for products. Choose a Classic or Modern style for the product. Both will display Add to Cart button, Sale Flash, and Quick View option at different positions.

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.

Styling Contact Form 7 Radio Buttons and Checkboxes

Have you ever felt the need to style radio buttons and checkboxes in your Contact Form? We have introduced Radio Button and Checkbox Styling options.

In order for them to work properly, you need to wrap each item with label element by checking the field as shown below.

This option has to be checked while creating both radio buttons and checkboxes.

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.

How to Add Custom Links to Photo Gallery images?

UABB』s photo gallery module allows you to add a number of images under a single module so that they can be displayed collectively and viewed together.

There are times when you may need to add a custom link for every image in the gallery.

You can do this by following the steps mentioned below.

1. Begin by adding an Image link in the Image detailsOpen your media library. Click on the image, and enter the link you wish to add as the image link.

2. Add the images in the gallery

3. Select Custom Link as the Click ActionScroll down in the General Settings of the Photo Gallery module.

Note: You will have to add a link to every image as done in Step 1.

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.

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.