Pregunta sobre WooCommerce de Wordpress:

Eliminar el elemento span de la función woocommerce_form_field ()

Un usuario preguntó 👇

¡Hola!

He tenido un problema durante más de una semana y no puedo encontrar ninguna solución.

De hecho, estoy desarrollando un tema de Woocommerce. Está casi terminado, pero dos cosas (son las mismas cosas en páginas diferentes) me evitan terminar el tema.

El es woocommerce_form_field() aplica <span class="woocommerce-input-wrapper"> antes del elemento de entrada y </span> despues de el. El problema es que debido al elemento span, el cuadro de entrada de abajo está justo al lado de la etiqueta, lo que se ve muy mal. Quiero que la etiqueta esté en la parte superior y el campo de entrada debajo (como en el tema Storefront). Desafortunadamente, no todas las soluciones que probé funcionaron.

Aquí está la función y la línea que agrega el elemento span: https://github.com/woocommerce/woocommerce/blob/7b13527ba5deb8d56ea901208f46ea5be068f401/includes/wc-template-functions.php#L2646

Espero que alguien pueda ayudarme. ¡Gracias por tu tiempo!

(@tamerkilinc)

Hace 2 años, 5 meses

Información extra:

La función se llamó en el /myaccount/form-edit-address.php modelo. Se llama a los siguientes argumentos: woocommerce_form_field( $key, $field, wc_get_post_data_by_key( $key, $field['value'] ) );

Desafortunadamente, parece que no hay ninguna opción para agregar un argumento para eliminar el elemento span. Para mí hay dos opciones que no son buenas.

Nr.1) Vuelva a escribir la función (elimine la siguiente línea: $field_html .= '<span class="woocommerce-input-wrapper">' . $field; y llame a la nueva función en una plantilla de dirección de edición de formulario personalizada.

Nr.2) Copie la salida HTML del woocommerce_form_field() función, elimine todos los elementos span e inserte el HTML directamente en la plantilla de dirección de edición de formulario -.

La razón por la que abrí este tema es porque quiero ver si hay opciones mejores y más inteligentes para resolver este problema.

Todo lo mejor, Tamer Kilinc

(@jessepearson)

Ingeniero Automático de Felicidad

Hace 2 años, 5 meses

@tamerkilinc Veo tu dilema. Una opción, como mencionaste, es copiar la función y eliminar las líneas que se agregan al html al que te refieres. La otra es usar una expresión regular para eliminar el material usando el woocommerce_form_field filtrar.

Personalmente haría lo último si no puede resolver esto a través de CSS, durará más con compatibilidad futura.

(@tamerkilinc)

Hace 2 años, 5 meses

Hola @jessepearson,

Gracias por su respuesta. ¿Puede explicar la segunda opción que menciona?

La otra es usar una expresión regular para eliminar el contenido usando el filtro woocommerce_form_field.

Ahora mismo no entiendo muy bien qué quieres decir exactamente … tal vez un ejemplo pueda ayudar.

¡Gracias por tu tiempo y ayuda!

(@jessepearson)

Ingeniero Automático de Felicidad

Hace 2 años, 5 meses

@tamerkilinc Una función se puede crear y llamar con el woocommerce_form_field filtrar. Cada campo de formulario de la función que mencionaste pasa por este filtro, de modo que el contenido se puede editar con él.

Los filtros se describen aquí: https://developer.wordpress.org/plugins/hooks/filters/

Las expresiones regulares en PHP le permiten buscar, encontrar, reemplazar, etc. ciertos parámetros. Esto es demasiado profundo para que lo cubra aquí, pero podría buscar la primera parte del lapso <span class="woocommerce-input-wrapper"> y reemplácelo, luego busque el último </span> y reemplazar eso también.

Las expresiones regulares se tratan aquí:
http://php.net/manual/en/reference.pcre.pattern.syntax.php

