[Support request] add_to_cart shortcode in Query Loop

[Luca]

Hi, I’m trying to create a completely new shop page for WooCommerce.
I’m using Query Loop to insert products, but I’m unable to insert the button “Add to Cart”, specific for each product.
I’m using shortcode add_to_cart but it works blank, if I insert a product id, this obviously remains the same for all products and not product-specific.

[Fernando]

Hi Luca,

Just realized that the add to cart button can’t be added currently in the Query Loop Block.

What you can do for now is to use the WooCommerce module to show the items you intend to show, and the we can try using custom CSS to alter the look/layout of your shop.

Reference: https://docs.generatepress.com/article/woocommerce-overview/

[Elodie]

Hello,

I need also to display products with Query loop in content pages, with the “add to cart” button.

Beginning of a solution…

I created a grid of products manually (without loop) with this button :
<a class="gb-button add_to_cart_button ajax_add_to_cart" href="#" data-product_id="1">Add</a>

Note : I looked at GP code (Shop page) and I took some elements to avoid a reload (and I delete href=”?add-to-cart=1″)
> class : “add_to_cart_button ajax_add_to_cart”
> data : “data-product_id”

It works well (except that I don’t have the nice bar that appears at the top indicating that the product is well added, compared to GP Shop page)

My question :

Is there a way to create this button in a Query loop with “generateblocks_query_loop_args” or something else ?
> Add a custom attribute with the product ID variable : “data-product_id = id”

I am so close and at the same time so far from finding a solution 😭!! It would be great to create custom product listings using Query loop 🤩

Thanks for your help

[David]

Hi there,

unfortunately that is not possible at this time.
We are looking at how to integrate Woo products for a future GB Pro update, but we’re not there yet.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts