Divi and More
The Theme Library
To check for WooCommerce compatibility before changing themes, or simply remind oneself who created the theme currently in use by your WordPress content, navigate to Appearance > Themes and click the Themes link shown in the right hand screen capture. The resulting window is depicted in the following left hand screen capture. The currently active theme preview will always display in the upper left corner of the Themes window. For any theme in the Theme Library, when your cursor is moved inside the boundaries of the theme preview, the area will become highlighted by an overlay and the Theme Details button will become superimposed over the theme’s preview. Clicking anywhere within the theme’s preview opens the Theme Details window depicted below and to the right. While the theme details of the active theme are being viewed, WordPress is kind enough to indicate the theme’s status (green arrow). We shall cover how to preview your site contents with different themes and how to actually commit to a theme change in a moment; however, let’s have a closer look at the Theme Details window before moving on.
Examination of theme details for the current theme (Nexus) and the following two themes, reveals theme descriptions can vary somewhat among WordPress theme authors. However, reading through the theme description should reveal its compatibility with WooCommerce. The exception to the rule are themes created by the WordPress team. While the WordPress year themes are WooCommerce compatible, historically that information has not been included in the theme description. Notice in the AccessPress Parallax description (lower left), WooCommerce compatibility is displayed in bold type. All theme detail windows do have one thing in common. Theme authors identify themselves under the theme title in the By field, which is usually linked to the theme author’s website where somewhat more information may be gleaned. Also note, the latter two screen captures depicting AccessPress Parallax and Twenty Seventeen theme details do not contain the same buttons at the bottom of their windows as the Nexus theme detail window depicted above. Since Nexus is the active theme, its buttons correspond to links in the Appearance menu; however, the order of buttons and menu items is not usually the same. The Activate button located at the bottom of inactive theme detail windows activates the theme without previewing. The Live Preview button is discussed in the following section.
The following screen captures were taken after clicking the Nexus Live Preview button with the current NoSpin WordPress theme active. We have taken three screen captures to show you how the entire Front page would look on NoSpin WordPress with no modifications, which is precisely the problem with Live Preview. In order to gain a realistic perspective on how the theme being previewed will actually effect your site’s content, you must activate the theme being previewed, configure your menus, add your background image, change templates because Live Preview usually only displays the default template with a right sidebar, reposition your widgets, add your logo, etc. In addition, if you decide to revert back to your former theme after changing to a new one, you may find some of the settings you saved using the Theme Customizer while your old theme was active are now gone.
When the Change button (green arrow) is clicked, a narrow scrolling window of theme previews appears on the left side of the main window enabling a different theme to be previewed. We recommend gaining some theme modification experience before committing to a theme change based on what you see in Live Preview. Perhaps Gutenberg (WordPress 5.0) will bestow more functionality upon Live Preview.