How to Edit WooCommerce Shortcodes: A Step-by-Step Guide

If you want to customize your WooCommerce store, knowing how to edit WooCommerce shortcodes is essential. Shortcodes let you display products, carts, checkout forms, and other dynamic elements anywhere on your site, giving you more control over your store’s layout and functionality.

In this guide, we’ll show you step by step how to edit WooCommerce shortcodes and explore a list of the most common WooCommerce shortcodes.

What are WooCommerce shortcodes?

WooCommerce shortcodes are predefined snippets of code provided by WooCommerce that allow you to display dynamic eCommerce content anywhere on your WordPress site. They act as shortcuts to add core store functionalities such as products, cart, checkout, or account pages without the need for custom coding.

Why are shortcodes helpful?

WooCommerce shortcodes are a powerful tool that helps you create more flexible and customized product and shop pages. Here’s why shortcodes are so helpful:

• Ease of Use: Shortcodes provide a simple way to add complex functionalities to your website without needing to write code. You simply paste a short piece of code into your editor, and it renders the linked features or content.
• Time-Saving: Instead of building certain features from scratch or using complex page builders, shortcodes allow you to quickly insert elements like product listings, shopping carts, or checkout forms.
• Flexible Customization: While shortcodes have default functionality, they often come with attributes that allow you to fine-tune their behavior and appearance. For instance, you can specify the number of products to display, sort by price, or only show products from a specific category.
• Consistency: Using shortcodes helps maintain consistency in design and functionality across your entire website. No matter where you use a shortcode, it will display content in the same defined manner.
• No Coding Skills Required: Even if you have no coding experience, you can still leverage the full power of shortcodes. This makes them an ideal tool for shop owners and website managers.
• Improved User Experience: By easily embedding crucial WooCommerce store elements into pages or posts, you can create a more seamless and intuitive shopping experience for your customers.

List of common WooCommerce shortcodes

WooCommerce offers various shortcodes to extend your store’s functionality. Each serves a unique purpose, helping you build pages that fit your needs. Next, we’ll explore the most common shortcodes and how to use them effectively.

• Cart page – [woocommerce_cart]: This shortcode generates the shopping cart page within your WooCommerce store. It displays the customer’s cart contents and includes options to update items, apply discount codes, and move forward to the checkout process. 
• Checkout page – [woocommerce_checkout]: This shortcode adds a checkout form to your WooCommerce checkout page. It lets customers enter their billing and shipping details, select a payment method, and review their order before completing the purchase.
• User account page – [woocommerce_my_account]: This WooCommerce shortcode generates the customer account area. It allows you to set up a dedicated account page where logged-in users can update personal details, track their orders, manage addresses, and change their passwords.
• Add-to-cart button and URL – [add_to_cart]: The [add_to_cart] shortcode places an add-to-cart button for a specific product on any page or post. It lets customers add items directly to their cart without visiting the product page, making it especially useful for promoting products outside of WooCommerce pages.
• Show a specific product page – [product_page]: It shows the product details such as title, price, description, reviews, and an add-to-cart button.
• Display a specific product category – [product_category]: This shortcode is designed to display products from a specific category. It works well for showcasing relevant items on category landing pages or highlighting trending products within that category.
• Featured products – [featured_products]: This shortcode is great for showcasing featured products or promotions on your site, and it supports limit, columns, and orderby attributes for customizing the display.
• Best-selling products – [best_selling_products]: Use this shortcode to showcase your best-selling products and create social proof by showing customers what others are buying. This not only builds trust and encourages purchase decisions but also helps reduce slow-moving inventory.
• Discounted products – [sale_products]: This shortcode makes it easy to create a dedicated sales page or section for discounted products. You can customize the display by adding attributes like limit, columns, and orderby.

Looking for shortcode options? Check the WooCommerce shop shortcodes: Complete list, uses and more to explore them all.

How to edit WooCommerce shortcodes

