Woocommerce design elements examples

There are many woocommerce free themes available out there (check out this article on bashooka.com) , but you can also start from scratch with your own development. Building a woocommerce theme from scratch is not a difficult task when you spend a little time preparing your layouts. Here is a list of basic elements your need to figure out before you switch to theme development. Time saving operations can help you design a nice layout for woocommerce!!


  • Header design : usually the header is the place to display main logo and navigation menu  : above that main menu position you can add a small horizontal bar with contact details, social networking icons, user and cart information. Of course the menu bar should be responsive, meaning that a small width device will transform the menu bar into 3 small horizontal graphic bar with drop down interactivity.
    Find examples of powerful menu design on designyourway
  • Cards : a design for product list in category page, and search results/
    Cards design is rapidly becoming a standard for responsive website development, as explained in this good tutorial from TUTSPLUS : Learning Material Design Lite: Cards
  • Footer design
    • trust elements : 4 or 5 icons at the bottom of the page to build trust with quality, shipping, customer testimonials, payment information
    • a great example of footer design on medium.com featuring an abstract landscape
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *