OPUS - Book Store WooCommerce WordPress Elementor Theme Documentation by ramsthemes

Introduction

Welcome to OPUS, a new WooCommerce Elementor WordPress Theme designed for online book stores with a nice and modern UI, easy and intuitive to use for entrepeneurs. This new version is built with the base of Joints, and includes Elementor Pro and Elementor Power Pack, which brings more widget modules ready to use according to the taste and need of the consumer. We hope this new theme meets your expectations in terms of design and customization!

Requeriments You need to make sure that your web host has the minimum WordPress and Elementor requirements to run themes-based sites: • • •

• • • • • •

WordPress installation PHP 7.3+ Basic Knowledge of WordPress (create posts, upload images, install plugins, fill fields, etc.) and Elementor Page Builder (Drag and drop widgets, customize styles and Options) MySQL version 5.6 and above The mod_rewrite Apache module The iconv extension with UTF-8 encoding HTTPS support max_execution_time more than 180, we recommend 300 memory_limit at least 256M to run plugins without issues and avoid the Elementor “loading loop” bug

Product Contents • • • • • •

Theme files .WPRESS file for demo import Plugins ACF Exported Fields Elementor Exported Templates files XML file for demo posts

Setup Demo Import .wpress file from All-in-One WP Migration If you want to import the demo to your WordPress installation (looks exactly the same as demo site, this is the BEST way and includes all styles and widgets placed and configurated), when you make a clean install of WordPress on your server, first download the All-in-One WP Migration plugin and activate them. Now, go to Import page from the allin-One WP Migration dropdown menu:

Once you have chosen the option, the application takes you to the Import page:

From this page you can select from where you want to import a backup using the dropdown menu:

If you chose â&#x20AC;&#x2DC;Fileâ&#x20AC;&#x2122;, the plugin will open a window showing your local files and folders and will let you chose a backup for import from there. Then, choose the file from the Demo Content folder. Next, a file called opusdemo.wpress appears. Choose them to begin the import process:

The import has an additional step which warns you that your website will be overwritten by the new backup including database, media, plugins and the activated theme. This is the last step from which you can cancel the process. After pressing â&#x20AC;&#x2DC;Proceedâ&#x20AC;&#x2122; you cannot stop the import process anymore. The amount of time the import process will take depends on the size of the data and the speed of your internet connection. Note: is important to previously check in your Hosting Service the File Size Upload option (256 MB recommended size, because the size of the import file is bigger) When finished, a successful import will display this message:

At this step, it is recommended to click on Permalinks Settings link and save your permalinks twice in order to save them and generate .htaccess file. Also, because the demo imports the original database, your admin user and password keys will change to the included in Theme documentation file. Please, enter with this keys to your dashboard:

and change all to whatever you want.

Common Theme Installation If you donâ&#x20AC;&#x2122;t want to import the demo file, the ideal is to install theme from a fresh WP installation, to customize the theme options and start uploading the contents. When you purchase the theme, the downloaded zip file contains Theme files (it contains the zipped installable WordPress theme file) Extract the downloaded zip, and select the zip file opuswp.zip and opuswp-child.zip. Now, you have two ways for installing the theme:

1 â&#x20AC;&#x201C; Install theme via WordPress Dashboard Go to Appearance > Themes section and click Add New

In the next screen click the Upload Theme button

Click the Choose File button, select the zip file and click Install Now.

You can now activate the Parent Theme first, and next the Child Theme.

Child Theme A child theme is a theme that has all the functionality and styling of another theme; referred to as the parent theme. Child themes are the recommended way of modifying the code of an existing theme, since a child theme preserves all custom code changes and modifications;

even after a theme update. If you modify code directly from a parent theme, and then update the parent theme, your changes will be lost. Although child themes can be a great way to add custom changes, they are most often used to customize core code taken from the parent theme. Because of this, please be aware that customizations of this nature fall outside our scope of support, and we will be unable to assist you with any issues that may arise. The child theme is primarily inserted in the package for developers’ convenience. Always use a child theme when modifying core code. Child themes can also be used for custom CSS applications, template file modifications, and custom PHP functions and/or hooks. There are two ways to modify a child theme. Bear in mind that using child themes is no guarantee that an update of custom code on the parent theme will not require further maintenance. If you want to make changes in theme’s templates or functions, we recommend that you install child theme and make changes there. To learn more about the purpose and basis of creation of child theme, visit WordPress Codex on Child Themes section.

2 – Install theme via FTP Open your FTP program (i.e, FileZilla) to browse the folders of your server, and go to wpcontent/themes directory. Extract the zip file opuswp.zip on your computer, it extracts on the folder “opuswp”, which contains all the Theme files. Put (or drag and drop) this extracted folder in the wpcontent/themes folder. In the WordPress Dashboard, go to Appearance > Themes section. The Theme appears with his featured screenshot and the Child Theme, hover it and click the Activate button.

3 - Activate Plugins When you install and activate the Theme, there’ll be a message with a list of required and recommended plugins.

Install them and activate in this order (also you can go to Appearance – Install Plugins section and install): 1. 2. 3. 4. 5. 6. 7. 8.

