CVS Site Quotations

Elementor Hotspot Integration

Elementor Hotspot Integration ( 3 – 4 Hours )

After reviewing the requirement, it appears that the default Elementor Hotspot widget does not fully support the requested functionality. By default, the tooltip behavior can only be set to either hover or click, but not both, or in a more customized way.

We also reviewed the reference link you provided and confirmed that it is built using Elementor as well. However, the hotspot functionality in that example is powered by the Unlimited Elements plugin rather than Elementor’s native Hotspot widget. To achieve the same behavior, we would need to use that plugin.

The setup will require some manual configuration and custom integration. Given that we need to implement 13 hotspot locations, this adds to the complexity of the setup.

As a result, we estimate an additional 3–4 hours of development time to properly implement and fine-tune this feature.

Install and Activate Unlimited Elements
Creation of the said page
Add the Hotspot Widget (Unlimited Elements)
Upload or Select the Base Image
Create Hotspot Items
- Add hotspot items one by one using the repeater field inside the widget settings.
- Set the X and Y positions to place the hotspot accurately on the image.
- Define the hotspot icon or marker style.
- Assign the tooltip content (text, image, or HTML if supported).
Configure Tooltip Behavior
- Set how the tooltip is triggered (hover, click, or custom interaction if available).
- Adjust tooltip placement (top, bottom, left, right) for better visibility.
- Configure animation and transition effects if required.
Style the Hotspots
- Customize hotspot colors, sizes, borders, and hover states.
- Apply consistent styling to match the site’s design.
- Adjust tooltip typography, spacing, background, and shadow for readability.
Manually Fine-Tune Positioning
- Since positioning is percentage-based, manually test and adjust each hotspot across different screen sizes.
- Apply responsive settings for tablet and mobile views where necessary.
Mobile responsive integration
Testing and troubleshooting

WooCommerce Product Subscription Integration

WooCommerce Product Subscription Integration (16 – 20 Hours)

Based on the provided design, a subscription feature is required. This will allow customers to select between a one-time purchase and multiple subscription options (with varying billing intervals and discounts) directly on the same product page.

To achieve this functionality, additional WooCommerce extensions will be required beyond the default WooCommerce setup, specifically:

WooCommerce Subscriptions – the official WooCommerce extension for managing recurring billing, subscription renewals, and customer subscriptions.
WooCommerce All Products for Subscriptions – an extension that enables any product (simple or variable) to be offered as both a one-time purchase and a subscription product.

Together, these plugins will provide the necessary structure to replicate the subscription purchasing experience shown in the design while ensuring stability and long-term support.

Install & activate WooCommerce Subscriptions.
Install & activate All Products for Subscriptions.
Configure subscription settings:
- Billing intervals (monthly, every 2 months, every 3 months)
- Subscription renewals
- Subscription cancellation rules
Payment gateway setup (Stripe/PayPal) for recurring billing.
Set discount rules per subscription interval (e.g., 5%, 10%)
Enable subscription options on applicable products.
Add subscription plans for each product:
- One-time price
- Monthly subscription
- Every 2 months subscription
- Every 3 months subscription
Style frontend radio buttons to match the client’s design (optional CSS).
Ensure selection updates price dynamically (if required).
Test subscription checkout flow.
Test subscription renewals.
Test cancellation and expiry behavior.
Validate email notifications.
Test multiple products with subscriptions.

Multi-Step Form

Multi-Step Form ( 14 – 16 Hours )

For the multistep form, we will proceed using the default functionalities available in the Gravity Forms plugin, as no specific details were provided regarding the questions, structure, or criteria for redirecting the form output to specific pages.

Should they be ready to share the complete flow or additional requirements for the multistep form, we will need to review those details. This review will help us determine whether extending beyond the plugin’s default capabilities is necessary and if any additional development work will require a separate quotation.

Install and configure the Gravity Form Plug-in
Activate Support License Keys
CSS and HTML5 output settings
Configure No-Conflict Mode
Integrate Akismet
Configure Background updates
Configure debug and log modes
Configure Global Form reCAPTCHA Settings and API Keys
Configure Global Form notifications (Email)
Create a Form for the Quiz
- Add a Form Field based on the required details
- Configure Form Fields options and settings
- Add classes to some of the Form Fields for the custom script relations
- Create a custom script that will compute the average rating score
  - Create a hidden field that will hold the score rating
- Create a dynamic rule that will trigger a result based on the average rating
  - Perform trial and error to test the dynamic result functionality
- Configure the email notifications for the Quiz
  - Add dynamic redirection based on the quiz form
  - Add a dynamic email result based on the quiz form
Integrate the Form into the page
Improve the UI and design form using custom code
Create a Success page, UI and Design
Create Error Page, UI, and Design
Convert the Form to a mobile responsive
Perform trial and error on the Quiz Form

Blog Category Filter

