Как изменить поле для ввод данных карты в woocomerce?

Question

[Евгения Сатонина]

Сейчас оно в одну строку и не удобно вводить, особенно с телефона. Может есть какой-то плагин, который изменяет внешний вид ?

Comments

[Олег]

Есть правильные руки, способные реализовать любую форму.
Контакты в пофиле)

Answer 1

[maksam07]

Не уверен, конкретно в вашем случае, но должно работать

add_filter( 'woocommerce_credit_card_form_fields', 'customize_credit_card_fields', 10, 2 );

function customize_credit_card_fields( $fields, $gateway_id ) {
    $fields['card-number-field'] = '<p class="form-row form-row-wide">
        <label for="' . esc_attr( $gateway_id ) . '-card-number">' . esc_html__( 'Номер карты', 'woocommerce' ) . ' <span class="required">*</span></label>
        <input id="' . esc_attr( $gateway_id ) . '-card-number" class="input-text wc-credit-card-form-card-number" inputmode="numeric" autocomplete="cc-number" autocorrect="no" autocapitalize="no" spellcheck="no" type="tel" maxlength="20" placeholder="•••• •••• •••• ••••" ' . $this->field_name( 'card-number' ) . ' />
    </p>';

    $fields['card-expiry-field'] = '<p class="form-row form-row-first">
        <label for="' . esc_attr( $gateway_id ) . '-card-expiry">' . esc_html__( 'Срок действия', 'woocommerce' ) . ' <span class="required">*</span></label>
        <input id="' . esc_attr( $gateway_id ) . '-card-expiry" class="input-text wc-credit-card-form-card-expiry" inputmode="numeric" autocomplete="cc-exp" autocorrect="no" autocapitalize="no" spellcheck="no" type="tel" maxlength="7" placeholder="ММ / ГГ" ' . $this->field_name( 'card-expiry' ) . ' />
    </p>';

    $fields['card-cvc-field'] = '<p class="form-row form-row-last">
        <label for="' . esc_attr( $gateway_id ) . '-card-cvc">' . esc_html__( 'Код безопасности', 'woocommerce' ) . ' <span class="required">*</span></label>
        <input id="' . esc_attr( $gateway_id ) . '-card-cvc" class="input-text wc-credit-card-form-card-cvc" inputmode="numeric" autocomplete="off" autocorrect="no" autocapitalize="no" spellcheck="no" type="tel" maxlength="4" placeholder="•••" ' . $this->field_name( 'card-cvc' ) . ' />
    </p>';

    return $fields;
}