woocommerce how to add related products

WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

Set up Related Products, Up-Sells and Cross-Sells

Products can be Related to each other in three ways: Up-Sells, Cross-Sells or by having the same tags or categories.

To add an up-sell or cross-sell to a product:

  1. Go to WooCommerce > Products and select the product on which you’d like to show an up-sell or cross-sell.
  2. Scroll down to the Product Data panel.
  3. Select the Linked Products tab in the left menu.
  4. Add the product you wish to link to by searching for it.
  5. Update.

Up-Sells ↑ Back to top

Up-sells are products that you recommend instead of the currently viewed product.

They are typically products that are more profitable or better quality or more expensive. Depending on your theme template, these products display on the single product page underneath the product’s description.

  • Up-sells (user defined) show on the product page.

Product Up-Sells

Cross-Sells ↑ Back to top

Cross-sells are products that you promote in the cart, based on the current product.

They are typically complementary items. For example, if you are selling a laptop, cross-sells might be a protective case or stickers or a special adapter. Or if you’re selling a ninja t-shirt, they could be a ninja hoodie and ninja socks.

Depending on your theme template, they display on the cart page underneath the cart products table with a thumbnail image.

  • Cross-sells (user defined) show on the cart page.

Cross Sells

Related Products ↑ Back to top

Related Products is a section on some templates that pulls products from your store that share the same tags or categories as the current product.

These products cannot be specified in the admin, but can be influenced by grouping similar products in the same category or by using the same tags.

  • Related products (automatic) also show on the product page.

Related Products

This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

Custom Related Products for WooCommerce

Description

Custom Related Products for WooCommerce lets you choose which products should show in the related products area on a product detail page instead of simply showing products from the same category. Take control of your detail views and show the products that you want!

  • Edit any product. Under Linked Products you will now have a Related Products selector alongside the Cross-Sells and Upsells.
  • Select some products and save.
  • As long as your theme has a related products section, you’re done! By default all WooCommerce themes have this, so unless your theme specifically disables it you’re all set.
  • If you don’t select related products for any product, it will fall back to the WooCommerce default behavior of selecting random products by category. If you’d prefer to show no products you can configure that under WooCommerce > Custom Related Products.

This plugin has been tested with WooCommerce 2.1 through 3.0.

Nederlands

WooCommerce Simple Add Related Products to Blog Posts

Omschrijving

This Plugin makes it easy to add WooCommerce “Related Products” to individual blog posts.
Select any of your WooCommerce Products from the WordPress “Add Post” admin screen to add them to the bottom of your post content. Inserts the selected products with linked thumbnails to the bottom of your post content and includes css classes that make them easy to customize! This plugin is not meant to be an all encompassing WooCommerce Related Products Add-On. It is just a simple solution to get WooCommerce products onto your blog posts

Schermafdrukken

  • Screenshot of the plugin listed on the Plugins admin page.
  • Screenshot showing the "Related Product on Blog Posts" Settings Page
  • Screenshot showing the "Related Product on Blog Posts" Settings Page correctly configured
  • Screenshot of the Custom Meta Box that appears on the "Add New Post" page. The products listed are for example purposes only. Your product list will differ.
  • Screenshot showing an example of the related products as they appear at the bottom of a blog post.

Installatie

Requirement: You must have the WooCommerce plugin installed with existing live products.

Note: Some knowledge of CSS required to customize the look of the related products and add to cart buttons.

Simply activate this plugin from the Plugins page and select your Blog’s “parent” category under “Settings > Related Products on Posts” to enable the related products on those pages only. Then, a new admin meta box will appear in the Blog Post Editor Page. There you can select any of your current WooCommerce plugins from a simple list. After you publish the post the related products will appear directly after your post content in thumbnail size. All of the HTML elements have classes assigned for easy style customization.

Requirement: You must have the WooCommerce plugin installed with existing live products.

Note: Some knowledge of CSS required to customize the look of the related products and add to cart buttons.

Simply activate this plugin from the Plugins page and select your Blog’s “parent” category under “Settings > Related Products on Posts” to enable the related products on those pages only. Then, a new admin meta box will appear in the Blog Post Editor Page. There you can select any of your current WooCommerce plugins from a simple list. After you publish the post the related products will appear directly after your post content in thumbnail size. All of the HTML elements have classes assigned for easy style customization.

I have activated the plugin, how come I can’t see the “Related Products” section in the “Add New Posts” page?

It may be hidden by default. While on the Blog Post Editor Page, go to the top right under “Screen Options” and make sure “Related Products” box is selected.

How come my product images are oddly sized or different sizes?

It is up to you to optimize your own images for online use. This includes using uniform image dimensions for all your products or setting “max-width”, “max-height” styles in your CSS files.

How do I customize the look of the related products?

All of the HTML elements have unique classes for easy CSS customization. By default, the width of each related product displayed in the blog post is set at 25%. So, if you have 4 related products selected, they will display inline next to each other. However, more than that will stack the related products below accordingly. Unfortunately at this time, the related products are only displayed in your site’s default “thumbnail size”, so it will be up to you to upload good images and customize them using CSS.

Does this feature work on Custom Post Types?

This version has not been tested with custom post types. Currently it is intended only to appear on normal wp posts with the post_type of “post” and the parent blog category you select under “Settings > Related Products on Posts”

Does this feature work with Post Excerpts?

Currently this feature is designed to display related products only on single blog posts, not archive or category pages.

Leave a Reply

Your email address will not be published. Required fields are marked *