Here is how to to set up a main WooCommerce template, particularly how to set up a header.

The oxyelements WooCommerce header includes a Dynamic Cart icon that automatically updates a little number icon every time you add a new product to the cart.

For this, we will use a custom PHP script:

add_filter( 'woocommerce_add_to_cart_fragments', 'oe_cart_count_fragments', 1, 1 ); 
function oe_cart_count_fragments( $fragments ) {    
	$fragments['div.header-cart-count'] = '<div class="header-cart-count" data-cart-count="' . 
		WC()->cart->get_cart_contents_count() . '">' . 
		WC()->cart->get_cart_contents_count() . '</div>';
	return $fragments;  
}

You can install using a plugin called Code Snippets or using your own function.php file if you prefer.

1. Go to Plugins > Add New
2. Type in "Code Snippets" in the search field
   
3. Click Install Now and Activate Code Snippets
   
4. Create a new snippet
   
5. Insert the script from above
   
6. Save changes and Activate the script
   

With this out of the way, we have to create a main template.

1. Go to Oxygen > Templates
   
2. Create a Tew Template
3. Give it a name e.g. Main
   
4. Set priority to "Zero"
   
5. Under "Where Does This Template Apply?" > "Other" select Catch All
   
6. Publish
   
7. Now you can "Edit with Oxygen"
   

Inside Oxygen Builder, with the new main template loaded, you can load our main template.

1. Go to Add > Library
2. Click Design Sets
   
3. Click Oxyelements WooCommerce
   
4. Then we can go to Templates and click Main.
   

If you save and go to the frontend, you should already see the header with the cart button and dynamic number, which will automatically update based on this script we inserted earlier.

In the Structure panel, you'll find some features that we have already inserted. These you can customize as you want.

For example, we have a custom implementation of the Search Feature, where we have put an icon inside the search field and made it search for products instead of only posts, which is the default in WordPress.

With this set up, you just click save, and you'll be done with this tutorial.

Next step

How to setup Oxygen Builder global styles for WooCommerce

To learn more about

Oxyelements WooCommerce Design Set