Written by: Aleš Sýkora

The Author of Toolset.wiki. Big fan of Toolset plugins and WordPress.

I am big fan of WordPress and Toolset plugins. I have done many projects based on WordPress. I also have experience with online marketing, PPC advertising and SEO. I live in Czech Budweis – the town of Budweiser Budvar breverage in the south of the Czech Republic – the heart of Europe.

I love skateboarding, snowboarding, frisbee, fitness, healthy lifestyle, tattoos, mountain biking and other sports. I enjoy having time with friends with good beer and good music.

Woocommerce AJAX add to cart button in Oxygen repeater

Last Update: 07. 05. 2020 , Category:

If you want to use custom repeater for woocommerce product categories in Oxygen builder and use the AJAX buttons in it feel free to use them with shortcode [add_to_cart id=””] or just copy the button html with class=”add_to_cart_button ajax_add_to_cart”

By using shortcode

Shortcode needs to use id of each product so I prepare a variable as first step and then echo shortcode.

<?php $postid = get_the_ID(); ?>
<?php echo do_shortcode( '[add_to_cart id="' . $postid . '"]' ); ?>

Shortcode with no styles and without displaying price

<?php $postid = get_the_ID(); ?>
<?php echo do_shortcode( '[add_to_cart id="' . $postid . '" style="" show_price="false"]' ); ?>

By using HTML link

At first your product <div> in repeater must have class .product, otherwise it will not work. Then use a code block and put this inside.

<?php $postid = get_the_ID(); ?>
<a href="/?add-to-cart=<?php echo $postid ?>" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="<?php echo $postid ?>" data-product_sku="" aria-label="Add to cart" rel="nofollow">Add to cart</a>

If you have some conditions like if ACF field is… then you can wrap it in the PHP if…

Code in the code Oxygen block

If it does not work for you, try to add .woocommerce class on parent section element. Also check your woocommerce settings if you have enabled AJAX for archive pages.

Building own product repeater in oxygen

So basically you can create your own product archives and categories with repeater.

The query

You can use custom query in repeater with post type = product. Or you can use manual query. For example:

Display all products without pagination

post_type=product&posts_per_page=-1&no_found_rows=true

Display 3 more products randomly

post_type=product&posts_per_page=3&no_found_rows=true&orderby=rand

The structure

Oxygen structure should look like this:

  1. <section> Or page with .woocommerce class
    1. <repeater block>
      1. <div block> Product container class: .product
        1. <image block> Product Image
        2. <text block> Product price
        3. <code block> Product AJAX Add to cart button

This is what I did for example:

Product repeater made in oxygen with ajax Add to cart buttons
Example of repeater structure

Support Us via our Affiliate link!

No items found

What to do next?

Need a Toolset License?

Buy via affiliate link!

Looking for a tutorial?


Help other users – Add your snippet!


Join the discussion!