How to add second "add to cart" button on the products page ?

HEllo
I am working on my new shop that will offer textiles .

I have added on my product cards, just below the ADD TO CART orange button, a new button called ORDER A SAMPLE. This allows a customer to order a sample small piece 4 x 4 cm of this current textile/product. Instead of ordering a textile itself.

Under the button ORDER A SAMPLE there is a link https://www.woolsome.shop/cart/?add-to-cart=8356 that is adding this specific sample to the cart. (screenshot attached no 1)

— ISSUE TO BE SOLVED —
My problem is that now after clicking that mentioned button it is opening a cart on a full page (screenshot attached no 2), when I would like ask a system to only add this sample to the cart without redirecting user to the cart ….I want only to show him for few seconds a narrow panel sliding in on the right side .. and still to stay on the main product card. Exactly in the way as adding a normal product to the cart works.
(screenshot attached no 3).

Please tell me if you know what code must be added behind my ORDER SAMPLE BUTTON, so it works exactly the same way as normal ADD TO CART button.

I want my customers to have the same UIX whether they add a normal product to the cart or its sample only.

ADDITIONAL NOTES TO FULLY UNDERSTAND what I try to achieve around the “sample system”.

– Since customer can order samples from many different textiles, for each “main product” displayed in the shop, I have “sample product” (which is normally not visible in the shop). So under the button ORDER A SAMPLE … on each different product card i have different link (on its backend) … to link to exactly this “sample product” that customer wants to order. In this specific case here … 8356 is an id of this sample product that is related to this beige textile.
https://www.woolsome.shop/cart/?add-to-cart=8356

– “sample products” are setup through min,max, step plugin as products that can be only purchased as “one or none”. You can see even on a screenshot no2, extra message to the customer that he already added this sample to the cart and no more can be added. Which is exactly as it should be.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and for contacting us.

Add to cart button is the Woocommerce functionality. Our support does not cover Woocommerce customization. You will have to find a developer who would do it for you.

If you need minor CSS changes or some kind of customization related to the theme functionality, please let us know and our theme would do our best to help.

As a quick and easy way out, please, consider the possibility to present the sample to each product within a grouped product. As far as I know, a grouped product may be sold separately, so the buyer can purchase the main and buy or not buy a sample. https://woocommerce.com/videos/woocommerce-grouped-product-overview/

Best Regards

[Author]

Posts