Twitter Widget

Twitter Widget

The Twitter widget is available to use on any Sidebar, Widget Area or Widget shortcode. The Twitter widget comes in 3 styles, the Twitter Preconfigured Style (Deprecated), Twitter Style, and the Avada Style. Each style has it』s own setup instructions and options. Continue reading below to learn more about the new Twitter widget and the available styles.
IMPORTANT NOTE: The Twitter Widget』s 『Twitter Preconfigured Style』 option is deprecated due to Twitter』s recent update. This style will be removed in an upcoming version update.Twitter Widget StylesTwitter Preconfigured Style – This style is deprecated and will be removed in an upcoming version update.. This style will only work if you』ve already created a twitter widget using Twitter』s old Widgets Configurator.
Twitter Style – This style will only import your tweets. You have to set the different options found under this style to customize your Twitter widget.
Avada Style – This is the classic Avada style. It requires you to create a new app via http://apps.twitter.com/. You will then be requested to enter a few Keys and Access Tokens.
How To Use 『Twitter Preconfigured Style』 StyleIMPORTANT NOTE: The 『Twitter Preconfigured Style』 option is deprecated and will be removed in an upcoming version update.This style was specifically for Twitter』s old Widgets Configurator page. It』s now been replaced with the Twitter Publish page. For the time being, you can continue using this style, if you』ve already created a widget using Twitter』s old Widgets Configurator page.
How To Use 『Twitter Style』 StyleStep 1 – Navigate to the Appearance > Widgets tab on your WP Admin Sidebar.
Step 2 – Add a new Twitter Widget into your chosen Widget Area.
Step 3 – In the 『Widget Style』 option, select Twitter Style.
Step 4 – Enter your Twitter Username into the provided field, then customize the widget』s styling as you』d like.
Step 5 – Once finished, click 『Save』.
How To Use The 『Avada Style』 StyleStep 1 – Navigate to https://developer.twitter.com/en/apps and sign in with your Twitter account.
Step 2 – Once you』ve logged in, click the 『Create New App』 button.
Step 3 – Fill out the required fields. You can leave the 『Callback URL』 field empty.
Step 4 – Don』t forget to check the 『Yes, I agree』 checkbox in the Developer Agreement window. Then click the 『Create Your Twitter Application』 button.
Step 5 – In the top section, click the 『Key and Access Tokens』 tab. Then you will see the Consumer Key and Consumer Secret. To receive your Access Token and Access Token Secret, click on the 『Create My Access Token』 button.
Step 6 – Copy and paste each of those items along with your Twitter username into the corresponding fields in the Twitter widget in the Appearance > Widgets tab.
Step 7 – Once finished, click 『Save』. Please wait 10 minutes for the changes to take effect. This is due to Twitter』s cache.

Creating Custom Widget Areas

Creating Custom Widget Areas

Avada allows you to create an unlimited number of custom widget areas. These widget areas can be assigned to several areas of the site such as the sidebars, footer columns, sliding bar columns, mega menu columns, or placed anywhere on a page using the Fusion Builder Widget Area Element. To learn more about the differences between pre-made and custom widget ready areas, please refer to this article. Please follow the steps below to understand how to create a custom widget area.
How To Create A Custom Widget AreaStep 1 – Navigate to Appearance > Widgets and click the 『Add New Widget Area』 button. Give it a name then save it. You can add as many widget areas as you need.
Step 2 – Once created, you』ll see your new widget area on the right side.
Step 3 – On the left side, you will see all the widgets you can use.
Step 4 – Simply drag and drop the widget you want into your widget area. You can then customize the widget to your liking.
Step 5 – You can rearrange the order of widgets on a widget area by simply dragging the widgets to place.
Step 5 – Make sure you click the 『Save』 button to save the widgets added to your widget area.

The Avada WooCommerce Builder – Checkout

The Avada WooCommerce Builder – Checkout

