2

I would like to implement a checkbox icon, in the same way as the Botiga theme.

I’ve added a code snippet, and an additional checkbox "Policy terms" appears.

But I can’t figure out about the CSS, the checkbox is not visible.

I think the problem is here:

<input type="checkbox" class="input-checkbox woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="privacy_policy" id="privacy_policy" value="1">

And it should be:

<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="privacy_policy" id="privacy_policy" value="1">

I don't know how to remove "input-checkbox" value class attribute.

Here is my code snippet:

add_action( 'woocommerce_checkout_after_terms_and_conditions', 'add_privacy_block', 9 );
function add_privacy_block() {
    woocommerce_form_field( 'privacy_policy', array(
        'type' => 'checkbox',
        'class' => array('form-row privacy'),
        'label_class' => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
        'input_class' => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
        'required' => true,
        'label' => 'Я прочитал и согласен с <a href="https://genreeds.ru/politic-conf/"><b>политикой конфиденциальности</b></a>',
    ));
}
add_action( 'woocommerce_checkout_process', 'privacy_checkbox_error_message' );
function privacy_checkbox_error_message() {
    if ( ! (int) isset( $_POST['privacy_policy'] ) ) {
        wc_add_notice( __( 'Вам необходимо отметить галочкой, что вы ознакомлены с политикой конфиденциальности' ), 'error' );
    }
}

Here is the linked page with this issue.

I can make a standard checkbox, but then I need to change the checkbox that comes with the theme above.

Probably easier to achieve that if that additional checkbox with the "botiga" is displayed?

I think the solution is very simple, but I don't have enough knowledge. Any help is appreciated.


Update:

Variant 1

enter image description here

If I add "label_class_disabled" to the snippet, then the checkbox appears. But he has a different design, standard.

Variant 2

enter image description here

Code the Policy checkbox

enter image description here

And here is how the checkbox code looks like that WORKS

enter image description here

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
genreeds48
  • 33
  • 7
  • Maybe simply remove in your code ` input-checkbox` from the line `'input_class' => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),`… Note that nobody knows anything about "Botiga", so try to add some links or/and screenshots of that icon checkbox, or better the html related code for this "botiga" checkbox. – LoicTheAztec Jun 25 '23 at 16:21
  • Thanks for the quick response. 1) I'll try your advice now 2) If I add "label_class_disabled" to the snippet, then the checkbox appears. But he has a different design, standard. 3) Here is the Botiga template - https://athemes.com/theme/botiga/ – genreeds48 Jun 25 '23 at 16:57
  • https://wordpress.org/themes/botiga/ I added. Look here please. Your advice didn't help. – genreeds48 Jun 25 '23 at 17:04
  • https://genreeds.ru/checkout/ It's my page site with PROBLEM! – genreeds48 Jun 25 '23 at 17:20
  • I added the code to the page https://genreeds.ru/my-account There's the same problem with the checkbox Policy – genreeds48 Jun 25 '23 at 18:12
  • I have answered… I tested that and it seems to work. – LoicTheAztec Jun 25 '23 at 19:35

1 Answers1

2

The code of WooCommerce terms and conditions checkbox in Checkout page is located in terms.php WooCommerce template file.

On your main function, I have used a similar code for your "policy" checkbox, and I have changed a bit your other function too.

add_action( 'woocommerce_checkout_after_terms_and_conditions', 'privacy_checkbox_block' );
function privacy_checkbox_block() {
    $checkbox_text = sprintf( '%s <a href="%s"><strong>%s</strong></a>', __( 'Я прочитал и согласен с' ), 
    esc_url( site_url('/politic-conf/') ), __( 'политикой конфиденциальности' ) );
    ?>
    <div class="woocommerce-privacy-policy-wrapper">
        <p class="form-row validate-required">
            <label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
            <input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="privacy_policy" <?php checked( false, true ); ?> id="privacy-policy" />
                <span class="woocommerce-privacy-policy-checkbox-text"><?php echo $checkbox_text; ?></span>&nbsp;<abbr class="required" title="<?php esc_attr_e( 'required', 'woocommerce' ); ?>">*</abbr>
            </label>
            <input type="hidden" name="policy-field" value="1" />
        </p>
    </div>
    <?php
}

add_action( 'woocommerce_checkout_process', 'privacy_checkbox_validation' );
function privacy_checkbox_validation() {
    if ( ! isset( $_POST['privacy_policy'] ) ) {
        wc_add_notice( __( 'Вам необходимо отметить галочкой, что вы ознакомлены с политикой конфиденциальности' ), 'error' );
    }
}

It should work now and be visible… The validation works too.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • Yes. You are a god! God of WordPress. Checkbox and icon - appeared. Now I want to try to add the same when the user will "Register an account" – genreeds48 Jun 26 '23 at 07:53
  • Good ! … Account registration, you can try to use [this answer code](https://stackoverflow.com/a/55953515/3730754) and make it yourself. If you have an issue with it, ask a new question, providing your code attempt with details and explanations. You can notify me here if you like. – LoicTheAztec Jun 26 '23 at 12:03
  • I made the code in 30 seconds. Based on yours. Thank you very much! When there is a working basis - it's very easy to customize! P.S. I am currently working on adding google captcha to the user registration field (to protect against spam) – genreeds48 Jun 26 '23 at 14:39
  • Most likely, I will need your advice. Soon About: placing captcha in the right place (and not random). Let's say that the captcha is strictly after the checkboxes. (in fields "registration users") – genreeds48 Jun 26 '23 at 14:40
  • The only point is to check if the checkbox is mandatory. Or not mandatory. I check how it works. – genreeds48 Jun 26 '23 at 14:43
  • To make it mandatory, you will send an error message in the field validation function using something like `if ( ! isset($_post['your_checkbox_name_key']) ) { // add error notice }` – LoicTheAztec Jun 26 '23 at 14:51
  • Friend. The message is displayed. The logic itself works. That is, if you do not check the box, it will not skip registration. But there is a problem - no error message is displayed on the account registration page. P.S. I still have such a question. Is there a way to specify the place where this or that error should be displayed? Let's say on the checkout page I would like each error to be displayed exactly under the field (address, index, checkboxes, and so on) where there are required fields. Well, or at least part in one column and part in another. – genreeds48 Jun 27 '23 at 14:01
  • When everything is in a heap, it's inconvenient. function truebox( $errors ) { if ( ! isset($_post['privacy_policy']) ) { $errors->add( 'privacy_policy_reg_error', 'Вам нужно принять политику конфиденциальности.' ); } return $errors; – genreeds48 Jun 27 '23 at 14:02
  • @genreeds48 Is better to ask a new question I think, with clear explanations and some provided code. – LoicTheAztec Jun 27 '23 at 15:29
  • Friend, I asked. :))) So far, I'm testing myself. Plus I found 1 more problem. When I update the product (number of units) in the basket, the picture disappears. Yeah... – genreeds48 Jun 27 '23 at 15:35
  • https://stackoverflow.com/questions/76558675/arbitrary-text-for-checkbox-error-is-not-displayed-user-registration-page-wooc – genreeds48 Jun 27 '23 at 15:35