Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 5 – Part 3 – Add Related Products to the Product Page in Genesis

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

So far we’ve customized WP eStore by adding custom “Add Now” and “Buy Now” buttons and we’ve added a Product Search to the sidebar. The next thing I’d like to do to customize WP eStore is to add related products to the individual product posts.

The way we do that, of course, is edit the page itself and we end up having to do this really with every page. This is one of the downsides of using the WP eStore system of organizing your site rather than using WordPress to organize the store. Since there’s not a template that we can add this customization to that means we’re always going to add the code by hand in order to show the related posts.

Display Multiple Products in a Category

Let’s look, for example, at plugins. First, we’ll come over here to the Shortcodes Cheat Sheet and what we’re looking for is the display of multiple products. Individual products but multiple products in a certain category and actually that’s what it really is. It’s multiple products in a certain category.

Here’s the latest products for example. This is all products, related products, random products, another random products, popular products and then we’re down to categorized products which is where we have all products within a category. That’s what we’re looking for and we have a bunch of choices here for us to use.

All Products within a Category

The most flexible one is this one here where we have wp_eStore_category_products_fancy and then id= style= order= type= and number=. And in this case, id= the category id, style= the type of fancy display. Order is the order that you want them displayed.

So for example, sort by product id in ascending order, sort by product id in descending, product name (a-z) for example. That’s the order and then the type is the button type that you want to use so “Add to Cart” or “Buy Now” or whatever. Then finally, number is the number that you want to have displayed.

Add Related Products Shortcode to the Product Page

Let’s take this one and copy it. Now come over and look at this product. This is a plugin and if we come over and look at our product categories for a moment, Thesis Plugins is category 12. So what we would do here then is say, wp_eStore_category_products_fancy id=12 for category id style=2 for the styles that we’re using right now. Order, I’m going to use 3 which is a-z in ascending order. Type=1 which is “Add to Cart” and number=3 so this would show up at most 3 products.

Let’s hit update and view the page. Now you can see that all 3 products in this product category are showing up here.

Change the Style on Related Products

Let’s go ahead and add a heading for this, Related Products. And then instead of the style equalling 2, let’s try a different style so let’s look at the examples of display styles. If we wanted to do it like this then we’d choose the third product display instead of display style 2. To do that instead of style 2 we choose style 3 and save, update and then view the page.

Now we have Related Products sitting down here below this product. Obviously, we can choose to use different display styles and that sort of thing here. So this is one of the ways in which you can continue to style WP eStore in Genesis.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one