Come Creare Tab Personalizzate in WooCommerce con Campi Multiselect

Hai bisogno di creare un Tab personalizzato nelle Impostazioni di WooCommerce e aggiungere delle impostazioni personalizzate usando anche multiselect?

Qui sotto troverai il codice di base necessario.

Usa questo codice in un plugin oppure nel file functions.php del tema.

Indice

Creazione del Tab Personalizzato
Implementazione dei Campi Multiselect
Ottenere il valore delle impostazioni
Codice completo

Creazione del Tab Personalizzato

Per poter creare un tab personalizzato nelle impostazioni di WooCommerce, usa questo codice:

// Add custom tab to WooCommerce settings
add_filter('woocommerce_settings_tabs_array', 'riaco_add_custom_settings_tab', 50);
function riaco_add_custom_settings_tab($settings_tabs) {
    $settings_tabs['riaco_custom_tab'] = esc_html__('Riaco Settings', 'woocommerce');
    return $settings_tabs;
}

Il tab è stato creato.

Implementazione dei Campi Multiselect

Definiamo l’array delle nostre impostazioni personalizzate:

// Define the settings fields
function riaco_get_custom_settings() {
	$settings = array(
		array(
			'name' => esc_html__( 'Riaco Custom Settings', 'woocommerce' ),
			'type' => 'title',
			'desc' => esc_html__( 'Configure your custom Riaco options here.', 'woocommerce' ),
			'id'   => 'riaco_section_title',
		),

		// Multiselect with custom options.

		array(
			'name'              => esc_html__( 'Available Shipping Methods', 'woocommerce' ),
			'type'              => 'multiselect',
			'desc'              => esc_html__( 'Select which shipping methods to enable.', 'woocommerce' ),
			'id'                => 'riaco_shipping_methods',
			'css'               => 'min-width:350px;',
			'class'             => 'wc-enhanced-select',
			'options'           => array(
				'flat_rate'     => esc_html__( 'Flat Rate', 'woocommerce' ),
				'free_shipping' => esc_html__( 'Free Shipping', 'woocommerce' ),
				'local_pickup'  => esc_html__( 'Local Pickup', 'woocommerce' ),
				'express'       => esc_html__( 'Express Delivery', 'woocommerce' ),
			),
			'default'           => array(),
			'custom_attributes' => array(
				'data-placeholder' => esc_attr__( 'Choose shipping methods...', 'woocommerce' ),
			),
		),

		// Regular multiselect field.
		array(
			'title'             => esc_html__( 'Select Product Categories', 'woocommerce' ),
			'type'              => 'multiselect',
			'desc'              => esc_html__( 'Choose multiple product categories.', 'woocommerce' ),
			'id'                => 'riaco_product_categories',
			'css'               => 'min-width:350px;',
			'class'             => 'wc-enhanced-select',
			'options'           => riaco_get_product_categories_for_select(),
			'default'           => array(),

			'custom_attributes' => array(
				'data-placeholder' => esc_attr__( 'Select categories...', 'woocommerce' ),
			),
		),

		// Search multiselect for product IDs.

		array(
			'name'              => esc_html__( 'Allowed Product IDs', 'woocommerce' ),
			'type'              => 'multiselect',
			'desc'              => esc_html__( 'Search and select specific products by typing product name or ID.', 'woocommerce' ),
			'id'                => 'riaco_allowed_product_ids',
			'css'               => 'min-width:350px;',
			'class'             => 'wc-product-search',
			'options'           => riaco_get_selected_products_for_display(),
			'default'           => array(),
			'custom_attributes' => array(
				'data-placeholder' => esc_attr__( 'Search for products...', 'woocommerce' ),
				'data-action'      => 'woocommerce_json_search_products_and_variations',
				'data-multiple'    => 'true',
				'data-allow_clear' => 'true',
			),
		),

		array(
			'type' => 'sectionend',
			'id'   => 'riaco_section_end',
		),
	);

	return apply_filters( 'riaco_woo_custom_settings', $settings );
}

