CustomAddToCartButton.md

Custom Add to Cart Button

This tutorial explains how to create a custom Add to Cart button using FluentCart and how to find the required IDs.

---

Step 1: Add the Button HTML

Add the following HTML code to any page where you want the button to appear:

<button 
  data-fluent-cart-add-to-cart-button 
  data-cart-id="3" 
  data-product-id="15" 
  data-variation-type="simple_variations" 
  aria-label="Add To Cart" 
  data-action-name="single_product_page_cart_updated_0" 
  data-error-action-name="single_product_page_cart_updated_0"
>
  <span class="text">Add To Cart</span>
</button>

Important

You must replace:

• data-product-id → Your product's Product ID
• data-cart-id → Your product's Variation ID

---

Step 2: Find the Product ID

1. Go to your WordPress admin dashboard.
2. Navigate to FluentCart → Products.
3. Click Edit on your product.
4. The Product ID is visible on the edit screen, as shown below:

https://prnt.sc/9yRpw5fZlfb3

Replace data-product-id with this value.

---

Step 3: Find the Variation ID

1. Open your product in FluentCart.
2. Copy the Direct Checkout URL, as shown below:

https://prnt.sc/b7JmIob-m8xF

The URL will look like this:

https://fluentcart.top/?fluent-cart=instant_checkout&item_id=138&quantity=1

In this URL:

• item_id=138 is the Variation ID

Replace data-cart-id with this value.

---

Summary

Attribute	Value to Use
data-product-id	Product ID from the product edit screen
data-cart-id	item_id value from the direct checkout URL

---

Once both IDs are set correctly, the custom Add to Cart button will work as expected.