Dynamic WooCommerce Tags

Dynamic WooCommerce Tags

Dynamic WooCommerce Tags refer to content that can be drawn from the product dynamically from the back-end of the product it』s from. Changes made to the product』s values on the WooCommerce side will reflect everywhere the tags are present. 

Product dynamic tags range from price, rating, and sale status, to description, SKU, stock, terms, title, and image. You have the ability to include these tags in most Elementor widgets from the Dynamic Content Settings. Common use examples could be Heading, Text Editor, Call to Action, Flip Box, or Price List widgets as shown here. 

Getting Started

In your Elementor panel, select a widget that uses dynamic values. For this document a Price List widget is demonstrated.

Steps For Use

In the widget fields, click the stack icon to reveal the Dynamic TagsScroll to the WooCommerce optionsSelect a dynamic value that you wish to display (example: Product Title)Click the value a second time to reveal the Settings OptionsIn the input field select the product that you would like to reference by entering a few letters of the products titleIn the Advanced Settings you may enter a before and after value, as well as a fallback valueRepeat for the remaining widget fields.

Links: For the link URL of a product, simply type the first few letters of your product and it will appear in the selector choices rather than using the dynamic stack icon.

Completed Example

Notes And Information

Note: If dynamic values such as product images are not displayed in the editor after being selected, save your changes and refresh the editor window.

Advanced Tab

Advanced Tab

These are the possible settings available in the Advanced tab of a Section, Column, or Widget. Not all settings are available for every element.

Advanced

Margin: Set the section MarginPadding: Set the section PaddingZ-index: Set the Z-Index. Learn more about Z-IndexCSS ID: Set a CSS ID for your sectionCSS Classes: Set CSS Classes for your section

Motion Effects

Sticky (Pro only): Set your section as Sticky, and choose between Top or Bottom. Learn more about StickyScrolling Effects (Pro only): Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. Learn more about Scrolling EffectsEntrance Animation: Click the dropdown to choose an animation. Learn more about Entrance Animation

Background

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

Background Type: Choose between Classic or Gradient

Border

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

Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessBox Shadow: Adjust box shadow options

Mask

The Mask option can be activated by using the toggle. Learn more about Mask Option The following options are available:

Shape: Select the shape of your mask from the dropdown list. Choose one of the preset shapes or upload a custom SVG shapeSize: Select Fit, Fill, or Custom for the size of your maskPosition: Select the position of your mask Top, Right, Bottom, Left, and Center options are availableRepeat: Select the repeat options for your mask

Positioning

Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user』s viewport. 

If either Absolute or Fixed are selected, the following options also become available.

Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with choices of either Start or End.Offset: Changes the horizontal reference point by the amount of the offsetVertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.Offset: Changes the vertical reference point by the amount of the offset

Learn More: How To set Absolute Position for An Element

Responsive

Reverse Columns: Slide to reverse your columns order (Great for Mobile)Visibility: Show or Hide your section on Desktop, Tablet, or Mobile

Attributes (Pro only)

Add your own custom attributes. Learn more about Custom Attributes

Custom CSS (Pro only)

Add your own custom CSS

How to Set Elementor to Coming Soon

How to Set Elementor to Coming Soon

With Elementor』s Maintenance Mode Tools, you can display a custom coming soon mode page to visitors, and send the right HTTP response to search engines.

Coming Soon Response Code

Setting Elementor to Coming Soon, makes your site tell search engines everything is working as normal, and they can index the website as usual. This is done by returning a response of HTTP200.

(Read the complete Maintenance Mode post here)

Create a 『Coming Soon』 Page Template from scratch, or use one of our pre-designed templates and publish it. Note: The template hierarchy needs to be set to Page and not Section or other options.Go to Elementor > Tools > Maintenance ModeChoose Coming Soon in the mode selectorSelect the User Roles that are able to access the websiteSelect the template you created in the dropdown selectorSave your changes and view the website from another browser or incognito mode to test your page.

Note: The following 3rd party cache plugins are automatically cleared on every change in the Elementor Maintenance Mode: 

WP Rocket (premium)W3 Total Cache (free)WP Super Cache (free)WP Fastest Cache (free + premium)

Note: You will see a red button on your top WordPress bar with the text: 」Coming Soon Mode ON「.

Tip: You can use the same process described here for 『 Maintenance Mode 』

Font-Awesome Inline Experiment

Font-Awesome Inline Experiment

In order to continue to improve the performance of Elementor built websites, you may now choose to load Font Awesome icons inline with SVG by activating the option in Elementor Experiments. SVGs are vector-based images that are rendered using the browser』s engine. The benefit of using inline SVG icons, is that they do not increase server requests, which could have had an adverse effect on your site』s performance.

Activate / Inactivate This Experiment

You may navigate to Dashboard > Elementor Settings > Experiments to toggle the settings of this experiment.

Advantages / Differences

