
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):
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.
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:
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.
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 🙂 .
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
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
Solved.
PS
I’m using Advanced Custom Fields too, so that’s where
get_field
comes from.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: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: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
Hello,
Thank you, it worked well and displays SKU. I’d like to add the product id, would you know how ?
Thanks for this tutorial! Well explained. Is it possible to add the product’s short description using this method?
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:your code is not working you tell me where i edite code for showing weight in shop page
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
Same question, how to display custom field before price?
You’d have to use a different action — woocommerce_after_shop_loop_item_title between priority 5 and 10 should work.
Cool Beka! Thank you so much for making woocommerce easier and more accessible.
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
Hi!
What if I want to show shipping class on shop page under each product?
Thanks in advance!
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?
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”.
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
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!
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.
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
Hey Diego, I’d give this tutorial a try 🙂
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
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.