Let’s walk through the steps on how to edit WooCommerce shortcodes to customize your store’s layout and functionality.

Step 1: Access shortcode files

To edit WooCommerce shortcodes, you’ll need to access their source files. These are usually found in your theme’s functions.php file or within a dedicated plugin. Here’s how to open the functions.php file:

In your WordPress dashboard, go to Appearance and select Theme Editor.

Find the functions.php file in the list and click it to start editing.

If the shortcodes are part of a plugin:

• Go to the Plugins section.
• Choose the plugin you want and click Edit below its name.
• Locate the shortcode-related files, usually labeled accordingly.

Step 2: Customize shortcode attributes

After locating the correct shortcode file, you can start customizing its attributes to control functionality and display:

• Identify the shortcode you want to edit, such as [woocommerce_products].
• Look for its parameters, like per_page, order, or columns.
• Adjust these values to achieve your desired result. For example, change the per_page attribute to control how many products appear on a page.

Here’s a simple example of editing a WooCommerce shortcode for product display:

• Before modification: [woocommerce_products per_page=”10″ columns=”5″]
• After modification: [woocommerce_products per_page=”20″ columns=”4″]

With this change, the page will show 20 products in 4 columns instead of 10 in 5 columns. Be sure to save your edits and preview the page to confirm everything looks correct.

After editing, save the file. Always make a backup before making changes to avoid accidental errors.

Step 3: Insert shortcodes in pages

If you want to improve your online store, it’s important to know how to edit WooCommerce shortcodes and use them on your WordPress site. Shortcodes let you easily embed dynamic store features into your pages.

To add a WooCommerce shortcode to a page, follow these steps:

• From your WordPress dashboard, go to Pages.
• Choose an existing page to edit or click Add New to create one.
• In the page editor, click the Add Block (+) button.
• Search for “Shortcode” in the block options.

• Click the Shortcode block to add it to your page.
• In the block, type the WooCommerce shortcode you want to use. For example, [woocommerce_cart] will display the customer’s shopping cart.

Keep in mind that each shortcode has its own attributes, which you can adjust to customize the content, such as the number of products displayed or their order.

Step 4: Using the Gutenberg block editor

The Gutenberg block editor provides a modern, upgraded experience compared to the classic WordPress editor, making it easier to manage your store’s content and features through a more visual interface.

Open the page editor and click the Add Block button to browse for WooCommerce blocks. These blocks are specifically designed for WooCommerce elements and can replace some traditional shortcodes. For instance, you’ll find blocks for products, product categories, and add-to-cart buttons.

Once you locate the block you need, click to add it to your page. You can then customize its appearance and functionality directly within the Gutenberg editor.

By learning how to edit WooCommerce shortcodes and leveraging the Gutenberg block editor, you gain full control over your online store’s layout and user experience. Continue experimenting with different shortcodes and blocks to find the best combination for your pages.

Common issues with shortcodes in WooCommerce

Although WooCommerce shortcodes make website customization easier, they can still encounter errors. Here are some common methods to troubleshoot them.

Shortcodes not displaying correctly

Here are the steps you can take if a shortcode is displaying as plain text on your page rather than rendering the expected WooCommerce content:

• Check shortcode formatting: Insert it into a page or blog post using a shortcode block in the WordPress visual editor. If you’re using a text editor, carefully check for typos or extra HTML tags that could interfere with the shortcode.
• Use straight double quotes (“): Curly quotes (“ ”) are not standard in code and may cause the shortcode to break or render incorrectly.
• Update WooCommerce and WordPress: Outdated versions might not support certain shortcodes, preventing them from working properly.
• Check theme compatibility: Switch to a default WordPress theme. If the shortcode works, your current theme could be causing the issue. Contact the theme’s support team or consider changing themes to prevent future errors.
• Check plugin compatibility: Deactivate all plugins except WooCommerce and see if the shortcode functions. If it does, reactivate plugins one by one to identify the conflict. Contact the support team of any conflicting plugin for a solution.

