HostGator Web Hosting

Setting up the WooCommerce Widgets

When you log into your WordPress admin and go to the Widgets page, you’ll see that there are a bunch of WooCommerce specific widgets available for use.  The WooCommerce widgets provide “out of the box” advanced eCommerce functionality.  We’re talking about functionality such as, “WooCommerce Price Filter” and “WooCommerce Layered Nav”, that would have been reserved for only high priced custom platforms just a few years ago.  There is also the ability to create as many custom sidebar widget sections as you’d like which will be covered in another Upload WP tutorial.  For now, we’ll focus on some of the WooCommerce widgets that I really like.How to Setup WooCommerce Widgets

The two widgets that I highly recommend using from the start using are; 1. WooCommerce Product Categories 2. Woo – Subscribe / Connect.  The Product Categories widget will add an additional layer of navigation to the right side-bar of the site.  The “Woo –  Subscribe / Connect” widget will help you build an opt-in email list and it will link up to your social media accounts.

How to Configure the “Woo – Subscribe / Connect” Widget

Configuring the E-Mail Opt-In Box using MailChimp

The Woo – Subscribe / Connect widget integrates with MailChimp (for email list building) and your social media accounts (Twitter, Facebook, Google Plus, YouTube).  However, before you drag and drop the widget into the Primary Widgets section you first need to configure it.

To configure the Woo – Subscribe / Connect widget go to:

WooStore > Theme Options > click on the “Subscribe & Connect” tab > click on “Subscribe” 

Here you have the choice of using Feedburner or MailChimp to build your opt-in email list.  I highly recommend using MailChimp for your list building provider.  MailChimp has all the functionality of iContact, aWebber, Constant Contact and all the other big boys.  One of the many great things about MailChimp is that it is FREE until your list reaches 500 subscribers.  So unlike the other list building providers, MailChimp does not charge you a monthly fee right from the start.

If you do decide to go with MailChimp, take a few minutes to setup a free account.  Once your account is setup, enter your MailChimp List Subscribe URL in the “Subscribe by E-Mail to MailChimp” text box.  There is a link on the page that will take you to instructions on finding your “List Subscribe URL”.

Configuring your Social Media Icons

Now that you’ve setup the opt-in box, it’s time to link up to your social media accounts.  To do that click on “Connect”.  On the Connect page of the “Subscribe & Connect” section you’ll see text boxes for Twitter, Facebook, YouTube, Flickr, LinkedIn, Delicious and Google+.  Go ahead and enter the URL for each of those accounts.

For example, if you created a Facebook Fan Page you’ll simply enter the URL to that FB page.  If you have a Twitter account you’ll enter the URL to your Twitter profile.  Do this for each of your social media accounts.  I highly recommend creating accounts with Twitter, Facebook, YouTube and Google Plus because it will help drive traffic to your site over time.

When you finish configuring “Subscribe & Connect” in the WooStore Theme Options section go back to the Widgets section and drag / drop the “Woo – Subscribe / Connect” widget into the Primary widget section.  You can change the widget title to something other than “Subscribe” if you’d like.  Also, you have the options to do the following; 1. Disable Subscription Form 2. Disable Social Icons 3. Disable in Posts 4. Disable in Pages.  I recommend leaving each of the options unchecked so that your opt-in box and social media icons show up on each page and every blog post.

Additional Questions on WooCommerce Widgets

If you have any questions about WooCommerce widgets that are not covered in this post or in the video below, please Contact Us and we’ll do our best to help.  Your questions and feedback are always welcomed here at Upload WP.  We hope that this series on how to build a professional eCommerce site with WordPress, WooCommerce and the WooStore theme helps you build a profitable web store.

 

HostGator Web Hosting