Aggiungiamo le funzioni helper che ci restituiscono i dati che ci servono per riempire le impostazioni.

// Helper function to get selected products for display
function riaco_get_selected_products_for_display() {
	$product_ids = get_option( 'riaco_allowed_product_ids', array() );
	$products    = array();

	if ( ! empty( $product_ids ) && is_array( $product_ids ) ) {
		foreach ( $product_ids as $product_id ) {
			$product_id = absint( $product_id ); // Sanitize product ID
			$product    = wc_get_product( $product_id );
			if ( $product ) {
				$products[ $product_id ] = esc_html( $product->get_formatted_name() );
			}
		}
	}

	return $products;
}

// Helper function to get product categories for multiselect
function riaco_get_product_categories_for_select() {
	$categories = get_terms(
		array(
			'taxonomy'   => 'product_cat',
			'hide_empty' => false,
		)
	);

	$options = array();

	if ( ! is_wp_error( $categories ) ) {
		foreach ( $categories as $category ) {
			$options[ $category->term_id ] = $category->name;
		}
	}

	return $options;
}

Ora non ci resta che andare ad aggiungere delle opzioni di base al tab sfruttando la funzione woocommerce_admin_fields().

// Add settings to the custom tab
add_action( 'woocommerce_settings_tabs_riaco_custom_tab', 'riaco_custom_tab_settings' );
function riaco_custom_tab_settings() {
	woocommerce_admin_fields( riaco_get_custom_settings() );
}

Infine salva le opzioni:


// Save the settings
add_action( 'woocommerce_update_options_riaco_custom_tab', 'riaco_update_custom_settings' );
function riaco_update_custom_settings() {
	// Verify nonce for security
	if ( ! isset( $_POST['_wpnonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['_wpnonce'] ) ), 'woocommerce-settings' ) ) {
		return;
	}

	woocommerce_update_options( riaco_get_custom_settings() );
}

Ecco cosa abbiamo ottenuto:

Guardando il codice potrai osservare 3 tipi di campi multiselect:

Multiselect Statico: Opzioni predefinite (metodi di spedizione)
Multiselect Dinamico: Categorie prodotti dal database
Multiselect con Ricerca AJAX: Selezione prodotti con search

Ottenere il valore delle impostazioni

Per poter ottenere il valore delle impostazioni salvate, basta usare la funzione get_option() con l’id del campo presente nell’array $settings.

Ad esempio, nel nostro caso dovremo scrivere qualcosa come:

$shipping_methods = get_option('riaco_shipping_methods', array());

$product_categories = get_option('riaco_product_categories', array());

$product_ids = get_option('riaco_allowed_product_ids', array());

Codice completo

Ecco il codice completo utilizzato.


// Add custom tab to WooCommerce settings
add_filter( 'woocommerce_settings_tabs_array', 'riaco_add_custom_settings_tab', 50 );
function riaco_add_custom_settings_tab( $settings_tabs ) {
	$settings_tabs['riaco_custom_tab'] = esc_html__( 'Riaco Settings', 'woocommerce' );
	return $settings_tabs;
}

// Define the settings fields
function riaco_get_custom_settings() {
	$settings = array(
		array(
			'name' => esc_html__( 'Riaco Custom Settings', 'woocommerce' ),
			'type' => 'title',
			'desc' => esc_html__( 'Configure your custom Riaco options here.', 'woocommerce' ),
			'id'   => 'riaco_section_title',
		),

		// Multiselect with custom options.

		array(
			'name'              => esc_html__( 'Available Shipping Methods', 'woocommerce' ),
			'type'              => 'multiselect',
			'desc'              => esc_html__( 'Select which shipping methods to enable.', 'woocommerce' ),
			'id'                => 'riaco_shipping_methods',
			'css'               => 'min-width:350px;',
			'class'             => 'wc-enhanced-select',
			'options'           => array(
				'flat_rate'     => esc_html__( 'Flat Rate', 'woocommerce' ),
				'free_shipping' => esc_html__( 'Free Shipping', 'woocommerce' ),
				'local_pickup'  => esc_html__( 'Local Pickup', 'woocommerce' ),
				'express'       => esc_html__( 'Express Delivery', 'woocommerce' ),
			),
			'default'           => array(),
			'custom_attributes' => array(
				'data-placeholder' => esc_attr__( 'Choose shipping methods...', 'woocommerce' ),
			),
		),

		// Regular multiselect field.
		array(
			'title'             => esc_html__( 'Select Product Categories', 'woocommerce' ),
			'type'              => 'multiselect',
			'desc'              => esc_html__( 'Choose multiple product categories.', 'woocommerce' ),
			'id'                => 'riaco_product_categories',
			'css'               => 'min-width:350px;',
			'class'             => 'wc-enhanced-select',
			'options'           => riaco_get_product_categories_for_select(),
			'default'           => array(),

			'custom_attributes' => array(
				'data-placeholder' => esc_attr__( 'Select categories...', 'woocommerce' ),
			),
		),

		// Search multiselect for product IDs.

		array(
			'name'              => esc_html__( 'Allowed Product IDs', 'woocommerce' ),
			'type'              => 'multiselect',
			'desc'              => esc_html__( 'Search and select specific products by typing product name or ID.', 'woocommerce' ),
			'id'                => 'riaco_allowed_product_ids',
			'css'               => 'min-width:350px;',
			'class'             => 'wc-product-search',
			'options'           => riaco_get_selected_products_for_display(),
			'default'           => array(),
			'custom_attributes' => array(
				'data-placeholder' => esc_attr__( 'Search for products...', 'woocommerce' ),
				'data-action'      => 'woocommerce_json_search_products_and_variations',
				'data-multiple'    => 'true',
				'data-allow_clear' => 'true',
			),
		),

		array(
			'type' => 'sectionend',
			'id'   => 'riaco_section_end',
		),
	);

	return apply_filters( 'riaco_woo_custom_settings', $settings );
}

// Helper function to get selected products for display
function riaco_get_selected_products_for_display() {
	$product_ids = get_option( 'riaco_allowed_product_ids', array() );
	$products    = array();

	if ( ! empty( $product_ids ) && is_array( $product_ids ) ) {
		foreach ( $product_ids as $product_id ) {
			$product_id = absint( $product_id ); // Sanitize product ID
			$product    = wc_get_product( $product_id );
			if ( $product ) {
				$products[ $product_id ] = esc_html( $product->get_formatted_name() );
			}
		}
	}

	return $products;
}

// Helper function to get product categories for multiselect
function riaco_get_product_categories_for_select() {
	$categories = get_terms(
		array(
			'taxonomy'   => 'product_cat',
			'hide_empty' => false,
		)
	);

	$options = array();

	if ( ! is_wp_error( $categories ) ) {
		foreach ( $categories as $category ) {
			$options[ $category->term_id ] = $category->name;
		}
	}

	return $options;
}

// Add settings to the custom tab
add_action( 'woocommerce_settings_tabs_riaco_custom_tab', 'riaco_custom_tab_settings' );
function riaco_custom_tab_settings() {
	woocommerce_admin_fields( riaco_get_custom_settings() );
}

// Save the settings
add_action( 'woocommerce_update_options_riaco_custom_tab', 'riaco_update_custom_settings' );
function riaco_update_custom_settings() {
	// Verify nonce for security
	if ( ! isset( $_POST['_wpnonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['_wpnonce'] ) ), 'woocommerce-settings' ) ) {
		return;
	}

	woocommerce_update_options( riaco_get_custom_settings() );
}

Ti è stato utile?

Come Creare Tab Personalizzate in WooCommerce con Campi Multiselect

Creazione del Tab Personalizzato

Implementazione dei Campi Multiselect

Ottenere il valore delle impostazioni

Codice completo

Sponsor

Altri articoli

Usare SVN nel terminale Linux per lo sviluppo di plugin WordPress

Creare un blocco statico personalizzato in WordPress

Plugin per Moduli di Contatto per WordPress

Plugin per Lead Generation per WordPress