How to add an item to your WooCommerce store's cart via poptin?

1. Go to the design page of your poptin

2. Add an HTML element from the side menu:

3. Add this code inside:

<script> $(".poptin-form-submit-button").on("click",function(){
$.get('/?post_type=product&add-to-cart=126', function() { window.location.href='https://yourdomain.com/cart'; });
});
</script>

Don't forget to change the Product ID and the Domain

Note: If you have a paid plan and want to include Dropdown fields in your popup so the visitor will be able to choose a specific color, size etc then use this code:

<script>
$("#poptinFormSubmitButton").on("click",function(){ var pop_attr1=$('.poptin-design-fields-form[data-placeholder="Color"] option:selected').attr("value"); var pop_attr2=$('.poptin-design-fields-form[data-placeholder="Size"] option:selected').attr("value");
$.get('/?post_type=product&add-to-cart=126&attribute_pa_color='+pop_attr1+'&attribute_pa_size='+pop_attr2, function () {
window.location.href = 'https://yourdomain.com/cart'; });
});
</script>

Don't forget to change the Product ID, Domain, the exact Placeholders and the Attributes.

This is how you can the Attributes in your WordPress Admin panel: Woocommerce: Products > Attributes

and the Placeholders for your popup:

4. You can choose to Close the popup right after the click, or redirect the the Cart page (or any other page). If you want to redirect to a different page, please use the Thank-you screen option and add 1 second delay. You can find those option under the General Settings. You can write on the thank you screen something like "The product is added to your cart".

Note: After the visitors click on the "Add to cart" button, they will be redirects to your Cart page.

Updated on: 15/11/2024