Guide to WooCommerce Shortcodes – Simple & Powerful

WooCommerce shortcodes are versatile tools that let you embed dynamic store content—like product displays, carts, or checkout forms—into pages, posts, or widget areas. From showcasing featured products to adding an “Add to Cart” button, shortcodes make your store flexible and engaging. This guide walks you through using WooCommerce shortcodes, with a practical example of creating a squeeze page featuring an “Add to Cart” button.

Step 1: Understand WooCommerce Shortcodes

1. What Are Shortcodes?:
   • Shortcodes are snippets like [shortcode] that you insert into content to display dynamic WooCommerce elements.
   • They power core WooCommerce pages (e.g., [woocommerce_cart] for the Cart page, [woocommerce_checkout] for Checkout, [woocommerce_my_account] for My Account).
2. Why Use Shortcodes?:
   • Add store features anywhere: pages, posts, sidebars, or footers.
   • Customize product displays (e.g., show specific products or categories).
   • Create targeted promotions (e.g., an “Add to Cart” button on a landing page).
3. Explore Options:
   • WooCommerce offers many shortcodes, including:
     • [products] for listing products (all, featured, on-sale, etc.).
     • [add_to_cart] for adding a product to the cart.
     • [product_page] for displaying a full product page.
     • [product_category] for showing products from a category.
   • Due to their variety, we’ll focus on one example here. See WooCommerce’s shortcode documentation for the full list.

Step 2: Create a Squeeze Page with an Add to Cart Shortcode

Let’s build a landing page to promote a product, ending with an [add_to_cart] button to drive sales.

1. Create a New Page:
   • From your WordPress dashboard, go to Pages > Add New.
   • Title: Enter a name, e.g., “Ninja Poster Deal.”
   • Content: Write compelling sales copy, e.g., “Grab our exclusive Flying Ninja poster! Vibrant colors, premium quality—perfect for any space.”
2. Find the Product ID:
   • Go to Products to view your product list.
   • Hover over the desired product (e.g., “Woo Single Number Two”) to reveal its ID in the URL or tooltip (e.g., 99).
   • Note the ID for the shortcode.
3. Add the Shortcode:
   • In the page editor, below your sales copy, insert the [add_to_cart] shortcode.
   • Syntax: [add_to_cart id=\”99\”]
     • id: The product ID (e.g., 99 for Woo Single Number Two).
     • Optional arguments (per documentation):
       • sku: Use SKU instead of ID (e.g., sku=\”NINJA-001\”).
       • style: Add custom CSS (e.g., style=\”border:1px solid black;\”).
       • show_price: Set to true/false to show/hide price (e.g., show_price=\”true\”).
   • Example: [add_to_cart id=\”99\” show_price=\”true\”] adds a button for product ID 99 with its price displayed.
   • Keep it simple for this example: just use [add_to_cart id=\”99\”].
4. Publish and Preview:
   • Click Publish to save the page.
   • Click View Page to see the result.
   • You’ll see your sales copy followed by an “Add to Cart” button for the product, styled according to your theme (e.g., Storefront).

Step 3: Test and Experiment

1. Test the Shortcode:
   • Visit the published page to confirm:
     • The “Add to Cart” button displays correctly.
     • Clicking it adds the product (e.g., Woo Single Number Two) to the cart.
     • The button integrates with your theme’s design.
   • Test on mobile to ensure responsiveness.
2. Try Other Shortcodes:
   • Add [products limit=\”4\” columns=\”2\” orderby=\”date\”] to a page to show the four newest products in two columns.
   • Use [product_category category=\”posters\”] to display all products in the “Posters” category.
   • Embed [woocommerce_cart] in a custom page for a secondary cart view (ensure it doesn’t conflict with the main cart page).

Pro Tips

• Strategic Placement: Use [add_to_cart] on landing pages or blog posts to drive impulse buys, like promoting a single product after a review.
• Customization: Combine shortcodes with CSS (via the style argument or theme customizer) to match your branding.
• Widget Support: Add shortcodes to widget areas using a Text or Custom HTML widget (e.g., [products limit=\”3\” on_sale=\”true\”] in a sidebar).
• Avoid Conflicts: Don’t overuse shortcodes like [woocommerce_checkout] on multiple pages, as they’re tied to core functionality.
• Documentation: Dive into WooCommerce’s shortcode documentation for advanced options, like filtering by tags or creating paginated product grids.

Congratulations!

You’ve unlocked the power of WooCommerce shortcodes! By adding an [add_to_cart] button to a squeeze page, you’ve seen how easy it is to embed store features anywhere. With countless shortcodes at your fingertips, you can create dynamic, customer-friendly pages to boost sales and engagement.

For more inspiration, explore WooCommerce’s shortcode documentation or experiment with shortcodes in posts and widgets.