AZEXO Theme Framework Documentation

Almost all settings (including AZEXO shortcodes) in admin-interface of theme used as part of development framework - it allow to make HTML/JS output with high flexibility. It is complex to make CSS theme styles to cover such a big freedom fully. Many possible settings/configurations which not provided with demo content must be used with LESS/CSS sources editing.

Installation

Requirements:

  1. PHP version >= 5.3.6
  2. PHP memory_limit >= 96MB
  3. PHP max_execution_time = 300 (only for demo import)

Installation steps:

  1. Theme use big amount of configuration settings which can be installed via demo content import.
  2. Configuration settings use post ID for establish links so import demo content will work correctly only on fresh WP installation.
  3. Download the Theme archive and extract the files it contains.
  4. Using an FTP client to access your host web server, upload Theme folder (with all files) to the wp-content/themes directory provided by WordPress.
  5. Activate theme.

Find message at the top of the admin screen

Install and activate all required plugins

Import demo content for new site

Find menu item in administration sidebar

Import data with both checkboxes enabled

After import you need:

  1. Enable Visual Composer for Page if it provided with theme.
  2. Select appropriate menu in "VC Widgets" (if it used in theme) for all "WP Custom Menu" elements settings.
  3. Configure all used plugins by theme

Import demo content for existing site

  1. "AZEXO Import > Theme Options"
  2. "AZEXO Import > Pages"
  3. "AZEXO Import > AZH Widgets" – you will need to update all usages of AZH Widgets in this paces: "Appearance > Widgets", "AZEXO Options > Templates Configurations" and in cases when "AZH Widget" contain another "AZH Widget" as field
  4. import full demo on second WP installation and move JSON for: query forms and for submission forms

Import configuration for existing site

Find menu item in administration sidebar

Import configuration

After import you need:

  1. Enable Visual Composer for Page if it provided with theme.
  2. Select appropriate menu in "VC Widgets" (if it used in theme) for all "WP Custom Menu" elements settings.
  3. Create all contact forms used by "Contact Form 7" elements in "VC Widgets"
  4. Place imported "AZH Widgets" (or "VC Widgets") in sidebars and configure visibility rules
  5. Use AZEXO elements in Visual Composer (if it provided with theme) or use AZEXO HTML Customizer to make pages
  6. Configure all used plugins by theme

Places which need to translate

  1. Translate theme via "Loco translate" plugin - beginner gide
  2. Translate AZEXO plugins via "Loco translate" plugin - beginner gide
  3. Replace strings in form editor (or via JSON) of "AZEXO Query Forms" and "AZEXO Listings" plugins (open settings from left admin sidebar)
  4. Replace strings in "AZEXO Options > Templates configuration" (open settings from left admin sidebar)
  5. Replace strings in "AZEXO Options > WooCommerce templates configuration" (open settings from left admin sidebar)
  6. Replace strings in fields tabs "AZEXO Options > Fields configuration" (open settings from left admin sidebar)
  7. Translate all used plugins via "Loco translate" plugin - beginner gide
  8. Replace strings in Contact Form 7 templates
  9. External products "buy now" button – translated in product settings

How to find reason why translation not work

First of all check that correct MO file is loaded for required text-domain by add this code to child theme:

function debug_load_textdomain($domain, $mofile) { echo "Trying " . $domain . " at " . $mofile . "<br/>\n"; } add_action('load_textdomain','debug_load_textdomain', 10, 2);

After this check that your MO file correctly loaded all strings translations for required text-domain. You can test loaded translation for exact string by this code in child theme:

function debug_load_textdomain_string() { $translations = get_translations_for_domain('TEXT DOMAIN'); var_dump($translations->entries['ORIGINAL STRING FOR TRANSLATE']); } add_action('after_setup_theme','debug_load_textdomain_string');

If you see "NULL" in this code output then your MO file not (correctly) provide translations for required string.

How to update

  1. Make backup database, theme and AZEXO plugins
  2. Make backup for all "languages" folders of theme and AZEXO plugins
  3. Remove old theme folder
  4. Extract and place new theme folder
  5. Update (or install new) required plugins "Appearance > Install Plugins"
  6. Return back all "languages" folders of theme and AZEXO plugins

Code navigation

  1. list.php - universal list of contents template
  2. *.php in theme root directory - standard WordPres template files
  3. yarpp-template-default.php - YARPP plugin related posts template
  4. framework/exporter/exporter.php - export theme settings for developers
  5. framework/importer/*.php - import demo content code
  6. framework/icons/*.php - Visual Composer additional icons support
  7. framework/importer/data - demo content files
  8. framework/options/*.json - default theme options for skin
  9. framework/less-variables.php - link less variables with theme settings
  10. framework/options-init.php - REDUX framework theme settings configuration
  11. framework/tgm-init.php - TGM class configuration
  12. framework/vc_extend.php - Visual Composer extend configuration
  13. framework/woocommerce.php - WooCommerce related theme hooks
  14. framework/widgets.php - widgets provided by theme
  15. less/*.less - theme styles (table of contents in theme style.css file)
  16. fields - fields PHP templates used in theme
  17. css - CSS theme styles to work without WP-Less plugin and animation CSS libraries
  18. fonts - fonts files
  19. images - images used by theme
  20. js/frontend.js - main JS theme script
  21. js/woocommerce.js - main JS theme script for WooCommerce plugin
  22. js/*.js - JS libraries
  23. languages - theme translation files
  24. page-templates/*.php - WordPress page templates
  25. plugins - WordPress plugins distributives required by theme
  26. post-like-system - post like feature files
  27. redux-extensions - REDUX framework extensions
  28. template-parts - template parts which reuse in other theme templates
  29. tgm - TGM class
  30. vc_templates - new and overridden Visual Composer elements
  31. wc-vendors - templates for WC Vendors plguin
  32. woocommerce - templates for WooCommerce plguin

CSS styles navigation

All less files compiled automatically via WP Less plugin. To override CSS styles via child theme need to copy "less" folder from parent theme and edit source less files.

  1. variables.less - less variables
  2. general.less - main layout
  3. typography.less - typography and base HTML/WP tags
  4. comments.less - WP comments
  5. post.less - WP post (mostly for single)
  6. profile.less - public user profile templates
  7. header.less - WP header
  8. menu.less - WP site menu
  9. pagination.less - WP pagination
  10. sidebar.less - WP sidebars
  11. widgets.less - WP widgets
  12. archive.less - WP archive page title
  13. templates.less - various post templates
  14. helpers.less - reusable classes
  15. visual-composer.less - visual composer shortcodes
  16. like.less - post like feature
  17. content.less - styles to use it inside post content
  18. woo-checkout.less - WooCommerce checkout page
  19. woocommerce.less - WooCommerce general styles
  20. woo-product.less - WooCommerce single product page
  21. woo-reviews.less - WooCommerce reviews
  22. woo-templates.less - WooCommerce product templates
  23. woo-widgets.less - WooCommerce widgets
  24. booking-form.less - WooCommerce Bookings plugin form
  25. cmb-form.less - CMB2 plugin form
  26. azexo-html.less - AZEXO HTML Customizer styles
  27. ui-datepicker.less - jQuery UI datepicker element
  28. ui-slider.less - jQuery UI slider element
  29. ui-tabs.less - jQuery UI tabs element
  30. ui-accordion.less - jQuery UI accordion element

Blank screen issue

In most cases this caused by some fatal error. Please check firstly apache error log file - is it contain error message at the moment when you get blank screen. You can ask help from your hosting support if you do not know where it placed.

Most frequent types of fatal errors:

  1. Wrong PHP version (< 5.3.6)
  2. Out of memory (< 96MB)
  3. Some required plugin not activated
  4. If you get blank screen after theme update then reason of this issue can be not updated AZEXO plugins. Go to "plugins" folder which is placed inside new theme folder and use archives with "az_" prefix to replace all old plugins.
  5. Error caused by third party plugin which is not supported by theme
  6. File system permission issues

Performance issue

  1. Disable WP Less plugin if you do not need less files auto-recompilation.
  2. azh_extension plugin contain very big elements library with a lot of less code - you can disable this plugin or disable not needed parts in wp-content/plugins/azh_extension/less/skin.less file.
  3. define('WP_DEBUG', true) force all less files recompilation every page load by WP Less plugin - set recompilation strategy you need - more info here wp-content/plugins/wp-less/doc/Common-Usage.md
  4. Use this instruction for WordPress Optimization.
  5. Enable Apache Compression.
  6. Install query monitor plugin and check for slow MySQL (or external HTTP) queries.
  7. Disable any object cache overriding in caching plugin you use. It not supported by WP Less plugin.
  8. Enable Keep-Alive

Theme styles customization

Theme provide Pro version of Yellow Pencil visual theme customizer plugin. If you have enough CSS skills you have possibility to customize theme via CSS as usually.

Create theme pages

If you need to make theme pages on existing site then you need:

  1. Open "Appearance > AZEXO Import"
  2. Choose "Import: Pages - existing site"
  3. Choose "Demo" if theme contain more than one demos
  4. Click "Import data"

Edit pages via AZEXO HTML Customizer

Every page which implemented as plain HTML can be edited via AZEXO HTML Customizer plugin which provided with theme. This plugin hide all non-editable HTML and show all strings/icons/images/links - click to change it and see result by clicking on "Preview changes" button.

Plugin can be disabled/enabled by clicking on "Switch to html"/"Switch to customizer" button.

How to edit/create header

Header implementation based on (ordered as it rendered in HTML):

  1. Header sidebar - which support only wide "AZH Widgets" (or "VC Widgets")
  2. Main header DIV - which support only header parts like: logo, primary_menu, secondary_menu, mobile_menu, mobile_menu_button, search
  3. Middle sidebar - which support only wide "AZH Widgets" (or "VC Widgets") and can be used as part of post (or any custom post type) template by use "AZEXO Field" or "AZEXO Post" shortcode.

If you need to enable theme header on existing site then you need:

  1. Import theme widgets as it described in How to edit/create widget
  2. Add appropriate "AZH Widgets" (or "VC Widgets") to Header/Middle sidebars
  3. Configure visibility rules of this widgets

Header/Middle sidebars use "JP Widget Visibility" plugin (alternative plugins "Widget Logic", "Conditional Widgets" also can be used) to allow show different header on different pages.

All used "AZH Widgets" (or "VC Widgets") in Header/Middle sidebars can be found in "AZH Widgets" (or "VC Widgets") list of left admin sidebar and can be edited via AZEXO HTML Customizer (or Visual Composer).

To make boxed content inside "VC Widget" of header - "Row" VC element must have "container" class

Main header parts

Theme have settings to set ordered list of header parts (for Main header DIV):

Theme can use custom header part which can be implemented as PHP template which must be placed in "template-parts" folder with "header-" prefix in file name. In this case it can be selected in "Header parts" theme settings.

Mega Menu

To show page as mega menu (if it supported by theme) need to enter "mega" into "Title Attribute" of menu item:

To show "Title Attribute" settings of menu items: "Appearance" > "Menus" > "Screen Options" > "Show advanced menu properties" > "Title Attribute"

How to edit/create widget

If you need to enable theme widgets on existing site then you need:

  1. Import theme widgets - "Appearance > AZEXO Import > Import: AZH(VC) widgets - existing site"
  2. Add appropriate "AZH Widgets" (or "VC Widgets") to sidebars
  3. Configure visibility rules of this widgets

Many of theme widgets implemented as "VC Widget" or "AZH Widget" to allow use same shortcodes on pages and widgets.

All used "AZH Widgets" (or "VC Widgets") in sidebars can be found in "AZH Widgets" (or "VC Widgets") list of left admin sidebar and can be edited via AZEXO HTML editor (or via Visual Composer).

Every "VC Widget" which use in sidebars must have root "Row" element with 1 column and "h-padding-0" class

Post/Product templates overview

Theme not provide CSS styles for all fields or all fields combinations configured in template - main purpose of fields/templates only generate HTML and JS

For all Post/Product HTML rendering theme use general HTML structure:
<div class="entry"> <div class="entry-thumbnail (or entry-gallery, or entry-video)"> used for showing media part of post/product <div class="entry-hover"> mostly used for fields which showed when mouse is hovered thumbnail </div> </div> <div class="entry-data"> used for showing textual part of post/product <div class="entry-header"> <div class="entry-extra"> mostly used for any fields above title </div> <div class="entry-title"> </div> <div class="entry-meta"> mostly used for any fields under title </div> </div> <div class="entry-content (or entry-summary)"> used to show content or excerpt with more button possibility </div> <div class="entry-footer"> mostly used for any fields under content </div> </div> <div class="entry-additions"> rarely used for any fields for free positioning </div> </div>

Theme allow to choose which fields will rendered in every DIV of every post/product template:

Change post template for Single/List pages

Theme allow to select template for custom post type on single/list pages:

Custom Post/Product templates

Theme allow to create new custom templates via settings and generate new settings tabs automatically:

AZEXO shortcodes with Post/Product templates support

Visual Composer elements can be found in AZEXO tab:

  1. AZEXO - Posts list for rendering any post type list with any template (with carousel support).
  2. AZEXO - Post for rendering any post type with any template (without Post ID will be rendered current queried post). Useful for header, footer and widgets as single post/product template part.

How to change image cropping and size

Theme not have single standard for image dimensions – it crop image automatically for fast page load and output image in background cover mode to show image with any dimensions. if you have standard image dimensions on your site, then you need to set:

  1. image cropping in "AZEXO Options > Templates configuration > Shop product > Thumbnail size" (where "Shop product" is template name) for every template
  2. "max-height" or "height" CSS property for DIV which contain product image as background (with ".image" class) - use template name (like "shop-product") class in your selectors - for every template

In this video showed one example for image size changing in AZEXO theme framework.

How to override field PHP code

Any field can be overridden in child theme "functions.php" file via "azexo_entry_field" filter:

add_filter('azexo_entry_field', 'example_entry_field', 10, 2); function example_entry_field($output, $name) { if($name == 'purchased') { return esc_html(get_post_meta(get_the_ID(), 'total_sales', true)); } return $output; }

Custom fields templates

Custom field can be implemented as PHP template, with post type name prefix (e.g. "product-"), which must be placed in "fields" folder and started with:

<?php /* Field Name: Product event date time */ ?>

