How to design a custom footer with blocks

BySupport Admin

Your footer is the last thing visitors see before they leave your site. It’s the best place to keep essential information accessible—like your contact details, store hours, and legal links—without cluttering your main navigation.

How to customize your footer

WooShop uses the Kadence builder, which lets you drag and drop elements into a grid layout. Here is how to set it up:

  1. Open the Customizer: Log in to your dashboard and go to Appearance > Customize.

  2. Enter the Footer settings: Look for the Footer tab in the sidebar menu.

  3. Choose your layout: You will see a visual grid representing the top, middle, and bottom rows of your footer. Hover over a row and click the Plus (+) icon to add an element, such as "Footer Navigation" or "Social Items."

  4. Add your content blocks: To add custom text or images, select one of the Widget areas (e.g., Widget 1).

  5. Edit the block content: Click the "Edit" pencil icon on the widget area in the preview screen. This opens a standard block editor in the sidebar where you can type your address, upload a logo, or add a newsletter sign-up form.

  6. Adjust the design: Click the Design tab within any footer element to change colors, fonts, or spacing.

  7. Publish your changes: Once you are happy with the look, click the blue Publish button at the top of the sidebar.

Practical footer layouts

Depending on your business, you might want to prioritize different information:

  • For Online Shops: Use one column for a "Quick Links" menu (Shipping, Returns, FAQ), one for your newsletter, and one for payment icons and social media.

  • For Restaurants: Use the left column for your physical address and a "Get Directions" link, the middle for your current opening hours, and the right for a "Book a Table" button.

  • For Professional Services: Keep it simple with a brief "About Us" blurb, a clear phone number, and links to your Privacy Policy and Terms of Service.

Troubleshooting common issues

My changes aren’t appearing on the live site
Make sure you clicked Publish in the Customizer. If it still doesn’t show, try clearing your browser cache or checking your site in an Incognito/Private window.

The footer looks messy on mobile
In the Footer builder, click the Mobile icon at the bottom of the sidebar. You can change the column layout for mobile (for example, stacking them vertically) without affecting how it looks on a desktop.

I added a widget but it’s empty
Adding a "Widget Area" to the grid only creates the space. You must then click into that widget area in the sidebar and add a specific block (like a Heading, Paragraph, or Image) to make content appear.

Next steps

Now that your footer is set up, you might want to refine other navigation areas. Consider looking into:

  • [Setting up your primary navigation menu]

  • [Adding social media icons to your header]

  • [Configuring your WooCommerce shop page]

Similar Posts