WooCommerce is a powerful e-commerce system for WordPress. Out of the box, it offers a lot of features, but if you’re willing to put in some work to customize things, it gives you even more options for creating a great-looking online store. This tutorial provides you with two different ways to build custom WooCommerce pages.
Method #1: Use WooCommerce blocks
WordPress 5.0 introduced a new visual editor known as Gutenberg. With this visual editor, you can easily add different types of content into your pages. Originally available only as a plugin, WooCommerce now adds quite a few blocks to your editor without any additional plugin needed:
- Featured Product
- Featured Category
- Hand-Picked products
- Best Selling Products
- Top-Rated Products
- Newest Products
- On-Sale Products
- Products by Category
- Products by Tag
- Products by Attribute
- Product Categories List
- Reviews by Product
- Reviews by Category
- All Reviews
- Product Search
- All Products
- Filter Products by Price
- Filter Products by Attribute
- Active Product Filters
- Cart
- Checkout
With all of these options, your options are almost endless for building beautiful, customized WooCommerce pages.
Method #2: Use shortcodes
While the advent of Gutenberg made shortcodes less common, shortcodes still offer a great way to add content into a page. Use the Shortcode block to add a shortcode, type the shortcode into the block, and your content appears in place of the block. Shortcodes can do anything from displaying custom content to redirecting a page — that’s how our Latest Post Redirect plugin works. WooCommerce comes with some custom shortcodes out of the box, and you can use these to build custom WooCommerce pages as well. If you’re not sure what a shortcode is, we’ve got that covered too in our article about shortcodes.
WooCommerce provides four shortcodes you can use for creating pages:
[woocommerce_cart]– shows the cart page[woocommerce_checkout]– shows the checkout page[woocommerce_my_account]– shows the user account page[woocommerce_order_tracking]– shows the order tracking form
The advantage of using these shortcodes is how easy it is to use them. All you have to do is drop in the appropriate shortcode and WooCommerce will create the page for you. This is an easy way to ensure you have these necessary pages your WooCommerce site will need.
WooCommerce also provides shortcodes that mimic the versatility of the blocks above. If you’re using the Classic Editor on your site or you’re not comfortable with blocks in WordPress, you can use the following shortcodes:
[featured_products][sale_products][best_selling_products][recent_products][product_attribute][top_rated_products]
However, there’s also an even more versatile shortcode you can use: [products]. It uses multiple arguments to allow you to create a highly-customized view of a product or products. For example, you could use the shortcode [products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true"] to display 4 products in a row (4 columns wide on one row), ordered by popularity, using the class “quick-sale,” and only displaying items that are on sale. With over 20 different argument options, you can show exactly what you’d like to display. For more information on using the [products] shortcode, see WooCommerce’s detailed outline of all the arguments it uses.
Between WooCommerce’s built-in blocks and shortcodes, WooCommerce offers a variety of options to help you build custom WooCommerce pages. Use these to make your online store look exactly how you want!
