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
Child posts menu for custom post type parent item
1. 2. 2021 in
This code will help you display menu of childs on current post. For example: Product 1 = parent has those child pages: – Product usage– How to– Disclaimer– Calculator When you put this child items menu in your template, it will show all childs of product 1 on all child pages and also on product […]
Read More
Aleš Sýkora wrote
User friendly Multiple Select Field with Toolset Forms & Select2.js
11. 6. 2019 in
Using the standard multiple select field is bad. Bad for UX. Why should I hold down the CTRL when I need select more than one value? Let’s make your multiple select fields user friendly with Select2.js.
Read More
Aleš Sýkora wrote
Add placeholder to the search form in Views
26. 7. 2018 in
Learn how to show a placeholder text in the search field made with Toolset Views via custom jQuery.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram