Create a “GST Calculator” Elementor Widget [WordPress]

To create a GST calculator elementor widget, you will need to use the Elementor page builder plugin for WordPress. Here is some example code that you can use as a starting point:

<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Elementor GST Calculator Widget
 *
 * Elementor widget that displays a simple GST calculator.
 *
 * @since 1.0.0
 */
class GST_Calculator_Widget extends Widget_Base {

	/**
	 * Retrieve the widget name.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'gst-calculator';
	}

	/**
	 * Retrieve the widget title.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return __( 'GST Calculator', 'gst-calculator' );
	}

	/**
	 * Retrieve the widget icon.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'eicon-form-horizontal';
	}

	/**
	 * Retrieve the list of categories the widget belongs to.
	 *
	 * Used to determine where to display the widget in the editor.
	 *
	 * Note that currently Elementor supports only one category.
	 * When multiple categories passed, Elementor uses the first one.
	 *
	 * @since 1.0.0
	 *
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return [ 'general' ];
	}

	/**
	 * Register the widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function _register_controls() {
		$this->start_controls_section(
			'section_content',
			[
				'label' => __( 'Content', 'gst-calculator' ),
			]
		);

		$this->add_control(
			'amount',
			[
				'label' => __( 'Amount', 'gst-calculator' ),
				'type' => Controls_Manager::NUMBER,
				'default' => '',
				'placeholder' => __( 'Enter the amount', 'gst-calculator' ),
			]
		);

		$this->add_control(
			'gst_rate',
			[
				'label' => __(
GST Rate (%)', 'gst-calculator' ),
				'type' => Controls_Manager::NUMBER,
				'default' => '',
				'placeholder' => __( 'Enter the GST rate in percentage', 'gst-calculator' ),
			]
		);

		$this->add_control(
			'show_total',
			[
				'label' => __( 'Show Total', 'gst-calculator' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => __( 'Yes', 'gst-calculator' ),
				'label_off' => __( 'No', 'gst-calculator' ),
				'return_value' => 'yes',
				'default' => 'yes',
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Render the widget output on the frontend.
	 *
	 * Displays the widget content on the frontend.
	 *
	 * @since 1.0.0
	 *
	 * @access protected
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();

		$amount = $settings['amount'];
		$gst_rate = $settings['gst_rate'];
		$show_total = $settings['show_total'];

		$gst = $amount * ( $gst_rate / 100 );
		$total = $amount + $gst;

		echo '<div class="gst-calculator">';
		echo '<p>GST: ' . $gst . '</p>';
		if ( $show_total == 'yes' ) {
			echo '<p>Total: ' . $total . '</p>';
		}
		echo '</div>';
	}

}

This widget allows the user to enter an amount and a GST rate in percentage and displays the calculated GST and total (optional). The user can also choose to show or hide the total.

To use this code in the Elementor page builder, you will need to create a custom plugin and include this code in the plugin file.

Here is a brief outline of the steps you can follow:

  1. Create a new folder in the wp-content/plugins directory, and give it a name that represents your plugin (e.g. gst-calculator).
  2. Inside the plugin folder, create a new file and name it gst-calculator.php. This will be the main plugin file.
  3. In the main plugin file, add the following header at the top:
<?php
/*
Plugin Name: GST Calculator
Plugin URI: 
Description: A simple GST calculator widget for Elementor
Version: 1.0
Author: Your Name
Author URI: 
License: GPL2
*/
  1. Below the header, include the code for the GST calculator widget that I provided earlier.
  2. Save the plugin file.
  3. Go to the WordPress dashboard and navigate to the “Plugins” page. You should see your plugin listed there.
  4. Click on the “Activate” button to activate the plugin.
  5. Once the plugin is activated, you should be able to use the GST calculator widget in the Elementor page builder. To add the widget to your page, drag and drop it from the “Widgets” tab in the Elementor panel.