Primary Nav

WOO Canvas Footer

This post might also be called WOO Canvas Footers as there are two footer areas in Canvas.

Once you understand the difference between the regular footer and the footer widget area, you’ll have a better time figuring out how they work–and how they can work for you. It may seem confusing that there are two footers, so for the record, here’s the difference.

For the basic footer, there are just a few options as to what you can put in there.

For the basic footer, there are just a few options as to what you can put in there.

Footer

What WOO Themes calls the footer is at the very bottom of the site. It’s 1 or 2 areas (a left and a right) and you can edit the contents only in the WOO Canvas Theme Options (Theme Options –> Styling & Layout –> Footer). There are some styling options (background, borders, etc.) and then you have two HTML boxes where you can put in simply text or go crazy and put in all kinds of fancy HTML. Up to you. If you don’t do anything, they will default to the standard copyright links in the left and the WOO product links in the right.

The footer is all the way at the bottom and doesn’t use widgets. In fact, it’s pretty basic in there. If you just think of it as a place to put your copyright and such, you’re fine.

Also of note on this Canvas settings page is that this is mostly for the footer when you do not have the Full Width Layout (for the footer) enabled. Well, yes and no. If you’re not using the Full Width Layout at all, this is where you do all of the styling for the footer.

Footer Widget Area

The (optional) footer widget area is an area below the content of the site but above the regular footer. Back in the Canvas layout settings, you can choose for 0, 1, 2, 3, or 4 columns of widgets. The styling adjusts the widths of those columns accordingly.

The footer widget area is below the content and above the regular footer and is widgetized.

You can also stack widgets on top of each other. In other words, the first column might have some social media buttons, then a tag cloud, then the second footer widget has a video and the third column has a sign-up form and below that recent posts or a Buy Now button. Keep in mind that you can also use shortcodes in these widgets for example the buttons or info boxes.

If you give these two areas slightly different background colors, you can accentuate the content that you’d like and make them work for you.

There are actually two footer areas in WOO Canvas: the footer and the footer widget areas.

There are actually two footer areas in WOO Canvas: the footer and the footer widget areas.

, ,

12 Responses to WOO Canvas Footer

  1. Ronen September 26, 2013 at 5:56 am #

    Hi Bradley,

    Thanks for the post.
    I was wondering if you could advise with this footer related question:
    Indeed, different colors can be set for the bottom most footer and the one above it.

    I am seeking how to modify the background color of the widget square themselves: footer1, footer2, footer3, and footer4.
    White using this code in custom.css allows the different colors, the widgets themselves inherit the general widget background color that
    would not blend nicely in the footer background.

    #footer-widgets {

    background:black;
    padding:20px;
    margin-left:-30px;
    margin-right:-30px;

    }

    #footer {
    background:black;
    color:white;
    padding:20px;
    margin-left:-30px;
    margin-right:-30px;
    }

    Any chance you could assist ?

    Thank you in advance,
    Ronen.

    • Bradley Charbonneau September 27, 2013 at 9:56 am #

      Hi Ronen,
      Do you mean something like this: colored widgets. If so, you just need to find the CSS classes for those widgets. In this case, it was:
      .footer-widget-1 {
      background-color: #db9655 !important;
      }

      .footer-widget-2 {
      background-color: #b5ae5e !important;
      }

      .footer-widget-3 {
      background-color: #94b777 !important;
      }

      • Ronen September 27, 2013 at 10:29 am #

        Thank you very much!!

    • Bradley Charbonneau September 27, 2013 at 9:57 am #

      You’d also need to play with the padding and/or margins to get it looking right.

  2. Heather November 1, 2013 at 5:02 pm #

    I would like to know if there is a simple way to make the footer widget text a different color than the regular widget text without needing to use php. In the full layout option you can change the footer widget background color to be different than the regular sidebar widget, but there is not an option to change the footer text color to be different.

    For example my client wants a dark background in the footer and footer widget with white text. She wants the regular widget text to be black with a white background.

    Is there a simple css solution?

    • Bradley Charbonneau November 8, 2013 at 5:21 am #

      Hi Heather,
      Maybe similar CSS to what Ronen is asking above. He’s asking about backgrounds for each footer widget, but you could use the same for text color.

      .footer-widget-2 {
      color: #666 !important;
      }

      .footer-widget-3 {
      color: #999 !important;
      }

      Might that work?

      • Meg December 3, 2013 at 12:33 am #

        Is there a selector I can use to change the color of the text in all the footer widgets, rather than having to select and change each footer widget individually?

        • Bradley Charbonneau December 4, 2013 at 9:50 pm #

          Hi Meg,
          Isn’t it just the Widget color selector? For all widgets (in sidebars and footers)?

          • Meg December 5, 2013 at 2:29 am #

            I figured it out after much trial and error – because I only wanted to change the colour in the footer widgets and I just wanted to select those … turns out its:

            #footer-widgets .widget .textwidget

  3. chema November 19, 2013 at 5:17 am #

    Hi, I would like to thank Bradley because this post is so practical and I could change all my footer area and widget footer.

    Regards!!!

    Great job!!!

Trackbacks/Pingbacks

  1. Write Every Day Challenge - August 26, 2013

    […] WOO Canvas Footer (Aug 26) […]

Leave a Reply