Skip to main content

Theme Shortcodes

The suma-elementor theme registers several custom shortcodes for use in Elementor HTML widgets, page content, and email templates.

Registered Shortcodes​

Outputs a styled link to the WooCommerce My Account page.

Registered by: \Suma\WooCommerce::wc_account_link()

[wc-account-link]

Output: <a href="https://scottsdalemint.com/my-account/" class="wc-account-link">My Account</a>

Use case: Navigation bars, Elementor button widgets where the My Account URL needs to be dynamic.

[wc-account-title]​

Outputs the title of the current My Account sub-page (e.g., "Dashboard", "Orders", "Edit Account").

Registered by: \Suma\WooCommerce::wc_account_title()

[wc-account-title]

Output: <span class="wc-account-title">Orders</span> (varies by current endpoint)

Use case: Custom My Account page headings in Elementor templates.

[wc-cart-icon]​

Displays a shopping cart SVG icon with a dynamic item count badge.

Registered by: \Suma\WooCommerce::wc_cart_icon()

[wc-cart-icon]

Output: SVG cart icon + <span class="cart-count">3</span> (live count)

Features:

  • jQuery-based live update when items are added/removed from cart
  • Badge disappears when cart is empty
  • Links to the cart page

Use case: Navigation widgets, sticky headers.

[wc-product-detail]​

Displays product detail information inline.

Registered by: \Suma\WooCommerce::wc_product_detail()

Attributes:

  • id — WooCommerce product ID (required)
  • field — Which field to display (price, sku, weight, metal_type)
[wc-product-detail id="123" field="price"]

Use case: Embedding live product prices in static Elementor content blocks.

[wc-recent-orders]​

Displays a list of the current logged-in customer's recent orders.

Registered by: \Suma\WooCommerce::wc_recent_orders()

Attributes:

  • limit — Number of orders to show (default: 5)
  • status — Filter by order status (default: all)
[wc-recent-orders limit="3"]

Output: HTML table with order number, date, status, and total. Each row links to the order details page.

Use case: Dashboard widgets, My Account custom sections.

[suma_order_tracking] (from suma-woo-order-tracking plugin)​

The full order tracking page with progress bar. See Suma Woo Order Tracking for complete documentation.

Using Shortcodes in Elementor​

The preferred way to use these shortcodes in Elementor is via the Shortcode Widget (found in the Elementor Basic Widgets panel):

  1. Drag a Shortcode widget onto the page
  2. Type the shortcode (e.g., [wc-cart-icon]) into the widget field
  3. The shortcode renders live in the Elementor canvas

Alternatively, shortcodes can be used inside HTML widgets for more complex layouts.

Shortcodes in Email Templates​

The [wc-account-link] shortcode is safe for use in WooCommerce email templates since it outputs a clean <a> tag. Other shortcodes may not render correctly in email clients due to JavaScript dependencies.

Adding a New Shortcode​

Add new shortcodes in class-woocommerce.php:

public function __construct() {
    // ...existing hooks...
    add_shortcode( 'my-new-shortcode', [ $this, 'render_my_new_shortcode' ] );
}

/**
 * Render the [my-new-shortcode] output.
 *
 * @param array<string, string> $atts Shortcode attributes.
 * @return string HTML output.
 */
public function render_my_new_shortcode( array $atts ) : string {
    $atts = shortcode_atts( [
        'id'    => 0,
        'class' => '',
    ], $atts, 'my-new-shortcode' );

    ob_start();
    // ... render HTML ...
    return ob_get_clean();
}