Author 诗语

WooCommerce Single: Upsell (Pro)

Set the Upsell Products style in WooCommerce Single template. Make sure to set the Product Upsells in your Product pages > Linked Products > Upsells. This is where the Upsells widget gets the information from.

Content

Upsells

Columns: 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 upsells will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu OrderOrder: Select ASC or DESC (ascending or descending) order

Style

Products

Columns Gap: Set the exact gap between the upsell products columnsRows Gap: Set the exact gap between the upsell products rowsAlignment: Align the upsells 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 upsell 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 color of the upsell product titleTypography: Set the typography options for the upsell product titleSpacing: Adjust the amount of space after the upsell product 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 upsell product PriceTypography: Set the typography options for the upsell product Price

Regular price

Color: Choose the color of the upsell product』s Regular PriceTypography: Set the typography options for the upsell 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 upsell product』s Button TextBackground Color: Choose the background color of the upsell product』s ButtonBorder Color: Choose the border color of the upsell product』s ButtonTypography: Set the typography options for the upsell 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 upsell 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 upsell products heading

Box

Border Width: Control the thickness of the border around the upsell product』s boxBorder Radius: Control corner roundness of the upsell products boxPadding: Change the padding within the upsell 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 upsell products boxBorder Color: Choose the border color of the upsell 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 upsell products boxDistance: Set the distance of the Sale Flash from the top of the upsell 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.

How to Use Caldera Forms on Elementor

This guide explains how to add a contact form to your WordPress site using Caldera Forms and Elementor Website Builder, using the image below as the example.

Create the Contact Form Using Caldera Forms

After you』ve installed Caldera Forms plugin, create a new form within its interface, with four fields, First Name, Last Name, Email Address, and Comments/Questions. You can also integrate the form with MailChimp using Caldera』s add-in to Mailchimp. Caldera offers mailing list add-ons to services like MailChimp, Aweber, and ConverKit. To connect to Mailchimp, add the API key, choose the list, connect its fields to my form』s fields, and that』s it. From the Caldera Forms dashboard, copy the shortcode of the form you just created.

Add the section on your page where the Caldera Form will be placed

In the Elementor editor, add a two column section where the form will be placed. The first column will include the main heading and subheading on the left, and the right column will include the contact form on the right. 

Drag and Drop the Shortcode Widget

Now drag the  Shortcode Widget into the right column that you created above, and paste the shortcode of the Caldera Form that you created in the widget』s options.

Share Usage Data

Thanks for using Elementor. We give you the power to make a difference and help us improve our plugin. This page explains about our usage data tracking, what information we collect, and why.

As you have probably already noticed, we keep making Elementor better, adding new features and improving and building upon the current features. To do that, we try to learn from our users what works, what doesn』t, what can be optimized and what needs to be tossed aside. This information helps us understand how you are using Elementor, and in what areas we could improve it. 

Information We Collect

This is the information that is sent to us:

Server software & versionMySQL versionPHP settings & versionWordPress versionWordPress debug modeWordPress memory limitWordPress max upload sizeWordPress settings (permalink structure, multisite, language, theme, plugins)Site URLAdmin EmailElementor plugin usage data

Even if you have already agreed to share this information with us, you can always choose to opt-out by going to Dashboard >  Elementor > Settings and unchecking 『Usage Data Tracking』

Your Privacy First

We take your privacy extremely seriously, and we never put any data to misuse.

For more information see our Privacy Policy

WooCommerce Single: Product Data Tabs (Pro)

Control the product Data Tabs style in the WooCommerce Single template

Style

Tabs

Normal | Active

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

Text Color: Choose the color of the Tabs textBackground Color: Choose the background color of the Tabs textBorder Color: Choose the border color of the Tab

Typography: Set the typography options for the Tabs textBorder Radius: Set the border radius to control corner roundness

Panel

Text Color: Choose the color of the Panel textTypography: Set the typography options for the Panel text

Heading

