Here we will show you how to set up the WooCommerce global styles in Oxygen Builder.

Firstly, let's set up a design guide, and we already made one for you with Oxyelements.

  1. So all you have to do is Create a Page

  2. Name it "Design Guide"
  3. Publish it.
  4. Go to "Edit with oxygen".
  5. Click Add > Library

  6. Go to Design Sets

  7. Select Oxyelements

  8. And here you go on the Pages and click Design Guide.

    When you load the Design Guide, you will load all our classes and colors. This will make it much easier for you to design consistently across all the designs you make.
  9. Save this page, and you will have access to the classes and colors on all other pages you work on.

 

Protip: You can find oxyelements preset classes by going to Manage > Selectors > oxyelements. Here you can see many different classes that you can use in your designs.

 

How to see oxyelements global colors:

  1. Go to Manage > Settings

  2. Click Global Styles

  3. Click oxyelements tab
  4. Select Colors

  5. Here you can see all the colors that we use throughout different designs. You can also put in your brand color for a more consistent design.

 

How to change oxyelements - Woocommerce global styles:

  1. Go to Manage > Settings > Global Styles
  2. Go to WooCommerce tab
  3. Buttons
  4. Here you can change colors of the primary color, hover color, etc. globally.
  5. Click Save

 

After configuring these settings, you're ready to move to the next step of your WooCommerce setup.

How to setup WooCommerce Shop template