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.

fiel upload

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.!

2 Comment(s)

  1. Mark January 6, 2017

    Hi there!
    let me say first of all – AMAZING!!!

    Sadly i have a styling problem. The fields are working, only the labels dont show in the frontend. Tried the code and css but nothing…
    Also – where do i put this code to get a signature field too?
    (i know is for acf but your plugin and acf basically do the same thing…)
    https://github.com/AsmodeusNOIR/acf-signature

    Again, thanks a lot for everything you do!

  2. Mark January 8, 2017

    Regarding labels not showing – i am a morron. working. (red│Red).

Leave a Reply

Your email address will not be published. Required fields are marked *