How to make elementor column clickable? (no plugin)

How to make elementor column clickable?

Add the following code to Functions.php

if ( ! class_exists( 'Make_Column_Clickable_Setup' ) ) :

  /**
   * The main Make_Column_Clickable_Setup class
   */
  class Make_Column_Clickable_Setup {
    public function __construct() {
      //add_action( 'wp_enqueue_scripts', array( $this, 'frontend_scripts' ) );

      add_action( 'elementor/element/column/layout/before_section_end', array( $this, 'widget_extensions' ), 10, 2 );
      add_action( 'elementor/frontend/column/before_render', array( $this, 'before_render_options' ), 10 );
    }
  

    /**
     * After layout callback
     *
     * @param  object $element
     * @param  array $args
     * @return void
     */
    public function widget_extensions( $element, $args ) {
      $element->add_control(
        'column_link',
        [
          'label'       => __( 'Column Link', 'make-column-clickable-elementor' ),
          'type'        => Elementor\Controls_Manager::URL,
          'dynamic'     => [
            'active' => true,
          ],
          'placeholder' => __( 'https://your-link.com', 'elementor' ),
          'selectors'   => [
        ],
        ]
      );
    }


    public function before_render_options( $element ) {
      $settings  = $element->get_settings_for_display();

      if ( isset( $settings['column_link'], $settings['column_link']['url'] ) && ! empty( $settings['column_link']['url'] ) ) {
        wp_enqueue_script( 'make-column-clickable-elementor' );

        // start of WPML
        do_action( 'wpml_register_single_string', 'Make Column Clickable Elementor', 'Link - ' . $settings['column_link']['url'], $settings['column_link']['url'] );
        $settings['column_link']['url'] = apply_filters('wpml_translate_single_string', $settings['column_link']['url'], 'Make Column Clickable Elementor', 'Link - ' . $settings['column_link']['url'] );
        // end of WPML

        $element->add_render_attribute( '_wrapper', 'class', 'make-column-clickable-elementor' );
        $element->add_render_attribute( '_wrapper', 'style', 'cursor: pointer;' );
        $element->add_render_attribute( '_wrapper', 'data-column-clickable', $settings['column_link']['url'] );
        $element->add_render_attribute( '_wrapper', 'data-column-clickable-blank', $settings['column_link']['is_external'] ? '_blank' : '_self' );
      }
    }

  }

endif;

new Make_Column_Clickable_Setup();


function column_clickable_js(){
	?>
	<script>
		jQuery( function( $ ) {
  $( document ).on( 'click', 'body:not(.elementor-editor-active) .make-column-clickable-elementor', function( e ) {
    var wrapper = $( this ),
        url     = wrapper.data( 'column-clickable' );

    if ( url ) {
      if ( $( e.target ).filter( 'a, a *, .no-link, .no-link *' ).length ) {
        return true;
      }

      // handle elementor actions
      if ( url.match( "^#elementor-action" ) ) {

        var hash = url;
        var hash = decodeURIComponent( hash );

        // if is Popup
        if ( hash.includes( "elementor-action:action=popup:open" ) || hash.includes( "elementor-action:action=lightbox" ) ) {

          if ( 0 === wrapper.find( '#make-column-clickable-open-dynamic' ).length ) {
            wrapper.append( '<a id="make-column-clickable-open-dynamic" style="display: none !important;" href="' + url + '">Open dynamic content</a>' );
          }

          wrapper.find( '#make-column-clickable-open-dynamic' ).click();

          return true;
        }

        return true;
      }

      // smooth scroll
      if ( url.match( "^#" ) ) {
        var hash = url;

        $( 'html, body' ).animate( {
          scrollTop: $( hash ).offset().top
        }, 800, function() {
          window.location.hash = hash;
        });

        return true;
      }

      window.open( url, wrapper.data( 'column-clickable-blank' ) );
      return false;
    }
  });
});

	</script>
	<?php
}
add_action('wp_head','column_clickable_js'); 

Share this post:

Amitpal Singh
Amitpal Singh
Freelance website and application developer. Working from Sangrur Punjab in India.

How to Attribute?

Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
for Example: Website, Social Media, Blogs, ebooks , newsletter, etc.
Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
Copied!

Got a Question? Check out our FAQ Section.

Your action, our appreciation

It encourage us to give you more valuable content on website.