complete list and user guide

If you happen to’re operating a WooCommerce website, understanding find out how to use shortcodes may also help you get probably the most out of the plugin. They’re small items of code you may place in your WordPress pages or posts so as to add particular WooCommerce options with out having to code.

This text will discover all of the WooCommerce shortcodes and their features. We’ll additionally talk about their limitations and supply alternate options for customizing your WooCommerce retailer.

Let’s begin by going over the fundamentals of shortcodes and find out how to use them.

How does WooCommerce shortcode work

WooCommerce shortcodes assist you to customise your on-line retailer’s performance and content material without having to put in writing customized code your self. Every shortcode consists of two key components ‒ the physique and parameters.

The physique is the principle a part of the shortcode, enclosed in sq. brackets. It tells WooCommerce what sort of function or content material to show.

Parameters are non-obligatory settings you may add to customise the output. They happen after the physique inside the identical sq. brackets. Every parameter has an attribute and a price, separated by an equal signal.

For instance, if you wish to show the three best-selling merchandise in three columns, the shortcode would look as follows:

[products limit="3" columns="3" orderby="popularity"]

The physique, merchandise, refers back to the principal function to be executed. The three shortcode parameters that observe management the variety of merchandise displayed, their association, and the sorting methodology.

To make use of a shortcode, merely add it to your chosen put up or web page within the WordPress block editor utilizing the shortcode block. Click on the + icon, then drag and drop the shortcode block into the editor.

List of widespread WooCommerce shortcodes

Let’s discover the out there WooCommerce shortcodes and find out how to use them successfully. Remember that these shortcodes solely work on WordPress web sites with WooCommerce put in.

1. Cart web page

[woocommerce_cart]

This shortcode shows the purchasing cart web page on the chosen area inside your WooCommerce retailer. It exhibits the shopper’s purchasing cart content material and offers choices to replace objects, apply coupon codes, and proceed to checkout.

Most WooCommerce themes robotically embody this shortcode on the purchasing cart web page, however you should use it to create a customized one. Because it doesn’t have customizable attributes, you solely want to stick the code as is to make use of it.

2. Checkout web page

[woocommerce_checkout]

This shortcode embeds a checkout type in your WooCommerce checkout web page. Clients can use the shape to submit their billing and delivery data, select a fee methodology, and evaluate their order earlier than inserting it.

3. User account web page

[woocommerce_my_account]

This WooCommerce shortcode shows the user account space. You should use it to create a user account web page the place logged-in prospects can handle their private data, monitor orders, handle addresses, and change passwords.

For friends who aren’t logged in, this shortcode exhibits a sign-in type.

4. Order monitoring type

[woocommerce_order_tracking]

In case your eCommerce retailer sells bodily merchandise, this shortcode lets prospects monitor their orders. It shows a type the place they'll enter their order ID and electronic mail tackle to examine the standing, permitting you to create a customized order monitoring web page rapidly.

In contrast to the Order part in [woocommerce_my_account], customers don’t want an account or to log in to make use of this function. Allow fast order standing checks with this shortcode to boost user expertise.

5. Present a particular product web page

[product_page]

Use this shortcode to function a product by its ID or Inventory Preserving Unit (SKU) code wherever in your web page or put up. It shows the product’s data, together with the title, value, description, opinions, and an add-to-cart button.

Right here’s an instance of the product web page shortcode with each attributes:

[product_page id="123"]

You should use the [product_page] shortcode a number of instances on the identical web page to showcase completely different merchandise. Simply bear in mind so as to add a separate shortcode block for every one.

6. Product listings

[products]

This is without doubt one of the most versatile WooCommerce shortcodes resulting from its intensive choice of attributes.

Whereas [product_page] showcases a full product web page, the [products] shortcode enables you to show particular product particulars with out the total web page format. It’s splendid for that includes merchandise in a extra compact format, similar to inside a list or a weblog put up.

Product attributes

