Here is how to set up a Single Product Template

  1. From Admin panel go to Oxygen Builder tab > Templates > Add New Template
  2. Give it a title, e.g., Single Product

  3. Nest it under Main

  4. Click "Singular" > Select "Products" and "Product Variations"
  5. Choose a higher priority than "Main" template (which was Zero)
    Let's pick 10.
  6. Publish template
  7. 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

 

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