Add Information to the WooCommerce Shop Page

Today’s tutorial will show you how to add information, such as custom fields or product meta, to the WooCommerce shop page. This can be really useful if you have product information that should be displayed before viewing the single product page. You can add the SKU to the WooCommerce shop page, display available inventory or stock status, show shipping weight, and more.

If you’ve never added custom code to your site, check out our tutorial on how to add code snippets to WordPress sites.

Add information to the WooCommerce shop page

The basic idea in each of these examples will be to use the woocommerce_after_shop_loop_item action (found here) to add our own information to the products on the shop page. This action is used to add the “Add to Cart” buttons to the WooCommerce shop page for each product as well, so we’ll add our function with a higher priority so our information is displayed above these buttons for each product in the loop.

It will look something like this:

add_action( 'woocommerce_after_shop_loop_item', 'skyverge_shop_display_post_meta', 9 );

Now let’s work backwards and write up the skyverge_shop_display_post_meta function to add our information to the shop loop. First, we’ll need to make sure we have access to our product. We can do so by starting our snippet by accessing the global product object:

global $product;

Since we’re in the loop with the woocommerce_after_shop_loop_item action referenced above, this will let us access information about each product as it’s added to the shop page.

Next, we’ll need to grab the information that we’d like to display about the product. For example, we could display the SKU if set by adding this to our snippet:

if ( $product->get_sku() ) {
    echo '<div class="product-meta">SKU: ' . $product->get_sku() . '</div>';
}

This will show a SKU for each product if available (note I’ve added some CSS to style my product-meta class):

SKUs added to shop pages

Here’s the snippet to display SKUs from start to finish:

Notice that we start with our function name, access the global $product, then display whatever product information we’d like to display. We end by using the appropriate action to add our function to the shop loop for every product. We’ll follow the same formula to add any other information to the WooCommerce shop page.

Here are a couple more examples.

Show Product Weight on WooCommerce shop pages

You could replace the SKU check with one for the shipping weight. Replace the

if ( $product->get_sku() ) {
    echo '<div class="product-meta">SKU: ' . $product->get_sku() . '</div>';
}

part from above with this instead:

if ( $product->has_weight() ) {
    echo '<div class="product-meta"><span class="product-meta-label">Weight:</span> ' . $product->get_weight() . ' ' . esc_attr( get_option( 'woocommerce_weight_unit' ) ) . '</div>';
}

Now weight will be shown with the appropriate unit if set.

Show Custom Fields on the WooCommerce shop page

Let’s take this up a level. We can access any other custom meta we’d like to, such as custom fields, to the shop pages as well. I did this in a previous tutorial to illustrate product sorting by custom fields in action.

We can access other product meta by using the get_post_meta function. We’ll search using the product ID and our meta field key (name). Let’s use the location and points fields I’d added in the tutorial reference above for my custom sorting and display them for each product in the shop.

First, we’ll get these fields and set them as variables:

$location = get_post_meta( $product->id, 'location', true );
$points = get_post_meta( $product->id, 'points', true );

Next, we’ll need to display these variables on the page. We’ll want to echo them with a label only if they’re set, so we’ll do an empty() check first to make sure the fields are not empty. We’ll then echo these values, and I’ve added CSS classes so I can style them as they’re added to the page (feel free to add, remove, or change these classes as needed):

if ( ! empty( $location ) ) {
    echo '<div class="product-meta"><span class="product-meta-label">Location:</span> ' . $location . '</div>';
}

if ( ! empty( $points ) ) {
    echo '<div class="product-meta"><span class="product-meta-label">SkyPoints:</span> ' . $points . '</div>';
}

Now we’ve got our custom fields (product meta) displayed within the shop loop.

Product custom fields displayed

If you’d like to clean up your fields a bit, you could take a couple of additional steps. Right after I get the location, I could replace the underscores with spaces to start cleaning it up:

$location = str_replace( '_', ' ', $location );

This will make your location more readable:

No more underscores!

