1. Documentation
  2. Themes

Maudern Theme

Maudern Theme Documentation

Installation ↑ Back to top

Theme Upload and Activation ↑ Back to top

  1. Go to your WooCommerce.com account Downloads page. Click the download icon to get a compressed maudern.zip file on your computer.
  2. On your website, go to Appearance > Themes and click the Add New button. 
  3. Click Upload to upload the maudern.zip file you downloaded in step 1.
  4. Go to Appearance > Themes to Activate.

WooCommerce Installation ↑ Back to top

Once activated, a prompt ensures that you have WooCommerce installed. You won’t see this if WooCommerce is already installed and activated.

If it’s not installed or activated you can simply click “Install WooCommerce” then “Activate” and it will be automatically installed for you in a few seconds.

Deep Diving:

Starter Content ↑ Back to top

Instead of starting from scratch, you can choose to import the demo content available with the theme via the WooCommerce Home screen.

  1. Go to WooCommerce > Home

2. Find the “Design your store with Maudern” message box and click “Let’s go!

3. The Customizer screen will open up (Appearance > Customize), and will automatically load demo content, such as: a few block-based pages (Frontpage, About, Collection), a few dummy products to populate the Shop and few posts to populate the Blog page. Click the Publish button to have the settings and the content you are previewing saved.

Note:
The “Let’s Go” button is usually being displayed on a fresh WordPress install and it disappears when one of the following actions has been detected: adding/updating a post or page, changing widgets, or saving customizer settings. At this point the site is considered to have existing content and the starter content won’t run to avoid overwriting pages, or importing dummy products that would then have to be deleted.

Block Patterns ↑ Back to top

There is an easy way to create the demo pages you are missing. These page layouts are available as block patters, which means you can apply an existing template when creating a new page. This short video here will show you what you should be looking for on your screen:

Customization ↑ Back to top

All the theme’s customization settings can be found under Appearance > Customize. This is where you go to upload a logo, change color or fonts.

Under Appearance > Customize > Site Identity you can:

  • Upload a logo and adjust its size
  • Update the Site Title and the Tagline
  • Upload a Site Icon

Fonts ↑ Back to top

Under Appearance > Customize > Fonts you can:

  • Choose a different Font Family — by typing in any font name available at fonts.google.com
  • Adjust the Base Font Size — The Base Font Size refers to the size applied to the paragraph text. All other elements, such as headings, links, buttons, etc will adjusted automatically to keep the hierarchy of font sizes based on this one size.

Colors ↑ Back to top

The theme’s color palette consists of 6 colors which can be changed via Appearance > Customize > Colors. The colors defined here are being applied automatically across the site.

Header ↑ Back to top

Under Appearance > Customize > Header you can:

  • Choose the Header Style, by centering the logo or the main navigation

Under Appearance > Customize > Footer you can:

  • Update the Footer Text Note
  • Upload Credit Cards / Payment Method Icons
  • Set different colors for the text and background color

Menus ↑ Back to top

The theme comes with three menu locations. One for the header, one for the footer and another for mobile devices only.

Menus can be created and assigned their respective menu location via Appearance > Menus.

Main Navigation ↑ Back to top

Mobile Menu ↑ Back to top

The mobile menu offers users three ways to explore the site by displaying links to:

  1. Product Categories ― Can be turned on/off via Appearance > Customize > WooCommerce > Product Catalog.
  2. The Main Navigation ― Mentioned above.
  3. The Mobile Menu ― Which is a different menu displayed on mobile devices only (e.g. My Account, Logout).

Widget Areas ↑ Back to top

The Maudern theme comes with two widget areas. One for the Shop Filters and one for the Footer. Both can be managed via Appearance > Widgets.

Shop Filters ↑ Back to top

Updating the theme ↑ Back to top

Once you connect your site and WooCommerce.com account, you will receive update notifications in your WordPress dashboard as soon as they’re made available allowing you to update the theme with one click or set up automatic updates.

If you still need to manually update your theme, follow the details at Updating Your Theme.

Child Theme ↑ Back to top

A WordPress child theme is a theme that inherits the functionality of another theme called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme.

WordPress Theme Handbook: Child Themes

You first need to install and set up Maudern theme and then Maudern Child afterwards.

CSS Customization ↑ Back to top

Handy CSS Classes ↑ Back to top

Here is a list of theme predefined classes that may help you with a little extra customization when working on your blocks. Simply add them via Block > Advanced > Additional CSS class(es)

ClassExplanation
.text-lefttext-align: left;
.text-centertext-align: center;
.text-righttext-align: right;
.heading-size-titlefont-size: {Page Ttitle Font Size};
.heading-size-1font-size: {H1 Font Size};
.heading-size-2font-size: {H2 Font Size};
.heading-size-3font-size: {H3 Font Size};
.heading-size-4font-size: {H4 Font Size};
.heading-size-5font-size: {H5 Font Size};
.heading-size-6font-size: {Customizer Base Font Size};
.boldfont-weight: bold;
.uppercasetext-transform: uppercase;
.label-sizefont-size: small;
.meta-sizefont-size: 12px; font-weight: bold;
.half-widthmax-width: 50%;
.no-marginmargin: 0;
.no-margin-leftmargin-left: 0;
.no-margin-rightmargin-right: 0;
.no-margin-topmargin-top: 0;
.no-margin-bottommargin-bottom: 0;
.no-paddingpadding: 0;
.no-padding-leftpadding-left: 0;
.no-padding-rightpadding-right: 0;
.no-padding-toppadding-top: 0;
.no-padding-bottompadding-bottom: 0;
.no-list-stylelist-style: none;
.relativeposition: relative;
.absoluteposition: absolute;
.fixedposition: fixed;
.flexdisplay: flex;
.inline-blockdisplay: inline-block;
.blockdisplay: block;
.hiddendisplay: none;
.leftfloat: left;
.rightfloat: right;
.right-0right: 0;
.left-0left: 0;
.text-colorcolor: {Customizer Color 2};
.accent-colorcolor: {Customizer Color 3};
.hover-accent-coloron hover: color: {Customizer Color 3};
.lightopacity: 0.25;
.mediumopacity: 0.5;
.darkopacity: 0.75;

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