Coupon Not Displaying on Product Page – How to Update Element Paths

If your coupon is not appearing on a product page, it may be due to element paths needing an update. Follow these steps to ensure the product and Add to Cart selectors are correctly configured.



Step 1: Go to Product Page Settings


  1. In your Klip Coupons dashboard, go to Settings → Advanced → Product Page.


Step 2: Open Your Browser Developer Console


  1. Go to the product page where the coupon should appear.
  2. Right-click anywhere on the page and select Inspect (or press F12).
  3. Make sure the Elements tab is active.



Step 3: Locate the Add to Cart Form


  1. In the Elements tab, use the Select Element tool (cursor icon).
  2. Hover over and click the Add to Cart button.
  3. Look for the <form> element that wraps the Add to Cart button. It should look like:


<form method="post" action="/cart/add">




Step 4: Update the Product Form Selector


  1. Copy the value of the action attribute (for example: /cart/add).
  2. Go back to the Klip Coupons Product Page settings.
  3. In the Product Form Selector field, replace the default selector if needed:


form[action*="/cart/add"]


  • Make sure the part inside the quotation marks matches exactly what you copied from your store’s <form> element.

  • If it already matches, you do not need to change anything.
  1. Click Save.


Step 5: Update Add to Cart Button Selector


  1. In Product Page settings, locate the Add to Cart Button Selector field.
  • By default, it is set to:
form[action*="/cart/add"] [type=submit], form[action*="/cart/add"] .add_to_cart


  1. Inspect the Add to Cart button on your product page.
  2. Find a unique class for the button.


  • Example:
class="product-form__submit button button--full-width button--secondary"
  • Use product-form__submit as the unique class.


  1. Replace .add_to_cart in the selector field with your unique class:
form[action*="/cart/add"] [type=submit], form[action*="/cart/add"] .product-form__submit

  1. Click Save.



Step 6: Update Compact Add to Cart Button Selector


  1. In Product Page settings, locate the Compact Add to Cart Button Selector field.


  • By default, it is set to:


form[action*="/cart/add"] [type=submit], form[action*="/cart/add"] .add_to_cart


  1. Inspect the Quick Add to Cart button on your product page.

  1. Find a unique class for the button.


  • Example:
class="quick-add__submit button button--full-width button--secondary"
  • Use quick-add__submit as the unique class.
  1. Replace .add_to_cart in the selector field with your unique class:


form[action*="/cart/add"] [type=submit], form[action*="/cart/add"] .quick-add__submit


  1. Click Save.


Step 7: Verify


Refresh your product page. Coupons should now appear correctly above the product for both main and compact Add to Cart buttons.


Need More Help?

If your coupon still isn’t showing or you have any questions, feel free to contact our support team. We’re happy to help!








Updated on: 25/02/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!