How to Add Custom Fields to the WooCommerce Email Orders

One of my clients has a complex online store that uses the WordPress WooCommerce plugin for their store front. In order to satisfy their requests, I had to utilize multiple custom fields to store data to specific products. The products were primarily online tutorial videos that needed to have custom links and unique password for each one of them. Adding new custom fields to the WooCommerce products page is a pretty straight forward process, but showing those custom fields values on the emails that are sent to the customers after they purchase the products, is where the challenge comes to play.

Although there are a few different ways to achieve this, such as using the Advanced Custom Fields plugin to add the custom fields to the products page, or using the Checkout Field Editor Extension for WooCommerce, I decided to take a more of a manual process for many different reasons – the client already had lots of plugins installed on her site and I wanted to make things easier and more customized for her.

Creating The Custom Fields

On the WooCommerce product page add the custom fields you wish to have. In this case, I’m adding “vid_link” and “vid_password” custom fields to store links and passwords respectively.

Displaying The Custom Fields Values to The Order Emails

Find “email-order-items.php” and place the following code wherever you want your custom fields to show on the email. This file pulls the information about the products that are being purchased in an order.

Video Link:
'; echo get_post_meta($_product->id, 'vid_link', true) .'

'; echo '

Video Password:
'; echo get_post_meta($_product->id, 'vid_password', true) .'

'; ?>

Be sure to change “vid_link” and “vid_password” to match whatever custom fields you’ve created on wp-admin. Note that I added some HTML to style how the custom fields will display on the email. You should change that according to your needs.

I hope this helps you on your WooCommerce projects.

Posted in WooCommerce, WordPressTagged 4 Comments

12 Must-Know WordPress Functions For Theming

This post includes WordPress functions that I find myself using over and over again when creating themes for WordPress. These functions are for the most part basic, but they are very useful and every WordPress developer should know them.

1. wp_head()

Used in header.php, wp_head() triggers the wp_head hook that is pretty much required in order to run a smooth WordPress website. Plugins rely heavily on this function to make references to script files, jQuery libraries, stylesheets, etc. It must be place within the opening and closing head tags.

 

2. wp_footer()

Similar to wp_head(), wp_footer() is also used to call files required by many plugins. It must be placed right before the closing body tag.

    %MINIFYHTML7a8e44683eaa9fd60e5f4af327f96bd72%

3. bloginfo()

Used to display information about your site, such as site name, description, url, stylesheet url, template url, and more. Example:





4. get_header(), get_footer(), get_sidebar()

Functions used to include the template files header.php, footer.php, and sidebar.php respectively. They are the base of a WordPress template.






Note: You can also use name parameters to these functions in order to call for different template files. This is very handy when the layout of a website changes on different pages. For Example:




The example above would include template files named header-contact.php and footer-contact.php, allowing you to create custom headers and footers without altering your main header.php and footer.php files. It also works with get_sidebar().

5. is_front_page()

This is one of my favorites WordPress functions. It’s used to display something on the home page of a static front page setup under Appearance > Reading. Example:


6. is_home()

Very similar to is_front_page(), is_home is used to display stuff on the home page of a website with “latest posts” front page setup under Appearance > Reading. Example:


7. is_page()

Checks if a specific page or set of pages are being displayed. You can use page id, name, or slugs as parameters, like so:

// Page Name


// Page ID


// Page Slug


// Pages with ID's 45, 60, 72 


// Pages About Us, Contact Us and Testimonials


8. is_single()

Targets the single post view. The page after you click to read a post. It also accepts post id, post title, and slug parameters.









9. is_category()

Checks if a category archive page is being displayed. You can also target specific category pages by using parameters in the function. Those can be Category ID, title, slug or an array of ID’s, names and slugs. For example:


10. is_archive()

Checks if any type of archive page is being displayed


11. wp_list_pages()

Used to display pages as links on your site. You can arguments to display all pages, child pages of a specific page, order the pages, and more. Example:


For a full list of arguments, visit the WordPress codex.

12. wp_list_categories()

Used to display a list of categories as links on your site. Example:

 

For a full list of arguments, visit the WordPress codex.

Posted in WordPressTagged Leave a comment

Custom H1 Tags Using Custom Fields in WordPress

One of the most common ways to show H1 tags on every page in WordPress is by wrapping the function the_title() in H1 tags, like so:

the_title( '

', '

' );

But if you would like to have a more flexible system where you can create custom headings to improve SEO or whatever reason it may be, the simplest way to accomplish that is by creating a custom field specific for H1 tags.

Adding the “head1” custom field to your template file

The H1 tag can be usually found in the beginning of the main loop, but this varies on different themes. Place this code on your template file wherever you want your H1 tag to appear.

ID, 'head1', true);

// check if the custom field has a value
if(!empty($head1)) {
  echo '

' . $head1 .'

'; } else { the_title('

', '

'); } ?>

Note the conditional statement that checks if there is a custom H1; if there isn’t one, it will display the default page name.

Creating the “head1” custom field in WordPress

1. Open the page you wish add the custom field in “edit” mode. Make sure the custom fields option is checked under screen options.

Wp Admin Screen Options

2. In the custom field meta box, add a new “head1” custom field. This will be your custom H1.

Wp Admin Custom Fields

That’s it! Preview the page and you should now see your custom H1.

Posted in WordPress1 Comment

How to List All Posts in a Custom Taxonomy Separated by Terms

In this post I will demonstrate how to list all posts from a specific custom taxonomy, separated by its terms. In this example, we will use “movie” as custom post type, “genre” as custom taxonomy, and the terms for this taxonomy: “Action”, “Comedy”, and “Drama.” The loop will output something like this:

Action

Fast & Furious 6
Skyfall
The Avengers

Comedy

Superbad
The Hangover
Ted

Drama

Flight
The Notebook
The Shawshank Redemption

Note: each movie title represents a “movie” custom post.

The Loop

 $post_type,
          "$tax" => $tax_term->slug,
          'post_status' => 'publish',
          'posts_per_page' => -1,
          'caller_get_posts'=> 1
        );
    
        $my_query = null;
        $my_query = new WP_Query($args);
        if( $my_query->have_posts() ) {
          echo $tax_term->name;
          while ($my_query->have_posts()) : $my_query->the_post(); ?>
            

I hope this helps you on your next WordPress project that uses custom post types and custom taxonomies.

Posted in WordPressTagged , 10 Comments

Creating a Site Map Page in WordPress

In this post I will show you how to create an HTML site map in WordPress in about 5 minutes. The site map page will list all your pages and blog posts separated by category. First we will pull all pages using the WordPress function wp_list_pages(). Then we will parse all categories to an array so we can pull all posts corresponding to each category. In the end we will end up having a site map like this one.

1. Create a “Sitemap” Page

Login to wp-admin and create a page named ‘Sitemap’.

2. Add code to create the site map

Locate the file ‘page.php’ in your theme’s folder (/wp-content/themes/your-theme/page.php). Place the following code after the loop:

Alternatively, you may locate ‘page.php’ from wp-admin by going to Appearance > Editor. From the list of files on the right side, select Page Template (page.php)


    

Pages

Blog

    'name', 'order' => 'ASC' ); $categories=get_categories($cat_args); foreach($categories as $category) { $args=array( 'showposts' => -1, 'category__in' => array($category->term_id), 'caller_get_posts'=>1 ); $posts=get_posts($args); if ($posts) { echo '
  • name ) . '" ' . '>' . $category->name.'
  • '; echo '
      '; foreach($posts as $post) { setup_postdata($post); ?>
    • '; } } ?>

Voila! now you have a WordPress site map listing all pages and posts separated by category in your site. Enjoy it!

Posted in WordPressTagged 1 Comment

Ready to get started?

Get a Free Estimate