UX Shop - Responsive WooCommerce theme Article Feed

Installing Your Theme

2018-12-15T11:39:10+00:00

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex article on installation.

Installation

The theme files can be uploaded in two ways:

FTP Upload: Using your FTP program, upload the non-zipped theme folder into the /wp-content/themes/ folder on your server.
WordPress Upload: Navigate to Appearance > Add New Themes > Upload. Go to browse, and select the zipped theme folder. Hit “Install Now” and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate your chosen theme.

Theme Files Only

It is very important you upload only the theme files, not the entire package from ThemeForest. You can do this by either only downloading the Theme Files from ThemeForest initially, or making sure you unpackage/unzip the full download to reveal the compressed directory of just theme files.

Updating the theme using envato market

2018-12-15T11:39:10+00:00

You can easily update to the latest theme version, without downloading it from themeforest, and manually uploading it to your server using the 'Envato Market' plugin.

To update using the Envato market plugin:

Go to Envato market plugin and click 'generate a personal token' to add your token if you haven't already. You will be transferred to Envato Market's site in order to generate your token.

On that page, you can leave the permissions at their defaults. Grab your token and paste it in the 'Token' text box and click 'Save Changes'.

After that you should see all your purchases from Envato in the plugin's page, and have the option to update in one click:

Install required + recommended plugins

2018-12-15T11:39:10+00:00

UXSHOP comes with the ability to bulk install all required and recommended plugins.

Once you have activated the theme you will be prompted to install and activate the required and recommended plugins.

Simply click Install "Begin installing plugins" and the process will begin. You can start the same process by navigating to Appearance->Install Plugins.

Importing Demo content

2018-12-15T11:39:10+00:00

This theme has the ability to import a demo content package in 1 click.

Before importing demo content make sure you have installed and activated all the required plugins, and any of the recommended you are planning to use.

It is also recommended to finish the WooCommerce setup wizard before importing. You should import on a new, clean install of Wordpress.

To import demo content head over to the Demo Importer section in the theme's options panel. There you can just click 'import demo' in any of the demos you see listed. Wait for the process to finish and don't refresh the page until it does.

When the page refreshes navigate to your home page and the check that the demo has been imported correctly.

Note that the stock imagery used in the theme’s demos are not coming with the importable content that will replicate the layouts you see there. They’re replaced with blanks so you can easily replace the images with yours. You are now ready to start replacing the demo content with your own.

Creating a child theme

2018-12-15T11:39:10+00:00

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.

Child themes are the recommended way of modifying an existing theme.

More about Child Themes

You can download a starter child theme for UX Shop here.

This child theme can be installed along side the UX Shop theme and will point to it as the parent. It includes a commented style.css and a functions.php with no other customization.

Translating UX Shop

2018-12-15T11:39:10+00:00

In order to translate theme's text strings to a language different than English, you have to use Loco translate.

This process give you the ability to have a shop in a single language. In order to have a multilingual shop, you need to use WPML (premium plugin, sold separately).

After installing Loco translate you can find the theme's text strings under Loco translate > Themes.

Check out this video for an example on how to translate the 'No products in cart' string in the drop-down shopping cart:

Hint: If you are having trouble translating the drop-down Cart's contents, try changing the items included in the cart, by adding/removing a product, in order to clear the internal WooCommerce cart cache.

Typekit fonts How-to

2018-12-15T11:39:10+00:00

General

This theme has the functionality to let you use fonts declared in your Typekit account.

This functionality is build in into a separate plugin ( named: Typekit for Redux Framework, by develoved ) which is bundled with the theme and can be installed easily through the required & recommended plugins installer ( Appearance -> Install plugins ).

See Installing required & recommended plugins for more.

Creating your Typekit Kit

In order to use fonts from your Typekit account you have to create a 'kit', add the fonts you wish to that kit, enter the Kit's ID into the theme options and you are then ready to select the fonts in the Styling->Fonts options section.

To create a Kit, check out this link. Once you have created a kit, you have to get the Kit's ID. Launch the Kit editor and click the 'Embed' link near the top right corner: On the modal box that pops up you can see your Kit's ID. Copy it down.

Setting up the Kit in the theme options

Go back to the theme's options. Once the plugin is installed & activated an extra section is added in the theme's options panel: Enable the Typekit module and enter your Kit's ID into the Typekit Kit ID field and hit the Refresh & show kit fonts button.

If you don't hit the Refresh & show kit fonts button the changes to the font list won't take effect.

If everything works, the fonts configured in your kit should appear right below the button: If you don't see your fonts, make sure that:

