manifest / builders / jet-engine-custom-arrows

Jet Listing Custom Svg

Add custom Arrows option in Jet engine Listing

by Dev Mohsan · github.com/mohsiiawan/jet-engine-custom-arrows

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/mohsiiawan/jet-engine-custom-arrows/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/mohsiiawan/jet-engine-custom-arrows ↗

Requires: WordPress 6.0+, Elementor, JetEngine
Tested up to: WordPress 6.x
License: GPLv2 or later

📌 Overview

Jet Engine Custom Functionalities extends JetEngine’s Listing Grid slider by adding a new “Custom SVG” option to the Arrow Icon dropdown.

When selected, the plugin injects hard-coded SVG arrows into the slider on the frontend — without any media upload fields, icon pickers, or UI clutter.

This approach is:

Faster
More consistent across sites
Fully code-controlled
Brand-safe (no user uploads)

✨ Features

Adds Custom SVG to JetEngine → Listing Grid → Slider → Arrow Icon
Uses hard-coded SVGs defined in PHP
No SVG upload field
Fully compatible with JetEngine Slick slider
Works in:
- Frontend
- Elementor editor preview
Optimized JavaScript (no polling, no heavy observers)
Clean separation of PHP and JS

🧩 How It Works (Technical)

Editor side (PHP)
- Detects the Arrow Icon dropdown inside JetEngine Listing Grid
- Appends a new option: custom_svg
Frontend (JavaScript)
- Reads JetEngine’s real slider configuration from the data-nav attribute
- Checks for:
```
"arrow_icon":"custom_svg"
```
- Injects SVG markup into:
```
.jet-listing-grid__slider-icon.prev-arrow
.jet-listing-grid__slider-icon.next-arrow
```

This avoids unreliable Elementor wrapper data and works across JetEngine versions.