Elementor Elementor Pro Elementor Power Pack WooCommerce Advanced Custom Fields PRO WP User Avatar Ramsthemes Addons All-in-One WP Migration (only use if you import the demo)

The other plugins are optional / recommended to improve another features

4 – Build Menu Go to Appareance – Menu in the Dashboard and build the menu dragging the elements you like.

In Elementor Templates go to Header and edit them, and place the Advanced Menu Widget

Then Select â&#x20AC;&#x153;Menuâ&#x20AC;? (or the name that you use for the menu builded in previous step) and customize it as you like.

5 – Basic Pages In Dashboard go to Pages section, you find the pages created by WooCommerce (Shop, Cart, Checkout, My Account) when the plugin installs. Click Add new page to create new page. Add new pages used in Theme and customize it drag and dropping your favourite widgets: • • • • •

Articles (or Blog, used for all post archives) Home Contact Register Login

6 –Importing Elementor templates files Go to Templates > Theme Builder and press “Import Templates”

Browse the general ZIP file to import all templates in one step.

The imported templates appear in a list and you are ready to edit them and assign the instances. An instance is the reference page where each template will be used.

Placing Templates The imported templates are ready to place in any page. You can do this creating a page and Edit with Elementor.

Use the “Template” Elementor Widget

Press it, choose the template (example, “Shop”) in the dropdown and drag & drop the widget to the canvas area. Customize the layout and save it to use freely.

7 â&#x20AC;&#x201C; Examples of building sections with Elementor When using a predesigned template, you can create your own unique design with the Elementor drag and drop page builder and the extra widgets of Power Pack, increasing the creative options of customizations. Check the Elementor and PowerPack documentation if you need help with the plugin settings and detailed usage of widgets (style customizations and options): https://docs.elementor.com/ https://powerpackelements.com/docs/ We describe here the basic sections:

Templates: Header Template Template uses three columns with the Widgets: Site Logo, Search Form, Icons, Image linked to user profile picture and Advanced Menu. Edit the template using the button when hover the title in the list. Press the Elementor button

The template layout appears for edit the components (Logo, right icons, menu and centered search bar). After customize, press “Display conditions” button on the bottom left, in the arrow near the “Update “ button.

Select the “Entire site” condition and hit Save & Close

Footer Template This section is configured with four columns ready to add any Elementor widget like headings, images and custom texts. Condition: Include > Entire site

Book Authors and Publishers Taxonomies Template For adding the Custom Taxonomy image, previously you have installed the ACF Pro plugin. Go to Custom Fields > Tools, and import the JSON file contained in the folder â&#x20AC;&#x153;ACF Fieldsâ&#x20AC;?

Now you see the imported custom fields for Taxonomies and Posts in Field Groups The most important step is set the Rule Taxonomy, to display the image in the taxonomy editor and when the field appears in his own taxonomy archive template.

Go to Book Authors or Publishers Taxonomies in Dashboard and attach your favourite image in the created field

In the Elementor template editing, hit the pencil button in the left column indicated and configure the Image widget to retrieve the field previously created in ACF.

Add the Condition for the respective taxonomies archive: Include > Book Publishers > All Or Include > Book Authors > All

The result when a book author / publisher is attached to a product and has his own archive:

Single Post Template This template uses the basic components of a post (Title, excerpt, featured image, content, comments, social share buttons) using Elementor widgets.

Condition: Include > Posts > All

Post Archive Template This template uses the Archives posts widget to display all single posts of Blog, applied to posts categories and posts archive

Condition: Include > Posts Archive Include > Categories > All

Products Single Template This template uses the basic components of a Wooommerce product single page (Title, excerpt, featured image, content, tabs, social share buttons, related products) with widgets.

Condition: Include > Products

Common Pages Template A general template used for simple pages using Featured image, Title and content

Condition: Include > Pages > All

Search Books Template A template used for the Search results of products (Books), using Archive products widget

Condition: Include > Search Results

Page Not Found Template A template used for the â&#x20AC;&#x153;404 Not foundâ&#x20AC;? page using headings and a random image

Condition: Include > 404 Page

Shop This page lists all products in columns as the basic woocommerce page. First you must go to the â&#x20AC;&#x153;Shopâ&#x20AC;? Page (in Pages menu) and empty any shortcode inside.

Then go to Templates > Theme Builder and Shop Page. Edit page with Elementor hitting the Edit with Elementor blue button and edit the Elementor Template

Condition: Include > Shop Page Include > All Product Archives

Pages All examples displays the imported demo file with items ready to edit. But you can build your own designs or change the options of every widget used who suits your project.

Home Page You can assign a page as homepage or index page. Go to pages and click add new page to create new page (called for example â&#x20AC;&#x153;Homeâ&#x20AC;?)

Edit page with Elementor hitting the Edit with Elementor blue button and customize the demo items or build your own design

Go to Settings > Reading and select a static page (select below) option Assign newly created Home page and save the changes

Account Page First you must go to the “My Account” Page (in Pages menu) and empty any shortcode inside. This is done because the Woo – My Account widget is used in a column.