Hi Lucas,

We don't currently have any built-in way to achieve this, but i will do my best to try to advise what you can try as a custom workaround.

At the moment, we don't have any working example available, but i experimented with some Custom CSS and using the :after pseudo method to change the text of the Checkbox options Label.

It seems to do the trick, we just need to use the nth Child selector, and for each checkbox option you will also need to modify the position with CSS.

This is a bit of a 'hacky' workaround, but it is the best we have at the moment.

Here is my example from a Demo Table.

I used the example from this Site how to replace Text with CSS and just modified it for my Table.

This is how my initial CheckBox labels look before any customization.

First, we enable the filters above the table to see the checkbox options, then we inspect the HTML and use the same selector as you found, so first this is for all the checkbox options :

span.wdt-checkbox-label {
    visibility: hidden;
    position: relative;
}


span.wdt-checkbox-label:after {
    visibility: visible;
    content: "new label" !important;
    position: relative;
    left: -57px !important;
}

As you see, when we do the "hidden visibility" property, the original labels are still 'loading' , just as hidden, so they 'push' the new label text to the right.

If any checkbox Option has larger text, it pushes the next text further to the right.

-

But if we add the nth child method, to 'target' each of the CheckBox options individually, we can change the "left" property to move them closer to the left edge and have it look better for each option.

Here is the selector for the Span of the first option in the Checkbox, first we make it 'visibility : hidden'  :

.wpDataTablesWrapper .wpDataTableFilterSection .wdt_checkbox_option:nth-child(1) span {
    visibility : hidden
}

Then, we will replace it with any label text we need, and modify the "left" position property to align it as needed, if any of the option gets "pushed to the right side".

In my example, i will use this for the first checkbox option :

.wpDataTablesWrapper .wpDataTableFilterSection .wdt_checkbox_option:nth-child(1) span {
    visibility : hidden
}
.wpDataTablesWrapper .wpDataTableFilterSection .wdt_checkbox_option:nth-child(1) span:after {
    visibility : visible;
        content : "new label 1";
    position : relative;
        left : -59px !important;
}

This way, you can add the Custom CSS for each CheckBox option Label as needed, add this to the Table's Customize/Custom CSS and it should work.

At the moment, that is the best idea we have on this subject.

You make a future development suggestion for our developers for a built in option, though - they will do their best to make a solution in the future.

Please feel free to search on our suggestions page, 

 to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

-

If you have coding skills and wish to try to make a custom solution now,

you can check out our available hooks for Developers on this documentation and see if you can find any hook that might help.

Please be advised that custom solutions with hooks are not included in our support.

You can also research resources such as Stack Overflow to see if any other user perhaps found a workaround.

( We do like to give examples for certain solutions, but for this use-case, we, unfortunately, don't have anything yet)

And since this is a Pre-Purchase Ticket, i am not sure if you have the Premium version of our Plugin or not.

If you only use the Lite Version, you won't have the Customize Section to add this CSS to a specific Table, you can then only add CSS to the global CSS in the Main Plugin settings/Custom JS and CSS/Custom CSS, but you won't achieve this specific solution as desired, then you would need to make further customizations if you have the coding skill for it.

And i just wanted to point out ( in case if you got the Lite Version), you can try wpDataTables before purchasing

 on our sandbox Demo sites ( you can find links for the main plugin Demo,  

as well as add-on Demos, in my signature),

and there is a 15-day money-back guarantee period, 

so if you purchase the plugin, you can safely fully test it out, and if it doesn't fit your needs you can request and receive a refund in that period. ( same goes for all plugins and add-ons)

Let me know if you have any additional questions. 

Hi Lucas,

I just forgot to add the last detail for this custom workaround idea with the pseudo CSS :after method to change the text of each CheckBox option.

So, as mentioned, for the first checkbox option we do the 'first child' , or with the 'nth child' as 1 in brackets;

then for the second one, we would just change to number 2 inside the nth child brackets, like :

.wpDataTablesWrapper .wpDataTableFilterSection .wdt_checkbox_option:nth-child(2) span {
    visibility : hidden
}
.wpDataTablesWrapper .wpDataTableFilterSection .wdt_checkbox_option:nth-child(2) span:after {
    visibility : visible;
        content : "new label 1";
    position : relative;
        left : -59px !important;
}

Just depending on how much original text you have for each checkbox option in your data, you will probably need to modify that "left" property to get them aligned and looking nicer, rather than being 'pushed to the right side'.

And then for each next CheckBox option, of course, we would change to 3, 4, and so on in the "nth child" brackets selector.

I know this might be tedious to do manually if you have a lot of possible CheckBox options, but that is the only custom idea we have at the moment with CSS.

-

You're welcome, i am happy to help.

I hope you will succeed with this temporary workaround, while our developers work for better solutions in the future.

Of course, you will also have our hooks at your disposal, we plan to add more hooks and more custom examples to the Documentation section for Developers in the near future as well.

Thank you for the kind wishes, i wish the same for you.

All the best in the New Year and have a lovely day.

If anything else comes up that we might assist with, please don't hesitate to reach out to us with new tickets.