Blog Category Filter ( 4 – 6 Hours )

Since Elementor does not include a built-in dropdown category filter by default, we recommend using the Unlimited Elements category dropdown filter to save development time—especially given that only a single filter is currently needed. However, it’s important to note that if we go with the Unlimited Elements plugin approach, we will be bound to its predefined template and structure, as it does not support full layout customization. This may limit design flexibility if specific layout changes are required. Please note that if there are plans to implement multiple filters or require more control over the design and functionality, a custom AJAX filter would be a better long-term solution. It offers greater flexibility, full layout control, and can be extended as needed without the limitations imposed by third-party plugins.

Install the Unlimited Elements plugin on the website
Configure the plugin’s default settings
Enable the widgets needed for the filter
Create a Drop-down Category filter to the blog template
- Configure the widget option and setting
- Connect the Widget to blog category
- Retrieve the blog categfory list
- Exclude/Include category based on the client request
- Configure the filter rule and option
- Connect the form to the main blog query
Adjust the filter design based on the theme
Add custom style if needed
Convert the filter to mobile responsive
Perform trial and error to test the filter functionality
Perform trial and error to check the pagination compatibility

Hubspot Connection

Hubspot Connection ( 1 Hour )

Download HubSpot – CRM extension
Install HubSpot – CRM extension
Login to the client HubSpot account
- Connect the client HubSpot account
Configure the both contact and popup form
- Populate the Form ID
- Connect the form with the HubSpot form
Perform trial and error to test the HubSpot connection

File Restrictions

File Restrictions ( 6 Hours )

Since they are selling virtual files, we plan to use the ‘Prevent Direct Access‘ plugin to enhance the security of the files uploaded to the site. This plugin helps protect sensitive files by preventing unauthorized users from directly accessing them through their URLs. It provides an added layer of security by restricting file access to only authorized users or specific conditions.

Install the Prevent Direct Access plugin
Configure the Prevent Direct Access Manager default setting
Integrate the plugin License Key
Configure the hosting to enable the plugin function
- Configure the redirection capability
- Setup the redirection trigger and rules
Setup Restrictions for Individual Files
- Setup Restrictions for File Types (e.g: pdf, jpg, png, zip, txt, docx, doc, csv, and any other file type)
Setup Restrictions for All the files
Restrict access to files based on logged-in status
Restrict access to files based on the User’s Roles.
Restrict Access to files based on individual user ID (Added through the admin panel)
Perform testing and troubleshooting

WooCommerce Subscription Integration

WooCommerce Subscription Integration ( 4 Hours )

We will set up the subscription for a yearly fee or a monthly payment for the blog. Any other subscriptions that have complex settings/configurations will be quoted separately.

Install the Woo Subscription plugin
Configure Woo Subscription default settings
Create a product for the subscription
- Setup product data
- Configure the subscription pricing
- Configure recurring subscription
- Connect the subscription product to certain user roles
- Setup the user role fallback if users terminate or end their subscription
Adjust the subscription content-related layout/design
Perform troubleshooting of the functionality

WordPress (Thrive Default)

WordPress ( 950 )

PNG to XHTML activation
Installation and configuration of WordPress.
Installation and configuration of essential plugins.
Configure the elementor default setting
- Create and upload custom fonts using the elementor option
- Enable custom breakpoints for better mobile design
- Setup default fonts, color, layout, etc.
Create WordPress custom themes.
Rollover activation to the theme.
Create custom fields on the theme options.
Configure theme options.
Create templates for the header and the footer
- Add content on the template based on the concept
- Configure the menu based on the new concept
- Include customizer and menu to the template
- Convert template to mobile responsive
- Modify the template rules/conditions
Create the home page.
- Convert the front page builder into elementor builder
- Extract and optimize images needed for the page
- Add widgets and content based on the concept
- Add hover animation to make it interactable
- Add links to the contents based on the request
Create 19 additional pages (About Us, Contact Us, Technology, etc)
- Set up News page based on the request site
- Configure the page meta tag and slug
- Configure the page hierarchy according to the live site
- Add widget based on the content needed
- Add content based on the provided inner page information
- Configure the widget setting and design
- Adjust the page layout and structure based on the theme
- Convert the page to mobile responsive
Define and configure dynamic menu locations
Define and configure widget locations
Configure pages, categories, menus, and widgets.
Set up the error 404-page template using elementor
- Integrate the search form into the template
- Add Contact Us page redirection
- Adjust the structure and design based on the theme
- Configure the template rule
Set up the search result template using elementor
- Enable keyword-based searching
- Show the related article accordingly
- Adjust the structure and design based on the theme
- Configure the template rule
Convert the different pages to Mobile Responsive
Add and modify essential content to make it GDPR Compliant
Install and configure plugins for page speed optimization
Validate and fix HTML, CSS, and JS used on the site – does not include plugin issues