In this case custom field will be registered in theme settings and AZEXO shortcodes automatically.

AZEXO shortcodes with theme fields support

Visual Composer elements can be found in AZEXO tab:

  1. AZEXO - Post field for rendering any field (without Post ID data will take from current queried post). Useful for header, footer and widgets as single post/product template field.

Registering meta keys with simple string values

Theme allow to register meta keys - after this they can be selected in theme templates settings and AZEXO shortcodes provided by theme:

To edit values of this fields on post (product/profile or any other custom post type) editing page you can enable "Custom Field" metabox in "Screen Options"

AZEXO shortcodes

Theme not provide CSS styles for all possible configurations of AZEXO shortcodes - they main purpose is only generate HTML and JS

AZEXO shortcodes with static content (in AZEXO tab):

  1. AZEXO - Generic Content universal static content element with HTML structure similar to post/product templates used in theme. CSS styles controlled by class entered in element settings.
  2. AZEXO - Carousel wrapper for "AZEXO - Generic Content" elements
  3. AZEXO - Panel wrapper for "AZEXO - Generic Content" elements
  4. AZEXO - Filters buttons for visibility control of DOM elements via jQuery selectors
  5. AZEXO - Progress bar replacement of native Visual Composer element with icons support
  6. AZEXO - Tabs replace classic Visual Composer tabs with theme CSS styles
  7. AZEXO - Accordion replace classic Visual Composer accordion with theme CSS styles