Es posible que pueda pedirle ayuda a Stack Overflow para desarrollar una función para extraer esos dos bits de html de la salida a través de expresiones regulares, pero eso está demasiado desarrollado para que podamos ayudarlo aquí.

(@tamerkilinc)

Hace 2 años, 5 meses

¡Gracias por tu ayuda! Como no tengo tiempo para aprender expresiones regulares y reemplazar el elemento span, copié la función y cambié las líneas responsables del elemento span.

Espero poder seguir adelante sin actualizar la función lo suficiente. Sería muy útil si el woocommerce_form_field una función obtendría un argumento para el futuro que puede agregar o eliminar el elemento span.

El tema se puede cerrar.

Aquí está el código para custom_woocommerce_form_field función:

function custom_woocommerce_form_field( $key, $args, $value = null ) {
	$defaults = array(
		'type'              => 'text',
		'label'             => '',
		'description'       => '',
		'placeholder'       => '',
		'maxlength'         => false,
		'required'          => false,
		'autocomplete'      => false,
		'id'                => $key,
		'class'             => array(),
		'label_class'       => array(),
		'input_class'       => array(),
		'return'            => false,
		'options'           => array(),
		'custom_attributes' => array(),
		'validate'          => array(),
		'default'           => '',
		'autofocus'         => '',
		'priority'          => '',
	);
	$args = wp_parse_args( $args, $defaults );
	$args = apply_filters( 'custom_woocommerce_form_field_args', $args, $key, $value );
	if ( $args['required'] ) {
		$args['class'][] = 'validate-required';
		$required        = '&nbsp;<abbr class="required" title="' . esc_attr__( 'required', 'woocommerce' ) . '">*</abbr>';
	} else {
		$required = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
	}
	if ( is_string( $args['label_class'] ) ) {
		$args['label_class'] = array( $args['label_class'] );
	}
	if ( is_null( $value ) ) {
		$value = $args['default'];
	}
	// Custom attribute handling.
	$custom_attributes         = array();
	$args['custom_attributes'] = array_filter( (array) $args['custom_attributes'], 'strlen' );
	if ( $args['maxlength'] ) {
		$args['custom_attributes']['maxlength'] = absint( $args['maxlength'] );
	}
	if ( ! empty( $args['autocomplete'] ) ) {
		$args['custom_attributes']['autocomplete'] = $args['autocomplete'];
	}
	if ( true === $args['autofocus'] ) {
		$args['custom_attributes']['autofocus'] = 'autofocus';
	}
	if ( $args['description'] ) {
		$args['custom_attributes']['aria-describedby'] = $args['id'] . '-description';
	}
	if ( ! empty( $args['custom_attributes'] ) && is_array( $args['custom_attributes'] ) ) {
		foreach ( $args['custom_attributes'] as $attribute => $attribute_value ) {
			$custom_attributes[] = esc_attr( $attribute ) . '="' . esc_attr( $attribute_value ) . '"';
		}
	}
	if ( ! empty( $args['validate'] ) ) {
		foreach ( $args['validate'] as $validate ) {
			$args['class'][] = 'validate-' . $validate;
		}
	}
	$field           = '';
	$label_id        = $args['id'];
	$sort            = $args['priority'] ? $args['priority'] : '';
	$field_container = '<p class="form-row %1$s" id="%2$s" data-priority="' . esc_attr( $sort ) . '">%3$s</p>';
	switch ( $args['type'] ) {
		case 'country':
			$countries = 'shipping_country' === $key ? WC()->countries->get_shipping_countries() : WC()->countries->get_allowed_countries();
			if ( 1 === count( $countries ) ) {
				$field .= '<strong>' . current( array_values( $countries ) ) . '</strong>';
				$field .= '<input type="hidden" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" value="' . current( array_keys( $countries ) ) . '" ' . implode( ' ', $custom_attributes ) . ' class="country_to_state" readonly="readonly" />';
			} else {
				$field = '<select name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" class="country_to_state country_select form-control' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" ' . implode( ' ', $custom_attributes ) . '><option value="">' . esc_html__( 'Select a country&hellip;', 'woocommerce' ) . '</option>';
				foreach ( $countries as $ckey => $cvalue ) {
					$field .= '<option value="' . esc_attr( $ckey ) . '" ' . selected( $value, $ckey, false ) . '>' . $cvalue . '</option>';
				}
				$field .= '</select>';
				$field .= '<noscript><button type="submit" name="woocommerce_checkout_update_totals" value="' . esc_attr__( 'Update country', 'woocommerce' ) . '">' . esc_html__( 'Update country', 'woocommerce' ) . '</button></noscript>';
			}
			break;
		case 'state':
			/* Get country this state field is representing */
			$for_country = isset( $args['country'] ) ? $args['country'] : WC()->checkout->get_value( 'billing_state' === $key ? 'billing_country' : 'shipping_country' );
			$states      = WC()->countries->get_states( $for_country );
			if ( is_array( $states ) && empty( $states ) ) {
				$field_container = '<p class="form-row %1$s" id="%2$s" style="display: none">%3$s</p>';
				$field .= '<input type="hidden" class="hidden" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" value="" ' . implode( ' ', $custom_attributes ) . ' placeholder="' . esc_attr( $args['placeholder'] ) . '" readonly="readonly" />';
			} elseif ( ! is_null( $for_country ) && is_array( $states ) ) {
				$field .= '<select name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" class="state_select form-control' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" ' . implode( ' ', $custom_attributes ) . ' data-placeholder="' . esc_attr( $args['placeholder'] ) . '">
						<option value="">' . esc_html__( 'Select a state&hellip;', 'woocommerce' ) . '</option>';
				foreach ( $states as $ckey => $cvalue ) {
					$field .= '<option value="' . esc_attr( $ckey ) . '" ' . selected( $value, $ckey, false ) . '>' . $cvalue . '</option>';
				}
				$field .= '</select>';
			} else {
				$field .= '<input type="text" class="input-text ' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" value="' . esc_attr( $value ) . '"  placeholder="' . esc_attr( $args['placeholder'] ) . '" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" ' . implode( ' ', $custom_attributes ) . ' />';
			}
			break;
		case 'textarea':
			$field .= '<textarea name="' . esc_attr( $key ) . '" class="input-text ' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" id="' . esc_attr( $args['id'] ) . '" placeholder="' . esc_attr( $args['placeholder'] ) . '" ' . ( empty( $args['custom_attributes']['rows'] ) ? ' rows="2"' : '' ) . ( empty( $args['custom_attributes']['cols'] ) ? ' cols="5"' : '' ) . implode( ' ', $custom_attributes ) . '>' . esc_textarea( $value ) . '</textarea>';
			break;
		case 'checkbox':
			$field = '<label class="checkbox ' . implode( ' ', $args['label_class'] ) . '" ' . implode( ' ', $custom_attributes ) . '>
						<input type="' . esc_attr( $args['type'] ) . '" class="input-checkbox ' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" value="1" ' . checked( $value, 1, false ) . ' /> ' . $args['label'] . $required . '</label>';
			break;
		case 'text':
		case 'password':
		case 'datetime':
		case 'datetime-local':
		case 'date':
		case 'month':
		case 'time':
		case 'week':
		case 'number':
		case 'email':
		case 'url':
		case 'tel':
			$field .= '<input type="' . esc_attr( $args['type'] ) . '" class="input-text form-control' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" placeholder="' . esc_attr( $args['placeholder'] ) . '"  value="' . esc_attr( $value ) . '" ' . implode( ' ', $custom_attributes ) . ' />';
			break;
		case 'select':
			$field   = '';
			$options = '';
			if ( ! empty( $args['options'] ) ) {
				foreach ( $args['options'] as $option_key => $option_text ) {
					if ( '' === $option_key ) {
						// If we have a blank option, select2 needs a placeholder.
						if ( empty( $args['placeholder'] ) ) {
							$args['placeholder'] = $option_text ? $option_text : __( 'Choose an option', 'woocommerce' );
						}
						$custom_attributes[] = 'data-allow_clear="true"';
					}
					$options .= '<option value="' . esc_attr( $option_key ) . '" ' . selected( $value, $option_key, false ) . '>' . esc_attr( $option_text ) . '</option>';
				}
				$field .= '<select name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" class="select form-control' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" ' . implode( ' ', $custom_attributes ) . ' data-placeholder="' . esc_attr( $args['placeholder'] ) . '">
							' . $options . '
						</select>';
			}
			break;
		case 'radio':
			$label_id = current( array_keys( $args['options'] ) );
			if ( ! empty( $args['options'] ) ) {
				foreach ( $args['options'] as $option_key => $option_text ) {
					$field .= '<input type="radio" class="input-radio form-control' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" value="' . esc_attr( $option_key ) . '" name="' . esc_attr( $key ) . '" ' . implode( ' ', $custom_attributes ) . ' id="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '"' . checked( $value, $option_key, false ) . ' />';
					$field .= '<label for="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '" class="radio ' . implode( ' ', $args['label_class'] ) . '">' . $option_text . '</label>';
				}
			}
			break;
	}
	if ( ! empty( $field ) ) {
		$field_html = '';
		if ( $args['label'] && 'checkbox' !== $args['type'] ) {
			$field_html .= '<label for="' . esc_attr( $label_id ) . '" class="' . esc_attr( implode( ' ', $args['label_class'] ) ) . '">' . $args['label'] . $required . '</label>';
		}
		$field_html .= $field;
		if ( $args['description'] ) {
			$field_html .= '<span class="description" id="' . esc_attr( $args['id'] ) . '-description" aria-hidden="true">' . wp_kses_post( $args['description'] ) . '</span>';
		}
		//$field_html .= '</span>';
		$container_class = esc_attr( implode( ' ', $args['class'] ) );
		$container_id    = esc_attr( $args['id'] ) . '_field';
		$field           = sprintf( $field_container, $container_class, $container_id, $field_html );
	}
	/**
		 * Filter by type.
		 */
	$field = apply_filters( 'custom_woocommerce_form_field_' . $args['type'], $field, $key, $args, $value );
	/**
		 * General filter on form fields.
		 *
		 * @since 3.4.0
		 */
	$field = apply_filters( 'custom_woocommerce_form_field', $field, $key, $args, $value );
	if ( $args['return'] ) {
		return $field;
	} else {
		echo $field; // WPCS: XSS ok.
	}
}

Todo lo mejor, Tamer Kilinc

(@wbrubaker)

Hace 2 años, 5 meses

Hola domador

Quiero señalar que el woocommerce_form_field Es una función conectada, por lo que no necesita cambiarle el nombre y puede usarla en el archivo functions.php de su tema u otro plugin, siempre que el archivo contenga la gran cantidad de funciones antes de que WooCommerce se cargue.

En cuanto a solicitar un cambio en el comportamiento predeterminado, hay algunos lugares en los que es posible que desee abrir una función:

1. El tablero de ideas de WooCommerce aquí: http://ideas.woocommerce.com/forums/133476-woocommerce
2. El rastreador de problemas de WithCommerce github aquí: https://github.com/woocommerce/woocommerce/issues – Abrir un problema para su consideración ayudaría a su causa si tiene detalles que respalden por qué solicita este tipo de cambio. Dado que la función en cuestión está conectada, no creo que ni siquiera se considere porque puede cambiar la forma en que funciona la función para su propio escenario de WooCommerce, pero cualquier cambio afectaría a todos los que usan WooCommerce y por lo que es poco probable que se cambie en WooCommerce sin montañas justificadas.

Tuyo sinceramente,

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *