How to use WooCommerce with Beaver Builder

I am feeling very frustrated and ready to start completely over. My website is pretty much complete and I used Beaver Builder to help put together some amazing pages. The last thing on my list is my Shop. I have been adding product items in Woocommerce product which is a nightmare in itself. My tags are showing up, Sku#, etc. I have tried again and again to figure out how to use the Beaver Builder widgets to make it look better. When I created a page and used the categories widget - I clicked on it and none of the items populated. I still can’t get rid of all the tags on the product pages and I don’t write code. I thought this would be drag and drop with only a little bit of tweaking.

Can you recommend another theme that I may need to purchase to use with Woocommerce to help with this problem and then use Beaver Builder. There are no videos out there using any of your e-commerce widgets or modules. At least I have not seen them.

Do you have a store template? If not, who can I contact with Beaver Builder that I might pay to build me one to get me started. Thank you.

Hey Alexandra,

Thanks for posting! WooCommerce is a plugin in itself. Whatever theme you use, the way WooCommerce works will always be the same. The only thing different, it how it’s presented.

I think the problem you’re having is that you’re not yet familiar with the plugin. The BB WooCommerce modules simply provide an interface for its shortcodes. Their documentation can be found on the link below.
http://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/

If you’re using the WooCommerce Product Categories widget and no categories came out, it’s quite possible you didn’t place any categories at all.

Hope this helps!

Ben

Hi Ben:

I am aware that Woocommerce is a plugin. You said the only thing different is “how it is presented” - this is what I am trying to work on - How it is presented and how I go about doing this. I guess I misunderstood what Beaver Builder can do. I thought if I entered my products in Woocommerce (which I have already) that I would be able to make it look nice with Beaver Builder and get the look I want.

It appears that I am going to have to buy another theme for Woocommerce to get the nice layout. Please let me know if I misunderstood you.

I have no idea what you mean by - “The BB WooCommerce modules simply provide an interface for its shortcodes.” Can you please explain this in layman’s terms. Again it does not sound like I can do a nice drag and drop layout for my store with Beaver Builder.

Hey Alexandra,

I don’t really know if there are any themes or plugins out there that does a drag and drop layout for WooCommerce products or control each product detail in a micro scale. Those are done by WooCommerce itself. The template is being done by WooCommerce no matter what theme you choose. When I say presentation, I meant to say, the theme may/can change the colors of the button, the text, the image sizes but nothing more. Sorry for the confusion.

Ben

Hi Alexandra,

Apologies for the confusion here! Ben is correct in that BB just outputs what WooCommerce generates. BB allows you to create the layout so to speak. I am wondering if maybe an example might help here. I recently did a smaller candle site with BB/WooCommerce. It’s still a work in progress, but check out https://madisonvalleycandle.com/, specifically the various product pages like candles, etc.

These pages we’re blank pages and I inserted the WooCommerce module in each, configured as necessary, etc. What you are seeing in terms of the actual products is entirely WooCommerce output in a BB WooCommerce module. The detail pages are entirely WooCommerce. On the pages I created and used the BB WooCommerce module, there are a variety of things you still can do aside from just displaying products as the client wanted in my example. Rows, columns, various other modules are all available to you to “spice” up the design if that makes sense.

Hope that helps and let us know if we can do anything further!

Best,
Billy

Yes Billy. This is what I want to do but I can’t figure it out. Do you have a template I can buy or can you direct me some how.

Since I already have my wordpress website built. I will have a SHOP tab - so I won’t need a home page so to speak. On my Shop page I would like to have my different categories, like pillows, canvas, etc. and then when customer clicks on pillows, all the pillows populate, then when you click on an individual item it opens up and you can order that item.

I am sure I am a stones throw away from figuring this out, I just can’t seem to get started with it.

The other problem I was having is the tags are showing up and I do not like this and can’t get rid of them.

I was in the process of ordering another theme but if I can do this with Beaver Builder I would love to since I already paid for it.

[Content Hidden]

Hey Alexandra,

