Introduction

If you want to add additional buttons to your page that activate any of the User Action Buttons (Email Quote, Detailed List, Add To Cart, Coupon), please refer to the information below.

Email Quote Button

<a class="scc-trigger scc-email-quote-btn scc-usr-act-btns printTable-45" href="javascript:void(0)" onclick="initiateQuoteForm(4)">Email Quote</a>

View Detailed List Button

<a class="scc-trigger scc-detailed-list-btn scc-usr-act-btns scc-secondary-btn-style" href="javascript:void(0)" onclick="showQuoteDetailView(4)">Detailed List</a>

Note:
You have to replace the (4) with your calculator ID. For example, replace "onclick="showQuoteDetailView(4)" with "onclick="showQuoteDetailView(20)" if your calculator ID is 20.

Create A Button in Elementor

Step 1: Create a Button in Elementor

Open your page with Elementor.
Drag and drop the Button widget to the desired section of your page.

Step 2: Add an ID to the Button

Click on the Button widget to open the settings panel.
Go to the Advanced tab.
Under Advanced, find the CSS ID field.
Enter a unique ID for your button, for example, quoteDetailButton.

Step 3: Apply Custom JavaScript

Go to the WordPress dashboard.
Navigate to Appearance > Customize.
Click on Additional CSS/JS or use a plugin like "Simple Custom CSS and JS" to add custom JavaScript.
Add the following JavaScript code, replace the '4' with your calculator ID:

JavaScript Code

javascript
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('quoteDetailButton').addEventListener('click', function() {
showQuoteDetailView(4);
});
});

Summary

Create a Button in Elementor.
Add an ID to the button (quoteDetailButton).
Add custom JavaScript to trigger showQuoteDetailView(4) on button click.

Updated on: 21/06/2024