1. Documentation /
  2. Themes /
  3. Affiche Theme

Affiche Theme

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 affiche.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 affiche.zip file you downloaded in step 1.
  4. Go to Appearance > Themes to Activate.

Theme Setup Wizard ↑ Back to top

Once activated, you will be redirected to the theme setup page. Follow the steps and set up your theme, install the WooCommerce plugin and import the demo content available with the theme.

You can find the Theme Setup Wizard under Appearance > Theme Setup in case you decide to return to the dashboard and continue with it later.

Deep Diving:

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 patterns, 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:

Block Editor ↑ Back to top

If you are new to the WordPress Block Editor, here is an article that will show you how to use the it and master it to create visually stunning blog posts and pages:

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.

Missing options?
We are doing our best to help all our customers and improve their experience with the theme. Let us know if there is something we can improve and we will seriously take into consideration your feedback and suggestions.
Contact Support

Site Identity & Logo ↑ Back to top

Under Appearance > Customize > Site Identity you can:

  • Upload a logo and adjust its size
  • Upload a transparent logo
  • Update the Site Title and the Tagline
  • Upload a Site Icon
  • Enable/Disable the page loading animation

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.
  • Choose a different Headings Font Weight (regular, medium, bold, extra bold)

Using Custom Fonts

In order to use a custom font, you need a plugin that helps you easily embed the custom fonts files (woff2, woff, ttf, svg, eot, otf) in your WordPress website. The Custom Fonts plugin or the Use Any Font plugin should do the trick. Once you successfully embedded the font files, all you need to do it change the font name under Appearance > Customize > Fonts > Base Font Family.

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.

Footer ↑ Back to top

Under Appearance > Customize > Footer you can:

  • Set different colors for the text and background color
  • Adjust the top-bottom spacing

Shop ↑ Back to top

Under Appearance > Customize > WooCommerce > Product Catalog you can:

  • Change product pagination (classic or Load More button)
  • Change mobile products and categories display (default grid or draggable list)
  • Add image border to simulate a painting frame and adjust its thickness
  • Distraction Free Checkout: Hide the page header and let your customers focus on the checkout form

Menus ↑ Back to top

The theme comes with one menu location for both the header’s desktop and mobile navigation.

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

Transparent Header ↑ Back to top

The transparent header can be enabled on all posts, pages and product categories that have a featured image set.

Widget Areas ↑ Back to top

The Affiche 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

Footer Widget Area ↑ 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 Affiche theme and then Affiche 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-page-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: 0.8rem; font-weight: {Customizer Headings Font Weight};
.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;
.background-colorcolor: {Customizer Color 1};
.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