Listed here are the important thing attributes for customizing the output of the WooCommerce [products] shortcode:

id

This attribute shows a particular merchandise by its product ID.

Instance: [product id=”123″]

skus

This attribute exhibits a particular product based mostly on their SKU. Keep away from utilizing it along with the ID attribute to forestall conflicting output.

Instance: [product sku=”SKU123″]

restrict

Use this attribute to regulate what number of merchandise seem when that includes a number of merchandise utilizing a single shortcode.

Instance: [products limit=”4″]

columns

This attribute units the variety of columns for displaying merchandise, which is nice for saving area. It defaults to 4 columns until specified in any other case.

Instance: [products columns=”5″]

orderby

This attribute enables you to specify the sorting order of the displayed merchandise.

Listed here are the out there choices:

• title (default) ‒ kind by the product title.
• date ‒ kind by the product publication date.
• recognition ‒ kind by the variety of purchases.
• ranking ‒ kind by common product ranking.
• rand ‒ show merchandise in random order.
• id ‒ kind by product ID.

Instance: [products orderby=”date”]

order

This attribute defines whether or not the product order is ascending (ASC) or descending (DESC). It defaults to ascending until specified in any other case.

Instance: [products order=”DESC”]

class

Use this attribute to show merchandise from particular classes based mostly on their slugs. Separate a number of class slugs with commas.

Instance: [products category=”clothing,summer”]

tag

This attribute exhibits merchandise with particular tags. Much like the class attribute, use commas to separate a number of product tags.

Instance: [products tag=”new”]

class

This attribute provides a customized CSS class to change the output’s fashion. Earlier than utilizing it, it's essential to create a customized CSS class in your theme’s stylesheet (fashion.css).

Instance: [products class=”main-paragraph”]

on_sale

This attribute enables you to present merchandise which can be on sale. When used, WooCommerce filters your merchandise and exhibits solely these with a sale value. Set it to true to allow this filter or false to indicate all merchandise.

Keep away from utilizing on_sale with best_selling and top_rated attributes to forestall conflicting outputs, as combining them can create confusion over which standards needs to be prioritized.

Instance: [products on_sale=”true”]

best_selling

Use this attribute with a true worth to showcase best-selling merchandise solely. Don’t use it along with the on_sale and top_rated attributes to keep away from conflicting prioritization.

Instance: [products best_selling=”true”]

top_rated

This attribute showcases top-rated merchandise based mostly on user rankings, accepting true and false as its choices. Keep away from utilizing it along with the on_sale and best_selling attributes to forestall conflicting filters.

Instance: [products top_rated=”true”]

paginate

Set this attribute to true to allow pagination for the retrieved merchandise. Mix it with the restrict attribute to regulate the variety of merchandise displayed per web page.

Instance: [products paginate=”true”]

visibility

This attribute filters merchandise by their visibility standing, similar to:

• seen (default) ‒ merchandise seen within the store and search outcomes.
• catalog ‒ merchandise seen within the store solely, not in search outcomes.
• search ‒ merchandise seen in search outcomes solely, not within the store.
• hidden ‒ merchandise hidden from each the store and search outcomes.
• featured ‒ merchandise marked as featured.

Instance: [products visibility=”catalog”]

7. Present all out there product classes

[product_categories]

This shortcode permits customers to browse product classes in your WordPress website extra simply. It exhibits all of the product classes by default, however you may customise the output utilizing the next attributes:

• quantity ‒ set the variety of classes displayed. It really works equally to the restrict attribute within the [products] shortcode.
• columns ‒ outline the variety of columns to show the retrieved classes.
• embody ‒ decide which classes to indicate by their IDs.
• orderby ‒ specify the sorting order of the displayed product classes. Listed here are the out there choices:
  • identify ‒ kind by product class identify.
  • id ‒ kind by class ID.
  • slug ‒ kind by class slug.
  • menu_order ‒ kind by the menu order assigned in WooCommerce settings.
  • rely ‒ kind by the variety of merchandise in every class.
