Add to cart button on a normal page

[devideomakers]

Hi! I am using your dynamic element ‘add to cart’ - button.
I want to make a button on a normal page, so not a WooCommerce sales page.
If one clicks on the button, the product of choice should go into their shopping cart and they should be redirected to the shopping cart.

I am not getting it to work thou! See example page:

Default

I choose ‘product ID’ (see attachment!) - is that the wrong choice?

Schermafbeelding 2021-07-06 om 12.11.33|690x449

Kind regards!
Grietje

[prakash_s]

Hello Grietje,

Thanks for writing to us.

Since you are not using any loop or you are not at the WooCommerce page so I would suggest you use our “Add to Cart Button” then set the product ID from the dynamic content code.

OR

You can simply use the product ID in the button URL like this.
URL = ?add-to-cart=2122 where it 2122 is the specific product ID.

Hope it helps
Thanks

[devideomakers]

Thanks! It worked! I also made the mistake of trying to do this with a product that was set to private.
Now it works.

A followup question:
When the user clicks this button, I also want to send them straight away to either their shopping cart or the checkout page. Can I do that too?

[prakash_s]

Hello Grietje,

Gald that it works for you. In case if you are using the “ Add to Cart Button ” then you can send them straight away to the “Cart” page. For that, you need to go to the WooCommerce -->Settings—>Product—>Add to cart behaviour—> Redirect to the cart page after successful addition.

Please note that it would be applied throughout the site to all “Add to Cart Button”

In case if you want to link to the checkout page it would require custom development. Please note that we don’t provide custom development support. It is out of the support scope.

Hope it helps
Thanks

[devideomakers]

Thank you! That works

One last question. On the page with the button, a big blue cart icon appears when you click the button:

Is there a way to shut that icon down?
Thank you!

[prakash_s]

Hello, @devideomakers,

You can hide it through the custom CSS code for that you can use this custom CSS code under X/Pro—>Theme Option —>CSS

.x-cart-notification.bring-forward.appear {
display: none;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[devideomakers]

I’m familiar with CSS, I will do it this way. I just expected to be able to change or remove the icon in the button settings, that’s why I couldn’t find it.
Thank you!

[prakash_s]

You are most welcome @devideomakers