AZEXO shortcodes with dynamic content (in AZEXO tab):

  1. AZEXO - Taxonomy for output any WP taxonomy
  2. AZEXO - Post for output any post (or current post) with theme template support
  3. AZEXO - Post field for output any registered in theme field of any post (or current post)
  4. AZEXO - Posts list for output posts list with query builder, theme template and carousel support

AZEXO - Posts list: AZEXO shortcode

Theme provided few functions for "Posts clauses filter function name"

  1. azexo_current_user_author_filter to show posts where current user is author
  2. azexo_current_time_ordering_filter to use it need to set "Order By" = "Meta Value" and "Meta Key" = any timestamp contained meta key. if "Sorting" = "Descending" then show latest posts based on timestamp meta value. if "Sorting" = "Ascending" then show nearest in future posts based on timestamp meta value.
  3. azexo_woo_featured_post_clauses to show WooCommerce featured products
  4. azexo_woo_order_by_rating_post_clauses to show WooCommerce products ordered by rating
  5. azl_current_user_favorites to show posts which current user marked as favorite
  6. azl_current_user_subscriptions to show active WooCommerce subscription products which current user purchased
  7. azexo_azlp_closest_profile_author_filter to show posts with same author as in current "Profile" post
  8. azexo_azlp_closest_product_author_filter to show posts with same author as in current "Product" post
  9. azpl_liked_post_clauses to show posts which liked by current logged in user
  10. azexo_woo_vendors_filter to show posts with authors which have "vendor" role
Examples for WooCommerce products:
  1. Popular products
    [azexo_posts_list post_type="product" max_items="10" orderby="meta_value_num" order="DESC" template="shop_product" meta_key="total_sales"]
  2. Featured products
    [azexo_posts_list post_type="product" max_items="10" posts_clauses="azexo_woo_featured_post_clauses"]
  3. Last minute deals
    [azexo_posts_list post_type="product" max_items="10" orderby="meta_value_num" order="ASC" template="shop_product" posts_clauses="azexo_current_time_ordering_filter" meta_key="_sale_price_dates_to"]
  4. Upcoming deals
    [azexo_posts_list post_type="product" max_items="10" orderby="meta_value_num" order="ASC" template="shop_product" posts_clauses="azexo_current_time_ordering_filter" meta_key="_sale_price_dates_from"]
  5. Expired deals
    [azexo_posts_list post_type="product" max_items="10" orderby="meta_value_num" order="DESC" template="shop_product" posts_clauses="azexo_current_time_ordering_filter" meta_key="_sale_price_dates_to"]

AZEXO - Filters: AZEXO shortcode

Universal element to show or hide any contained elements with masonry grid support. Main elements settings: "Filters". Every filter have "Title" (to render button) and "Selector" (jQuery selector to add/remove "showed" CSS class).

This element is most convenient to use with "AZEXO - Generic Content" element inside. In this case "AZEXO - Generic Content" must have:

  1. as usual CSS class for overall styling of content in "Extra class name" of "General" settings tab
  2. CSS class for filtering possibility to use it in jQuery selectors (in same "Extra class name" of "General" settings tab)

How to use Google Map from AZEXO Listings plugin

Google Map can be added to page via [azl-google-map] shortcode. This shortcode use main query to retrieve list of showed posts map. To show full list of posts need to use "all" attribute: [azl-google-map all="1"]. By default this shortcode work only with "product" post type (provided by WooCommerce). Location of posts take from latitude and longitude meta values (see here how to enter it).