Shortcodes not rendering properly

This problem commonly occurs on custom WooCommerce pages or posts. Here are some ways to resolve it:

• Check shortcode placement: Ensure the page where you’re adding the shortcode doesn’t conflict with existing WooCommerce pages like Shop or Checkout. Also, refer to the WooCommerce shortcode documentation to confirm the shortcode is compatible with the page.
• Refresh permalink settings: Navigate to Settings → Permalinks in the WordPress dashboard and click Save Changes to reset the permalink structure. This clears cached URLs and can often resolve shortcode display issues.

Products not appearing in shortcodes

If product-related shortcodes aren’t showing WooCommerce products correctly, try the following solutions:

• Check product visibility: Ensure the products you want to display are Published and set to Public. You can confirm this in the Publish section of the WooCommerce editor.
• Verify product categories and tags: Make sure products have the correct categories and tags assigned, especially if your shortcode filters content based on these attributes.
• Use correct shortcode attributes: Double-check that the attributes in your shortcode match the products you intend to display.

Shortcode alternatives for WooCommerce

Although shortcodes are useful for customizing your WooCommerce site, there are simpler, more visual options you can consider. Here are some of the most popular alternatives.

WordPress blocks

Since WordPress introduced the Gutenberg block editor, many plugins, including WooCommerce, now provide their features as blocks. Blocks are simple to add and offer real-time previews, making them beginner-friendly and less prone to errors compared to shortcodes.

To use blocks, click the Toggle block inserter (+), explore the available options, and drag the blocks you need into the editor. You can then customize each block using the settings in the right-hand sidebar.

WordPress page builder plugins

Many popular page builder plugins integrate seamlessly with WooCommerce, allowing you to create custom pages using a simple drag-and-drop interface.

These plugins also offer various site elements for adding dynamic content without coding, giving you more flexibility to customize your store.
Here are some of the top page builder plugins for WooCommerce:

• Beaver Builder: Premium version starts at $99/year
• Divi: Starts at $70/year or $199 for a one-time payment
• Visual Composer:  Premium version starts at $49/year
• SeedProd: Premium version starts at $39.50/year

WordPress site editor

The built-in site editor offers a convenient alternative to page builder plugins and can be accessed through Appearance → Editor in the WordPress dashboard. Using a block-based editing system, it lets you build pages with pre-made templates or a variety of blocks and patterns—no coding required.

This approach is perfect for keeping your WooCommerce store fast and efficient, as it doesn’t rely on extra plugins.

Frequently Asked Questions

1. How do I add a WooCommerce shortcode to a page?

Go to your WordPress page or post editor, add a Shortcode block, and insert the desired WooCommerce shortcode. You can also adjust its attributes to customize the display.

2. Will using shortcodes affect SEO?

Properly implemented shortcodes generally do not harm SEO. However, ensure that the content is accessible to search engines and doesn’t rely solely on dynamic loading that might hide products from indexing.

3. Do WooCommerce shortcodes work on all pages?

Shortcodes generally work on any WordPress page or post, but some may conflict with default WooCommerce pages (Shop, Cart, Checkout). Always verify placement and refer to the shortcode documentation.

4. Are there alternatives to shortcodes?

Yes. You can use WordPress blocks, page builder plugins, or the site editor to add WooCommerce features without using shortcodes, especially for users uncomfortable with editing code.

Conclusion

Mastering how to edit WooCommerce shortcodes can significantly improve the way you present products, carts, and checkout forms on your store. By understanding shortcodes and their attributes, you gain full control over your WooCommerce pages, creating a smoother and more engaging shopping experience for your customers.

At Arestós, we specialize in WooCommerce development and customization, helping businesses design, optimize, and scale their online stores. From creating custom shortcodes to implementing advanced store features, our team ensures your WooCommerce site works efficiently and looks professional.

Contact us now to get expert assistance in customizing your WooCommerce store and unlocking its full potential.