Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Create a Blog for Each Category or Department in Your WooCommerce Store
  • like 2 26

    Create a Blog for Each Category or Department in Your WooCommerce Store

    1. July 2019
    2. Daily
    3. read 0

    Final product image
    What You'll Be Creating

    If you're running a WooCommerce store that also has a blog, then you may decide to keep your blog completely separate from your store, with its own categories and content. But for greater integration with your store, it might be a good idea to create blog posts that relate to your product categories.

    To do this, you'll need to add the product category taxonomy to your regular posts, create some posts with those product categories, and then display the blog posts on the product category archive pages in your store.

    The good news is that WooCommerce provides you with action and filter hooks you can use to do this.

    So let's get started!

    What You'll Need

    To follow along, you'll need:

    • a development installation of WordPress
    • a code editor
    • WooCommerce installed and activated
    • products added to your store (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)

    Here's my starting store:

    WooCommerce store - front page

    Creating Our Plugin

    I'm going to create a plugin to do this, which is better practice than adding it to your theme. So start by creating a file in your wp-content/plugins directory. I've called mine tutsplus-woocommerce-category-blog.php.

    Open the new file and add the opening lines:

    <?php
/**
 * Plugin Name: Tuts+ Add blog posts to WooCommerce product categories
 * Plugin URI: https://tutsplus.com
 * Description: Add a list of relevant blog posts to product category archives in WooCommerce
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: http://rachelmccollin.co.uk
 * Textdomain: tutsplus
 *
/

    Edit the above code to reflect the fact that this is your plugin, and save your plugin file. Now activate the plugin on your site.

    Checking WooCommerce Is Activated

    I don't want any of the code in this plugin to run if WooCommerce isn't activated on this site. The best way to check WooCommerce is activated is to check if the woocommerce filter exists. If so, I'll add all of the add_action() calls here, and this will fire all of the functions in my plugin.

    Add this to your plugin:

    function tutsplus_check_woocommerce_active() {

    // check if woocommerce is activated
    if ( class_exists( 'woocommerce' ) ) {

        add_action( 'init', 'tutsplus_register_productcats_posts' );
        add_filter( 'woocommerce_taxonomy_args_product_cat', 'tutsplus_change_productcat_label' );
        add_action( 'woocommerce_after_main_content', 'tutsplus_display_productcats_posts' );

    }

    else {
        return;
	}

}
add_action( 'plugins_loaded', 'tutsplus_check_woocommerce_active' );

    Adding Product Categories to Posts

    The next step is to register the product_cat taxonomy for the post post type. You do this using the <a href="https://codex.wordpress.org/Function_Reference/register_taxonomy_for_object_type" target="_self">register taxonomy for object type()</a> function.

    Add this to your plugin:

    function tutsplus_register_productcats_posts() {

	 register_taxonomy_for_object_type( 'product_cat', 'post' );

}

    This adds the product_cat taxonomy, which WooCommerce uses for product categories, to blog posts. Note that I haven't hooked it to an action, as that's already done in my check for WooCommerce.

    Now, if you take a look at your admin screen, you'll see that you have two taxonomies for posts called Categories:

    Two category taxonomies for posts

    That's a bit confusing, so let's change the label used in the admin menu for product categories. WooCommerce gives us a filter we can use to do that, called woocommerce_taxonomy_args_product_cat.

    So add the function below to your plugin:

    function tutsplus_change_productcat_label( $args ) {

	$args['labels'] = array(
        'label'         => _x( 'Product Categories', 'tutsplus' ),
        'menu_name'     => _x( 'Product Categories', 'Admin menu name', 'tutsplus' ),
        'add_new_item'  => _x( 'Add new product category', 'tutsplus' ),
	);

	return $args;

}

    This will change the name of the product_cat taxonomy to Product Categories in the menu.

    Refresh your admin screen and check it:

    Product categories correctly labelled in the admin menu

    That should reduce some confusion (although you'll find it doesn't remove it completely as it's not possible to change the label in Quick Edit, which we'll be using shortly).

    Note: You might decide to remove the standard category taxonomy instead. In that case, use the <em>register_taxonomy()</em> function to register it for an empty array of post types, which effectively removes it.

    Now, when you add a post, you can assign product categories to it. The way you do this will depend on whether your site is using the Gutenberg editor or not, as WooCommerce product categories don't work with Gutenberg yet.

    If you have Gutenberg enabled, you'll have to add the product categories using the Quick Edit link beneath the post name on the main Posts screen:

    Adding a product category in quick edit

    Make sure you don't confuse the two taxonomies called Category here—there isn't a way to rename product categories in Quick Edit.

    If you're using the classic editor, you can add product categories to your posts using the post editing screen:

    Adding product categories to a postclassic editor

    It's likely that over time, WooCommerce will become compatible with Gutenberg, and this situation will change.

    Now create a few posts and give them different product categories.

    Outputting Posts in the Product Category Archive

    The second step is to output those posts in the product category archive. You do this by creating a loop using WP_Query and then using the woocommerce_after_shop_loop action hook, which WooCommerce runs after outputting products on the archive pages.

    If you want to check out this hook, take a look at the templates/archive-product.php file in WooCommerce. If you prefer, you might want to use a different hook to output your blog posts in a different place.

    Setting Up the Function

    Create a new function in your plugin file, making sure it has the name you used when hooking it to the woocommerce_after_shop_loop hook earlier on:

    function tutsplus_display_productcats_posts() {

}

    Now let's populate that function.

    Checking We're on a Product Category Archive

    First, add a conditional tag to check if we're on a product category archive, as you don't want blog posts displayed on the main shop page or the search page. Inside your function, add this:

    if ( is_product_category() ) {

}

    Now your code will only run on the product category archive pages.

    Identifying the Current Product Category

    Next, inside the braces of your conditional check, add a line to get the current queried object, i.e. the current product category:

    $productcat = get_queried_object();

    Now we can use that variable when setting up our query arguments. Next, add this:

    $args = array(
	'post_type' => 'post',
	'product_cat' => $productcat->slug,
	'posts_per_page' => 5
);
$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>

<?php }

    This defines our query arguments, runs the query, and checks if it has any posts. Next, we need to add a loop inside that if statement:

    <section class="productcat-posts">
    <?php echo '<h2>' . esc_html__( 'Blog Posts', 'tutsplus' ) . '</h2>'; ?>

		<?php while ( $query->have_posts() ) : $query->the_post(); ?>

		<?php //contents of loop ?>
		<article id="post-<?php the_ID(); ?>"<?php post_class(); ?>>

			<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
			<?php the_excerpt(); ?>
            <a href="<?php the_permalink(); ?>"> Read More...</a>

		</article>

		<?php endwhile; ?>

	<?php wp_reset_postdata(); ?>

</section>

    This opens a new section tag and outputs the blog posts inside an article tag. Make sure you use wp_reset_postdata() at the end to reset the query.

    This is what your full function will look like:

    function tutsplus_display_posts_in_category_archives() {

	if ( is_product_category() ) {

		$productcat = get_queried_object();

		$args = array(
			'post_type' => 'post',
			'product_cat' => $productcat->slug,
			'posts_per_page' => 5
		);
		$query = new WP_query ( $args );
		if ( $query->have_posts() ) { ?>

			<section class="productcat-posts">
				<h2>Blog Posts</h2>

					<?php while ( $query->have_posts() ) : $query->the_post(); ?>

					<?php //contents of loop ?>
					<article id="post-<?php the_ID(); ?>"<?php post_class(); ?>>

						<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
						<?php the_excerpt(); ?>
                        <a href="<?php the_permalink(); ?>"> Read More...</a>

					</article>

					<?php endwhile; ?>

				<?php rewind_posts(); ?>

			</section>

		<?php }

	}
}
add_action( 'woocommerce_after_shop_loop', 'tutsplus_display_posts_in_category_archives' );

    Now save your plugin file and check the archive page for a product category you've added posts to. In my Clothing category archive, if I scroll down past the products, my posts are displayed:

    Blog posts displayed on a category archive page

    Now you have your latest blog posts for the product category displayed on its archive page.

    Summary

    Having a blog that's integrated with the departments of your store can help you sell more products and make your blog more relevant to customers. In this tutorial, you've learned how to add blog posts to category archive pages, providing your customers with extra content.

    Don't forget that the open-source nature of WordPress also makes it a great option for improving your programming skills. Follow along with some of our other WooCommerce tutorials here on Envato Tuts+, or check out some of the excellent eCommerce plugins available for sale on CodeCanyon.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    2
    Add a comment...
    4elements
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News