WP Manifestindependent plugin directory
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
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/mohsiiawan/jet-engine-custom-arrows/archive/refs/heads/main.zip
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)

  1. Editor side (PHP)

    • Detects the Arrow Icon dropdown inside JetEngine Listing Grid
    • Appends a new option: custom_svg
    image image

  2. 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.