Dropdowns not working on the front-end?

If the dropdowns in your table work fine in the back-end preview, but not on the front-end, it’s likely caused by a conflict between your WordPress theme’s Bootstrap version and our Plugin.

Step 1: Confirm the Issue

1. Switch to a default WordPress theme, like Twenty Twenty-Five

2. Refresh the page and check if the dropdowns now work

If they work with the default theme → your current theme likely conflicts with the dropdown system we use in wpDataTables.

First Thing to Try

Go to:
wpDataTables → Settings → Customize → Include full bootstrap front-end

Uncheck this option.

Then refresh your front-end page and check if the dropdowns are now working.

• If they work — great! You can leave the option disabled.

• If they still don’t work — go back and re-enable the checkbox, then proceed to the workaround below.

Why This Happens

wpDataTables currently uses Bootstrap 3.
Many themes today use Bootstrap 4 or newer, which can cause conflicts — especially with dropdown components.

Our developers are working on updating Bootstrap in a future version, but in the meantime, here’s a safe workaround.

The Fix (Workaround)

Step 2: Add a Code Snippet to Your Theme’s (or child theme’s) functions.php

This is an example we used for the ‘VW Ecommerce Store’ theme:

function bootstrap_dequeue_script() {
    $page_content = get_the_content();
    $pageContainsWpdt = has_shortcode($page_content, 'wpdatatable');
if ($pageContainsWpdt) {
        wp_dequeue_script('bootstrap-js');
    }
}
add_action('wp_print_scripts', 'bootstrap_dequeue_script', 100);

What to Customize:

• 'bootstrap-js' → Replace this with the script slug your theme uses to load Bootstrap.
  Common examples include 'bootstrap', 'bootstrap-js', or others.
  🛈 If you're unsure, ask your theme’s support team for the correct script handle — then replace it in this line:
  wp_dequeue_script('your-theme-slug-here');

This code is safe to use and won’t be affected by wpDataTables plugin updates.

Just note: We recommend using a child theme, because if you update your main theme, any custom code added to its functions.php file might be overwritten.

You can read more about the benefits of using a child theme here:
https://www.wpbeginner.com/glossary/child-theme/

Step 3: Add Custom CSS

Go to:
wpDataTables → Settings → Custom JS and CSS → Custom wpDataTables CSS

Paste this:

.bootstrap-select.btn-group .dropdown-menu {
    visibility: visible;
    transform: unset;
    opacity: 1;
    -webkit-transform: unset;
}

This ensures the dropdown is fully visible and interactive.

Looking Ahead

Our developers are working on updating the internal Bootstrap version in a future plugin release.

We don’t have an exact ETA, but you can follow our changelog and subscribe to our newsletter to be notified about major fixes and improvements.

Once that update is released, this workaround will no longer be necessary.

Need Help?

If the fix doesn’t solve the issue, feel free to reach out to our Support Team.
We’ll be happy to assist you!