The Avada WooCommerce Builder was initially released with Avada 7.2, and further updated with Avada 7.3. This wide-ranging suite of WooCommerce related features means that you can now design and build your own customer flow throughout your entire WooCommerce shop – from using Avada layouts for individual WooCommerce Products, to creating custom Shop, Cart, Checkout, and Archive pages, all using the design flexibility and power of Avada Builder, and the extended range of Woo Design and other Avada Builder Elements.
In this document, we look at how to create a custom layout for your WooCommerce Checkout page. See below for links to customizing the other main areas of WooCommerce, and watch the video below that for a visual oveview of the Checkout creation process.
The Avada WooCommerce Builder – ProductsThe Avada WooCommerce Builder – ShopThe Avada WooCommerce Builder – Cart,OverviewNo Layout NeccesaryDesigning The Checkout PageExample of a Custom Checkout Page,No Layout NeccesaryUnlike the process of creating a template for individual WooCommerce products, there is no need to create an Avada Layout when building a custom WooCommerce Checkout page. When you install WooCommerce, Cart & Checkout pages are automatically created, and populated with their respective WooCommerce Shortcodes. All you have to do to create a custom Checkout page in Avada, is to directly edit the assigned Checkout page, remove the Woo Ccheckout Shortcode, and start designing and building your page using your preferred interface of the Avada Builder, and your choice of Woo Checkout and other Design Elements.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Designing The Checkout PageUsing Avada Builder allows you to create any design you want for your WooCommerce Checkout page. Start with a Container / Column arrangement, and when you add your first Element, you will see the available Woo Design Elements at the bottom of the Elements dialog. There are five specific Woo Checkout Elements, as seen in the screenshot below – Woo Checkout Billing, Woo Checkout Order Review, Woo Checkout Payment, Woo Checkout Shipping, and Woo Checkout Tabs. The Woo Checkout Tabs Element contains the functionality of the other four Elements in one, and works in the same way as the default WooCommerce Checkout template. It』s also a good idea to use the Woo Notices Element at the top of your Checkout page to display any notices on the front end.
If however, you』d like to build a one page checkout, or just want a different design, using the four individual Checkout Elements will achieve the same functionality as the Woo Checkout Tabs Element. But the real magic of using the Avada WooCommerce Builder to build your Checkout page is that you can add the Elements in whatever structure and order you wish, and have complete control over the design and content of the page. You might want a Slider at the top, other Elements amongst the Woo ones, like the Title, Separator, or any other Elements that fit your circumstance and design ideas. It』s completely up to you.,Example of a Custom Checkout PageBelow, you can see an example of the Avada Retail Website WooCommerce Checkout Page in Wireframe view. Note how use has also been made of other Design Elements like Title, Nested Columns and Image Elements.
On the front end, the checkout page displays like this.

Widgets vs Widget Areas

Widgets vs Widget Areas

It』s very important to understand the difference between a widget and a widget area. Please see the below information to help understand the difference between the two.
Widget – A WordPress Widget is a small block that performs a unique function. Avada includes several custom widgets such as the Avada Twitter widget, Avada Social Links, or the Avada Recent Work widget. In addition, there are several default widgets that WordPress includes such as Recent Posts or Recent Comments, and additionally, other plugins can add their own widgets. Widgets can go inside a widget area, and with Avada 6.2 and up, can also be placed and edited directly on the page using the new Widget Element.
Widget Areas – A Widget Area is a container that holds widgets. Avada includes 2 pre-made widget areas (footer columns, sliding bar columns) and also allows you to create custom Widget Areas which can be applied to the 5 widget-ready areas of the theme. It』s a great way to customize your site.

Flickr Widget

Flickr Widget

Most of the widgets that come with Avada are the default WordPress widgets do not require any setup. Some of our custom Avada widgets have various options, but all are self explanatory. However the Flickr widget is unique in that they require account setup to display correctly. Please read below for information no how to set each of the Flickr widget.
How To Setup The Flickr WidgetStep 1 – Go to the Appearance > Widgets in your admin section.
Step 2 – Find the Flickr widget and drag it to a sidebar or footer column of your choice.
Step 3 – Click on 「Get Your Flickr ID」 link, http://idgettr.com
Step 4 – Then enter your username in place of username in the field and click 「Find」 and it will generate your ID.
Step 5 – Copy and paste the new ID into the corresponding field of the Flickr widget in the admin section.
Step 6 – The default API key will already be filled in and it will work, but if you wish you can also generate your own by clicking the 「Flickr App Garden」 link.
Step 7 – Make sure you click Save, then you』re all done!

