Adding an "add to cart" button throughout my product page.

[buoya23]

Hi all,

I am trying to add an "add to cart" button a few times throughout my product page. The only option I seem to have is s "shop now" button which takes the user back up to the top of the page (to the prodcut description) which disrupts their flow. I was them to be able to simply add to cart and keep scrolling, retuning to complete the purchase when they're ready.

I have tried something from this thread, a liquid Css code but as you can see from this picture it just doenst look any good design wise. 

Any tips would be hugely appreciated.

I am using the Be Yours Theme and the product page is https://www.buoyavital.com/products/rest-restore-sleep-formula

Thank you.

 

[PaulNewton]

Your code is probably just missing some css clases on the button (product-form__submit button button--full-width)

Keep in mind {{products.variants.first.id}} will not update if the customer selects other options (such as size, color,etc)

Sometimes the indirect approach can be better, don't try to insert specific new buttons with specific behavior.

Just make the new buttons make it so the original button is clicked.

<button onclick="document.querySelector('[name=add]').click();" class="product-form__submit button button--full-width">Add to cart</button>

There are caveats to this band-aid approach it wont work reliably on pages with multiple products with multiple add-to-cart buttons; you would need to increase the specificity of the querySelector to be less generic. Here it's just targeting ANY thing with the attribute pattern "name=add"

[buoya23]

Hi, thanks so much for this. Yes that seems easier just having them clock the original button. This worked!! 

[PaulNewton]

Your welcome, glad it worked for you. To aid future merchants you can mark my answer as the solution if you want.

Do keep an eye out for those caveats though, this approach may behave oddly with things like quickviews/quickbuy buttons which some themes put on the product pages in sections like recommended-products,etc.

[rkpindustry]

Hello, Can you please tell me how and where to add code and please share code for add to cart through product page. Thank you

[plants4friendz]

Would you be able to help me with how this code could work on my page? I'm assuming there's a part of the code I'm missing.

Here's the page I'm trying to add buttons throughout: https://thespiralpath.love/products/untamed-a-journey-home-to-your-wildish-self

I just want all the buttons to add to cart.

[rkpindustry]

Hello, Can you please tell me how and where to add code and please share code for add to cart through product page. Thank you