The StoreEngine Add to Cart shortcode allows you to display a custom “Add to Cart” button for any specific product anywhere on your website. This is particularly useful for creating custom landing pages, pricing tables, or promotional blog posts where you want customers to take immediate purchase action.

Usage Example

[storeengine_add_to_cart product_id="9" label="Buy Now" direct_checkout="true"]

Common Parameters (Attributes)

• product_id: (Required) The unique ID of the product you want to display.
• label: The text displayed on the button. Use this to change the default “Add_to_cart” to something like “Buy Now” or “Get Started.”
• price_id: A specific ID for a custom price point, useful if you are using advanced pricing rules or custom fields.
• variation_id: The unique ID of a specific variation for variable products. This allows you to pre-select a specific size or color.
• direct_checkout: Determines if the user is redirected straight to the checkout page. Options: true or false. (Default: true)
• quantity: The number of items that will be added to the cart with a single click. (Default: 1)
• show_quantity: Enables a quantity input field next to the button so customers can choose how many they want. Options: true or false. (Default: false)
• disabled: If set to true, the button will be visible on the page but will be unclickable (greyed out). Options: true or false. (Default: false)
• price_display: Defines how different variation prices are shown to the user. Options: price_range, dropdown, or radio. (Default: radio)
• button_display: Allows you to hide the actual button while keeping other elements like the price or quantity field. Options: yes or no. (Default: yes)
• icon: Accepts HTML or SVG code to display an icon inside the button.
• icon_position: Sets whether the icon appears to the left or right of the label text. Options: left or right. (Default: left)

Example Scenarios

1. High-Conversion “Buy Now” Button

For a specific product variation that skips the cart and goes straight to payment:

[storeengine_add_to_cart product_id="101" variation_id="102" label="Purchase Now" direct_checkout="true"]

2. Pricing Table Style (with Radio Selection)

If you want to show a product with its different price options as radio buttons:

[storeengine_add_to_cart product_id="250" price_display="radio" show_quantity="true"]

3. Custom Branded Button with Icon

Add a custom SVG shopping bag icon to the right side of the label:

[storeengine_add_to_cart product_id="88" label="Grab it" icon='<svg>...</svg>' icon_position="right"]

How to Add the StoreEngine Add to Cart Shortcode (Gutenberg)

1. Open the Page/Post: Navigate to the page where you want the button to appear.
2. Find Product ID: Go to Products > All Products in your WordPress dashboard. Hover over the product name to see the ID: [number].
3. Insert Shortcode Block:
   • Click the “+” (Add Block) icon.
   • Search for “Shortcode” and select it.
4. Paste the Shortcode: Input your shortcode with the desired product ID: [storeengine_add_to_cart product_id="YOUR_PRODUCT_ID"]
5. Publish: Click Update or Publish.

Using with aBlocks

If you are using the aBlocks library (by the same creators), you can also find a dedicated StoreEngine Add to Cart block.

• Simply search for “Add to Cart” in the block library.
• Select the product from the block settings dropdown.
• No manual shortcode entry is required when using the block-based approach.

The[storeengine_add_to_cart] shortcode is a powerful asset for creating frictionless shopping experiences. By utilizing features like Direct Checkout and Price Display modes, you can turn any blog post or landing page into a high-performing sales point without requiring the user to navigate through multiple product pages.