Woocommerce Archive Layout builder - how to create add to cart button

[Pbalazs89]

Hi there,

I’m trying to create the following archive page:
https://capture.dropbox.com/h28r2AYwWBxZZlD7

At the bottom of each product, I would like to add a button that puts the given product into the cart. I can’t find a link shortcode for this. Could you help?

Thanks!

[charlie]

There is an element called Add to Cart Form. Try adding that, let us know if that helped!

[Pbalazs89]

Hi @Charlie,

I’m not sure that I explained myself fully.
Two questions:

1. The add to cart button is supposed to appear on the PRODUCT ARCHIVE page. So not on the single-product.
   Can this be achieved?

2. Please see attached screenshot. The client would like an accordion to be opened by text as showcased on the screenshot. Is this possible?

(további információ) is for opening the accordion
Kosárba - is for add to cart button

https://capture.dropbox.com/yTNaiOA8SiLq4tdv

[tristup]

Hi @Pbalazs89,

The Add to Cart button should be there in the WooCommerce archive page, if you not using any predefined template you need to add it manually by using the Add to Cart Button element within the Looper.

In the Single Product page, you can add the Accordion by using the WooCommerce Single layout which is only available in the Pro not in the X.
After adding the Accordion you can use the Dynamic Content to show the content inside the Accordion Items.

Hope it helps.
Thanks

[Pbalazs89]

Hi @tristup,

1. Managed to find the Add to Cart button, so thank you for that!
2. I’m wondering, is the layout put forward on the design mockup possible, with PRO-s built in Accordion? This is the product-archive page btw, not the single-product.

What I’m asking is: Like on the image above, you click on További információk, and that opens the accordion below (so at a separate location I guess).

If this is not possible, would you go ahead and do this with JS? Create a div with dynamic content -> add a class to további információ -> add an event listener, if clicked toggle class to the div with dynamic content? If this is the way to go, are there some built in animation classes in Pro that I can use on the div maybe, so that it rolls down, or fades in, and not just pops up?

Thanks a lot for your help.

[ruenel]

Hello @Pbalazs89,

I think if you add an Accordion element and insert {{dc:post:the_content}}, you should be able to insert the product’s long description inside the Accordion item content.

Hope this helps.