I believe that is example is built on a different platform, but WooCommerce would be similar. For your shop page, are you using a page you created in the WP dashboard or one of the pages Woo automatically adds when installed? If using the Woo page, BB won’t really be able to modify the layout, but if using just a standard page you create and edit with BB, the possibilities are really endless, but just adding a WooCommerce module like I did in my example with a bit of work in the settings should do the trick.

You may also want to do some reading in the WooCommerce documentation on styling and things of that nature as that is really up to the WooCommerce plugin itself. You may need to do some CSS work as well.

Best,
Billy

I created the page myself Billy. With your help of course, I created a page, added module to create a page with categories and then when I click - they all populate - yeah. Thank you!!!

My next question is about the Woocommerce widgets. I believe I understand how I could incorporate most of them in around the site BUT how and what manner would I use the cart.

Glad to hear that helped! I’m not quite sure I understand your last question though, can you elaborate?

Best,
Billy

My knowledge is so elementary on this subject matter but I have come a long way. I was just trying to figure out why I might use the cart widget and if I did in what manner. The couple of times I tried inserting it to see what it looked like - It comes up blank and the row disappears. It showed nothing.

As for some of the other widgets - Why would I want to use the “tag” widget - what would it do for me.

Hey Alexandra,

The cart only shows if you have an item added to it. By default, it’s empty. But if you add an item to the cart, it should show the items you’ve added there. Give it a shot and let us know hot it goes! You can also check the link below to know more about what each widget does. :slight_smile:
http://docs.woothemes.com/document/woocommerce-widgets/

Ben

Is there a bug in the Icon Module? I added the Icon Module to what is going to be a footer. I cannot get them to center, change color,or make them bigger. They are extremely tiny. I also want it to be global and go across all the pages.

Hey Alexandra,

On the Icon Module should be a Style tab and inside it are several properties of the icon you can change, e.g., color, alignment and size. If you want it global, you can use the new Global Templates and apply it to all your pages manually.

Hope this helps!

Ben

[Content Hidden]

Hey Alexandra,

From the above, it sounds like there is a plugin conflict with BB. To troubleshoot what might be going on there, go ahead and disable all plugins and test the Beaver Builder while reactivating each to determine if the issue is related to a 3rd party plugin. Let us know what you find there.

In terms of posting in the support forum, you do need to be logged in. You can then visit http://forum.wpbeaverbuilder.com/support/ and choose whichever topic fits your issue. Once in the individual topic, scroll to the bottom of the page and you will see a way to enter your question. Hope that helps!

Best,
Billy

Hi Billy - I disabled all the plug ins and brought them back one at a time. It appears that the:

“WP Content Copy Protection & No Right Click” – Version 1.5.0.3 | By wp-buy was causing the problem with not being able to move the box around when I am editing. I use this plugin to protect my art images - is there another alternative. I don’t write code but I know how to cut and paste. : ) if you have some code for me to put in the CSS Editor.

My other big ISSUE - I still cannot use the menu module. It will not take changes in settings. I took a screen shot but don’t know how to post a photo here. I really wanted to have a menu at bottom of page in a footer I am building to be global.

When I get to of making this global - Am I suppose to click on the row settings to save the module I put together for my global footer because I don’t see an option there or on the modules themselves. I know how to save an entire page template but I see no way to save just that footer at least on my screen I don’t.

Hi Alexandra,

Interesting on that plugin. It looks like it is well supported so you could try contacting the plugin devs on that issue. I can also issue a bug report that we can look into on that plugin next week if you like. It may come down to the plugin dev having to assist depending on what we find in how it interacts with content.

On the menu module, you can post screenshots using Imgur (http://imgur.com/). Re. making it global, once you do make it global (using the save as button in the row settings), it will stick in the global section of the editing interface to where you can drag it out and use it page to page when building out your site.

Best,
Billy

Hi Billy - Yes please issue a big report on your end and I will contact the developers. I am just not sure how I should describe what the problem is or if they will understand it.

Billy I posted one of the screen shots to imgur. I am not sure how you are supposed to find it. I have never used a site like this so hopefully I did it correctly.