In order to facilitate our plug-in products into articles or pages, WooCommerce provides some shortcodes by default. Using these shortcodes, we can easily insert WooCommerce products or functions into ordinary WordPress pages.
Basic page shortcode:
- “woocommerce_cart” – displays the shopping cart page
- “woocommerce_checkout” – displays the checkout page
- “woocommerce_order_tracking” – displays the order tracking form
- “woocommerce_my_account” – displays the user account page
In most cases, when installing WordPress, the wizard will automatically add the above shortcode to the corresponding page. If the installation wizard is not run, we need to add the above shortcode to the page ourselves.
My account page
Display “My Account” content on the account page. Users can browse historical orders and update their information. We can specify to display the account page of a specific user and specify how many orders to display on one page.
parameter:
[
'current_user' => '',
'order_count' => '15'
]「woocommerce_my_account order_count="12"」The shortcode below can be used anywhere in your WordPress site.
Show latest products: recent_products
List the latest products, usually on the homepage of the website. The ‘per_page’ parameter determines how many latest products are displayed, and the columns parameter determines how many columns the products are displayed in.
Shortcode parameters:
[
'per_page' => '12',
'columns' => '4',
'orderby' => 'date',
'order' => 'desc'
]「recent_products per_page="12" columns="4"」Display featured recommended products: featured_products
It is similar to the latest product shortcode, except that this shortcode displays the featured products recommended by the background. In the example shortcode below, 12 recommended products are displayed, 4 in each row.
parameter:
[
'per_page' => '12',
'columns' => '4',
'orderby' => 'date',
'order' => 'desc'
]「featured_products per_page="12" columns="4"」Display a single product: product
Display a product by its product ID or this SKU.
「product id="99"」
「product sku="FOO"」If the product is not displayed, check whether it is set to hidden in the background.
Display multiple products: products
Display multiple products by product ID or SKU, and aboveproductThe shortcode is similar, except that this one displays multiple products. Note the plural form‘products’。
parameter:
[
'columns' => '4',
'orderby' => 'title',
'order' => 'asc'
]「products ids="1, 2, 3, 4, 5"」
「products skus="foo, bar, baz" orderby="date" order="desc"」If the product is not displayed, check whether it is set to hidden in the background.
Show add to cart button: add_to_cart
Display price and add to cart button by product ID.
parameter:
[
'id' => '99',
'style' => 'border:4px solid #ccc; padding: 12px;',
'sku' => 'FOO'
]「add_to_cart id="99"」Show add to cart URL: add_to_cart_url
Show price and add to cart button by product ID, aboveadd_to_cartWhat is displayed directly is the function. This shortcode just outputs a link to add to the shopping cart.
parameter:
[
'id' => '99',
'sku' => 'FOO'
]「add_to_cart_url id="99"」Display products for a single product category: product_category
Display multiple products in the category by product category name.
parameter:
[
'per_page' => '12',
'columns' => '4',
'orderby' => 'title',
'order' => 'asc',
'category' => ''
]「product_category category="appliances"」Display products in multiple product categories: product_categories
Display products in multiple product categories, and the aboveproduct_categorieSimilar, except this one displays products in multiple product categories.
parameter:
[
'number' => 'null',
'orderby' => 'title',
'order' => 'ASC',
'columns' => '4',
'hide_empty' => '1',
'parent' => '',
'ids' => ''
]The `number` parameter is used to specify how many products are displayed, and the `ids` parameter is used to specify which categories of products are displayed.
「product_categories number="12" parent="0"」Set the parent parameter to 0 to display only top-level categories, and set ‘ids’ to a comma-separated list of category IDs to display only products in the specified category.
Product page: product_page
Displays the full product details page with the specified product ID or SKU.
「product_page id="99"」
「product_page sku="FOO"」Display discounted special promotion products: sale_products
List items on sale:
parameter:
[
'per_page' => '12',
'columns' => '4',
'orderby' => 'title',
'order' => 'asc'
]
「sale_products per_page="12"」Show top selling products: best_selling_products
List your top selling items.
parameter:
[
'per_page' => '12',
'columns' => '4'
]
「best_selling_products per_page="12"」Show related products: related_products
List related products.
parameter:
[
'per_page' => '12',
'columns' => '4',
'orderby' => 'title'
]
「related_products per_page="12"」Show top rated products: top_rated_products
Shows top rated products.
parameter:
[
'per_page' => '12',
'columns' => '4',
'orderby' => 'title',
'order' => 'asc'
]
「top_rated_products per_page="12"」Display product attributes: product_attribute
List products with specified attributes.
parameter:
[
'per_page' => '12',
'columns' => '4',
'orderby' => 'title',
'order' => 'asc',
'attribute' => '',
'filter' => ''
]
「product_attribute attribute='color' filter='black'」per_page parameter
Troubleshooting shortcode issues
If you paste the code on the page but cannot see the product input on the front end, please make sure that the shortcode is not included in <pre>. This problem is very common. Just remove the .<pre> tag and re-save the page.
Sort products based on custom fields
Many WooCommerce shortcodes for listing products support custom sorting, such as:
- 「recent_products」
- “featured_products”
- “products”
- “product_category”
- 「sale_products」
- 「top_rated_products」
- 「product_attribute」
- “related_products”
We can sort products by the following attributes:
- menu_order
- title
- date
- rand
- id
The “orderby” attribute is used as follows:
「products skus="foo, bar, baz" orderby="date" order="desc"」In addition to the above attributes, we can also sort products by custom fields. In the following example, we use price to sort products.
add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby' );
function woocommerce_shortcode_products_orderby( $args ) {
$standard_array = array('menu_order','title','date','rand','id');
if( isset( $args['orderby'] ) && !in_array( $args['orderby'], $standard_array ) ) {
$args['meta_key'] = $args['orderby'];
$args['orderby'] = 'meta_value_num';
}
return $args;
}We need to put the above code into our theme’s functions.php file and edit the meta_key as needed.
To sum up
In WordPress, a shortcode is equivalent to a package that encapsulates the functional logic of displaying products and HTML code. By directly using the shortcode, you can output the content specified by the shortcode. It is very convenient and highly reusable. next timeDevelop WooCommerce themesWhen doing this, you might as well try to use shortcodes more often, I believe it will speed up development to a certain extent.
