How one can Add a Price Calculator to Your WooCommerce Single Product Web page?

Including extra performance to your WooCommerce single product pages can vastly improve person expertise and supply helpful options for potential clients. One such characteristic is a value calculator kind, which permits customers to inquire about particular merchandise straight from the product web page. On this tutorial, we’ll stroll by way of the method of including this manner to your WooCommerce single product web page in WordPress.

Video: How one can Add a Price Calculator to Your WooCommerce Single Product Web page?

Stipulations

Earlier than we start, guarantee that you’ve the next:

1. A WordPress web site with WooCommerce put in and activated.
2. Entry to your WordPress dashboard with administrative privileges.
3. Price calculator or another kind/content material you want to add to your single product web page.

Price Calculator Builder plugin overview

Price Calculator Builder is the perfect instrument for effortlessly creating worth estimation kinds to offer shoppers with service and product price info. This WordPress plugin encompasses a drag-and-drop calculation kind builder, permitting for the creation of limitless calculation kinds. It provides varied parts reminiscent of Enter Textual content Field, Amount Field, Dropdown Field, and extra. Improve to the PRO model for extra options like WooCommerce integration, PayPal funds, Stripe assist, and extra.

Price Calculator Builder

Create quotations, worth, and challenge estimation kinds utilizing Price Calculator Builder for WordPress and Woocommerce plugin

SAVE 20% Coupon (yearly plans solely): WSH20

See it in motion

Step 1: Find Your Theme’s Features.php File

First, you’ll have to find the features.php file of your WordPress theme. This file is often discovered inside your theme’s listing.

Various Step 1: Use a Plugin Known as Code Snippets

Whereas including performance on to your theme’s features.php file is a typical method, a extra versatile and manageable choice is to make use of a plugin like “Code Snippets.” This plugin lets you add customized PHP code snippets to your WordPress web site with out straight modifying theme recordsdata.

Why Use Code Snippets?

1. Modularity: Code Snippets lets you set up your customized code snippets into particular person snippets, making it simpler to handle and preserve.
2. No Theme Dependency: Including code snippets by way of a plugin ensures that your customizations stay intact even when you swap themes.
3. Error Dealing with: Code Snippets gives error checking and syntax highlighting, serving to to forestall potential points together with your customized code.
4. Security: It provides a secure setting to experiment with customized code with out the chance of breaking your web site.

Step 2: Add the Enquiry Kind Code

Open the features.php file in a textual content editor, and add the next PHP code snippet (see beneath). Or, add this snippet utilizing a Code Snippets plugin:

1. Add New Snippet: As soon as activated, go to “Snippets” > “Add New” in your WordPress dashboard.
2. Paste the Code: Copy the PHP code snippet offered earlier for including the fee calculator kind, and paste it into the code editor.

// Provides a Price Calculator in your WooCommerce Single product web page
add_action( 'woocommerce_product_meta_end', 'enquiry_form', 30 );
operate enquiry_form() {
    echo '<button kind="submit" id="trigger_cf" class="button alt">Calculate the renovation price »</button>';
    echo '<div id="product_inq" fashion="show:none">';
    echo do_shortcode('[stm-calc id="4393"]'); // Substitute with your personal shortcode
    echo '</div>';
}

add_action( 'woocommerce_product_meta_end', 'enquiry_form_1', 40);
operate enquiry_form_1() {
    ?>
    <script kind="textual content/javascript">
        jQuery('#trigger_cf').on('click on', operate(){
            if ( jQuery(this).textual content() == 'Calculate the renovation price »' ) {
                jQuery('#product_inq').css("show","block");
                jQuery("#trigger_cf").html('Shut');
            } else {
                jQuery('#product_inq').disguise();
                jQuery("#trigger_cf").html('Calculate the renovation price »');
            }
        });
    </script>
    <?php    
}

This code will add a value calculator button and a hidden kind part to your WooCommerce single product pages.

Step 3: Take a look at the Price Calculator

Go to a single product web page in your WooCommerce web site, and you need to now see a button labeled “Calculate the renovation price »”. Clicking on this button will reveal the fee calculator kind the place customers can inquire in regards to the product.

Enhanced Possibility: Displaying the Calculator Immediately

Along with including a value calculator kind button, one other method is to show the calculator straight on the WooCommerce single product web page with out the necessity for customers to click on on a separate button. This could present a extra seamless person expertise and make the calculator extra readily accessible.

You should utilize the offered code snippet beneath to straight show the calculator on the one product web page:

// Provides a Price Calculator in your WooCommerce Single product web page
add_action( 'woocommerce_product_meta_end', 'your_function', 30 );
operate your_function() {
   echo ('<h2>Your textual content</h2>');
   echo do_shortcode('[stm-calc id="4393"]');
}

This code snippet hooks into the WooCommerce single product web page and executes a operate (your_function) after the “add to cart” button part. Contained in the operate, it first echoes any textual content you wish to show (on this case, <h2>Your textual content</h2>, adopted by the shortcode which renders the calculator.

Conclusion

Congratulations! You’ve efficiently added a value calculator to your WooCommerce single product pages in WordPress. This characteristic may also help improve person engagement and supply a handy manner for potential clients to get in contact with you concerning particular merchandise. Experiment with the code and customise it additional to fit your web site’s design and performance wants.