Overview

 

In this post I am going to discuss how to add text above a product featured image in Woocommerce. This one is pretty easy. We are going to make a custom plugin, add a custom section to the general product settings, allow it to save and append that data to the Woocommerce “shop-page.”

I am currently using this plugin to add a product availability for a client. It allows you to select either “Product is available in-store” or “Product available online only.” Customers were constantly coming into their store thinking that a particular product would be available in the store. With most retail store they offer products that can be shipped directly from the manufacturer without actually stocking the product. Therefore, the need to have a product say “Online Only,” makes for a lot less explaining and disgruntled customers. I can assure you, no one wants that!

 

Lets Get Started!

 

First in order to do this we have to create a plugin.  This is extremely easy to do.  Why do this instead of writing the code in your functions.php file?  Well you can do that, but now we can use it for a different project if we need to.

Creating a Plugin

In order to create a plugin we just need to make a plugin folder, I called mine online-only-plugin, and in this folder create a php file with whatever name you wish.  We can use onlineonly.php.

Now that we have this established, in our onlineonly.php file we are going to include a heading within the file so that WordPress recognizes the file as a plugin.

/* Plugin Name: Online Only Plugin 
Plugin URI: http://www.littlehouseweb.com 
Description: a woocommerce pluggin to allow online or in-store only to be selected 
Version: 1.0 Author: Robert Johnsen 
Author URI: http://www.littlehouseweb.com 
License: GPL2 */

Add Your Custom Fields

Next inside our onlineonly.php file, we want to add our custom fields.  These can show up wherever you want, I prefer to have them in the general section of the product page.  You can find all the woocommerce hooks and actions at http://hookr.io/plugins/woocommerce/2.6.4/actions/#index=a.  To add an action to the general section, we use:

add_action('woocommerce_product_options_general_product_data', 'your_function_name_your_are_addin' );

Our function will set up two checkboxes in the “general” section of the product page.

  // Print custom checkbox -- in general woo product info 
function lh_add_custom_fields() {
    // Print a custom text field
  ?>
  <p><b> Is this product online only?</b></p>
  <?php
  // seperate checkbox for in-store
    woocommerce_wp_checkbox( array(
        'id' => '_in_store_checkbox',
        'label' => 'In Store?',
        'description' => 'Please select whether this item is online or in-store only.',
        'desc_tip' => 'true',
       
    ) );
  // seperate checkbox for online only
   woocommerce_wp_checkbox( array(
        'id' => '_online_checkbox',
        'label' => 'Online Only?',
        'description' => 'Please select whether this item is online or in-store only.',
        'desc_tip' => 'true',
       
    ) );
}

add_action('woocommerce_product_options_general_product_data', 'lh_add_custom_fields' );

We also have to save the value of our checkboxes.

function lh_save_custom_fields( $post_id ) {

    $woocommerce_checkbox = isset( $_POST['_in_store_checkbox'] ) ? 'yes' : 'no';
  update_post_meta( $post_id, '_in_store_checkbox', $woocommerce_checkbox );
   $woocommerce_checkbox = isset( $_POST['_online_checkbox'] ) ? 'yes' : 'no';
  update_post_meta( $post_id, '_online_checkbox', $woocommerce_checkbox );
}   
  add_action( 'woocommerce_process_product_meta', 'lh_save_custom_fields' );

 

I wanted my data to show on top of the featured image.  So that it is clear to a customer that this is “online only” or “in our store.”  But you can put this anywhere using the resource I provided earlier.

 

function lh_add_text_above_wc_shop_image() {
    $inStoreCheckbox = get_post_meta( get_the_ID(), '_in_store_checkbox', true);
  $onlineCheckbox = get_post_meta( get_the_ID(), '_online_checkbox', true);
    if ($inStoreCheckbox == "yes"){
    echo "Product available in our store.";
    
  }
  if ($onlineCheckbox == "yes"){
    echo "Product available online only.";
    
  }
}
add_action( 'woocommerce_before_shop_loop_item_title', 'sv_add_text_above_wc_shop_image', 9 );

 

Please share this article if you think it would help someone, and feel free to ask any questions in the comments section.  I’ll try to answer any questions as quickly as possible.  Thanks for reading!