How to change Google Map styles for AZEXO Listings plugin

Google Map Styles JSON can be generated on some online service and entered to plugin settings:

Where to set Google Map API Key

For AZEXO Listings plugin:

For AZEXO Query Form plugin:

How to enable bookable product

Open product for edit and enable bookable checkbox.

How to enable vouchers generation for product

Open product for edit and enable voucherable checkbox. After this you can optionally enter additional settings.
Vouchers will be generated as code-string after order payment and showed as order item meta data (on all order view pages) of appropriate product.

How to add vouchers redeem form

Vouchers redeem form can be added to page via [azv-voucher-check] shortcode.

Change voucher generation event

azv_payment_complete function used for voucher generation. Subscription to events declared by this code in az_vouchers.php file of the plugin:

add_action('woocommerce_payment_complete', 'azv_payment_complete'); add_action('woocommerce_order_status_processing', 'azv_payment_complete'); add_action('woocommerce_order_status_completed', 'azv_payment_complete');

Depends from used payment gateway you may need remove some actions or subscribe to new events in child theme.

How to enable group buying feature for product

Open product for edit and enter any minimum sales number of "Group Buying" settings tab.
After this set sale price and sale dates interval.

Use reports provided by plugin to make manual refunds for failed deals.

How to add "sales left" to product

This field can be added somewhere in the product template:

or via AZEXO - Post field AZEXO shortcode (in footer, header or sidebar "AZH Widgets" (or "VC Widgets")):

How to use subscription plans

  1. Install AZEXO Listings plugin
  2. Install YITH Subscriptions plugin
  3. Create WooCommerce product with subscription type provided by YITH Subscriptions plugin
  4. Setup posts publication limit in this product
  5. Make anywhere on your site "Purchase subscription plan" link with url like http://YOUR-DOMAIN.com/checkout/?add-to-cart=ID - where ID is ID of product you created
  6. Enable auto-hiding of posts based on author subscription plan

How to enable auto-hiding based on post authors subscriptions plans

In case when "Subscriptions post type" dropdown not equal to "None" - all post will be hided automatically based on post authors subscriptions plans:

Set published posts number limit (per author) for subscription plan

With YITH Subscriptions plugin it can be configured by adding Listing limit meta value to subscription product:

Link to purchase a subscription plan: http://YOUR-DOMAIN.com/checkout/?add-to-cart=ID

How to use WC Vendors plugin

This plugin create "vendor" role. User who have vendor role have access to plugin shortcodes. All WooCommerce products which have author with "vendor" role automatically make commission record in DataBase after order is paid. Site administrator have interface to pay commissions to all vendors. See more info in plugin online KnowledgeBase

AZEXO HTML Customizer plugin usage

How to use:

  1. After plugin activation post and page HTML editors will be replaced by AZEXO HTML Customizer.
  2. You can disable AZEXO HTML Customizer by clicking on “Switch to html” button.

Plugin can be used in three modes:

  1. Customization (previously entered) of post/page content by non-technical users.
  2. Build landing pages based on active theme CSS styles by use previously created HTML sections.
  3. Build landing pages based on extension-plugin CSS styles by use previously created HTML sections.

In second mode HTML sections must be placed in “azh” folder of active theme. If this folder not exists in theme plugin automatically will work only in first mode.

AZEXO HTML Customizer plugin development

How to use for development:

Use scroll mouse button to add description to editable fields – make effect only in backend editor and removed from result HTML.

Columns widths and their offsets determined based on Bootstrap class notation.

az-row/az-column classes can be used in backend to show tags in horizontal mode

Special attributes - make effect only in backend editor:

  1. data-section="SECTION NAME" - enable HTML editing possibility
  2. data-group="GROUP NAME" - wrap fields which placed inside by border-line which have name
  3. data-cloneable - enable possibility to clone/sort/remove of children
  4. data-cloneable-inline - same as data-cloneable but builder show children (in edit mode) with "display: inline-block" style
  5. data-element - enable possibility to add/remove shortcode

Special attributes - make effect only in frontend

  1. data-full-width="true" - shift left/right side of current tag to left/right side of window
  2. data-stretch-content="true" - same as data-full-width but for content also (used only with data-full-width)

Restrictions of HTML:

  1. shortcode inside (before/after) text not alowed
  2. more than one shortcode together not allowed

Icon patterns: <div class="icon ICON-CLASS"></div> <i class="ICON-CLASS"></i>

Numeric attributes - any attributes with "data-" prefix and numeric values.

Checkbox fields - any attributes with "data-" prefix and true/false values.

For dropdown fields need to add declaration to window.azh.dropdown_patterns array of objects in next format: { pattern: PATTERN WITH ONE GROUP TO REPLACE BY VALUE FROM OPTIONS, options: {VALUE1: LABEL1, VALUE2: LABEL2, etc.} }

How to use AZEXO Social Login plugin

One of the way to use this feature is make url which will register/login user via social network:

  1. Make any <a> tag (plain link or some button element) which contain href attribute with url of any page
  2. Add to this url "?social-login=NETWORK" parameter, where "NETWORK" one of string from this list: 'amazon', 'bikeindex', 'box', 'dropbox', 'facebook', 'flickr', 'foursquare', 'github', 'google', 'instagram', 'joinme', 'linkedin', 'soundcloud', 'tumblr', 'twitter', 'vimeo', 'vk', 'windows', 'yahoo' (please note not all listed networks provide all required fields for user registration)
  3. For this network in plugin settings you need to enter OAuth 2.0 application id (for google you can get it on this page)
  4. Also you need to enter "Redirect page" url http://YOUR_SITE/?azsl=social-login-redirect in configuration of OAuth 2.0 application you registered in social network (for google you can enter it on same page by edit OAuth client)

How to edit/create Search/Filtering forms

Interface to configure forms placed on "Query forms" admin page, form builder can be opened by clicking on the "Open form editor" button:

Query form can be added to page or "AZH Widget" (or "VC Widget") by this shortcode [azqf-form name="filter"]. Where "name" attribute must equal to "Form name" entered in form settings.

Form editor can be disabled to edit form via JSON by adding this CSS to admin section (for example with Add Admin CSS plugin): #forms_repeat .cmb-type-textarea-code .cmb-td pre { display: block !important; } #forms_repeat .cmb-type-textarea-code .cmb-td textarea { display: block !important; } #forms_repeat .open-form-editor { display: none !important; }

How to edit/create Front-end submission forms

Interface to configure forms placed on "Listings" admin page, form builder can be opened by clicking on the "Open form editor" button:

Front-end submission form can be added to page or "AZH Widget" (or "VC Widget") by this shortcode [azl-frontend-submission name="tour"]. Where "name" attribute must equal to "Form name" entered in form settings.

Form editor can be disabled to edit form via JSON by adding this CSS to admin section (for example with Add Admin CSS plugin): #forms_repeat .cmb-type-textarea-code .cmb-td pre { display: block !important; } #forms_repeat .cmb-type-textarea-code .cmb-td textarea { display: block !important; } #forms_repeat .open-form-editor { display: none !important; }

How to set status of post after form submission

By default submitted post have "pending" status. Page of this post will return 404 (Not Found) HTTP error. It must be approved by site administrator to make it published.

Use "post_status" attribute to set status of post after submission [azl-frontend-submission name="YOUR FORM NAME" post_status="publish"]

How to set WooCommerce product type

By default submitted product have "simple" type.

Use "product_type" attribute to set type of product [azl-frontend-submission name="YOUR FORM NAME" product_type="variable"]

How to set downloadable product

  1. Add Hidden field field with "Meta key to save to"="_downloadable" and "Meta value"="yes" to your submission form
  2. Add Files (only via media library) field to your submission form