Text Color: Choose the color of the Heading textTypography: Set the typography options for the Heading textBorder Width: Control the thickness of the Panel borderBorder Radius: Set the border radius to control corner roundness of the panelBox Shadow: Adjust box shadow options

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.

Post Info Widget

The Post Info widget is a Theme Element. It is one of the available Single Post Template widgets that is used to dynamically display the current post』s meta data, such as author, date, time, and comments.

Content

Meta Data

Layout: Choose to display the post info items vertically or horizontally.

The next options are displayed as a list of all the available meta data. You can drag and drop them to change their order. Click on the Add Item button to add a custom post info meta item to the list.

Tip: Quickly duplicate or delete items by clicking an item』s Duplicate or Delete icon. 

By clicking on each item you can customize its content and settings, which are:

Author

Type: Change the type of item from Author to Date, Time, Comments, Terms, or CustomBefore: Enter text to be displayed before the AuthorAvatar: Set to YES to display the Author』s avatar next to the Author』s nameLink: Set to YES to link to the Author』s archiveIcon: Select None or select Default to display the default icon, or choose Custom to select a Font Awesome icon

Date

Type: Change the type of item from Date to Author, Time, Comments, Terms, or CustomDate Format: Select from several date formats, or choose Custom to format your ownBefore: Enter text to be displayed before the DateLink: Set to YES to link to that Date』s archiveIcon:  Select None or select Default to display the default icon, or choose Custom to select a Font Awesome icon

Time

Type: Change the type of item from Time to Author, Date, Comments, Terms, or CustomTime Format: Select from several time formats, or choose Custom to format your ownBefore: Enter text to be displayed before the TimeIcon: Select None or select Default to display the default icon, or choose Custom to select a Font Awesome icon

Comments

Type: Change the type of item from Comments to Author, Date, Time, Terms, or CustomBefore: Enter text to be displayed before the CommentsCustom Format: Set to YES to change the phrasing for No Comments, One Comment, etc.Link: Set to YES to link to the comment form for the current postIcon: Select None or select Default to display the default icon, or choose Custom to select a Font Awesome icon

Style

List

Space Between: Adjust the space between each post info itemAlignment: Align the list of post info items left, center, or rightDivider: Set ON to add a divider line between each post info item.

If Divider is set to ON, the following options become available:

Divider

Style: Select solid, double, dotted or dashedWeight: Set the divider』s weightHeight: Set the divider』s heightColor: Choose the divider』s color

Icon

Color: Choose the color of the post info iconSize: Set the size of the post info icon

Text

Text Indent: Set the amount of space the text is indented from the iconText Color: Choose the color of the textTypography: Set the typography options for the text

Read the tutorial showing how to Create a Single Post Template

Post Content Widget

The Post Content widget is a Theme Element. It is one of the available Single Post Template widgets that is used to dynamically display the current post』s content.

Important: This widget is a REQUIRED element on the Single Post Template. If this widget is not added to the Single Post Template, the Elementor editor will not load.

Style

Alignment: Align the content left, centered, right, or justifiedText Color: Choose the color of the content』s textTypography: Set the typography options for the content』s text

Read the tutorial showing how to Create a Single Post Template

Note:  Only one instance of the Post Content widget can be used on a Single Post Template. You cannot add multiple Post Content widgets on a Single Post Template, and then try to hide the variations based on device (such as hiding an instance of it on mobile or tablet). Adding multiple instances of the Post Content widget, even if you select to hide them per device, will result in the widgets not functioning properly.

WooCommerce Single Product Builder

With  Elementor WooCommerce Builder you can now design your single product and archive page templates. Here is a breakdown of all the parts that make up a regular WooCommerce product page, and it』s corresponding Elementor Widgets.