You have correctly added your website address to the allowed domains list in the Kit's settings
You have published your kit
You have given it some time to publish, or propagate changes to the typekit servers

Don't forget to save your changes!

Hide page until fonts are loaded

If you are having issues with FOUT (Flash of unstyled text, the text is shown briefly before the font has been downloaded), you can enable this option and reveal the page only after the font has been downloaded.

Using the typekit fonts

After you have set-up the kit in the theme's options and saved your changes, do a page refresh and go to the Styling->Fonts settings section. Open any of the Font selector dropdowns and you should see the Typekit fonts from your Kit!

Sections Slider

2018-12-15T11:39:10+00:00

The Sections Slider is a custom Visual Composer element in UX Shop, which you can use to easily create a slider using the content of multiple sections you have previously created. Just add the Sections Slider element, and add some Sections to it. Clicking the pencil icon on the Section Slider element, you can set some basic settings such as the slider effect, autoplay etc.

About slider dimensions

The dimensions of the sections slider are determined by the container it is in, and by the contents of it. If you want to set the width of the Section slider to be equal to the full window width, since it is contained in a Visual Composer row, you must go into that's row settings and set it to 'Stretch row and content (no paddings)'

On the other hand if you want to set the height of the section slider, lets say to 100% the window height, you must set the height of each one of the slides. The Sections Slider will automatically adust it's height to match the visible slide's height.

So to set the Section Slider to match the window's height, you must set each slide to match the window's height. You must do that by setting the Full height row to 'Yes' in the Row settings of the row that contains the section's content. In this case you should have only one (outer) row.

Also on the meta box 'General Section Settings' you should set Height / Padding to No padding, and check Full Width

Mega menus

2018-12-15T11:39:10+00:00

This theme has the ability to display dropdown menus as 'Mega' menus in two different styles. A. Normal mega menu, where the container's width is a multiple of the menu columns. and

B. Full width mega menu, where the menu's container is 100% of the window size, it's background color is the header's background color (solid color), and the menu columns total width, is the grid's width.

For example, if you have 2 menu columns, each of them will 50% the grid's width.

Setting up the Mega menu

Setting up the mega menu is quite easy. At first you should set the 1st level menu item that you wish as a Mega menu. You have to check both the 'Use as mega menu' checkbox and the 'Full width mega menu' if you wish to make it full width. The next level of menu entries you create below this item will be the Mega menu's column headers. The children of these column headers (the 3rd level items), will be the Menu items of each column. Here you can see a finished Mega menu tree, with 4 Columns and 3 items in each column: If you have successfully created your mega menu, you can check out how you can add a background image to your menu container.

Logo + Favicon

2018-12-15T11:39:10+00:00

In the Logo & Favicon section of the theme options you can setup your logos for the various locations and states of the header.

Setting the logo

You can setup a different logo for normal site header, where the header has a solid background color, for the transparent header & for the Top of the sidepanel, which is visible on mobile devices. In addition to selecting the image file for each of these states, you should set the desired width of the logo, in the 'Logo width' setting for each of this states. So if for example you want your site logo to be 200px wide, you upload an image that is at least twice the desired dimensions, (400px in this case), and set the 'Logo width' setting to 200. The aspect ratio of the images are respected (Thats why you only have to set the width).

Setting the favicon

On the bottom of the same page you can set the site's favicon (Site Icon). A 32x32, or larger png is recommended.

Layout

2018-12-15T11:39:10+00:00

In the Layout section of the theme options you can setup the maximum width of the site, as well as the default options for the sidebar appearance in various places.

Max Grid width

This is a responsive theme, which means as you view your site on smaller screens, the theme adapts its appearance. The 'Max Grid width' setting set the maximum width which your site's grid can reach. Eg. if you set it at 1200px, the grid will be 1200px wide on a 1920px monitor.

When the screen's width is smaller than this setting, it has no effect. Eg. on a tablet with a 768px wide display, the grid will be at a maximum of 768px.

Setting an explicit value in Pixels is recommended, although this field can also accept % values. Setting for example 'Max Grid width' to 100% will make the grid always as wide the browser's window.

Site Layout

The layout options mainly refer to the appearance of a sidebar All these settings are valid unless they are overridden by individual settings in pages and/or related settings on the specific post type. For example if you select a 'Pages layout' view with a right sidebar, this will have effect on those pages where the individual layout settings (in the pages meta boxes) will be on 'Default' :

Reading + extras

2018-12-15T11:39:10+00:00

Here you can select the front page and the blog page of your site. This are the same settings as the ones you can find at 'Settings->Reading' You also have the option to completely hide the Scroll-to-top button.