The Avada WooCommerce Builder – Products

The Avada WooCommerce Builder – Products

The Avada WooCommerce Builder was initially released with Avada 7.2, and further updated with Avada 7.3. This wide-ranging suite of WooCommerce related features means that you can now design and build your own custom layouts for individual WooCommerce Products, as well as custom Shop, Cart and Checkout Pages, all using the design flexibility and power of Avada Builder, and the extended range of Woo Design and other Avada Builder Elements.
In this document, we look at how to create a custom layout for your individual WooCommerce Products. See below for links to customizing the other main areas of WooCommerce. And remember to watch the videos on each page for a visual overview of the process.
The Avada WooCommerce Builder – ShopThe Avada WooCommerce Builder – CartThe Avada WooCommerce Builder – Checkout,OverviewCreating the Content Layout SectionUsing The Optional Prebuilt Pages
Designing The LayoutExample of a WooCommerce Product LayoutCreating the Conditional LayoutSpecial FeaturesUseful Links,Creating The Content Layout SectionBecause products are dynamically displayed using a template, we first need to create the template that will be used to display the products. For this, we use Avada Layouts. To create a Layout for WooCommerce Products, the first thing to do is to create a new Layout Section. For WooCommerce products, this is, of course, a Content Layout Section, as it is in the content area of the page the products are displayed. The Woo Layout Elements are only available when creating this type of Layout Section. Once the Layout Section has been designed and completed, we then add the Layout Section to a Conditional Layout that will only be used on WooCommerce Products.
So, to make a Content Layout Section, as you can see in the screenshot below, simply head to Layouts > Layout Section Builder, from the Avada Dashboard, select Content as the type of Layout Section, enter a name, and then click on Create New Layout Section (or just hit Enter). Then, simply head to your Avada Builder interface of choice and begin building your Layout Section.
IMPORTANT NOTE: On a new site you could make the Layout first and assign the Layout Section as you create it, but just remember, that if you』re doing this on a live site, it makes sense to create and design the Layout Section first, before assigning it to a conditional layout, as it』s live as soon as you assign it, and it』s initially empty.767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Using The Optional Prebuilt PagesWhen you first create the Content Layout Section, you will see two buttons on the Starter page. One is 『Add Container』, and the other is 『Prebuilt Page』. You can build your Content Layout Section from scratch, or you can use a prebuilt template as a head start.
Clicking on the Prebuilt Page button opens the Library to a new tab, with nine new Content Layout Section templates. As it』s a Content Layout Section, there are three for blog layouts, a couple for portfolio layouts, and there are four templates for WooCommerce products.
To use any of these, simply click on your preferred layout, and it will load into the builder. From here you can save the layout, or customize it as you wish.,Designing The LayoutIf you want to build a Layout Section from scratch, it』s just like building any page or layout. In this case, however, it』s important that you already have at least some WooCommerce products created before you build a Layout, as the Builder uses data from the products to display the layout, as noted directly below.
IMPORTANT NOTE: When building a WooCommerce product Layout with Avada Live, be sure to first head to the Layout Section Options tab > Layout Section, and set 『View Dynamic Content』 as Product, and then select an appropriate product to be used as a visual preview for your design.Using Avada Builder allows you to create any layout you want for your WooCommerce products. Start with a Container / Column arrangement, and when you add your first Element, you will see the Woo Layout Elements.
There are 12 Woo Elements with which to design your new layout, and some changes also made to a couple of relevant existing Elements. See the Special Features section below for more info on those. Each Element has its own range of options, and they can be added to the Layout wherever you want. Some of the Elements however can only be used once in a Layout Section. These will appear greyed out once you have used them.
You can, of course, also use any of the 70+ Design Elements in your Layout Section. This breaks your WooCommerce product templates completely out of the box and allows you to display them virtually any way you can imagine!,Example of a WooCommerce Product LayoutBelow, you can see an example of a WooCommerce Product Layout in Wireframe view. This is from the Avada Winery prebuilt website, and is used on all products except the Mixed Case. Note how use has also been made of Avada Design Elements like the Title Element, and the Nested Columns Element etc.
On the front end, the above Content Layout Section for a product displays like this.,Creating The Conditional LayoutOnce you』ve designed and built your Content Layout Section, it』s time to create a Conditional Layout that determines when the Layout is used. In most cases, the condition set would be to use the Layout for All Products. This is so that the Layout is used only on WooCommerce product pages, and not ordinary pages and posts etc. Alternatively, you might want to create multiple product layouts and exclude certain products, or categories etc. Follow the link for more information on Conditional Layouts.
To create a Layout, head to Layouts from the Avada Dashboard, and in the Layout Builder section, give your new Layout a name (WooProducts for example) and click on Create New Layout (or just hit Enter).
From there, as you can follow below in the screenshots, it』s simply a matter of assigning the WooProducts Layout Section you have created to the Content Layout Section, and then adding the conditions to the Layout.
To do this click on Select Content on the Layout, head to Existing Section, and select the Layout Section you previously created. They, click on Manage Conditions at the bottom of the Layout, head to the Products tab on the left hand side, and then select All Products.
That』s it. Now all single product pages will use your new Layout. If you now head to a product page on the front end of your site, the product will now be using the new Layout you have created. Keep in mind, you could also create and assign custom Layout Sections for the Header, Page Title Bar or Footer to this Layout as well, for completely unique product pages.,Special FeaturesProduct PaginationThe Pagination Element has been updated with Avada 7.2 to provide three pagination styles to use with your products. There is the traditional Text Style, as used in blog posts, but now there is also a Text With Preview style, which shows a thumbnail of the product under the Previous / Next link on hover, and a Sticky Preview style, which shows a sticky thumbnail in the middle of the viewport, which expands on hover. You can even limit the pagination to the same product taxonomy. For more details on the Element, including the various Layout Styles, see the Pagination Element doc.
Social Sharing ElementThe Social Sharing Element (formerly the Sharing Box Element) also had an overhaul for the 7.2 release. See the Element doc for full details of all the new options, but this Element is now supercharged with configuration and design options to enable your users to share your products in exactly the way you prefer.
Attributes, Variations and Swatch StylesAs part of the Avada WooCommerce Builder, we have added three new attribute display types – Avada Color, Avada Image and Avada Button. These are added as Product attributes, and then variations can be added as well.
Another useful part of the Add To Cart Element are the Swatch Style options. Here, you can choose from Default, or Custom, and if you select Custom, a range of styling options appear for the Avada Color, Avada Image and Avada Button Swatches. For full details on how to use these new Product Attributes and Swatch styles, please see the How To Use WooCommerce Attribute Swatches document.,Useful LinksHow To Use WooCommerce With Avada
Introducing Avada Layouts
How To Use Layout Section ElementsAvada WooCommerce OptionsHow To Use WooCommerce Attribute SwatchesThe Pagination Element
The Social Sharing Element