• order ‒ outline whether or not the product class order is ascending (ASC) or descending (DESC).
• hide_empty ‒ conceal classes that don’t have any merchandise.
• dad or mum ‒ show product classes which can be kids of a particular dad or mum class.

Instance: [product_categories include=”12,15,18″ orderby=”slug” order=”ASC”]

8. Show a particular product class

[product_category] 

Regardless of having the same identify to the [product_categories] shortcode, [product_category] focuses on displaying merchandise from the desired class. It’s splendid for that includes related merchandise on their respective class touchdown pages or highlighting trending objects from a specific class.

This shortcode requires the class attribute along with your chosen product class’s slug to work. You possibly can then pair it with the next attributes to customise the output:

• columns ‒ set the variety of columns to show merchandise. The default worth is 4.
• orderby ‒ decide the sorting methodology. It has the identical choices because the orderby attribute within the [product_categories] shortcode.
• order ‒ specify the sorting order.
• per_page ‒  restrict the variety of merchandise displayed per web page.
• paginate ‒ permits pagination when set to true.

Instance: [product_category category=”shirts” orderby=”price”]

9. Associated merchandise

[related_products]

Including this shortcode to a product web page prompts WooCommerce to robotically showcase associated merchandise based mostly on the classes and tags shared by the present product being considered.

Since you may’t manually select the associated merchandise, this shortcode is finest used on particular person product pages for cross-selling.

Pair this shortcode with the posts_per_page attribute to restrict the variety of associated merchandise displayed. You may also use the columns attribute to regulate the format of the output.

Instance: [related_products posts_per_page=”3″ columns=”3″]

10. Just lately added merchandise

[recent_products]

Use this shortcode to show probably the most just lately added merchandise in strategic locations, similar to your homepage or class touchdown pages. Pair it with the restrict, columns, and orderby attributes to customise the output.

11. Featured merchandise

[featured_products]

This shortcode is good for highlighting featured merchandise or promotions in your website. Just like the [recent_products] shortcode, it accepts restrict, columns, and orderby attributes for show customization.

12. Finest-selling merchandise

[best_selling_products]

Spotlight your best-selling merchandise with this shortcode to ascertain social proof, displaying prospects that these things are widespread amongst different consumers. This method helps affect guests’ shopping for choices, stop slow-moving stock, and construct belief along with your goal market.

Use restrict, columns, and orderby attributes to customise your product show.

13. Prime-rated merchandise

[top_rated_products]

This shortcode shows a list of top-rated merchandise based mostly on buyer opinions. Just like the [best_selling_products] shortcode, it’s nice for influencing shopping for choices and constructing buyer belief.

Mix this shortcode with the restrict, columns, and orderby attributes to customise the output.

14. Discounted merchandise

[sale_products]

If you wish to create a devoted gross sales web page or part to advertise discounted merchandise, this shortcode makes the job simpler. Merely add the restrict, columns, and orderby attributes to customise how the part seems.

15. Add-to-cart button and URL

[add_to_cart]

The [add_to_cart] shortcode provides an add-to-cart button for a particular product in your chosen web page or put up. This fashion, prospects can simply add objects to their cart with out visiting particular person product pages, which is beneficial for selling merchandise on non-WooCommerce pages.

Use the id or sku attribute to hyperlink a product to the add-to-cart button. You possibly can then customise the button’s look with further attributes, similar to:

• fashion ‒ customise the button’s fashion with inline CSS, which applies solely to that specific factor.
• show-price ‒ show the product value subsequent to the add-to-cart button when set to true.
• class ‒ add a reusable customized CSS class to change the button’s look.
• amount ‒ specify the amount added to the cart.

The next shortcode is an instance of utilizing these attributes to indicate the product value subsequent to the button and middle its placement:

[add_to_cart id=”49″ show_price=”true” style=”display: block; text-align: center;”]

If you happen to want to not use a button for the add-to-cart perform, think about using [add_to_cart_url] to create a hyperlink as a substitute. This shortcode generates a direct URL that robotically provides a particular product to the cart when visited.

It’s handy for encouraging gross sales in emails or areas of your WooCommerce website the place button placement is likely to be restricted.

Since this shortcode creates a hyperlink, you solely want so as to add the id or sku attribute for the chosen product.

Instance: [add_to_cart_url id=”123″]

16. Store notifications on non-WooCommerce pages

[shop_messages]

This shortcode enables you to show WooCommerce messages or notifications wherever in your website when prospects work together with it. These messages can embody alerts like “Product added to cart,” “Coupon applied successfully,” or error messages if one thing goes incorrect throughout checkout.

When positioned strategically, the [shop_messages] shortcode may also help scale back confusion at important factors within the buyer journey and improve the general purchasing expertise. It’s additionally helpful on customized pages the place essential notices have to be seen to prospects.

This shortcode doesn’t have any attributes, so that you simply want to put it within the desired location. The messages are customizable, however doing so requires utilizing a WordPress filter or overriding the theme information within the notices listing.

17. Stay product search area with filters

[woocommerce_product_search]

WooCommerce Product Search, a premium WooCommerce extension, affords this shortcode to show reside product search filter performance on pages and posts. As prospects sort key phrases into the search area, matching outcomes seem in real-time, enhancing the user expertise.

By default, the [woocommerce_product_search] shortcode exhibits product titles with their brief descriptions, costs, and add-to-cart buttons. To customise the show, confer with the extension’s documentation for out there attributes.

You possibly can increase the search performance with numerous filters. Use these filters with the [woocommerce_product_filter_products] shortcode to show search outcomes dynamically:

• [woocommerce_product_filter] — shows a reside Product Search filter the place guests can enter key phrases to refine their outcomes.
• [woocommerce_product_filter_attribute] — exhibits a reside Product Attribute filter, splendid for shops promoting variable merchandise.
• [woocommerce_product_filter_category] — embeds a reside Product Class filter to solely output specified outcomes by class.
• [woocommerce_product_filter_price] — shows a reside value filter with an enter area and slider to set a desired value vary.
• [woocommerce_product_filter_tag] — provides a reside Product Tag filter the place guests can refine outcomes by chosen tags.
• [woocommerce_product_filter_rating] – embeds a reside Product Score filter to show merchandise by common buyer ranking.
• [woocommerce_product_filter_sale] – exhibits a reside filter for discounted merchandise.
• [woocommerce_product_filter_stock] – options merchandise which can be in inventory or out there for backorder.
• [woocommerce_product_filter_reset] – provides a button to clear all reside filters.

Frequent points with shortcodes in WooCommerce

Regardless of streamlining web site customization, WooCommerce shortcodes aren’t resistant to errors. Let’s discover a number of the most typical methods to troubleshoot WooCommerce shortcodes.

Shortcodes not displaying appropriately

Right here’s what you are able to do to repair a shortcode showing as plain textual content on the web page as a substitute of rendering the meant WooCommerce content material:

• Verify shortcode formatting. Insert it right into a web page or weblog put up utilizing a shortcode block within the WordPress visible editor. If you happen to’re utilizing a textual content editor, double-check for typos or additional HTML tags which may intrude with the shortcode.
• Use straight double quotes (“). Curly quotes (“ ”) usually are not normal in code and could cause the shortcode to interrupt and render incorrectly.
• Replace WooCommerce and WordPress. Outdated variations may not help sure shortcodes, stopping them from functioning correctly.
• Verify theme compatibility. If switching to a default WordPress theme resolves the problem, your present theme is likely to be inflicting the issue. Contact the theme’s help workforce for options or change themes to keep away from future errors.
• Verify plugin compatibility. Deactivate all plugins besides WooCommerce and see if the shortcode works. If it does, reactivate the plugins one after the other to determine the problem. Contemplate contacting the conflicting plugin’s help workforce to report the problem and discover a answer.

