Introduction to JetEngine Dynamic Visibility and Elementor
Hey there! If you’re using Elementor along with JetEngine’s Dynamic Visibility plugin, you know how powerful these tools are for building dynamic websites. But handling visibility conditions across multiple elements can be a bit of a pain. I ran into the same issue and decided to create a simple solution to make things easier. In this post, I’ll show you how to copy and paste dynamic visibility conditions between Elementor widgets, sections, columns, and containers using a straightforward code snippet. Best part? It’s completely free!
Issues with JetEngine Dynamic Visibility Conditions in Elementor
JetEngine’s Dynamic Visibility module is awesome for setting conditions on when elements should appear or hide. However, it didn’t originally let you copy and paste these conditions between different elements. This means if you had complex visibility settings on one widget, you’d have to manually recreate them for each new widget, which is time-consuming and error-prone.
Solution: Copy/Paste JetEngine Dynamic Visibility Conditions in Elementor
To fix this, I developed a custom PHP and JavaScript snippet that adds copy and paste functionality for dynamic visibility conditions. This enhancement works not just for widgets, but also for sections, columns, and containers in Elementor. Here’s how you can implement it:
Code Snippet for JetEngine Dynamic Visibility Copy/Paste
Add the following PHP code to your theme’s functions.php file or via your favorite code snippet plugin. This code integrates the copy/paste functionality into the Elementor editor and extends support to containers.
<?php
add_action('elementor/editor/before_enqueue_scripts', function() {
if (!function_exists('jet_engine') || !class_exists('Jet_Engine_Module_Dynamic_Visibility')) {
return;
}
wp_add_inline_script('elementor-editor', '
jQuery(function($) {
var storage = null;
function copySettings(element) {
var container = element.getContainer?.() || element;
var model = container?.model || element.model;
if (!model) {
console.error("Could not get model from element", element);
return;
}
var settings = model.get("settings");
storage = {
jedv_enabled: settings.get("jedv_enabled"),
jedv_type: settings.get("jedv_type"),
jedv_relation: settings.get("jedv_relation"),
jedv_conditions: JSON.parse(JSON.stringify(settings.get("jedv_conditions") || []))
};
elementor.notifications.showToast({
message: "Dynamic Visibility settings copied!",
duration: 2000
});
}
async function refreshEditorAndPanel(container) {
try {
// Re-render element in preview
container.render();
// Ensure settings model is properly initialized
var model = container.model;
if (!model.get("settings").get("id")) {
model.get("settings").set("id", "e" + elementorCommon.helpers.getUniqueId());
}
// Force clean panel state
$e.run("panel/global/close");
// Re-select element with delay to ensure clean state
setTimeout(async function() {
try {
// Open the settings panel
await $e.run("panel/editor/open", {
model: model,
view: container.view
});
// Re-render controls
var currentPageView = elementor.getPanelView().getCurrentPageView();
if (currentPageView) {
if (currentPageView.collection) {
currentPageView.collection.each(function(control) {
if (control.get("name") === "jedv_conditions") {
control.trigger("ready");
}
});
}
if (currentPageView.activateSection) {
setTimeout(function() {
currentPageView.activateSection("jedv_section");
var sectionView = currentPageView.children.find(function(view) {
return view.model.get("name") === "jedv_section";
});
if (sectionView) {
sectionView.render();
sectionView.triggerMethod("ready");
}
currentPageView.$el.find(".elementor-control").each(function() {
var cid = $(this).data("cid");
if (cid) {
var controlView = currentPageView.children.findByModelCid(cid);
if (controlView) {
controlView.render();
controlView.triggerMethod("ready");
}
}
});
}, 50);
}
}
// Update frontend config
if (window.elementorFrontend?.config?.elements?.data[model.cid]) {
elementorFrontend.config.elements.data[model.cid].attributes =
_.extend({}, elementorFrontend.config.elements.data[model.cid].attributes);
}
} catch (error) {
console.error("Error in delayed panel refresh:", error);
}
}, 100);
} catch (error) {
console.error("Error refreshing editor:", error);
}
}
function pasteSettings(element) {
if (!storage) {
elementor.notifications.showToast({
message: "No Dynamic Visibility settings to paste!",
type: "warning"
});
return;
}
try {
var container = element.getContainer?.() || element;
var model = container?.model || element.model;
if (!model) {
throw new Error("Could not get model from element");
}
// Generate new unique IDs for conditions
var conditions = storage.jedv_conditions.map(function(condition) {
return Object.assign({}, condition, {
_id: elementorCommon.helpers.getUniqueId(),
condition_id: elementorCommon.helpers.getUniqueId()
});
});
// Build settings object
var settings = {
jedv_enabled: storage.jedv_enabled,
jedv_type: storage.jedv_type,
jedv_relation: storage.jedv_relation,
jedv_conditions: conditions
};
// Apply settings using Elementor command
$e.run("document/elements/settings", {
container: container,
settings: settings
});
// Update frontend config
if (window.elementorFrontend?.config?.elements?.data[model.cid]) {
window.elementorFrontend.config.elements.data[model.cid].attributes =
_.extend({}, window.elementorFrontend.config.elements.data[model.cid].attributes, {
jedv_enabled: settings.jedv_enabled
});
}
// Update navigator icon
setTimeout(function() {
var $element = $(".elementor-navigator__element[data-model-cid=\"" + model.cid + "\"]");
if (settings.jedv_enabled) {
if (!$element.hasClass("jedv-hidden")) {
$element
.find("> .elementor-navigator__item > .elementor-navigator__element__title > .elementor-navigator__element__title__text")
.after(\'<div class="elementor-navigator__element__jedv-icon" title="Dynamic Visibility"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="red" width="16" height="16" style="margin: 0 5px"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9-35.7 46.2-87.7 93-131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"/></svg></div>\');
$element.addClass("jedv-hidden");
}
} else {
$element
.find("> .elementor-navigator__item > .elementor-navigator__element__title > .elementor-navigator__element__title__text")
.remove();
$element.removeClass("jedv-hidden");
}
}, 100);
// Refresh editor and panel
refreshEditorAndPanel(container);
elementor.notifications.showToast({
message: "Dynamic Visibility settings pasted!",
duration: 2000
});
} catch (error) {
console.error("Error pasting visibility settings:", error);
elementor.notifications.showToast({
message: "Error pasting visibility settings",
type: "error"
});
}
}
function addContextMenuItems() {
["widget", "section", "column", "container"].forEach(function(elementType) { // Added "container"
elementor.hooks.addFilter("elements/" + elementType + "/contextMenuGroups",
function(groups, element) {
groups.push({
name: "jedv_actions",
actions: [
{
name: "copy_visibility",
title: "Copy Dynamic Visibility",
icon: "eicon-copy",
callback: function() {
copySettings(element);
}
},
{
name: "paste_visibility",
title: "Paste Dynamic Visibility",
icon: "eicon-paste",
callback: function() {
pasteSettings(element);
}
}
]
});
return groups;
}
);
});
}
// Initialize functionality
addContextMenuItems();
// Add keyboard shortcuts
$(document).on("keydown", function(e) {
var element = elementor.selection.getElements()[0];
if (!element) return;
if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
if (e.key.toLowerCase() === "d") {
e.preventDefault();
copySettings(element);
} else if (e.key.toLowerCase() === "v") {
e.preventDefault();
pasteSettings(element);
}
}
});
});
');
});
?>
JavaScript Code for JetEngine Dynamic Visibility Copy/Paste
The JavaScript is embedded within the PHP script above using wp_add_inline_script. It handles:
- Copying Visibility Conditions: Right-click context menu or
Ctrl/Cmd + Shift + Dto copy settings. - Pasting Visibility Conditions: Right-click context menu or
Ctrl/Cmd + Shift + Vto paste settings. - UI Integration: Adds a red eye icon in the Elementor Navigator to indicate elements with dynamic visibility settings.
- Page Refresh Handling: Updates the navigator icon immediately after pasting, but currently requires a page refresh to display the settings correctly in the panel.
Key Features of JetEngine Dynamic Visibility Copy/Paste
- Copy Visibility Conditions:
- Context Menu Option: Right-click on any supported element (widget, section, column, container) to copy its dynamic visibility settings.
- Keyboard Shortcut: Press
Ctrl/Cmd + Shift + Dto copy settings quickly. - Comprehensive Storage: Saves all condition configurations, including enabled state, type, relation, and individual conditions.
- Paste Visibility Conditions:
- Context Menu Option: Right-click on the target element to paste the copied visibility settings.
- Keyboard Shortcut: Press
Ctrl/Cmd + Shift + Vto paste settings instantly. - Unique ID Generation: Automatically creates new unique IDs for each condition to avoid conflicts.
- Immediate UI Update: The navigator icon updates right away to show that dynamic visibility has been applied.
- UI Integration:
- Navigator Icons: A red eye icon appears next to elements with dynamic visibility settings, making them easy to identify.
- Elementor Context Menu Integration: Seamlessly adds options to Elementor’s existing context menu for a consistent user experience.
- Extended Compatibility: Works with widgets, sections, columns, and containers, expanding its utility across different Elementor elements.
Tested Versions of JetEngine Dynamic Visibility and Elementor
This code snippet has been successfully tested with the following versions:
- Elementor Free: 3.25.10
- Elementor Pro: 3.25.4
- JetEngine: 3.6.0.1
- JetEngine – Custom Visibility Conditions (Dynamic Visibility Plugin): 1.1.2
These are the latest versions at the time of writing the article.
Limitations of the JetEngine Dynamic Visibility Copy/Paste Solution
While this solution significantly enhances JetEngine’s Dynamic Visibility functionality, it comes with a few limitations:
- Page Refresh Required: After pasting visibility settings, you’ll need to save and refresh the page to fully display the conditions in the Dynamic Visibility panel. This interrupts the seamless editing experience in Elementor.
This is a compromise solution as I didn’t know how to refresh the widget that receives the new conditions without refreshing the page. However, it still serves to save time, and once you’re done with copy/pasting conditions, you can disable or delete this snippet as the conditions will remain applied.
Disclaimer: Use JetEngine Dynamic Visibility Copy/Paste at Your Own Risk
Use at Your Own Risk: This code snippet worked for me, but you are free to use it at your own risk. I do not take any responsibility for any issues or problems that may arise from using this code. Always ensure you have a complete backup of your website before activating this code snippet.
Additionally, I have contacted Crocoblock (JetEngine’s author) and they said they don’t have this feature at the moment and currently there are no plans to implement it in the near future. This means that while the solution works with the versions listed above, future updates to Elementor or JetEngine might affect its functionality.
Let me know what you think!
Contact me
