Ecommerce Shopify WordPress Discussion

How to render multiple shortcode in a single wordpress page withount html and css conflicts?

I'm new to this platform, I'm currently dealing with difficulties in displaying multiple shortcodes on a single WordPress page. Despite my attempts, I'm running into conflicts with both CSS and JS. Specifically, only the first shortcode seems to apply the JS and CSS properly. If there is more than one shortcode, the JS doesn't seem to take effect. I'm struggling to pinpoint where the issues might be arising. Any assistance in identifying and resolving these conflicts would be greatly appreciated. Thank you! => wp_enqueue_scripts code where I put localized script variables: function ww_loan_calculator_front_scripts() { $post_content = get_post_field('post_content'); // Use preg_match_all to match all instances of the shortcode preg_match_all('/\[loan_calculator id=(\d+)(?: title=(?:"([^"]*)"|\'([^\']*)\'|([^"\']+))?)?]/', $post_content, $matches); // Get unique post IDs $post_ids = isset($matches[1]) ? array_unique($matches[1]) : array(); $loan_all_setting_data = get_option('ww_loan_option'); if ($post_ids) { foreach ($post_ids as $post_id) { $loan_all_setting_data = get_post_meta($post_id, 'ww_loancalc_value', true); wp_register_script('loan-calculator-jquery-ui-' . esc_attr($post_id), 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', array(), WW_LOAN_CALCULATOR_VERSION, true); // CHART JS wp_register_script('loan-calculator-chart-js-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/js/chart-js/chart.js', array(), WW_LOAN_CALCULATOR_VERSION, true); // Font awesome wp_register_style('loan-calculator-font-awesome-script-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/css/all.min.css', array(), WW_LOAN_CALCULATOR_VERSION); // Custom CSS and JS //01/05/23 wp_register_style('loan-calculator-new-theme-style-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . '/includes/admin/forms/theme-templates/new-theme/css/style.css', array(), WW_LOAN_CALCULATOR_VERSION); wp_register_script('loan-calculator-print-script-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/js/jquery.print.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true); wp_register_style('loan-calculator-frontend-style-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/css/frontend-style.css', array(), WW_LOAN_CALCULATOR_VERSION); wp_register_script('loan-calculator-frontend-script-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/js/frontend-script.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true); wp_register_script('loan-calculator-frequency-payment-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/js/frequency_payment.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true); // Get setting data for the specific post ID // Fetch Loan Calculator setting data from option table and pass in script. $currency_symbols = ww_loan_get_currency_symbol(); $loan_amount_min_value = isset($loan_all_setting_data['loan_amount_min_value']) ? $loan_all_setting_data['loan_amount_min_value'] : ""; $loan_amount_max_value = isset($loan_all_setting_data['loan_amount_max_value']) ? $loan_all_setting_data['loan_amount_max_value'] : ""; $loan_term_min_value = isset($loan_all_setting_data['loan_term_min_value']) ? $loan_all_setting_data['loan_term_min_value'] : ""; $loan_term_max_value = isset($loan_all_setting_data['loan_term_max_value']) ? $loan_all_setting_data['loan_term_max_value'] : ""; $monthly_rate = isset($loan_all_setting_data['monthly_rate']) ? $loan_all_setting_data['monthly_rate'] : ""; $application_fee = isset($loan_all_setting_data['application_fee']) ? $loan_all_setting_data['application_fee'] : ""; $back_ground_color = isset($loan_all_setting_data['back_ground_color']) ? $loan_all_setting_data['back_ground_color'] : ""; $interested_rate = isset($loan_all_setting_data['interested_rate']) ? $loan_all_setting_data['interested_rate'] : ""; $interest_rate_min_value = isset($loan_all_setting_data['interest_rate_min_value']) ? $loan_all_setting_data['interest_rate_min_value'] : ""; $interest_rate_max_value = isset($loan_all_setting_data['interest_rate_max_value']) ? $loan_all_setting_data['interest_rate_max_value'] : ""; $calculation_fee_setting_enable = isset($loan_all_setting_data['calculation_fee_setting_enable']) ? $loan_all_setting_data['calculation_fee_setting_enable'] : ""; $remove_decimal_point = isset($loan_all_setting_data['remove_decimal_point']) ? $loan_all_setting_data['remove_decimal_point'] : ""; $payment_mode_enable = isset($loan_all_setting_data['payment_mode_enable']) ? $loan_all_setting_data['payment_mode_enable'] : ""; $regular_repayment_heading = isset($loan_all_setting_data['regular_repayment_heading']) ? $loan_all_setting_data['regular_repayment_heading'] : ""; $default_balloon_amount = isset($loan_all_setting_data['ballon_per']) ? $loan_all_setting_data['ballon_per'] : ""; $disable_ballon_amt = isset($loan_all_setting_data['disable_ballon_amt']) ? $loan_all_setting_data['disable_ballon_amt'] : ""; $select_theme = isset($loan_all_setting_data['select_theme']) ? $loan_all_setting_data['select_theme'] : ""; $month_label = __('Months', 'loan-calculator-wp'); $year_label = __('Years', 'loan-calculator-wp'); $interest_label = __('Interest', 'loan-calculator-wp'); $principal_label = __('Principal', 'loan-calculator-wp'); // Setting data is passed in js file using Localize $setting_data = array( 'loan_amount_min_value' => $loan_amount_min_value, 'loan_amount_max_value' => $loan_amount_max_value, 'loan_term_min_value' => $loan_term_min_value, 'loan_term_max_value' => $loan_term_max_value, 'monthly_rate' => $monthly_rate, 'application_fee' => $application_fee, 'back_ground_color' => $back_ground_color, 'interested_rate' => $interested_rate, 'interest_rate_min_value' => $interest_rate_min_value, 'interest_rate_max_value' => $interest_rate_max_value, 'calculation_fee_setting_enable' => $calculation_fee_setting_enable, 'currency_symbols' => $currency_symbols, 'remove_decimal_point' => $remove_decimal_point, 'month_label' => $month_label, 'year_label' => $year_label, 'interest_label' => $interest_label, 'principal_label' => $principal_label, 'default_balloon_amount' => $default_balloon_amount, 'disable_ballon_amt' => $disable_ballon_amt, 'payment_mode_enable' => $payment_mode_enable, 'select_theme' => $select_theme, 'regular_repayment_heading' => $regular_repayment_heading ); wp_localize_script('loan-calculator-frontend-script-' . esc_attr($post_id), 'setting_data', $setting_data); } } else { wp_register_script('loan-calculator-jquery-ui', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', array(), WW_LOAN_CALCULATOR_VERSION, true); // CHART JS wp_register_script('loan-calculator-chart-js', WW_LOAN_CALCULATOR_URL . 'includes/js/chart-js/chart.js', array(), WW_LOAN_CALCULATOR_VERSION, true); // Font awesome wp_register_style('loan-calculator-font-awesome-script', WW_LOAN_CALCULATOR_URL . 'includes/css/all.min.css', array(), WW_LOAN_CALCULATOR_VERSION); // Custom CSS and JS //01/05/23 wp_register_style('loan-calculator-new-theme-style', WW_LOAN_CALCULATOR_URL . '/includes/admin/forms/theme-templates/new-theme/css/style.css', array(), WW_LOAN_CALCULATOR_VERSION); wp_register_script('loan-calculator-print-script', WW_LOAN_CALCULATOR_URL . 'includes/js/jquery.print.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true); wp_register_style('loan-calculator-frontend-style', WW_LOAN_CALCULATOR_URL . 'includes/css/frontend-style.css', array(), WW_LOAN_CALCULATOR_VERSION); wp_register_script('loan-calculator-frontend-script', WW_LOAN_CALCULATOR_URL . 'includes/js/frontend-script.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true); wp_register_script('loan-calculator-frequency-payment', WW_LOAN_CALCULATOR_URL . 'includes/js/frequency_payment.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true); // Get setting data for the specific post ID // Fetch Loan Calculator setting data from option table and pass in script. $currency_symbols = ww_loan_get_currency_symbol(); $loan_amount_min_value = isset($loan_all_setting_data['loan_amount_min_value']) ? $loan_all_setting_data['loan_amount_min_value'] : ""; $loan_amount_max_value = isset($loan_all_setting_data['loan_amount_max_value']) ? $loan_all_setting_data['loan_amount_max_value'] : ""; $loan_term_min_value = isset($loan_all_setting_data['loan_term_min_value']) ? $loan_all_setting_data['loan_term_min_value'] : ""; $loan_term_max_value = isset($loan_all_setting_data['loan_term_max_value']) ? $loan_all_setting_data['loan_term_max_value'] : ""; $monthly_rate = isset($loan_all_setting_data['monthly_rate']) ? $loan_all_setting_data['monthly_rate'] : ""; $application_fee = isset($loan_all_setting_data['application_fee']) ? $loan_all_setting_data['application_fee'] : ""; $back_ground_color = isset($loan_all_setting_data['back_ground_color']) ? $loan_all_setting_data['back_ground_color'] : ""; $interested_rate = isset($loan_all_setting_data['interested_rate']) ? $loan_all_setting_data['interested_rate'] : ""; $interest_rate_min_value = isset($loan_all_setting_data['interest_rate_min_value']) ? $loan_all_setting_data['interest_rate_min_value'] : ""; $interest_rate_max_value = isset($loan_all_setting_data['interest_rate_max_value']) ? $loan_all_setting_data['interest_rate_max_value'] : ""; $calculation_fee_setting_enable = isset($loan_all_setting_data['calculation_fee_setting_enable']) ? $loan_all_setting_data['calculation_fee_setting_enable'] : ""; $remove_decimal_point = isset($loan_all_setting_data['remove_decimal_point']) ? $loan_all_setting_data['remove_decimal_point'] : ""; $payment_mode_enable = isset($loan_all_setting_data['payment_mode_enable']) ? $loan_all_setting_data['payment_mode_enable'] : ""; $regular_repayment_heading = isset($loan_all_setting_data['regular_repayment_heading']) ? $loan_all_setting_data['regular_repayment_heading'] : ""; $default_balloon_amount = isset($loan_all_setting_data['ballon_per']) ? $loan_all_setting_data['ballon_per'] : ""; $disable_ballon_amt = isset($loan_all_setting_data['disable_ballon_amt']) ? $loan_all_setting_data['disable_ballon_amt'] : ""; $select_theme = isset($loan_all_setting_data['select_theme']) ? $loan_all_setting_data['select_theme'] : ""; $month_label = __('Months', 'loan-calculator-wp'); $year_label = __('Years', 'loan-calculator-wp'); $interest_label = __('Interest', 'loan-calculator-wp'); $principal_label = __('Principal', 'loan-calculator-wp'); // Setting data is passed in js file using Localize $setting_data = array( 'loan_amount_min_value' => $loan_amount_min_value, 'loan_amount_max_value' => $loan_amount_max_value, 'loan_term_min_value' => $loan_term_min_value, 'loan_term_max_value' => $loan_term_max_value, 'monthly_rate' => $monthly_rate, 'application_fee' => $application_fee, 'back_ground_color' => $back_ground_color, 'interested_rate' => $interested_rate, 'interest_rate_min_value' => $interest_rate_min_value, 'interest_rate_max_value' => $interest_rate_max_value, 'calculation_fee_setting_enable' => $calculation_fee_setting_enable, 'currency_symbols' => $currency_symbols, 'remove_decimal_point' => $remove_decimal_point, 'month_label' => $month_label, 'year_label' => $year_label, 'interest_label' => $interest_label, 'principal_label' => $principal_label, 'default_balloon_amount' => $default_balloon_amount, 'disable_ballon_amt' => $disable_ballon_amt, 'payment_mode_enable' => $payment_mode_enable, 'select_theme' => $select_theme, 'regular_repayment_heading' => $regular_repayment_heading ); wp_localize_script('loan-calculator-frontend-script', 'setting_data', $setting_data); } } add_action('wp_enqueue_scripts', 'ww_loan_calculator_front_scripts'); this is js enqueque code where i put add_shortcode function public function ww_loan_calculator_shortcode_fn($atts, $content = null) { // Default attributes $atts = shortcode_atts( array( 'id' => '', 'title' => '', ), $atts, 'loan_calculator' ); // Apply filter on ww_loan_calculator_all_setting_data $loan_calculator_all_setting_data = get_option("ww_loan_option"); $loan_all_setting_data = apply_filters('ww_loan_calculator_all_setting_data', $loan_calculator_all_setting_data, $atts); if ($atts['id'] || $atts['title']) { $select_theme = isset($loan_all_setting_data['select_theme']) ? $loan_all_setting_data['select_theme'] : ""; // If repayment chat is enabled then only enqueue chart js if (isset($loan_all_setting_data['enable_repayment_chart']) && $loan_all_setting_data['enable_repayment_chart'] == 1) { // Chart JS wp_enqueue_script('loan-calculator-jquery-ui-' . esc_attr($atts['id'])); wp_enqueue_script('loan-calculator-chart-js-' . esc_attr($atts['id'])); } $disable_font_awesome = isset($loan_all_setting_data['disable_font_awesome']) ? $loan_all_setting_data['disable_font_awesome'] : ""; // If Disable font awesome is disable then only enqueue font awesome CSS if (empty($disable_font_awesome)) { // Font Awesome wp_enqueue_style('loan-calculator-font-awesome-script-' . esc_attr($atts['id'])); } // Custom JS wp_enqueue_script('loan-calculator-frontend-script-' . esc_attr($atts['id'])); // wp_add_inline_script('loan-calculator-frontend-script'); wp_enqueue_script('loan-calculator-frequency-payment-' . esc_attr($atts['id'])); wp_enqueue_script('loan-calculator-print-script-' . esc_attr($atts['id'])); // Output content based on the theme $html = ''; if ($select_theme == 'new_theme') { ob_start(); wp_enqueue_style('loan-calculator-new-theme-style-' . esc_attr($atts['id'])); include(WW_LOAN_CALCULATOR_ADMIN . '/forms/theme-templates/new-theme/ww-loan-calculator-loan-new-theme-form.php'); $html .= ob_get_clean(); } else { ob_start(); wp_enqueue_style('loan-calculator-frontend-style-' . esc_attr($atts['id'])); // Add this line to enqueue the frontend style include(WW_LOAN_CALCULATOR_ADMIN . '/forms/theme-templates/default-theme/ww-loan-calculator-loan-default-theme-form.php'); $html .= ob_get_clean(); } } else { $select_theme = isset($loan_all_setting_data['select_theme']) ? $loan_all_setting_data['select_theme'] : ""; // If repayment chat is enabled then only enqueue chart js if (isset($loan_all_setting_data['enable_repayment_chart']) && $loan_all_setting_data['enable_repayment_chart'] == 1) { // Chart JS wp_enqueue_script('loan-calculator-jquery-ui'); wp_enqueue_script('loan-calculator-chart-js'); } $disable_font_awesome = isset($loan_all_setting_data['disable_font_awesome']) ? $loan_all_setting_data['disable_font_awesome'] : ""; // If Disable font awesome is disable then only enqueue font awesome CSS if (empty($disable_font_awesome)) { // Font Awesome wp_enqueue_style('loan-calculator-font-awesome-script'); } // Custom JS wp_enqueue_script('loan-calculator-frontend-script'); wp_enqueue_script('loan-calculator-frequency-payment'); wp_enqueue_script('loan-calculator-print-script'); // Output content based on the theme $html = ''; if ($select_theme == 'new_theme') { ob_start(); wp_enqueue_style('loan-calculator-new-theme-style'); include(WW_LOAN_CALCULATOR_ADMIN . '/forms/theme-templates/new-theme/ww-loan-calculator-loan-new-theme-form.php'); $html=ob_get_contents(); $html .= ob_get_clean(); } else { ob_start(); wp_enqueue_style('loan-calculator-frontend-style'); // Add this line to enqueue the frontend style include(WW_LOAN_CALCULATOR_ADMIN . '/forms/theme-templates/default-theme/ww-loan-calculator-loan-default-theme-form.php'); $html=ob_get_contents(); $html .= ob_get_clean(); } } // Close the main container div return $html; } // Add Calculator Shortcode add_shortcode('loan_calculator','ww_loan_calculator_shortcode_fn'); shortcode add in page : output:
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.