Shortcodes not rendering correctly

This subject typically occurs on customized WooCommerce pages or posts. Strive these strategies to repair it:

• Confirm shortcode placement. Be sure that the web page the place you’re inserting the shortcode doesn’t battle with present WooCommerce pages, such because the Store or Checkout pages. Moreover, examine the WooCommerce shortcode documentation to substantiate that the shortcode works in your chosen space.
• Refresh permalink settings. Go to Settings → Permalinks within the admin dashboard and click on Save Modifications to reset the permalink construction. It will clear any cached URLs and doubtlessly resolve the problem.

Merchandise not showing in shortcodes

If WooCommerce merchandise aren’t displaying appropriately when utilizing product-related shortcodes, strive these options:

• Verify product visibility. Be certain the merchandise you need to show have the Revealed standing and are set to Public. You possibly can confirm this within the Publish part of the WooCommerce editor.
• Confirm product classes and tags. Assign the suitable classes and tags to the merchandise, particularly in case you’re filtering by these attributes within the shortcode.
• Use appropriate attributes. Double-check the attributes used within the shortcode to substantiate they match the merchandise you need to show.

Shortcode alternate options for WooCommerce

Whereas shortcodes are a helpful device for customizing your WooCommerce website, there are simpler, extra visible alternate options you may need to strive. Listed here are a number of the mostly used alternate options.

WordPress blocks

For the reason that Gutenberg block editor was built-in into WordPress, many plugins, together with WooCommerce, now supply their options in block format. Blocks are straightforward so as to add and permit real-time previews, making them a beginner-friendly answer with a decrease threat of errors than shortcodes.

To make use of blocks, click on Toggle block inserter (+) and browse the out there choices. Drag and drop the blocks you want into the editor, and customise every one utilizing the settings in the correct sidebar.

WordPress web page builder plugins

Many widespread web page builder plugins integrates with WooCommerce, enabling superior customization on customized pages with a easy drag-and-drop interface.

In addition they present completely different website components for including dynamic content material with out coding, increasing your customization choices.

Listed here are a number of the finest web page builder plugins for WooCommerce:

WordPress website editor

The built-in website editor is a good various to web page builder plugins, accessible by way of Look → Editor within the WordPress dashboard. It makes use of a block-based modifying method, permitting you to create pages with present templates or a group of blocks and patterns, eliminating the necessity for coding.

This answer is good for sustaining a fast-performing WooCommerce retailer because it doesn’t require further plugins.

Conclusion

WooCommerce shortcodes are a strong device for customizing your on-line retailer. They’re notably useful for enterprise house owners who need superior options without having to code.

When used appropriately with the correct attributes, they'll considerably prolong your retailer’s performance.

We hope this text has helped you perceive find out how to successfully use WooCommerce shortcodes and troubleshoot any points associated to their utilization. In case you have any questions, take a look at our FAQ part or go away a remark under.

FAQ

How do I create a shortcode in WooCommerce?

You possibly can create a shortcode in WordPress by declaring the specified performance within the theme’s features.php file and registering it as a shortcode. Nonetheless, for present WooCommerce content material and options, merely add the built-in shortcodes to your chosen web page or put up utilizing the WordPress shortcode block.

How do I edit shortcodes in WooCommerce?

You possibly can’t immediately edit WooCommerce shortcodes, however you may customise their output by including parameters. For instance, [products orderby=”popularity”] shows merchandise based mostly on their variety of purchases. Think about using customized code or a shortcode plugin to customise present shortcodes’ performance.

Do shortcodes have an effect on search engine optimisation?

Shortcodes don’t immediately have an effect on search engine optimisation, however the content material they generate does. For instance, if a shortcode shows best-selling merchandise, search engines like google and yahoo will index that content material simply as they'd if it had been added manually.
Source link