How Icons Render – SVG renders in your page』s HTML rather than as CSS pseudo-elements in Icon FontsAuto Accessibility – SVG supports this feature by default rather than only in a kitAdvanced Features – SVG supports features such as Power Transforms, Masking, and Layering whereas Icon Fonts do notScalability – Icon fonts may use anti-aliasing techniques implemented by the browser making it less sharp. SVGs are treated as images by browsers, so no anti-aliasing rules are applied.

Note: This feature does not convert Font Awesome Pro icons. If you are a Pro FA user, navigate to your Kit settings at the Font Awesome site at Kit > Settings > Technology and set them to SVG.

Learn: What Are Inherited Responsive Values

Learn: What Are Inherited Responsive Values

When using the responsive editor in Elementor, inherited responsive values reflect on controls such as: padding, margins, image sizes, and every other numeric control.  With each additional custom breakpoint, it is helpful to understand what exactly is being inherited from one breakpoint to another. With Elementor』s visible responsive values, you will see exactly what values were inherited.  

Using Inherited Responsive Values

Select an object on your page that has responsive propertiesEnter a value to a control for desktop viewSelect another breakpoint (example: tablet). The previous value will be reflected as a greyed placeholderRepeat for additional breakpoints.

Cascading Responsive Values

Elementor uses a cascading concept across breakpoints, which means that changes cascade down. Changes you make on a larger breakpoint cascade down to the smaller breakpoint, but this will not work vise versa; Changes to a smaller breakpoint won』t affect the higher breakpoint unless you』re designing for widescreens. In this case, Elementor is cascading up, inheriting the Desktop value.

How To Fix: Common Errors With Kit Library

How To Fix: Common Errors With Kit Library

When using the Kit Library feature you may occasionally encounter the following message(s). To help resolve these issues use the following guide below:

Types Of Errors – Resolution

Error while loading the kit preview – This could be because of missing kit data or server error. Please try again in a few minutes. If the error continues, contact support.Error while loading the kit library – Please try again clicking the ? icon at the top corner of the screen or try again in a few minutes. If the error continues, contact support.Error while trying to apply the kit – This could be because of a server or license validation error. Please try again in a few minutes. You may also try disconnecting and re-connecting your license in order to make a fresh connection to the Kit Library. If the error continues, contact support.Error Forbidden – If you get the following message when trying to download a kit:{「code」:」rest_forbidden」,」message」:」Sorry, you are not allowed to do that.」,」data」:{「status」:401}} it can be corrected by making sure you have updated to the latest versions of Elementor Core and Pro (if installed). You may also try disconnecting and re-connecting your license in order to make a fresh connection to the Kit Library.

Additional Resolutions

If unable to apply the kit, verify that ZIPArchive has been installed on your server. You may do this by navigating to Elementor > System Info and locating the following information. If this is set to No, you will need to change the settings in your cPanel or contact your host to have this enabled.

What Is Import/Export Kit

What Is Import/Export Kit

Elementor always striving to help make your web creation process seamless and efficient. When creating and maintaining websites, it is important to use a development or staging environment, however, moving the Site Settings and Kits to the live environment often was cumbersome or required third party plugins.

With Elementor』s Import/Export Kit feature, located in our Experiments section, we hope to save you time so you can focus on growing your business.

The Export Kit function will allow you to export your entire Elementor content or selected content from one website and import it into another using the Import Kit function. Imported pages and templates will retain display conditions and site settings including colors, typography, and other globals.

Note: To use this feature, activate the Import / Export Kit experiment via Elementor > Settings > Experiments. Once you activate the new Import/Export Kit functionality experiment, you will be able to find the options located in Elementor > Tools > Import Export Kit

Important: In order for this feature to work, please contact your Host to make sure ZipArchive is enabled. You may verify this by navigating to Elementor > System Info and locating the following information.

HTML Widget

HTML Widget

Inside the HTML Widget you can embed HTML, CSS, Shortcodes, and also include JS scripts.

Drag The Widget

From the widget library choose the Elementor HTML widget with the icon. Drag it to the desired location on your page editor indicated by the blue line.

Add your Code

Enter your HTML, Script, or Shortcodes into the the text area. Elementor will attempt to notify you of any errors in your code. The panel window may be resized for larger amounts of code to be viewed.

Advanced

Set the Advanced options that are applicable to this widget

Global Layout Settings

Global Layout Settings

Control global layout settings from Elementor』s Global Settings.

From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Settings > Layout.

Content Width (px): Set a default width for your content areaWidgets Space (px): Set the space between widgetsPage Title Selector: If you want to hide your page title, enter its CSS selector hereStretched Section Fit To: Choose the parent element to which stretched elements will fitDefault Layout: Set the page layout for new pages, choosing from either Default, Elementor Canvas, or Elementor Full Width

Important: Only pages that use Default Template will have the Single Post Template applied to them, even if they otherwise meet the Display Conditions criteria. Pages that use Canvas or Full Width template (or any template other than Default) will not have the Single Post Template applied to them.

Breakpoints

Tablet: Set the breakpoint for tablet devices. Below this breakpoint, and above the mobile breakpoint, tablet layout will appear (Default: 1025px)Mobile: Set the breakpoint for mobile devices. Below this breakpoint, mobile layout will appear (Default: 768px)