23 COMMENTS

    • Hi Josee – I just installed the WooCommerce plugin on a test site. The purpose of installing the WooCommerce plugin on a test site (votefortheamerican.org) was to see if the “Woo – Subscribe / Connect” widget is unique to the “WooStore” theme or not. After installing the WooCommerce plugin on the test site (this site does not have the WooStore theme installed) I found that the Woo – Subscribe / Connect widget is in fact unique to the “WooStore” theme which is why you do not see it among the available widgets.

      The good news is that there are a number of very similar Plugins you can install which will give you the same type of functionality. The plugin that I recommend is called “Subscribe / Connect / Follow Widget“.

      In your WordPress admin go to Plugins > Add New > search for “Subscribe / Connect / Follow Widget” > install and activate the plugin > go to Widgets and you’ll see the Subscribe / Connect / Follow Widget.

      Below is a screen capture of the “Subscribe / Connect / Follow Widget”…

      Subscribe / Connect / Follow Widget

      I hope this helps and thanks for your support!

      Adam
      http://uploadwp.com

      • I think you can get access to the Woo – Subscribe / Connect widget with out WooStore theme and that is by installing Woodojo from Woocommerce. It is free and has some really cools stuff. One of the things in there is the Woo – Subscribe / Connect widget

  1. Hi teddy
    Great videos. Thank you very much. I’m a newbie on Woocommerce so it helps me a lot. Now i’m so direct to ask you if you can help me with a wordpress problem i have.
    I’ve tried everywhere. I have 3 videos that i wouldt like to show on 3 different pages in the sidebar. So far only one of the videos are showing. I’m danish and the webpage is http://www.fynstag.dk. Any good ideas to solve this problem, plugins or other stuff. 🙂
    Thank you in advance.
    Best regards
    Mogens

    • Hi Mogens,

      Thanks for the positive feedback and I’m glad to hear that the videos have been helpful. There are a number of plugins for WordPress that should get the job done. If you go to your WordPress admin > Plugins > Add New and search for “Youtube” and/or “YouTube Widgets” you’ll find quite a few that should get the job done. However, my favorite WordPress YouTube plugin is called, “YouTube Channel”. In fact, the YouTube channel widget is what we use to display video on the sidebar of this site. My guess is that the YouTube Channel plugin will give you the flexibility that you’re looking for in terms of displaying 3 videos on 3 different pages of your site so I encourage you to give it a try.

      In your WordPress admin go to Plugins > Add New > search for “YouTube Channel” > install and activate the plugin > go to Widgets > drag and drop the YouTube Channel widget into the widget sidebar > configure the widget to your specific needs and Save changes.

      Below is a screen capture of how we have the YouTube Channel widget configured for UploadWP.com…

      YouTube Channel Widget for WordPress

      Please let me know if the YouTube Channel widget works for your site and thanks again for your support!

      Adam
      UploadWP.com

  2. Hi guys,

    I think that I have seen everyone of your viedos TWICE! Love them. Quick question, how did you get that cool looking cart button on the top right of your store? Mine has a lame Top Menu that I would love to get rid of.

    Keep up the good work!
    Eric

    • Hi Eric – The green Cart button that you see on our demo WooCommerce site (worldcuptees.com) is built into the WooStore theme. So if you use to the WooStore theme, the green cart button will automatically display.

      Green WooCommerce Cart Button

      Depending on the specific theme you’re using, you might be able to add it via a css tweak. Let me know if you have question on that and I’ll do my best to help. Also, Thank You very much for the super positive feedback! Your support keeps us motivated to make more tutorials.

      Adam

  3. Hello,

    thanks for your video !

    I have a problem with price filter widget ad thought maybe you could help me. It is displaying in the “Boutique” side bar, but the slider itself is not showing, so I can’t slide anything and the deature is useless.
    Any idea what could be done to fix this ?

    thanks a lot..

  4. Hi, I followed your video and everything looks great but the icons aren’t showing up. I do see that they are being placed on the page as I can hover over them with the mouse and get the mouse pointer to show the hyperlink BUT the action icon images are not showing. I looked in the theme folder for where the icons should be and sure enough, they are there but on the front end, it’s only white (or clear).

    Any help would be appreciated, thanks!

    • Hi Eddie – Thanks for your question. It sounds like you might still need to configure your Subscribe & Connect settings. If you use the “Woo – Subscribe / Connect” widget you first need to configure your Subscribe & Connect settings. You can do that by going to WooStore > Theme Options > Subscribe & Connect > Connect > paste in the URL to each of your social media accounts > Save all Changes and the widget should work / icons should show up.

      WooThemes Subscribe and Connect Widget

      Please let me know if this helps and thanks for your support!

      Adam

      • Hi Adam, I tried everything you have shown… even filling in all of the Connect urls (even though I don’t have linkedin) then adding the widget and still nothing. I even tried to add the widget to one of the footer widget areas and same thing – just blank icons. This is driving me crazy because I know I have the icons but they just can’t be seen. Any other suggestions? Thank you…

        • I went into to web inspector (inspect element) in chrome and looked at the image url (“../images/mystile/ico-subscribe-social.png”) and tried to tweak the url to see if that would do anything. Low and behold, as I was editing the url with several different variations, I randomly deleted one of the periods (.. to .) and the live view showed the icons. The solution for me was to erase one of the periods. Not sure what the reasoning is or why it was there but got it to work now and hope this helps someone else in the future! Thanks Adam!!!!

  5. Hello!
    I have 2 issues with widgets. Woocommerce login widget is not working for me in Chrome I could not found any solutions yet. I am also searching for sidebar contact widget just a simple form – something like thishttp://wordpress.org/extend/plugins/sidebar-form/ – the only problem I cannot translate the form (name, subject, your message – I do not want to (and cannot) modify the code.
    Thanks for help! 🙂

    • Hi,

      Thanks for your questions. I’m not sure in terms of the issue of the woocommerce login widget not working with Chrome. If anyone else out there has experienced the same issue and knows of a fix please share it.

      In regards to the sidebar contact widget… what do you mean by “translate the form”? Please provide more info and I’ll do my best to help. Thanks,

      Adam

  6. hi there,
    there is a WooCommerce widget called “recommended products” in my widget area. I put that in my sidebar and am asking myself how to change the products shown in that widget.
    can you help me with that?

    thank you very much!
    greetings
    Steffi

    • Hi Steffi,

      Are you referring to the “featured products” widget? I do not see a “recommended products” widget. Please let me know if you’re referring to the featured products widget and we’ll go from there. Thanks,

      Adam

  7. Hi.
    Just migrated from WP e-commerce to WooCommerce. Really got a lot of help from your site here, but i am really stuck in getting larger images in the Woo Recent products widget. I tried firebug but i find nowhere the size of the images specified. Hope you can help. I need the images to be a bit larger.

    /Torben

    • Hi Torben,

      Have you figured out how to make the Recent Product Widget thumbnail images larger? If so, please let us know how you did it. If not, let me know and I'll do my best to get you the custom css. Thanks

LEAVE A REPLY