Different WooCommerce Category Layouts

Different WooCommerce Category Layouts

In recent WooCommerce versions, there was a Template Debug Mode option which allow logged in users to disable template overrides. This option was removed from WooCommerce > System Status > Tools tab in WooCommerce 3.0 and is now only available via the constant WC_TEMPLATE_DEBUG_MODE. If that constant is set, you may see design differences like the below one, between logged in and logged out users.
View here a sample screenshot of what logged in users see.
View here a sample screenshot of what logged out users see.
How To Disable Template Debug ModeTake a look at your wp-config.php to see if that constant is set to true. If that is the case, set it to false or remove it completely and please check again.

Pre-made vs Custom Widget Areas

Pre-made vs Custom Widget Areas

Avada includes 5 areas of the theme that are widget ready (which means they can display widget areas). Some of these areas already have pre-made widget areas for you to add widgets into, such as the Footer Widget Areas, the Sliding Bar Widget Areas, and the Blog Sidebar. Other areas do not have pre-made widget areas and can display both pre-made widget areas, or any custom widget area you create.
Read below for further information on the differences between pre-made and custom widget areas, and the 5 Widget Ready Areas in Avada.
Pre-Made vs Custom Widget AreaPre-Made Widget Area – Pre-made widget areas are already created widget areas for certain areas of the theme. Therefore, you don』t need to create a widget area for them, you can simply add widgets to the pre-made widget areas directly. The footer columns and sliding bar columns both have pre-made widget areas based on the number of columns you choose to display. You can set how many columns to display for the footer in the Avada > Options > Footer panel, and in the Avada > Options > Sliding Bar panel for sliding bar.
Custom Widget Area – Custom widget areas are widget areas you can create yourself in the Appearance > Widgets tab on your WordPress admin panel. These custom widget areas can be assigned to sidebars, mega menu columns and the Avada Builder widget element. In addition, sidebars, mega menu columns and the Avada Builder Widget Element areas can also take pre-made widget areas if you wish.
The 5 Widget Ready Areas in AvadaFooter Columns – Footer columns have pre-made widget areas based on the number of footer columns you choose in the Avada > Options > Footer panel. See our Adding Footer Widgets article for more information.Sliding Bar Columns – Sliding bar columns have pre-made widget areas based on the number of sliding bar columns you choose in the Avada > Options > Sliding Bar panel. See our Setting Up The Sliding Bar article for more information.Sidebars – You can assign widget areas to both single and dual sidebars. See our Assigning Sidebars article for more information.Mega Menu Columns – You can assign widget areas to mega menu columns. See our Using The Mega Menu article for more information.
Fusion Builder Widget Area Element – You can assign any widget area to any page or post using the Fusion Builder Widget Area element. Simply add the element to your page, then select the widget area you wish to display from the dropdown menu. See our Widget Area Element article for more information.

The Avada WooCommerce Builder – Shop

The Avada WooCommerce Builder – Shop

The Avada WooCommerce Builder was initially released with Avada 7.2, and further updated with Avada 7.3. This wide-ranging suite of WooCommerce related features means that you can now design and build your own customer flow throughout your entire WooCommerce shop – from using Avada layouts for individual WooCommerce Products, to creating custom Shop, Cart, Checkout, and Archive pages, all using the design flexibility and power of Avada Builder, and the extended range of Woo Design and other Avada Builder Elements.
In this document, we look at how to create a custom layout for your WooCommerce Shop page. See below for links to customizing the other main areas of WooCommerce, and watch the video below for a visual overview of the Shop creation process.
The Avada WooCommerce Builder – ProductsThe Avada WooCommerce Builder – CartThe Avada WooCommerce Builder – Checkout,OverviewNo Layout NeccesaryDesigning The Shop PageExample of a Custom Shop Page,No Layout NeccesaryUnlike the process of creating a template for individual WooCommerce products, there is no need to create an Avada Layout when building a custom WooCommerce Shop page. With WooCommerce, the Shop page is a little bit different to the Cart and Checkout Pages, which by default, just have a simple shortode.
With the Shop page, the shop contents comes from a loop inserted into the assigned page. So, to create a custom shop page, you edit the assigned Shop page and design and build it as you would with the Cart and Checkout pages. There is just one additional step to stop the default loop showing up, and that is to go to the Page Options of the Shop page, head to the Content tab, and select No for the Show WooCommerce Shop Loop in the second option, as you can see in the screenshot below. That will remove the default shop layout, and now you can start designing and building your own Shop page using your preferred interface of the Avada Builder, and your choice of Woo and other Design Elements.
For the Shop page, the most obvious Elements to use are the Woo Sorting and Woo Product Grid Elements, as well as any other Design Elements you』d like to use. You can also create and design a Post Card for products, and then use the Post Cards Element to display the products.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Designing The Shop PageUsing Avada Builder allows you to create any design you want for your WooCommerce Shop page. Start with a Container / Column arrangement, and when you add your first Element, you will see the available Woo Design Elements at the bottom of the Elements dialog, as seen in the screenshot below. There are not really any specific Woo Shop Elements as such, but rather a number of Elements you are likely to use, like the Woo Sorting, and the Woo Product Grid Elements. These two Elements would recreate the standard WooCommerce shop functionality. For further control over the layout, you could also use the Post Cards Element, utilising a WooCommerce designed Post Card.
The real magic of using the Avada WooCommerce Builder to build your Shop page is that you can add these Elements in whatever structure and order you wish, and have complete control over the design and content of the page. You might want a Slider, or a Page Title Bar at the top, other Elements amongst the Woo ones, like the Title, Separator, or any other Elements that fit your circumstance and design ideas. Complete freedom.,Example of a Custom Shop PageBelow, you can see an example of a WooCommerce Shop Page in Wireframe view (so you can easily see the structure and Elements used) as seen on the Avada Retail Prebuilt Website. Note how use has also been made of other Design Elements like Images and Separators.
On the front end, the Shop displays like this. The page also has a Custom Page Title Bar, and a Custom Footer.

How To Use WooCommerce Attribute Swatches

How To Use WooCommerce Attribute Swatches

As part of the Avada WooCommerce Builder released in Avada 7.2, we also added three Avada attribute types to WooCommerce – Avada Color, Avada Image, and Avada Button. These attribute types can be used in both standard WooCommerce Layouts, as well as Layouts created using the Avada WooCommerce Builder.
Read on on to closer look at WooCommerce Attributes, and Attribute Swatches, and how you can use them in your Avada eCommerce store, and watch the video for a detailed visual overview.,Adding Global AttributesWith Avada 7.2, you can now add specific types of global attributes to WooCommerce, and then apply them independently on the product level. To start, head to Products > Attributes from the WordPress dashboard.
Here, you can create a new global attribute. Start by giving it a name, a slug, and then choosing a type of attribute. This can be either Avada Color, Avada Image, or Avada Button. A color attribute is useful for products that have different colors, and you can select color swatches when you configure the attribute terms. Avada Image is a useful attribute type for any visual differences in attributes, and Avada Button is useful for sizes, or anything else that works as a simple label.
In the screenshot below you can see a Logo attribute about to be added, using the Avada Image attribute type. Note how the other two attributes are using the other attribute types, Avada Color, and Avada Button.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Adding Attribute TermsOnce you have created your Attributes, you can add the attribute terms. There is a 『Configuring terms』 link at the right of the attribute to do this. This edits the attribute, and here you can add the attribute terms. For an Avada Color attribute for example, you would create as many colors as you needed across your products, and using the Avada Product Attribute Options, you could select the color preview for the attribute using a color picker.
As you can see in the screenshot below, a black variation is about to be added while three others variations have already been created.,Adding Attributes To Individual ProductsOnce you have completed making your global attributes and attribute terms, you can add them to individual products and generate product variations. The first step to do this is to ensure the product to a variable product. This is done in the product, from the Product Data dropdown list.
Next, you can add any Custom Product Attributes. All global attributes created will display in the dropdown list, but you can add just the ones you want to any product. In this example, I will add all three – Color, Logo and Size.
Once you have added the product attributes, you can then choose which values to add to the attribute. In the screenshot below, I have added three colors, two logos, and four sizes. Check the 『Used for Variations』 tick box to use these values in your variations.,Creating Product VariationsOnce you have added your custom product attributes, it』s time to create the variations. WooCommerce makes this easy with an automatic option to 『Create variations from all attributes』. If you prefer, you can also add them manually.
Here is a screenshot of all the variable products once WooCommerce has created all combinations from the attributes. At this point they have no price, or other details, and these need to be set individually.
You can either click on the Expand link at the top right to expand all the variations, or you can click on the variation itself to just open or close them one at a time. Depending on your product, you would add various information in here, but the price is needed for the product to display. Here, I have also added an image to match the attributes (i.e. blue t-shirt with the particular logo). This image is then displayed on the front end when someone selects those specific attributes.,Displaying Variations In Your LayoutBy default, WooCommerce will then display your variations on the product page. You can also however build your own WooCommerce Product Layout, and use the Add To Cart Element to display and style your variations. Below is the standard WooCommerce template for a variable product.
And here is a screenshot with the same product, using a WooCommerce Single Product Layout. To learn how to create these, check the Avada WooCommerce Builder documentation.