WooCommerce comes bundled with archive pages and loops that do a great job, but sometimes you might need to display a bit more information on your main shop and other archive pages.
In this tutorial, I'll show you how you can add the product short description to your archive pages and display it below the product title.
If you want to learn how to use WooCommerce from start to finish, check out my free beginner's course.
If you want to learn how to use WooCommerce from start to finish, check out my free beginner's course.
What You'll Need
To follow along, you'll need:
- A development installation of WordPress.
- A code editor.
- WooCommerce installed and activated.
- Products added—I've imported the dummy product data that comes with WooCommerce; for details of how to do this, see this guide.
- A WooCommerce-compatible theme activated—I'm using Storefront.
Before you start, make sure you've got WooCommerce set up. To add the product short descriptions, you'll follow three steps:
- Create a plugin for the function and activate the plugin.
- Add a function that outputs the product short description.
- Identify the hook in WooCommerce that we need to hook the function to, and attach the function to that hook.
So let's start!
Creating the Plugin
In your wp-content/plugins directory, create a new PHP file. I'm calling mine tutsplus-product-archive-short-descriptions.php.
Open the file in your code editor. At the top of the file, add this:
<?php /** * Plugin Name: Tutsplus Display Product Short Descriptions in WooCommerce Archive pages * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-adding-the-product-short-description-to-archive-pages--cms-25435 * Description: Add product short descriptions to the loop in product archive pages (requires WooCommerce to be activated) * Version: 1.0 * Author: Rachel McCollin * Author URI: https://rachelmccollin.co.uk * */
This sets up the plugin and gives WordPress everything it needs to activate it.
Now go to the Plugins screen in your WordPress admin and find the plugin:
Now activate it.
At first it won't make any difference as you haven't populated it. Here's what the main shop page looks like right now:
Writing a Function to Output the Short Description
The short description for products in WooCommerce uses the excerpt that you'd find in normal posts, so to display it all you need to do is display the excerpt for the post.
In your plugin file, add the code below:
function tutsplus_excerpt_in_product_archives() {
the_excerpt();
}
It's as simple as that! But now you need to hook your function to the right action, so that it's output in the correct place in your archive pages.
Hooking the Function to the Correct Action
Let's take a look at the file in WooCommerce that outputs the content of the loop on archive pages. This file is content-product.php, and you'll find it in the templates folder in the WooCommerce plugin.
The file includes a number of action hooks, all of which are used by WooCommerce to output different content.
As we want to display our excerpt below the title of the product, the hook we need to use is woocommerce_after_shop_loop_item_title. As you can see from the content-product.php file, it's already got two functions attached to it, woocommerce_template_loop_rating() and woocommerce_template_loop_price(), which have priorities of 5 and 10 respectively. So we need to hook our function with a higher priority number, to ensure it fires after those. I'll leave some leeway and use 40 as the priority.
Beneath your function, add this:
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );
Now save your plugin file and refresh the shop page in your browser. You'll now see the product short descriptions below the product names:
Restricting the Length of the Product Descriptions
If your product short descriptions are long, they could mess up the layout of your shop page. Here’s how it looks with a longer description:
Personally I'd use shorter descriptions on a live site, and keep the more detailed information for the long description. But what if you want to use a longer short description on your product pages but restrict their length on the main shop page?
You can do this by using the wp_trim_words() function in your function to display the excerpt. Edit the function so it looks like this:
function tutsplus_excerpt_in_product_archives() {
echo wp_trim_words( get_the_excerpt(), 10 );
}
add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );
Your product short description will be displayed limited to the number of words you specified in your function:
Hiding the Short Description on the Product Page
Another thing you might want to do is use the short description for the shop and archive pages, and use just the long description on the individual product pages.
By default, WooCommerce displays the short description at the top of the product page and the long description lower down:
To remove the short description from the product page and add the long description in its place, you need to unhook the function that outputs the short description and replace it with one outputting the content, which is the long description.
Add this to your plugin file:
function tutsplus_remove_short_desc_product() {
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'the_content', 20 );
}
add_action( 'init', 'tutsplus_remove_short_desc_product' );
This will remove the short description form the top of the product page and replace it with the long description. But the long description is now duplicated at the bottom of the page, so you need to remove it from the product tabs. Do it with another function, hooked to the woocommerce_product_tabs hook:
function tutsplus_remove_product_long_desc( $tabs ) {
unset( $tabs['description'] );
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'tutsplus_remove_product_long_desc', 98 );
Now you’ll find that your individual product pages have the long description at the top instead of the short one:
Summary
Because WooCommerce outputs nearly all of its content using action hooks, it's straightforward to add more content by writing functions and attaching them to those hooks. In this tutorial you've learned how to add product short descriptions to your product archives. If you wanted to take this further, you could include one or more conditional tags in your function to do this on specific archive pages.
No comments:
Post a Comment