Woocommerce AJAX add to cart button in Oxygen repeater

3 min read / Oxygen Builder, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: If you want to style custom repeater for woocommerec 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”

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…

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:

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;
}

0 comments