What are Custom Fields?
Basically, fields is what makes WordPress into WordPress. The text area in your post/page editor, the checkboxes in the category field up to the buttons that allow you to publish a post. Imagine you are able to create this fields for yourself.
Being able to program custom fields for your WordPress site is an extremely useful ability that will immensely please your clients. With careful planning you can come up with custom fields that will save you (and your clients) heaps of time.
Powerful examples of using custom fields
Imagine you want to create an opening hours area on a directory website. You could write all the opening hours in the product pages. But this would mean you have to copy the mark up every single time and search for time table manually to change the hours. Not efficient at all.
I would suggest you read up a bit about (WooCommerce) custom fields on this very popular post Mastering WooCommerce Products Custom Fields – Remi Corson. This will bring you up to speed on how to program all the different fields. I will just be looking at Text fields in this Tutorial, so you know exactly how to make a quality opening hours section in your current/next WordPress site.
Let’s assign the tab in the back-end of WooCommerce
We want to add a nice tab in the backend in WooCommerce for easy access for the client and to keep our products organized. You can even add a conditional statement if you don’t want this to appear on certain products, but for now this will appear on all your products.
Basically we add the new tab to the woocommerce_product_write_panel_tabs function which is already defined by WooCommerce.
/** Custom Tabs for Opening Hours. **/
function opening_hours_options_tab() {
?>
<li class="opening_hours"><a href="#opening_hours_data"><?php _e('Opening Hours', 'woothemes'); ?></a></li>
<?php
}
add_action('woocommerce_product_write_panel_tabs', 'opening_hours_options_tab');
/**
* Custom Tab Options
*
* Provides the input fields and add/remove buttons for custom tabs on the single product page.
*/
function opening_hours_options() {
global $post;
$opening_hours_options = array(
'title' => get_post_meta($post->ID, 'opening_hours_title', true),
'content' => get_post_meta($post->ID, 'opening_hours_content', true),
);
?>
<div id="opening_hours_data" class="panel woocommerce_options_panel">
<div class="club-opening-hours">
<p class="form-field">
<?php
// Opening Hours Custom field Type
?>
<p class="form-field day_field_type">
<label for="day_field_type"><?php echo __( 'Opening Hours', 'woocommerce' ); ?></label>
<span class="wrap">
<?php $day_field_type = get_post_meta( $post->ID, '_day_field_type', true ); ?>
<input placeholder="<?php _e( 'Monday', 'woocommerce' ); ?>" type="text" name="_day_field_one" value="<?php echo $day_field_type[0]; ?>" step="any" style="width: 250px;" />
<input placeholder="<?php _e( 'Tuesday', 'woocommerce' ); ?>" type="text" name="_day_field_two" value="<?php echo $day_field_type[1]; ?>" step="any" style="width: 250px;" />
<input placeholder="<?php _e( 'Wednesday', 'woocommerce' ); ?>" type="text" name="_day_field_three" value="<?php echo $day_field_type[2]; ?>" step="any" style="width: 250px;" />
<input placeholder="<?php _e( 'Thursday', 'woocommerce' ); ?>" type="text" name="_day_field_four" value="<?php echo $day_field_type[3]; ?>" step="any" style="width: 250px;" />
<input placeholder="<?php _e( 'Friday', 'woocommerce' ); ?>" type="text" name="_day_field_five" value="<?php echo $day_field_type[4]; ?>" step="any" style="width: 250px;" />
<input placeholder="<?php _e( 'Saturday', 'woocommerce' ); ?>" type="text" name="_day_field_six" value="<?php echo $day_field_type[5]; ?>" step="any" style="width: 250px;" />
<input placeholder="<?php _e( 'Sunday', 'woocommerce' ); ?>" type="text" name="_day_field_seven" value="<?php echo $day_field_type[6]; ?>" step="any" style="width: 250px;" />
</span>
<span class="description"><?php _e( 'e.g. 06:00-22:00', 'woocommerce' ); ?></span>
</p>
</div>
</div>
<?php
}
add_action('woocommerce_product_write_panels', 'opening_hours_options');
As always save the fields in your database or you won’t be able to use them
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
// Function to save all custom field information from products
function woo_add_custom_general_fields_save( $post_id ){
// Opening Hours Custom Fields
$day_field_type = array( esc_attr( $_POST['_day_field_one'] ), esc_attr( $_POST['_day_field_two'] ), esc_attr( $_POST['_day_field_three'] ),esc_attr( $_POST['_day_field_four'] ), esc_attr( $_POST['_day_field_five'] ), esc_attr( $_POST['_day_field_six'] ), esc_attr( $_POST['_day_field_seven'] ) );
update_post_meta( $post_id, '_day_field_type', $day_field_type );
}
Now how to display our opening hours using short code
You could add the tabs using a conditional statement in your project but lets keep it to short code so you can pretty much add it anywhere you like.
This function basically passes through each value added in the custom fields and adds the day of the week using a counter. So when it finds a custom field active it will print the date next to that field on the front-end. Shout out to Ivo for helping me figure out how to use the counter properly.
If there isn’t a value it will just skip the field completely.
add_shortcode('opening_hours', 'opening_hours_custom_fields');
// Add WooCommerce opening hours
//add_filter( 'woocommerce_after_single_product_summary', 'opening_hours_custom_fields',5 );
function opening_hours_custom_fields() {
if ( $lista = genesis_get_custom_field( '_day_field_type', $post->ID ) ) {
$values = array();
$counter = 0;
$days=array("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
foreach ( $lista as $value ) {
if ( $value != '' )
$values[] = $value;
}
if ( $values ) {
echo '<div id="hours_custom_fields">';
echo '<ul>';
foreach ( $values as $value ){
echo "<li><div class='one-half first'>$days[$counter]</div><div class='right-hours one-half' style='text-align:right;'><i class='fa fa-clock-o'></i> $value </div></li>";
$counter++;
}
echo '</ul>';
echo '</div>';
}
}
}
That concludes this post, now you have learned how to create a new tab in WooCommerce, save fields into the backend and add a counter to your code. Feel free to mangle the code as you like. Obviously you can change this example to more than just opening hours.
Feel free to link me to your articles or your projects. Would love to see your work in progress.
Recent Comments