How to Add Information to the WooCommerce Shop Page

Table of Contents

Do you want to add information like product meta on the WooCommerce shop page? In this post, we will share a custom solution we made specifically to solve this problem.

However, you need some coding skills to implement this solution.

It is important to display product information on the shop page.

This helps customers in your store view this information without going to the single product page.

For example, you can display SKU, available inventory or stock status, shipping weight, and many more.

It is worth mentioning that WooCommerce does not have a built-in solution. This means that we need to use custom code snippets or a plugin.

However, if you have many plugins, they may affect the loading speed. Therefore, using code snippets is the most recommended way.

Add Information to the WooCommerce Shop Page

Today’s tutorial will show you how you can add the SKU and product weight.

We will use custom code snippets we made to modify some of WooCommerce’s core files. This means that you need to install or create a child theme. It will ensure that your changes are not lost during an update.

Let us get right into it.

Steps to Add Information to the WooCommerce Shop Page

In this section, we will use the woocommerce_after_shop_loop_item action to add information to the products on the shop page.

This same action is used to add the “Add to Cart” buttons on the shop page.

This means we will add our function with a higher priority so that the information we want to add is displayed above these buttons for each product in the loop. For illustration purposes, we will show you how to add the product SKU and weight.

Here are the simple steps you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to add SKUs on the shop page.
Add the following code to the PHP file:

/**
* Adds product SKUs above the "Add to Cart" buttons
**/
function njengah_shop_display_skus() {
global $product;
if ( $product->get_sku() ) {
echo '<div class="product-meta">SKU: ' . $product->get_sku() . '</div>';
}
}
add_action( 'woocommerce_after_shop_loop_item', 'njengah_shop_display_skus', 9 );

This is the outcome:

Alternatively, you may want to add the product weight just before the “Add to Cart” buttons. All you need to do is 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>';
}

with this one 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>';
}

This is the outcome:

Conclusion

By now, you should be able to add any information to each product on the shop page.

It is worth mentioning that you can get all the product information functions in the WC_Product class. However, any product meta is accessible via regular WordPress functions.

If you need additional functionality, feel free to contact us. We hope that this solution worked for you.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Add Information to the WooCommerce Shop Page

Add Information to the WooCommerce Shop Page

Steps to Add Information to the WooCommerce Shop Page

Conclusion

Similar Articles

Related