Finally, if we want to capitalize each word, we can use the ucwords() function around our custom field data to capitalize each word. I’ve wrapped it around the location when it’s echoed in this case like so:

ucwords( $location )

Now I’ve got nice, readable product meta added from my custom fields for each product in my shop.

Capitalized words

Here’s the entire snippet I used for the last screenshot, start to finish:

Conclusions

You can add whatever information you’d like to the WooCommerce shop page by adding information to each product in the loop. The WC_Product class is a good place to find which functions are available to get product information, but any product meta is accessible via regular WordPress functions.

We’d love to see examples of this in action if you use this tip! Link to your shop page in the comments to show it off 🙂 .

Published by Beka Rice

Beka leads product direction for SkyVerge and technical documentation. She spends a lot of time on research and interviews, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

Posts by Beka Rice Visit Website

25 Comments

Harry
March 25, 2015 at 11:09 am

Hi just wondering if you could point me in the right direction of using this technique to call the product thumbnail images and displaying them on the shop or archive pages?

cheers
Cliff Kujala
June 28, 2015 at 12:00 pm

Hi Beka,

Excellent tutorial. If I was to have many different custom fields I wanted to display on the product loop, but only the correct field for the particular category being viewed how do you suggest going about that?

My custom fields have the name structure eref-{category-slug}. So IE: if I was viewing a category named Brake System(with slug “brake-system”), I’d need to display the eref-brake-system field, but if I was viewing the category Axle(with slug “axle”) I’d need to display the eref-axle field.

Could it be setup to inject the slug name into the requested field? Adding an if call to check and display non-empties wouldn’t work, because sometimes products exist in multiple categories, and therefore might have eref-axle and eref-brake-system(and more possibilities) field data.

Cliff

Cliff Kujala

June 28, 2015 at 2:45 pm

Solved.

$categories = get_the_terms($post_id, 'product_cat');
if(get_field('eref-' . $categories[0]->slug . ''))
    {
        echo '<div><span>REF: ' . get_field('eref-' . $categories[0]->slug . '') . '</span></div>';
    }

PS
I’m using Advanced Custom Fields too, so that’s where get_field comes from.

Cliff Kujala
June 30, 2015 at 4:24 am

Damn.

I spoke too soon.

The two categories I was testing did not contain any products which are located in multiple categories. If a product is located in multiple categories (with a REF letter set for multiple categories) then the PHP is loading the REF from the first category in the array. I added echo '<div>eref-' . $categories[0]->slug . '</div>'; into the loop to confirm that is what was happening. See the image below:
- Beka Rice
  June 30, 2015 at 7:17 pm
  
  Hey Cliff, checking for is_product_category() should be useful here. Initial thought for you to try / modify as I’m not quite sure how this is fitting together:
  
  get all product category terms
  
  loop through – for each $categories as $category, check if is_product_category( $category ) to see if we’re viewing that archive
  
  if true, now get / show the field eref_{$category} value if it exists
Angelo Lazzari
August 10, 2015 at 5:16 am

Hi, great article, i would like to add the weight in the single product page, under the product price for example, how i could do it?

Thank you very much
Angelo
Kevin lallier
December 15, 2015 at 9:07 am

Hello,

Thank you, it worked well and displays SKU. I’d like to add the product id, would you know how ?
Angela Martinez
January 29, 2016 at 11:32 am

Thanks for this tutorial! Well explained. Is it possible to add the product’s short description using this method?
- Beka Rice
  January 31, 2016 at 2:59 pm
  
  You could, I would suggest getting the product as a WordPress post instead first rather than using the WC functions to output this. After global $product; you could do something like this:
  
  $post = get_post( $product->id ); if ( $post->post_excerpt ) { echo $post->post_excerpt; }
ronak
January 31, 2016 at 9:48 am

your code is not working you tell me where i edite code for showing weight in shop page
Mike Cohen
March 23, 2016 at 2:38 pm

