Aleš Sýkora wrote

Woocommerce AJAX add to cart button in Oxygen repeater

5. 5. 2020 in ,

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

1.11.2020 update

Using Enhanced Ajax Add to Cart with + and – and quantity

Install Enhanced AJAX add to cart for Woocommerce and put this code in your repeaters code block:

<button class="quantity-button" onclick="this.parentNode.querySelector('input[type=number]').stepDown()" >➖</button>
<button class="quantity-button" onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus">➕</button>
<?php echo do_shortcode( '[enh_ajax_add_to_cart_button title=none product=' . get_the_ID() . ']' ); ?>

For similiar result to this, use this CSS. Do not forget to set up your Code block layout to position:relative.

.pridani-kosik .woocommerce-simple-add-to-cart {
    display: flex;
    flex-direction: column;
}
.pridani-kosik .woocommerce-simple-add-to-cart .qty {
 margin: auto;
 position: absolute;
 top: 0; left: 0; right: 0;
  height:auto;
      font-weight: 600;
    font-size: 1.2em;
}
.pridani-kosik .quantity {
margin-top:1em;
}
.pridani-kosik .quantity-button {
	padding:0.3em;	
  border-radius:5px;
  margin-top:0.2em;
}
.pridani-kosik .quantity-button.minus {
position:absolute;
  left:0;}
.pridani-kosik .quantity-button.plus {
position:absolute;
  right:0;
}
.pridani-kosik .woocommerce-simple-add-to-cart.simple_button {
margin-top:2em;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Oxygen Front-end styles in Gutenberg
WARNING: I can’t figure how to make it working currently. If you have any idea, please put in in the comments below. You may want to display the content when editing in Gutenberg editor with your frontend Oxygen Styles included. It is possible with But the challenge is that Oxygen is creating CSS files for […]
Read More
Aleš Sýkora wrote
Particles.js in Oxygen Builder
Particles.js is a lightweight JavaScript library for creating particles. Particles are used to create interactive backgrounds that respond to the mouse movements. Do you want to use it on you Oxygen website? Okay, no problem. You just need to embed the particles.js script – I will do that with the Advanced scripts plugin – and […]
Read More
Aleš Sýkora wrote
Oxygen builder – default media queries
24. 3. 2021 in ,
Default media queries of Oxygen. You can change them in Global Settings > Global Styles > Width & Breakpoints.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram