1. Documentation
  2. Plugins
  3. Our Team
  4. Tutorials

Apply Layout to Our Team

By design, Our Team does not come bundled with any CSS, allowing you the freedom to match it up with any theme you’re using, and theme developers to build their own integrations.

This tutorial provides you with a starting point for applying basic layout to the team member display.

Note: This is a Developer level doc. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our  Support Policy.

Preparation ↑ Back to top

As with the majority of customizations, you should be using a child theme. This is no exception. Using a child theme keeps your customizations in one place and means you can safely update the parent theme/plugin without fear of losing your work. To read more about creating child themes, see: WordPress Codex.

Apply the Layout ↑ Back to top

To apply the layout, add the following CSS to your child themes style.css file:

.widget_woothemes_our_team .columns-2,
.widget_woothemes_our_team .columns-3,
.widget_woothemes_our_team .columns-4,
.widget_woothemes_our_team .columns-5,
.widget_woothemes_our_team .columns-6 {
overflow: hidden;
zoom: 1;
.widget_woothemes_our_team .columns-2 .team-member,
.widget_woothemes_our_team .columns-3 .team-member,
.widget_woothemes_our_team .columns-4 .team-member,
.widget_woothemes_our_team .columns-5 .team-member,
.widget_woothemes_our_team .columns-6 .team-member {
float: left;
margin-right: 3.8%;
.widget_woothemes_our_team .columns-2 .team-member.first,
.widget_woothemes_our_team .columns-3 .team-member.first,
.widget_woothemes_our_team .columns-4 .team-member.first,
.widget_woothemes_our_team .columns-5 .team-member.first,
.widget_woothemes_our_team .columns-6 .team-member.first {
clear: both;
.widget_woothemes_our_team .columns-2 .team-member.last,
.widget_woothemes_our_team .columns-3 .team-member.last,
.widget_woothemes_our_team .columns-4 .team-member.last,
.widget_woothemes_our_team .columns-5 .team-member.last,
.widget_woothemes_our_team .columns-6 .team-member.last {
margin-right: 0;
.widget_woothemes_our_team .columns-2 .team-member {
width: 48%;
.widget_woothemes_our_team .columns-3 .team-member {
width: 30.75%;
.widget_woothemes_our_team .columns-4 .team-member {
width: 22.05%;
.widget_woothemes_our_team .columns-5 .team-member {
width: 16.9%;
.widget_woothemes_our_team .columns-6 .team-member {
width: 13.5%;

view raw


hosted with ❤ by GitHub

This applies the layout to the shortcode/template tag output.

Note: This only works if you specified an argument for the per_row parameter in your shortcode, template tag or widget. Refer to: Getting Started with Our Team.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment