Add custom classes to fields and options

In Add-Ons Ultimate, you can apply custom classes to fields and even to some options.

Filter field classes

You can filter the class applied to each product add-on field with the pewc_filter_single_product_classes filter:

	<?php
	/**
	* Filter field classes
	*/
	function prefix_filter_single_product_classes( $classes, $item ) {
	$classes[] = 'my-class-name';
	// You can also use $item to check the field ID and add classes conditionally
	return $classes;
	}
	add_filter( 'pewc_filter_single_product_classes', 'prefix_filter_single_product_classes', 10, 2 );

view raw pewc_filter_single_product_classes.php hosted with ❤ by GitHub

The filter also passes the $item object so you can do conditional stuff based on the add-on field.

Custom classes for add-on fields

Use the following snippet to create an additional parameter in your field settings where you can enter a class name. This class will be applied to the add-on field on the front end.

	<?php
	/**
	* Add a custom parameter to add-on field settings
	*/
	function demo_add_class_parameter( $group_key, $item_key, $item, $post_id ) {
	echo '<div class="pewc-fields-wrapper pewc-my-new-fields">';
	echo '<div class="product-extra-field-third">';
	$class = isset( $item['class'] ) ? $item['class'] : '';
	echo '<label>Class</label>';
	echo '<input type="text" class="pewc-field-class" name="_product_extra_groups_' .esc_attr( $group_key ) . '_' . esc_attr( $item_key ) . '[class]" value="'. esc_html( $class ).'">';
	echo '</div>';
	echo '</div>';
	}
	add_action( 'pewc_end_product_extra_field', 'demo_add_class_parameter', 10, 4 );

	/**
	* Register the custom param to field data
	*/
	function demo_register_class_parameter( $params, $field_id ) {
	$params[] = 'class';
	return $params;
	}
	add_filter( 'pewc_item_params', 'demo_register_class_parameter', 10, 2 );

	/**
	* Filter field classes
	*/
	function demo_add_class_to_field_wrapper( $classes, $item ) {
	if( ! empty( $item['class'] ) ) {
	$classes[] = esc_attr( $item['class'] );
	}
	return $classes;
	}
	add_filter( 'pewc_filter_single_product_classes', 'demo_add_class_to_field_wrapper', 10, 2 );

view raw pewc_end_product_extra_field.php hosted with ❤ by GitHub

This extra parameter will appear in the field settings. Enter any new class names you wish to be applied to that specific field.

Custom classes for swatch options

The following code snippet will enable an additional parameter in your ‘Swatch’ options.

	<?php
	/**
	* Add custom class parameter to swatch options
	*/
	function demo_custom_class_param( $option_count, $group_id, $item_key, $item, $key ) {
	$name = '_product_extra_groups_' . esc_attr( $group_id ) . '_' . esc_attr( $item_key ) . '[field_options][' . esc_attr( $option_count ) . ']';
	$class = isset( $item['field_options'][esc_attr( $key )]['class'] ) ? $item['field_options'][esc_attr( $key )]['class'] : '';
	?>
	<td class="pewc-option-extra">
	<input type="text" class="pewc-field-option-class" name="<?php echo $name; ?>[class]" value="<?php echo esc_attr( $class ); ?>">
	</td>
	<?php }
	add_action( 'pewc_after_option_params', 'demo_custom_class_param', 20, 5 );

	function demo_add_custom_class_title( $group_id, $item_key, $item ) {
	printf(
	'<th class="pewc-option-extra-title"><div class="pewc-label">%s</div></th>',
	__( 'Class', 'pewc' )
	);
	}
	add_action( 'pewc_after_option_params_titles', 'demo_add_custom_class_title', 20, 3 );

	function demo_swatch_wrapper_custom_class( $wrapper_classes, $item, $key, $option_value, $option_index ) {
	if( ! empty( $option_value['class'] ) ) {
	$wrapper_classes[] = esc_attr( $option_value['class'] );
	}
	return $wrapper_classes;
	}
	add_filter( 'pewc_swatch_wrapper_classes', 'demo_swatch_wrapper_custom_class', 10, 5 );

view raw pewc_swatch_wrapper_classes.php hosted with ❤ by GitHub

Enter a class name in the extra field and this will be applied to that specific option.

Here’s how to add a snippet.

Filter field classes

Custom classes for add-on fields

Custom classes for swatch options

Was this article helpful?

Related Articles