Unlock Elementor Custom CSS in Free Version

Shyam Sir July 15, 2024

Elementor is a powerful page builder plugin for WordPress, but the free version restricts some advanced features such as custom CSS. This guide will show you how to unlock custom CSS functionality in Elementor's free version by adding a custom function to your plugin or functions.php file.

Here is the code snippet you need to add to your theme's functions.php file or a custom plugin:


// Add a filter to Elementor widget controls
function inject_custom_control( $element, $section_id, $args ) {
    if ( 'section_custom_css_pro' === $section_id ) {
        $element->add_control(
            'custom_html',
            [
                'label' => esc_html__( 'Custom HTML', 'sknetking' ),
                'type' => \Elementor\Controls_Manager::CODE,
                'language' => 'css',
                'rows' => 30,
            ]
        );
    }
}
add_action( 'elementor/element/after_section_start', 'inject_custom_control', 10, 3 );

// Example of saving the custom HTML data to post meta

function change_heading_widget_content( $widget_content, $widget ) {
    $settings = $widget->get_settings();
    if ( ! empty( $settings['custom_html'] ) ) {
        $widget_content .= "";
    }
    return $widget_content;
}
add_filter( 'elementor/widget/render_content', 'change_heading_widget_content', 10, 2 );

Code Explanation

Here’s a brief explanation of what each part of the code does:

Adding a Custom Control to Elementor Widget

This part of the code adds a custom control to the Elementor widget, allowing you to input custom CSS code:


function inject_custom_control( $element, $section_id, $args ) {
    if ( 'section_custom_css_pro' === $section_id ) {
        $element->add_control(
            'custom_html',
            [
                'label' => esc_html__( 'Custom HTML', 'sknetking' ),
                'type' => \Elementor\Controls_Manager::CODE,
                'language' => 'css',
                'rows' => 30,
            ]
        );
    }
}
add_action( 'elementor/element/after_section_start', 'inject_custom_control', 10, 3 );

This function checks if the current section is section_custom_css_pro and, if so, adds a new control labeled "Custom HTML" where you can write your custom CSS.

Saving the Custom CSS Data

This part of the code saves the custom CSS input and applies it to the widget:


function change_heading_widget_content( $widget_content, $widget ) {
    $settings = $widget->get_settings();
    if ( ! empty( $settings['custom_html'] ) ) {
        $widget_content .= "";
    }
    return $widget_content;
}
add_filter( 'elementor/widget/render_content', 'change_heading_widget_content', 10, 2 );

This function retrieves the custom CSS from the widget settings and adds it within a <style> tag to the widget content.

By following these steps, you can enable custom CSS functionality in the free version of Elementor and enhance your website's design flexibility.

Unlock Elementor Custom CSS in Free Version