Hi, i am having a whirlwind of a time trying to get the “add to cart” button to appear for each product on the main shop page. It shows up only on the single item pages but not on the main shop page were people would be able to simply add all the products they desire to cart without going back and forth between the main shop page and the individual item pages.Can you help me? I created a custom area with specific items with an add to cart button as a workaround but i would like the entire shop to work in a logical way.

my shop page is http://www.networkspinalcare.com/index.php/shop
Vytas Klim
April 6, 2016 at 6:35 am

Same question, how to display custom field before price?
- Beka Rice
  April 10, 2016 at 6:20 pm
  
  You’d have to use a different action — woocommerce_after_shop_loop_item_title between priority 5 and 10 should work.
Isa Simó
April 6, 2016 at 4:52 pm

Cool Beka! Thank you so much for making woocommerce easier and more accessible.
Jon Barratt
June 3, 2016 at 3:35 am

Hi Beka

I just completed a Clip for adding stock status to shop and archive pages. It not only follows the rules assigned within WordPress settings, but also adds a general status message to variable products as well e.g. In stock (some items). Best installed as part of WP Clips, but the code could also simply be copied form the clip-functions.php file.

http://clipbank.wpclips.net/clips/woocommerce-stock-status-archive-pages/

(Love your weekly round-ups btw – look forward to them each week)

Best always
Jon
vik
June 20, 2016 at 4:04 pm

Hi!
What if I want to show shipping class on shop page under each product?
Thanks in advance!
Alice James
September 8, 2016 at 5:23 am

Hi Beka, loved the tutorial. I read this ‘WooCommerce powers more than 23% of the E-commerce websites across the globe.’ here https://www.cloudways.com/blog/add-product-information-in-woocommerce/ true or false? If true then can you tell me how?
- Beka Rice
  September 8, 2016 at 2:35 pm
  
  Hi Alice, this post has statistics on WordPress eCommerce usage, and BuiltWith has stats on usage overall — they currently list WooCommerce at 39% of eCommerce sites when you switch the view to “Entire Internet”.
Tamsin Hewer
September 27, 2016 at 5:33 pm

Hi Beka,

Thank you for this. Unfortunately my limited skills have been unable to reproduce this. I have used the woo commerce model for a portfolio as the wp one is v limiting for filters etc. I want to show an additional short description underneath the title and have added a custom ‘description’ field to one of my ‘products’ then edited your code to show this field and updated the funtions.php file in my child theme, but it doesn’t make any difference. Is this because my ‘products’ don’t have a price or add to button field? If so is there a hook/action to cover this?

Please help – dev site is http://uk11.siteground.eu/~carrot/carrot17/portfolio/

Thanks for any advice you can give me
Howard J
November 11, 2016 at 11:10 am

Hi there, any way to add a loop so the customer can select the product options from the shop page and add to cart without having to go to the product detail page?

Thanks!
- Beka Rice
  November 11, 2016 at 1:24 pm
  
  Hi Howard, not something we typically recommend since you’ll have to load all variations for all products on a single page. However, if you have a small number of variations per product this tutorial looks like it should help.
diego
December 6, 2016 at 2:21 pm

Hi there,

Is there any way to show the Sizes available of each product on the shop page instead the ‘select option’ button on the shop-loop-actions?

Just something like this page https://shop.ne-sense.com

Any information will be helpful.

Best
- Beka Rice
  December 6, 2016 at 7:14 pm
  
  Hey Diego, I’d give this tutorial a try 🙂
diego
December 7, 2016 at 3:32 am

Hey Beka,

Thanks a lot for your quick reply. I’ve tried this before but this is not exactly what I want. I just only want to show the sizes available in stock and then enter on the product page, but not add a select form to the shop page.

If you can have a look at this page, you can see that in action https://shop.ne-sense.com

Thanks again!

Have a nice day
- Beka Rice
  December 7, 2016 at 7:12 pm
  
  Hey Diego, since there’s not a template / current method to output variations like that outside of the form, if you only wanted to display them as that example does, you’d need to add a custom template to get available variations / attrributes and check stock to change how they’re displayed. Definitely doable, just requires a nice bit of code to generate a template for this and hook it in above the button.