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>

Create A Button in Elementor

Step 1: Create a Button in Elementor

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

Step 2: Add an ID to the Button

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

Step 3: Apply Custom JavaScript

1. Go to the WordPress dashboard.
2. Navigate to Appearance > Customize.
3. Click on Additional CSS/JS or use a plugin like "Simple Custom CSS and JS" to add custom JavaScript.
4. 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

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

Updated on: 21/06/2024