# Convert HTML to Woocommerce issue

**URL:** <https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467>\
**Category:** Pinegrow WP\
**Created:** [December 5, 2016, 7:56am UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467 "2016-12-05T07:56:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![beatngu](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@beatngu](https://forum.pinegrow.com/u/beatngu)\
**Post date:** [December 5, 2016, 7:56am UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467/1 "2016-12-05T07:56:19Z")

</div>

Hi there,  
I am having a lot of problems to convert a HTML theme to Woocommerce.  
I have a bootstrap HTML theme with 4 columns and i want to populate it with woocommerce products.  
However i have no idea on how to do this and i could not find a tutorial on this.

Is there any tutorial around,on how to do what i want?

The other thing i tried is to find out how it’s done is use the wp starter theme and use the woocommerce page and just do the same but i do not see anything.Thw woocommerce page is not showing the products and if i import the HTML from WP i get a list with the products but with bullits and it’s not looking anything like how it’s looking in the preview or the website.

It looks like it’s not importing the css from woocommerce.  
One more thing why on earth is not the store templates enabled in WP blocks?  
When i enabled them and dragged one of the blocks i do not get the woocommerce prducts even when i try to import the HTML from WP.

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [December 5, 2016, 10:09am UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467/2 "2016-12-05T10:09:10Z")

</div>

@beatngu have a look here [Pinegrow+WooCommerce](http://docs.pinegrow.com/wordpress-themes/how-to-get-woocommerce-to-run-in-a-wordpress-theme-created-with-pinegrow) and here’s a download [link](https://db.tt/IrzDmihg) to temple and theme that can be used for reference.

---

<div class="post-metadata">

**Author:** ![beatngu](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@beatngu](https://forum.pinegrow.com/u/beatngu)\
**Post date:** [December 5, 2016, 11:08am UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467/3 "2016-12-05T11:08:47Z")

</div>

Hi Rob,  
Thanks for the links!

Still no luck getting it to work but i will play a bit more to see what i can come up with.  
However i used the woocommerce starter theme and it does not display correct in PG when i import HTML from WP.  
Is it not supposed to display the same way in PG as it would on a live website?

Here is a screenshot of how woocommerce looks in PG

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/84e8c9dfc9b2a3454d4a6abbdfa6ae2aff16a2ef.PNG)

I want to try to display featured woocommerce products in a own carousel just like the image under.

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/7bcfdc835634ed3bdb2b623c2405c80ee3d84d74.PNG)

But i just don’t get it working

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [December 5, 2016, 11:17am UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467/4 "2016-12-05T11:17:57Z")

</div>

With the Starter Theme, you can create a basic WooCommerce shop like in the following example:  
[http://www.starter.batsteek.fr/shop/](http://www.starter.batsteek.fr/shop/)

We use the following process: [http://docs.pinegrow.com/wordpress-themes/how-to-get-woocommerce-to-run-in-a-wordpress-theme-created-with-pinegrow](http://docs.pinegrow.com/wordpress-themes/how-to-get-woocommerce-to-run-in-a-wordpress-theme-created-with-pinegrow)

If you need a very custom shop with carousel and more like in your example, you will have to dig in the WooCommerce documentation and also, you will have to deeply customize your templates with PHP.

We currently don’t have a sample/demo theme with such customization level BUT, it’s possible 🙂

Note: Importing the content from WordPress does not work in that particular situation as WooCommerce CSS is provided through the plugin and not with your template so … it’s not available in your project and the display is ugly.

---

<div class="post-metadata">

**Author:** ![beatngu](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@beatngu](https://forum.pinegrow.com/u/beatngu)\
**Post date:** [December 5, 2016, 11:35am UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467/5 "2016-12-05T11:35:54Z")

</div>

This was what i was afraid of,PG not importing the plugin css and it’s making it harder then what it could be.  
What about adding a plugin css import feature to PG?

Something simple where we can define what css file to use on the element.  
And point PG to the css file it should use on the element and when you export to wp the plugin css file is also exported.

This way we can use PG to easy style plugins.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [December 5, 2016, 11:49am UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467/6 "2016-12-05T11:49:38Z")

</div>

Well, just an idea: maybe you can grab the default WooCommerce CSS files then temporarily add the files to your project so you can use the styles and eventually over-ride them with new ones.

---

<div class="post-metadata">

**Author:** ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)\
**Post date:** [December 6, 2016, 2:33am UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467/7 "2016-12-06T02:33:22Z")

</div>

> [@beatngu](#):
>
> This was what i was afraid of,PG not importing the plugin css and it’s making it harder then what it could be

Under the CSS tab in Pinegrow you can add CSS files to your project, even URL’s so the CSS does not need to be local to your system. Then you can easily drag the hamburger marks on the right of the css file in the list and move them into whatever order you want to make your own CSS order of operations.

---

<div class="post-metadata">

**Author:** ![itsmeleo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/itsmeleo/32/19_2.png) [@itsmeleo](https://forum.pinegrow.com/u/itsmeleo)\
**Post date:** [December 6, 2016, 11:22am UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467/8 "2016-12-06T11:22:26Z")

</div>

In next few days, I’m going to build a complete woocommerce solution from HTML to Woocommerce theme using Pinegrow and E-shopper theme.

Thank You!  
LEO

---

<div class="post-metadata">

**Author:** ![beatngu](https://avatars.discourse-cdn.com/v4/letter/b/6a8cbe/32.png) [@beatngu](https://forum.pinegrow.com/u/beatngu)\
**Post date:** [December 6, 2016, 11:44am UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467/9 "2016-12-06T11:44:48Z")

</div>

That is awesome Leo!  
I have watched all your tutorials and i have learned a lot.

However i think PG should make it way easier to style plugins because pretty much any wordpress site uses a plugin.

Thank you!

---

<div class="post-metadata">

**Author:** ![itsmeleo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/itsmeleo/32/19_2.png) [@itsmeleo](https://forum.pinegrow.com/u/itsmeleo)\
**Post date:** [December 6, 2016, 1:59pm UTC](https://forum.pinegrow.com/t/convert-html-to-woocommerce-issue/467/10 "2016-12-06T13:59:53Z")

</div>

@beatngu basically Pinegrow WP plugin is limited to WordPress to connect it to plugin you have to do some extra and out of the way steps. like if you are going to customize woocommerce shop page then you have to disable some functionality from existing woocommerce functionality , so for that you need to understand HOOKS of both WordPress and Woocommerce .

Thank You!  
LEO