Menu Cart Widget – This special custom widget we』ve built, opens the cart in a window, so you can display your cart from any page of your website without leaving it. Woocommerce Breadcrumbs Widget – Control the colors and layout for WooCommerce Breadcrumbs. Product Title Widget – Control the style and layout of your Product Title. Product Price Widget – Set the Product Price position and style. Product Rating Widget – Add a Product Rating Widget. Short Description Widget – Control the Short Description layout and style.Product Stock Widget – Add a Product Stock Widget to display the product』s stock number.Add To Cart Widget – Control the layout and style of the Add To Cart button.Product Meta Widget – Set the distance between the text, display it stacked or inline, and control the style of your Metadata. Product Data Tabs Widget – Control the Data Tabs style. Product Images Widget – Set the image or gallery you wish to display. Upsells Widget – Set your own style to the Upsell Products.Product Related Widget – Set your own style to the Related Products. *See note below.Additional Information Widget – Add  Additional Information to your product display.

How to create a Single Product Template

Under Templates > Theme Builder > Single Product > Add New, from the dropdown choose Single Product, give it a name, and click Create Template.Choose a Single Product Block and Insert. Alternatively, you can design your own.After you』ve finished designing, click Publish.Choose a Condition. Click to learn about conditions.

Important! In order for the Woocommerce Builder to work, you need Elementor pro 2.1 + WooCommerce 3.4 or higher.

*Note: The Product Related Widget uses the WooCommerce related products function to link products with the same tags and categories, not with the same up-sells and cross-sells.

Known Plugin Conflicts

Elementor works with *almost* every plugin, and especially with popular plugins such as WooCommerce and WPML. However, some plugins are incompatible with Elementor. Here we listed the known plugin conflicts with Elementor and added an alternative to almost each of them. If you experience compatibility issues with other plugins please let us know about them.

The following plugins are not compatible with Elementor:

Shortcodes Ultimate

It is not possible to open the interface of Shortcodes Ultimate from Elementor.

Alternative: Use shortcodes in another environment and paste it to the Shortcode Widget.

For more information, check this thread:  https://github.com/elementor/elementor/issues/1033

Better WordPress Minify

There is a conflict with Better WordPress Minify due to a problem with the compression of the javascript files.

The issue is known and handled  here. 

Alternative: Use instead this plugin.

qTranslate X

qTranslate X does not create separate translations for each page,

as a matter of fact, we recommend using more adapted plugins for your translations.

Alternative: Use Polylang or WPML.

Facebook feed WD

This plugin leads to bugs with the Text Editor

Alternative: Try to follow these instructions https://developers.facebook.com/docs/plugins/page-plugin

The code provided includes JS so you cannot integrate it via Elementor.

If you are not a tech-savvy, ask your developer to help you with this task.

Image Map Pro

When you use the shortcode widget (and sometimes the text widget) to insert the shortcodes of this plugin, you can hardly edit or delete them in Elementor.

Heartbeat Control

Elementor works with the HeartBeat API of WordPress. This plugin may disrupt the functioning of Elementor according to the value chosen.

WP Clone by WP Academy

The plugin does not use the API of WordPress to query the database. As a matter of fact, this plugin can corrupt the JSON data of Elementor and this can lead to fatal errors.

TheSaas Theme & TheElementor

TheSaas theme includes a modified version of Elementor, called TheElementor. This version is not supported by us and cannot work with Elementor Pro.

Troubleshooting Other Issues

For other issues, check out our  FAQ page .

Can I Integrate Elementor to My Email Marketing Service?

Elementor includes a built-in and hassle-free integration to MailChimp, MailPoet, GetResponse, ConvertKit, Drip, ActiveCampaign, HubSpot, MailerLite, Slack, and Discord. 

You can even integrate SalesForce via a Zapier premium subscription. In fact, you can connect your favorite email marketing service, CRM or any other Zapier integration with just a few easy steps.

For more information, check out the release post on the subject

502 Error When I Try to Edit with Elementor

If you get a 502 error when you try to edit with Elementor you have to do two things:

Go to  Elementor > Settings > Advanced, and under 『Editor Loader』, enable 『Switch front-end editor loader method』.

This setting changes the Elementor editor loader method.

You then may need to increase a particular Apache service limit. To do that, add the following lines inside the website』s .htaccess file:

SubstituteMaxLineLength 10M

You can edit that file via SSH, FTP, or the File Manager tool in cPanel.