WC Fields Factory – Changing File Field’s Appearance

In this article we will see how to change the appearance of File Upload field, added by WC Fields Factory.

Put the below snippet on your theme’s functions.php

function custom_file_field_rendering( $field, $html ) { 

	if( $field["type"] == "file" ) {
	
	$wccpf_options = wcff()->option->get_option();
	$fields_cloning = isset( $wccpf_options["fields_cloning"] ) ? $wccpf_options["fields_cloning"] : "no";
	$name_index = $fields_cloning == "yes" ? "_1" : "";
	$multifile_support = ( isset( $field["multi_file"] ) && $field["multi_file"] == "yes" ) ? "[]" : "";
	
	ob_start(); ?>
		
	<table class="wccpf_fields_table <?php echo apply_filters( 'wccpf/fields/container/class', '' ); ?>" cellspacing="0">
		<tbody>
			<tr>
				<td class="wccpf_label"><label for="<?php echo esc_attr( $field["name"] . $name_index ); ?>"><?php echo esc_html( $field["label"] ); ?><?php echo ( isset( $field["required"] ) && $field["required"] == "yes" ) ? ' <span>*</span>' : ''; ?></label></td>
				<td class="wccpf_value">
					<label class="wcff_file_label">
						Upload Your File
						<input type="file" class="wccpf-field" name="<?php echo esc_attr( $field["name"] . $name_index . $multifile_support ); ?>" accept="<?php echo $field["filetypes"]; ?>" <?php echo ( isset( $field["multi_file"] ) && $field["multi_file"] == "yes" ) ? 'multiple="multiple"' : ''; ?> wccpf-type="file" wccpf-pattern="mandatory" wccpf-mandatory="<?php echo $field["required"]; ?>" />
						<span class="wccpf-validation-message wccpf-is-valid-1"><?php echo $field["message"]; ?></span>
					</label>
				</td>
			</tr>
		</tbody>
	</table>
	
	<?php 

		return ob_get_clean();
	
	}
	
	return $html;

}
add_filter( 'wccpf/before/fields/rendering', 'custom_file_field_rendering', 99, 2 );

above snippet will override the default File field handler, it does nothing special except it wrap File field with Label field that’s it.

put the below CSS snippet on your theme’s style.css file

.wcff_file_label {
	outline: none;
	cursor: pointer;	
	overflow: hidden;
  	position: relative;
  	display: inline-block;  
    border: 1px solid #999;
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 12px;		    
    white-space: nowrap;	    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -user-select: none;
    -webkit-text-shadow: 1px 1px #fff;
    -moz-text-shadow: 1px 1px #fff;
    -ms-text-shadow: 1px 1px #fff;
    -o-text-shadow: 1px 1px #fff;
    text-shadow: 1px 1px #fff;		    
    background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
    background: -moz-linear-gradient(top, #f9f9f9, #e3e3e3);
    background: -ms-linear-gradient(top, #f9f9f9, #e3e3e3);
    background: -o-linear-gradient(top, #f9f9f9, #e3e3e3);
    background: -linear-gradient(top, #f9f9f9, #e3e3e3);
}

.wcff_file_label input[type=file] {
	top: 0;
	right: 0;
	opacity: 0;
	display: block;		    
	cursor: inherit;
	text-align: right;
	position: absolute;        
    filter: alpha(opacity=0);   
}

.wcff_file_label:hover {
	border-color:#333;
}

Well you can modify the above CSS snippet to match your theme’s styling.

Happy Coding.!