Convert HTML to Woocommerce issue

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.

@beatngu have a look here Pinegrow+WooCommerce and here’s a download link to temple and theme that can be used for reference.

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

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

But i just don’t get it working

With the Starter Theme, you can create a basic WooCommerce shop like in the following example:
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

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 :slight_smile:

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.

1 Like

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.

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.

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.

3 Likes

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

2 Likes

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!

@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