Using your plugins as checkboxes

Hi @qwik3r! Yes, you should totally be able to do something like this with WPComplete. You could adjust your custom CSS (which you can do in the admin advanced settings) to set a graphic as the background like so:

a.wpc-button-complete, a.wpc-complete, a.wpc-button-completed, a.wpc-completed {
background-size: 18px auto;
margin: 0;
padding: 0 0 0 30px;
color: inherit;
}

a.wpc-button-complete, a.wpc-complete {
background: url(/unchecked.svg) left center no-repeat;
}

a.wpc-button-completed, a.wpc-completed {
background: url(/checked.svg) left center no-repeat;
}

Hope that helps!

I was wondering about the exact same thing! Thanks for sharing this. I can’t wait to try it.

But I have follow up questions which I feel are suitable to this thread. (If not, let me know and I’ll post a new support thread).

If this technique were used in a simple course scenario:

1) Can a lesson have a checkbox wpcomplete link on both the course page list of lessons and inside the lesson itself?

2) Would that button be synchronized (checked/unchecked in both places) from one click?

Hi @wplms24!

1) Yes! You can do something like: [wpc_button post_id=”123″ name=”my-button-name”] and you can use that in multiple places but still refer to the same button. So you could include this on the course page list of lessons AND inside the lesson itself.

2) Yes! All of our buttons are sync’d for each user because they are stored in the database.

Hope that helps! Excited to see what you build!

Hello Zack!
This worked flawlessly!

One thing though, if I remove the text “Complete” or “Completed” it will make the checkbox disappear. How would I go about just showing the checkbox with NO text next to it.

Thanks!

Hey guys,

I figured it out if anyone wants to know:
Simply add a height in pixels dependant on the size of the checkbox image. Add a min-width in pixels as well, you don’t want to make it a fixed width as the “Saving…” content appears when you click the checkbox, I find that to be very useful.

Lastly.
I do not recommend using SVG on WordPress for security purposes I’d recommend using PNG. Since we are talking about a very tiny image, it shouldn’t be a problem in terms of size.

a.wpc-button-complete, a.wpc-complete, a.wpc-button-completed, a.wpc-completed { background-size: 16px auto;
height:16px;
min-width:16px;
margin: 0;
padding: 0 0 0 30px;
color: inherit;
}

a.wpc-button-complete, a.wpc-complete {
background: url(/wp-content/uploads/2021/02/check-box-16.png) left center no-repeat;
}

a.wpc-button-completed, a.wpc-completed {
background: url(/wp-content/uploads/2021/02/check-box-active-16.png) left center no-repeat;
}