Styling - Colors

2018-12-15T11:39:10+00:00

Set the preferred background and foregroud colors for various elements of your site. These override the default colors.

Styling - Fonts

2018-12-15T11:39:10+00:00

There are 2 main options here. The first sets the font-family for all the headings, menus, lists, etc. Basically all places except paragraphed text. The second sets font-family for all places which contain paragraphed text. Eg article/posts content, product descriptions, reviews, comments etc. You can select between Standard font-families, Google fonts & Typekit fonts. See how you can setup Typekit fonts.

Styling - Custom CSS

2018-12-15T11:39:10+00:00

Adds your custom CSS rules. This is output last in order to override all other rules.

Header - Appearance

2018-12-15T11:39:10+00:00

The 'Transparent header' setting makes the header transparent only where it is applicable. If there is a cover image, or there is a section first before the content, the header will be transparent, and the cover image/section will be behind the header. If this is not the case, the header will be regular, solid color, and the content will start right after the header. The sticky header option will make the header re-appear after you scroll down. The 'sticky' header will have separate attributes, such as colors and height. You can separately set the normal height for the header, and the height of the sticky header. The Header grid width if set to 'Full width' will make the header's container be 100% of the window. Note that this also affects the mega menu's width.

Header menu options

The menu alignment aligns the menu, in relation to the header, to the left/right or center. The menu elements paddings lets you adjust the horizontal space between menu items. You can decrease it to make items closer toghether and fit more. The Auto collapse menu when enabled, detects when there are too many items in the menu to show, and automatically collapses it to a menu icon, which pops out the left sidepanel when clicked.

Topbar options

You can enable or disable the Topbar The topbar has a content area and a menu location. The position of those two can be swapped with the 'Top bar layout' option. You can set your own content in the 'Top bar content text' option and the field supports shortcodes, but only the shortcode [[socialicons]] is designed to be used in this field.

Header Icons

Show or hide the respective icons.

Header - Sections

2018-12-15T11:39:10+00:00

Set a section which will be visible before the page cover in the blog archive pages, and in the single post view.

Header - Page cover

2018-12-15T11:39:10+00:00

General page cover controls

These settings have effect on all pages/posts/products across site, unless explicitly overriden. You can enable or disable the parallax effect on the background image of the page cover, which in turn reveals the Ratio and Offset settings for the parallax effect. The Ratio is relative to the natural scroll speed, so a ratio of 50 would cause the background to scroll at half-speed, a ratio of 100 would have no effect, and a ratio of 200 would cause the element to scroll at twice the speed.

The offset refers to the initial position of the background image. You can use positive or negative values to achieve the desired effect. The cover height can be set in one of three modes: Contents+padding, Window Height and Custom. When 'Contents+padding' mode is selected you can explicitly set the top & bottom paddings.

Cover Overlay

Here you can enable an overlay of customizable color, or even background image, to either appear and/or dissappear as the page cover scrolls in and out of view.

For example, a value of 'Overlay opacity (min)' = 50 and 'Overlay opacity (max)' = 100 will make the coverlay 50% visible initially and 100% visible when it almost out of view.

You can also achieve the opposite effect, making the overlay dissappear as you scroll away from the page cover, by setting the min value larger than the max.

Default Image

Setting a page cover default image will make it appear everywhere, site-wide, on every page/post/product etc, unless a cover image is explicitly set in that object. Set the color scheme for the text in the page cover.

Header - Menu backgrounds

2018-12-15T11:39:10+00:00

Any 'mega menus' you have created ( see How to create a mega menu ) will be detected by the theme's options panel and displayed here (Theme options->Header->Menu backgrounds) so you can set and customize their background options. Note that In full-width mega menu items the background color is the same as the header's background color and cannot be set individually. In order to achieve the effect where the edge of the menu item shows the background image as shown here: ...we have to set the last column of menu items as invisible. We can easily do that by adding the invisible class. To do that, you have to reveal the classes property when you are editing the respective menu: And in the column you want to hide add the invisible class:

Footer settings

2018-12-15T11:39:10+00:00

Footer Layout

You have many options regarding footer layout and appearance. You can choose to show the footer widget area, the socket, both of them, or non of them. You can stick one or more sections with any content you like, immediately before the footer using the 'Section shown before footer' option

For the footer widget area

For the footer's widget area, you can set the number of columns, which in turn creates an equal number of widget areas, so you can set the content of each column. You can set 1 or more sections the content of which which be shown inside the footer, right before the widget columns. You can set the color scheme (you can change the background color in Styling->Colors). You can choose to show a styling shadow.

