WooCommerce Single: Product Related (Pro)

WooCommerce Single: Product Related (Pro)

Insert and set the style for Related Products in WooCommerce Single template

Content

Related Products

Products Per Page: Set the exact amount of related products to be displayedColumns: Set how many columns will be displayed, from 1 to 12, for each device (Desktop, Tablet, Mobile)Order By: Set the order in which the products will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu OrderOrder: Select ASC or DESC (ascending or descending) order

Style

Columns Gap: Set the exact gap between the columnsRows Gap: Set the exact gap between the rowsAlignment: Align the related products data to the left, right, or center

Image

Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the related product imagesColor: Choose the border colorBorder Radius: Set the radius to control corner roundness of the borderSpacing: Adjust the amount of space between the images and their data

Title

Color: Choose the related product Title colorTypography: Set the typography options for the Title textSpacing: Adjust the amount of space after the Title

Rating

Star Color: Choose the color of a filled starEmpty Star Color: Choose the color of an empty starStar Size: Set the size of starsSpacing: Adjust the amount of space after the Rating Stars

Price

Color: Choose the color of the related product PriceTypography: Set the typography options for the related product Price

Regular price

Color: Choose the color of the related product』s Regular PriceTypography: Set the typography options for the related product』s Regular Price

Button

Normal | Hover

The following options can be set independently for both the normal and hover states.

Text Color: Choose the color of the related product』s Button TextBackground Color: Choose the background color of the related product』s ButtonBorder Color: Choose the border color of the related product』s Button

Typography: Set the typography options for the related product』s Button TextBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the related product』s ButtonBorder Radius: Control corner roundness of the button』s borderText Padding: Set the padding within the buttonSpacing: Adjust the amount of space above the buttons

View Cart

Color: Choose the color of the View Cart text under the buttonsTypography: Set the typography options for the View Cart text

Heading

Heading: Show or Hide the Related Products headingColor: Choose the color of the related products heading textTypography: Set the typography options for the heading textText Align: Align the related products Heading to the left, right, or centerSpacing: Adjust the amount of space after the Heading

Box

Border Width: Control the thickness of the border around the related product』s boxBorder Radius: Control corner roundness of the related products boxPadding: Change the padding within the related products box

Normal | Hover

The following options can be set independently for both the normal and hover states.

Box Shadow: Adjust box shadow optionsBackground Color: Choose the background color of the related products boxBorder Color: Choose the border color of the related products box

Sale Flash

Sale Flash: Show or HideText Color: Choose the color of the Sale Flash textBackground Color: Choose the background color of the Sale FlashTypography: Set the typography options for the Sale Flash textBorder Radius: Control the corner roundness of the Sale FlashWidth: Control the thickness of the border for the Sale FlashHeight: Set the height of the Sale FlashPosition: Set the position of the Sale Flash, Left or Right, of the related products boxDistance: Set the distance of the Sale Flash from the top of the related products box

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme』s settings.

Form Background

Form Background

You can style the Normal and Hover state of the form background.

Background Type – Choose between Classic and GradientColor – Set the colorImage – Upload a background imagePosition – Position options for the background imageAttachment – Choose between scroll or fixedRepeat – Set the image repeat propertySize – Set the size of the image background

Learn more about the Form Widget (Pro)

Form Border

Form Border

You can style the Normal and Hover state of the form border.

Border Type – Choose between different border stylesWidth – Set the width of the form borderColor – Set the color of the form borderBorder Radius – Set the radius of the borderBox Shadow – Set a shadow for the form 

Learn more about the Form Widget (Pro)

Popups: Fly-Ins

Popups: Fly-Ins

Fly-in popups are effective because they draw a user』s attention, but are relatively unobtrusive. The user』s experience isn』t completely disrupted, and yet the user knows that something of possible interest is available. For this example, we』ll wait for the user to reach the end of an article, and then we』ll popup an alert in the lower right corner that encourages her to read another article. We』ll show the popup on Desktops and Tablets, but not on Mobile devices.

Create Popup

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』Choose a template from the Library or create your own design

Popup Settings

Settings

Set a custom width and heightSet the Horizontal position to Center and the Vertical position to Center.Hide OverlayShow Close ButtonSet Entrance Animation to Slide In Up

Style

Change text, background image, border, and styling as needed.

Adjust Section Content

Change content as needed. We used a Headline widget and a Posts widget to show one post from a category of our choice.

Publish Settings

Conditions: Include: Singular > All Singular

Triggers: On Scroll, Down, at 80%

Advanced Rules: Show only on Desktop and Tablet devices.

Help Button

Help Button

A Help Button is located near the bottom of each widget panel. Clicking on the Help Button will open a new browser tab and will display the Elementor documentation for the current widget being used.

For example, clicking on the Help Button on the Heading widget』s editor panel will open a new tab that loads the Heading widget』s documentation.

What is Elementor 2.0

What is Elementor 2.0

Elementor 2.0 is the next generation of our plugin. We wrote about it in this blog post: 

https://elementor.com/upcoming-elementor-v2/

Elementor 2.0 will enable you to edit more than just content. Headers, footers, single post pages, archive pages, 404 pages, search result pages and more.

It will also have full compatibility with Advanced Custom Fields (ACF), so you can use ACF data anywhere using Elementor.