Oxygen 3.0 & Woocommerce Integration + some fixes

September 6, 2019

So let me start off by saying I love Oxygen I learn new & wonderful things everyday because of it! Woocommerce integration is by far the best thing oxygen could have done for themselves in my honest opinion. I built a demo site last night and had some issues so I thought I would share.

If you want to skip to the bottom and just purchase the site export, click here.

Ok so lets start from the beginning

  • brand new WordPress install
  • install & activate Oxygen 3.0
  • install & activate Oxygen Woocommerce Integration 1.0
  • install & activate Woocommerce
  • setup Woocommerce through installer
  • import sample_products.csv from the Woocommerce plugin folder
  • watched the video explaining how to setup Oxygen w/ Woocommerce

OK so now armed & ready to go, I make a simple main template, then a single product template. I made a 2 column layout set it up like I wanted it, but it would not work. After about an hour of fiddling around with it, I decided to watch the video again with special attention to when he started the single product page. Well as it turns out I missed the fact that you have to insert a product builder (pretty much a wrapper) and then insert columns on top of the product builder (you have to have the builder selected when you add columns)...

Needless to say I was pretty frustrated, but I figured it out and thought I would share.

Now when I view the products they show correctly! Well kind of, the images are a little off and the description and button are short.

So I dug around in the CSS and came up with code to make the one on the left look correct like the one on the right.

.single.woocommerce div.product .oxy-product-images div.images .flex-control-thumbs,
.single.woocommerce div.product div.images .flex-control-thumbs{
    overflow:auto;
}
.single.woocommerce #content div.product div.images,
.single.woocommerce div.product div.images,
.single.woocommerce-page #content div.product div.images,
.single.woocommerce-page div.product div.images {
    width: 100%;
}
.single.woocommerce div.product .oxy-product-images div.images .flex-control-thumbs li,
.single.woocommerce div.product div.images .flex-control-thumbs li{
    width:25%;
}
.single.woocommerce .oxy-product-cart-button,
.single.woocommerce .oxy-woo-element div.product form.cart {
    width: 100%;
    max-width:100%;
}

So I was happy with that, created a archive layout that applied to all products / product categories / search results. I edited the page and inserted the product archive module. I then made a 404 template and a page for account, tracking shipping & set those up with the Oxygen modules. I then edited the checkout, and cart page (generated by Woocommerce), and made a menu to show those 4 links.

Now there is still plenty to do here as this is just a bank template to get started with, you need to set global colors, fonts & all that stuff, and then don't forget the Woocommerce global options either! You could also install it somewhere and use it as a design/template set.

So if you would like to download an Oxygen site with Wocommerce already setup for you instead of following the steps above, read on!

Click on the button below to download the export for only $10!
NO PLUGINS ARE INCLUDED IN THE EXPORT!
you will need to install Oxygen 3.0, Oxygen Woocommerce Integration 1.0, Woocommerce, & All-In-One WP Migration.

© 2019 DMS Designz | Designed By DMS Designz
envelope-oclosechevron-leftchevron-rightphonefacebookgithubbarslinkedin