Related Products, Add-to-Cart, and Notification Shortcodes

Use these shortcodes to add a related products section, an add-to-cart button with price, or shop notifications on non-WooCommerce pages. Each shortcode and its available attributes are described below.

Note: To use a shortcode in the block editor, add a Shortcode block and paste the shortcode into it. In the classic editor, paste the shortcode directly into the content area. For more details, see the WordPress Shortcode block documentation.

↑ Back to top

Use the [related_products] shortcode to display products with similar tags or categories on a single product page. This encourages cross-sells and upsells by showing customers items related to the product they are viewing.

The following attributes control how related products appear:

limit: Sets the maximum number of related products to display. Defaults to no limit. For example, [related_products limit="12"] shows up to 12 products.
columns: Sets the number of columns used to display products. Defaults to 4. For example, [related_products columns="4"] arranges products in 4 columns. Combined with a limit of 12, this produces 3 rows of 4 products each.
orderby: Determines the order of products in the related products section. Defaults to random order. You can order by price or title.

Here is an example of the shortcode with several attributes set, placed in the product description of a single product:

[related_products limit="4" columns="3" orderby="price"]

Related products section displayed on a single product page with limit, columns, and orderby attributes applied — The [related_products] shortcode output with limit, columns, and orderby attributes set

Note: The limit attribute determines how many products appear on the page. It does not add pagination to the shortcode output.

Add-to-cart shortcode

↑ Back to top

Use the [add_to_cart] shortcode to display an add-to-cart button and product price on any page. This is helpful when you want to highlight a specific product outside your shop page.

The following attributes are available for this shortcode:

id: The product ID. Find the product ID by hovering over a product under Products > All Products. Adding the product ID displays the price and add-to-cart button for that specific product.
sku: The product SKU. If you do not set the product ID, the shortcode uses the SKU to display the correct add-to-cart button.
show_price: Set this to TRUE or FALSE to show or hide the price alongside the add-to-cart button. Defaults to TRUE.

Developer-level attributes

↑ Back to top

The following attributes require knowledge of CSS or theme template development:

style: Sets general styling for the add-to-cart button. You can define border, border type and color, and padding.
class: Adds additional CSS classes to the button.
quantity: Determines the quantity added to the cart. This attribute only works when you add the shortcode through a theme template.

Here is a basic example:

[add_to_cart id="99"]

Here is an example with custom styling applied: [add_to_cart id="99" style="border:none; padding: 10px"]. The shortcode displays only the add-to-cart button and product price. It does not display product images or additional product information.

Add-to-cart button with product price displayed on a non-WooCommerce page — The add-to-cart button and price on a non-WooCommerce page. The product image was added separately and does not appear with the shortcode.

Replace the example product ID with the ID of the product you want to display.

Add-to-cart URL

↑ Back to top

Use the [add_to_cart_url] shortcode to output the raw add-to-cart URL for a single product. This is useful when you need to create a custom link that adds a product to the cart.

Two attributes are available for this shortcode:

id: The product ID.
sku: The product SKU.

These attributes work the same way as in the [add_to_cart] shortcode described above.

Here is a basic example that outputs the add-to-cart URL for a product:

[add_to_cart_url id="99"]

Display WooCommerce notifications on non-WooCommerce pages

↑ Back to top

Use the [shop_messages] shortcode to display WooCommerce notifications, such as “product has been added to cart,” on pages that are not part of WooCommerce. This is helpful when you use shortcodes like [add_to_cart] or [product_page] on regular pages or posts and want customers to receive feedback on their actions.

Here is an example of the notification that appears when a customer clicks an add-to-cart button on a non-WooCommerce page:

WooCommerce added-to-cart notification displayed on a non-WooCommerce page — The “added to cart” notification on a non-WooCommerce page

Note: If you use [shop_messages] to display [add_to_cart] notifications, you need to deactivate Enable AJAX add to cart buttons on archives under WooCommerce > Settings > Products (General tab). Messages do not appear while this option is enabled.

WooCommerce Products settings with the AJAX add to cart option unticked — Leave **Enable AJAX add to cart buttons on archives** unticked to display shop messages on non-WooCommerce pages

Questions and support

↑ Back to top

Do you still have questions and need assistance?

This documentation is about the free, core WooCommerce plugin, for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.

If you haven’t created a WordPress.org account to use the forums, here’s how.

If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.

If you weren’t able to find the information you need, please use the feedback thumbs below to let us know.