Here is how to set up a shop archive page in WooCommerce:

1. From Admin panel go to Oxygen Builder tab > Templates
2. Add New Template
3. Type in the Name for your new template

Set "inherit design from other template" to Main
This means that the shop will be loaded inside of the main template.

Click Archive > Checkmark Taxonomies and select:
All Product type
All Product visibility
All Product categories
All Product tags"

Checkmark Post Types and select:
Select product
product_variation

Under "Template Priority" type in 10

Click Publish, and now we can edit it with Oxygen Builder

1. Publish template
2. Then we can click "Edit with Oxygen"

To style the products. We just add our preset Single Product template follow these steps:

1. Go to Add > Library > Design Sets > Oxyelements WooCommerce
2. Then under "Templates" click Single Product

1. Then under "Templates" click Single Product
   

You'll probably notice here that there is a bunch of funny cogs turning around and even some error messages.

There are some bugs in the Oxygen Builder, the version that we currently have.

Maybe at the time you're trying to set this up, these bugs are already fixed. Yet, even with these minor problems, everything will work perfectly fine.

All you have to do is to:

1. Hit "Save"
   
2. And then "Reload" the page
3. Now you can edit the page
4. After you edit it to your preferences click "Save"

We would like to note that in the back end, it might look a little bit weird, but we actually made some custom CSS that only shows up in the frontend.

If you go to the front end, everything will be shown as expected.

Protip: We actually made custom "plus" and "minus" buttons that the user can interact with both on the phone and on desktop, which makes it a bit easier than having to type all the time. Of course, you can also type in if you prefer.

We have also added a few Code Blocks to add some custom functionality. If you prefer to have it a different way you can customize the code block.

Here is how to change the color of "plus" and "minus" buttons:

1. Open the Structure tab and select the Custom Product Quantity code block
2. Go to CSS tab
3. Add your color below other CSS, before the "}" character

Another thing you might also want to know is that you can take all of the CSS and move it into your "Stylesheets" if you prefer having it in one place.

Next step

How to setup Cart page

To learn more about

Oxyelements WooCommerce Design Set

Last updated JavaScript for the ajax add to cart feature on single product template

jQuery(function(){ jQuery('.cart button[type=submit]').click(function(e){ if(jQuery('.woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled').length>0){ e.preventDefault() returnfalse } var button = this jQuery(button).addClass("loading") console.log(this) var form = jQuery(this).closest("form") console.log('form',form) var data if(jQuery('.woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-enabled')){ addToCart = jQuery('[name="add-to-cart"]').val() productID = jQuery('[name="product_id"]').val() variationID = jQuery('[name="variation_id"]').val() quantity = jQuery('[name="quantity"]').val() data = jQuery(form).serialize()+ "&add-to-cart="+addToCart "&product_id="+productID "&variation_id="+variationID "&quantity="+quantity console.log("advanced",data) } else{ data = jQuery(form).serialize()+"&add-to-cart="+jQuery(button).val() console.log("simple",data) } jQuery.ajax({ type: form.attr("method"), url: form.attr("action"), data: data, cache: false, success: function(response){ jQuery(button).removeClass("loading") console.log(response) var url = woocommerce_params.wc_ajax_url; url = url.replace("%%endpoint%%", "get_refreshed_fragments"); jQuery.post(url, function (data, status) { jQuery(".woocommerce.widget_shopping_cart").html(data.fragments["div.widget_shopping_cart_content"]); if (data.fragments) { jQuery.each(data.fragments, function (key, value) { jQuery(key).replaceWith(value); }); } jQuery("body").trigger("wc_fragments_refreshed"); jQuery(button).addClass("success") setTimeout(function(){ jQuery(button).removeClass("success") }, 2000) }); //jQuery('.custom_add_to_cart').parent().removeClass('loading'); }, error:function(response){ jQuery(button).addClass("error") setTimeout(function(){ jQuery(button).removeClass("error") }, 2000) console.log(response); } }); e.preventDefault() returnfalse });});