For the socket area

You can set the color scheme (you can change the background color in Styling->Colors). You can choose to show a styling shadow. You can set 1 or more sections the content of which which be shown inside the socket, right before the socket text content. You can set the Socket text content, which also supports shortcodes (Eg you can use the [[socialicons]] shortcode).

Social settings

2018-12-15T11:39:10+00:00

Social links

You can set here the URLs of any of the social providers given that are related to your website. The [[socialicons]] shortcode pulls the URLs from these settings and displays the appropriate icons:

Social providers

Select which social providers you want visible as sharing options in the relative positions. Eg the share button in the single product view:

Advanced settings

2018-12-15T11:39:10+00:00

Google API key

A Google API key is required to render Google Maps. You can check this link on how to create one.

Tracking Code

You can enter here your Google Analytics, or any other tracking code. Make sure code is inside script tags. ( )

Custom Map style

When you are using the theme's 'Styled Map' element you can select between the Theme's map style, the default (Google's) map style and a custom map style which you can declare here. In order to do so, you go over to the great Snazzy Maps site, find the map style that you like, click 'COPY CODE TO CLIPBOARD' :

And paste the copied code into Custom Map style option back in the theme's settings.

Disable uppercase styles

This setting, if set to Yes, disables all the uppercase string transformations by the themes stylesheet. All strings will be presented as typed. Useful in certain locales.

Smooth Scroll

You can disable the Smooth scroll functionality if you don't like it.

Shop - General

2018-12-15T11:39:10+00:00

Select the cart icon show in the header. Select how you wish the cart to appear: 'Auto' will show the dropdown on desktop and the sidepanel in smaller screens. None will hide it completely, as well as the cart icon. 'Dropdown' will always show the dropdown, and 'Side panel' will always show the sidepanel. Poppup shopping cart option will make the cart appear, in whatever layout you have selected above, when a product is added to cart via ajax (without refreshing the page).

Shop - Page header

2018-12-15T11:39:10+00:00

Single Product cover

Globally disable the cover image display in single product view.

Thumbnail fallback

If set to Yes, the product thumbnail (the featured image) will be show in the place of the cover image, if the cover image is not set.

Hide cover without image

If set to Yes, the cover will be hidden if there is no cover over image.

Menu / categories links in cover

Select whether to show the child categories, a custom menu, or none for the Shop page and the product category (archives) pages.

Shop - Layout

2018-12-15T11:39:10+00:00

Layout options

Select whether you want to show a sidebar in the product categories view (product archives), and in the Single product view. You can also set a section whose content will be show right before the cover image in the product categories view (product archives).

Customize columns grid

Customize the number of columns shown for each screen width.

The order is important and the first line should always have the largest number and the 'At least' setting.

This affects the product list, ( product categories view - product archives ), and all other locations, eg Related Products in single view, Products sliders (shortcodes), where the value is not overriden by the individual location settings.

In cases where there is only one setting, e.g. for the number of columns in a products slider, that settings overrides only the initial (the At least...) setting for the grid layout.

So if for example you create a product slider and set the columns in the Element's settings to '6' and you have in your theme settings the values shown above, when the screen width is larger than 1201px, the columns will be 6, when the screen width is smaller than 1200px the columns will be 3, smaller than 992px the columns will be 2, and so on.

You should choose these values with consideration on how your product images show in various screen widths, in relation to your settings about sidebar visibility, and site's grid width. Leave the defaults if you are not sure.

Shop style settings

2018-12-15T11:39:10+00:00

Products grid or list

select if you want to show the products as a grid, as a list, or show icon-buttons to let the user decide.

Transparent products meta & title.

Places the title, price, icons etc in a transparent container over the product image (Affects all product loop locations, but not the list view.). In order for the product meta to be fully transparent you have to set the Product meta with background option below, to 'No'.

Hovered Stands out

Fades out all products, except the one the mouse is hovering over. If the mouse is not hovering any product, all products are visible.

Product meta background colors

If you want the meta to be completely transparent set the Product meta with background option, to 'No'. In any other case, you can set the background color for the product meta, so you can enhance the visibility of the text over the product image.

Product shadow on hover

Show a shadow behind the product the mouse is hovering. This effect is visible only on the product in the shop page and the product category pages.

Products style

Choose between one of the visualized product styles. The layout will not be exact as it is also affected by the previous options.

Add to cart icon

Select the Add-to-cart icon to show in the product meta where it is visible.

Categories text colors

In cases where the categories are shown in the product loop, you can set here the text, and background colors of them.

Shop - Single product

2018-12-15T11:39:10+00:00

Section header

Select the section(s) whose content will be shown in the single product view of all products, right before the page cover.

Transparent header

Control the header style on all single product views. The transparent header is applied only when there is either a pagecover image or a section (see previous option).

Share icons

Enable or disable the Share icon button.

Thumbnail on the side

Choose if you want to show the thumbnails on the left of the product image, or below it set to 'No'.

Product meta background

Select what the background color of the band that holds the product meta will be.

Related products

Select how many related products you want to show, if you want them displayed in a slider, and if yes, how many you want visible.

Eg. with the settings shown above, the slider will cycle through 7 products, but only the 5 will be visible (5 columns in the slider).

Shop - Checkout settings

2018-12-15T11:39:10+00:00

Select the style you wish for the checkout page. 'Stacked', or 'Side to Side'

Page Sections

2018-12-15T11:39:10+00:00

Page sections are reusable content types, that you can use if you find them useful in a variety of locations, or you can completely ignore them and turn them off if you wish.

This functionality is build in into a separate plugin ( named: Pagesections by Develoved ) which is bundled with the theme and can be installed easily through the required & recommended plugins installer ( Appearance -> Install plugins ).

See Installing required & recommended plugins for more.

Examples of where you can use page Sections are in all pages or certain templates by setting the appropriate option throught theme options (see for example, Header->Header Sections in the theme's options panel), right before the footer, inside the footer and/or the socket and in ANY place you can add content using the Visual Composer. Using the Visual Composer you can add a Page Section using the 'Section' element.

You can also add multiple page sections in the 'Sections Slider' element and easily create a simple slider.

Enable/Disable WPB Bakery page builder For Custom Post Types

2018-12-15T11:39:10+00:00

The proper way to enable the WPBakery Page Builder for your custom post types is to go to WPBakery Page Builder > Role Manager and under the user role you want to set the post types for you click “Custom” from the dropdown then check all the post types you want to use the Visual Composer on.

My Shop page is empty

2018-12-15T11:39:10+00:00

In some cases, after importing on of the demos, your shop page may not be set correctly. To fix that go to WooCommerce > Settings > Products > Display and select your existing shop page: Also checkout that your Cart, My Account and Checkout pages are correctly set up under WooCommerce > Settings > Checkout and WooCommerce > Settings > Accounts.

Setting Image sizes

2018-12-15T11:39:10+00:00

On WooCommerce 3.3 & later

Since WooCommerce 3.3 the settings related to image sizes live in the Customizer. To set the image sizes go to 'Appearance > Customize' to launch the Customizer and then navigate to 'WooCommerce > Product Images'. Here you can set the 'Main image width' used for the main image on single product pages, as well as the width and the crop aspect ratio for the Catalog pages ( shop page & product categories ). Thumbnails regeneration is handled by WooCommerce in the background but you can also regenerate them yourself using the Regenerate thumbnails plugin, if something in the automatic process doesn't work.

Pre WooCommerce 3.3

You can find the image settings under 'WooCommerce > Settings > Products > Display'. For any change to take effect you need to regenerate the thumbnails manually using the Regenerate thumbnails plugin.

Removing the Additional information tab

2018-12-15T11:39:10+00:00

To remove the 'Additional information' tab from the single WooCommerce product add this to the end of your child theme:

function uxs_child_remove_product_tabs( $tabs ) {
 unset( $tabs['additional_information'] ); // Remove the additional information tab
 return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'uxs_child_remove_product_tabs', 98 );

Google Maps don't render properly

2019-01-23T19:35:39+00:00

If you are seeing the message "For development purposes only" overlaying your map, you are trying to render the map without providing a Google API key.

Google Maps changed their policy and began enforcing the use of API keys, effective June 11, 2018

A Google API key is required to render Google Maps. You can check this link on how to create one or the official guide.

Once you have your API key you need to enter it to the Google API key field under UX Shop > Advanced for the maps to render correctly.

Manually updating the theme.

2019-04-29T22:17:26+00:00

In case the "Envato Market" plugin shows the theme but only gives you the option to install it, instead of updating, you can try the following:

Update manually by switching to a different theme, deleting "UX Shop" and re-installing it from the zip file.

(Remember to download the zip file containing only the theme , and not the complete package).

This will have the same results as automatically updating the theme.

-or-

You can edit the style.css file in the theme's directory and change the author from :

Author: develoved

Author: ioDSGN

Afterwards the Envato Market plugin should give you the option to update.

If you are having trouble with this procedure, please open a support ticket.