[Resolved] Customizing checkboxes on wpv-control-postmeta

[Author]

Posts

[nicoleM]

Hi, i want to ask some question on how to custom checkboxes in Toolset Search and Pagination.

1. i want to make the checkboxes look like button. There's an question on stackoverflow but i'm failing on achieve it because i can't add custom class on the class="checkbox". Link : https://stackoverflow.com/questions/7642277/css-styled-a-checkbox-to-look-like-a-button-is-there-a-hover

2. I want to customize another checkbox to look like on the destination parts. I followed the tutorial from w3school but I'm failed to adding <span> part after the <input> tags. Link : hidden link

3. I want to create clear filter for each custom filter, but as far as i know, the current filter that Toolset provide are clearing all available filter.

Is there any tutorial or link so i can resolve this issue?
Thank You

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - the customize the checkboxes as per your requirement require a good knowledge of CSS and javascript.

This needs custom programming which is beyond the scope of our support policy. If you need custom programming for your project, please feel free to contact our certified partners:
=> https://toolset.com/contractors/

However - I can show you the idea, you should try to add your filters normally to your "Search and pagination" section and save the view and load the view on frontend.
- Then, you should copy the rendered HTML from the view source for your desired filter field and copy that HTML to your "Search and Pagination" section and remove the filters you added using the shortcodes [wpv-control-postmeta].

Now, you have HTML for your filter field within the "Search and Pagination" section and you can customize its looks as per your need.

[nicoleM]

Thank you, the design are done. can you assist me how to keep the checkbox states after user click the checkbox?
the state "checked='true'" are missing after the filter processing complete.

Is there any methods or tutorial to keep the checked state? i have little bit skill on Javascript & jQuery

Thank You

[Minesh]

Well - could you please share problem URL and access details so I can able to see how you configured your checkboxes with views.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please check now.
=> hidden link

I've added the following shortcode to Toolset "Custom Code" section:
=> hidden link

add_shortcode('set_field_checked', 'func_set_field_checked');
function func_set_field_checked($atts, $content){
    extract( shortcode_atts( array(
        'url_param'  => '',
        'value' => '',
    ), $atts ) );
    $res = '';
    if(isset($_GET[$url_param]) && in_array($value, $_GET[$url_param])){
        $res = 'checked="checked"';
    }
    return $res;
}

More info:
=> https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/

And within your view's filt, I've added the shortcode as gien under:

[set_field_checked url_param="wpv-wpcf-age" value="13"]

Where:
- url_param and value attribute are different for each input type

You can check how the above shortcode is added with each input within the "Search and Pagination" box:
=> hidden link

I can see that now it works. Can you please confirm.

[nicoleM]

I don't know what to do if i'm not asking for your help.
My issue is resolved now. Thank you Minesh!