Created: July 02, 2016. Last updated: Feb 04, 2024. Version: 2.7.0. Author: SaurabhSharma. email: xconsau@gmail.com
First of all, let me thank you for showing your trust in "SS WooCommerce Myaccount Ajax Tabs" plugin and purchasing it. I have handcrafted this document to lessen your efforts in configuring and using this plugin seamlessly. If you find any bug or issue which is beyond the scope of this documentation file, feel free to contact me through my CodeCanyon profile page here. Thanks so much!
If you have not set up your WordPress installation yet, you can grab a copy of latest WordPress archive here. Next, go through the installation instructions inside readme.html
file and set up your WordPress installation. A detailed installation guide can be found on official WordPress Site.
The "SS WooCommerce Myaccount Ajax Tabs" plugin requires WooCommerce plugin for proper functioning. So if you haven't installed WooCommerce yet, kindly follow these steps:
1. Log in to your WordPress admin and navigate to Plugins > Add new.
2. Inside "Search Plugins" field, type "WooCommerce". From the results, install the WooCommerce plugin as found in this URL: https://wordpress.org/plugins/woocommerce
3. After installation, activate the plugin via Plugins > Installed Plugins > WooCommerce
Note: If you have installed WooCommerce for the first time, it will be required to run the WooCommerce Setup wizard.
WooCommerce setup wizard
Follow on screen setup wizard instructions as they appear. This wizard will set up basic shop pages, shipping, payment options etc. You can configure these settings later too inside WooCommerce > Settings, but I would recommend setting up pages and basic things.
WooCommerce setup wizard
You can skip these steps if you are on an existing WooCommerce site. For more details on WooCommerce setup and creating products, please check the official WooCommerce Documentation.
1. Download plugin archive from your codecanyon.net account's downloads section. You can download main archive or installable plugin zip archive.
2. If you have downloaded main archive, unzip/extract this archive and look for the folder named ss-woocommerce-myaccount-ajax-tabs.zip. Place this folder on local machine for uploading it to WordPress.
3. Log in to WordPress and navigate to Plugins > Add New. Click on the "Upload PLugin" button.
Upload Plugin
4. Click on the "Choose file" button and browse the plugin ZIP file:
Browse Plugin Archive
5. Next, click on the "Install now" button. The plugin will be installed.
6. After installation, navigate to Plugins > Installed Plugins, and activate the "SS WooCommerce Myaccount Ajax Tabs" plugin.
Activate Plugin
You can also install the plugin manually using FTP or File Manager. For that, log in to your site's Control Panel > File Manager, or log in to FTP and upload the extracted plugin folder to wp-content/plugins/ directory. So your installed plugin address will be wp-content/plugins/ss-woocommerce-myaccount-ajax-tabs/
. After uploading the folder, log in to WordPress and activate the plugin inside Plugins > Installed Plugins.
The plugin comes with a basic settings page which you can access inside Settings > SS WooCommerce Myaccount Ajax Tabs
Plugin Settings (General)
Below is a brief reference of each plugin option and their role.
Plugin option field | Description/Role |
Disable ajax tabs feature | If checked, this will disable ajax tab feature. |
Custom preloader image | Used to provide a custom preloader GIF image. You can browse or upload image to WordPress media library. |
Content not loaded text | This text is shown as error message if the ajax content fails to load. |
Tab heading selector | This is a class name or ID name of the page title (heading) of my account page. E.g. .entry-title |
Update document title after ajax load | Upon enbaling this option, the document title will be changed in the name of selected tab, followed by the site name. By default, WooCommerce my account page title doesn't change according to tab names. |
Ajax timeout delay | Use this option for providing ajax timeout delay in miliseconds. |
Ajax links in tab content | Upon enabling this option, the internal links inside tab content will also become ajax ready. |
Plugin Settings (Display)
Plugin option field | Description/Role |
Tab display style | Available display styles for tabs. |
Tab orientation | The orientation for tabs. You can choose vertical or horizontal. |
Enable round corners | If checked, the tab links will show round corners of 4px. |
Disable plugin's CSS styles on tabs | If checked, the plugin's CSS styles will be disabled. The tabs will show styles as inherited by the theme or WooCommerce plugin. |
Plugin Settings (Custom Tabs)
In order to add custom tabs to the myaccount menu, kindly follow these steps:
1. Navigate to Settings > SS Ajax Tabs Settings. Next, click on "Custom Tabs" tab.
2. Click on the "Add new tab" button.
3. A new tab panel will be added. Click on the panel to expand it.
Add new tab
4. Inside "Tab Name", provide a name of your new tab. This name will appear in tab menu.
5. Inside "Endpoint Slug", write a lowercase format of your menu name (replacing spaces with dash). For example, if menu name is "My Offers", then endpoint can be "my-offers". Though it is not necessary to have same name, it give proper relevance to the respective tab if the endpoint slug is same as it's name.
6. Inside "Tab Content", write your tab content. It can be a plain text or a complex markup containg HTML and Shortcodes. If you wish to use php markup, create a new php file in the name of endpoint slug. E.g. my-offers.php and upload it to your theme as your_theme/woocommerce/myaccount/my-offers.php
and then add your php markup in the file.
7. After adding or deleting tabs, click on Save settings button. Once the settings are saved, all your tabs will show original name instead of "Untitled tab xx". Then check your myaccount page in front end. It shall display the new tabs.
In order to change the order of default tabs, you need to delete the tabs from WooCommerce settings and then add them via this plugin. This can be done in following steps:
1. Navigate to WooCommerce > Settings. Next, click on the "Accounts" tab.
2. Inside "My Account Endpoints", delete the endpoints which you want to re-order.
Delete Endpoints
3. Save these changes by clicking on the "Save changes" button.
4. Next, navigate to Settings > SS Ajax Tabs Settings > Custom Tabs
5. Click on "Add new tab" button. Next, click on the "Untitled tab name" to expand the tab form.
6. Inside "Tab Name", write the name of tab which you wanted to re order. E.g. "View Order".
7. Inside "Endpoint Slug", write the slug name which you deleted in WooCommerce Settings. E.g. "view-order".
8. Leave the "Tab Content" empty.
9. Following same procedure, add more tabs in same name and endpoint slugs which you deleted in WooCommerce Settings.
10. You can re-order these tabs by dragging them up or down. Finally, save settings.
Now check the site, the tabs shall appear in changed order.
Important: Please be aware that it is not possible to re-order or delete the "Dashboard" tab.
The plugin uses one CSS file for front end located as ss-woocommerce-myaccount-ajax-tabs/assets/css/sswcmaat.plugin.css
. You can override these styles by placing custom CSS inside theme's style.css file.
The plugin uses one JavaScript file for front end located as ss-woocommerce-myaccount-ajax-tabs/assets/js/sswcmaat.plugin.js
. All the JS code of this plugin is located in this file only.
The php files used in this plugin are:
php File | Description |
ss-woocommerce-myaccount-ajax-tabs.php | Main plugin core file in which all widgets are initiated. |
includes/class.settings-api.php | Settings API wrapper class used for plugin settings. |
includes/sswcmaat-settings.php | Settings page for the plugin in admin section. |
includes/sswcmaat-functions.php | Helper functions for the plugin. |
woocommerce/myaccount/dashboard.php | Override WooCommerce' template file for adding ajax link class names in internal links of dashboard. |
Below are some Frequently Asked Questions that may help you in finding a solution to your specific issue.
Your download zip file is not the plugin itself. It is a collection of plugin and documentation. It will be required to unzip this folder first. Next look for the folder named "ss-woocommerce-myaccount-ajax-tabs.zip". Upload this folder to WordPress using Plugins > Add New, or manually upload the unzipped folder to wp-content/plugins/ directory of your site using FTP or File Manager of Hosting account.
Plugin can be updated in three ways:
2.1) From the WordPress admin: Navigate to Plugins > Installed Plugins. Deactivate the "SS WooCommerce Myaccount Ajax Tabs" plugin and delete it. Next, install the latest copy of plugin by browsing the ss-woocommerce-myaccount-ajax-tabs.zip
file from your computer.
2.2) From the FTP or Control Panel: Log in to your FTP or Control Panel of hosting account and locate the /wp-content/plugins/ss-woocommerce-myaccount-ajax-tabs/
folder. Delete this folder and update the latest extracted folder from your computer. This method is safer than the previous one.
2.3) Automatic update using WP Envato Market plugin: Download the plugin from https://github.com/envato/wp-envato-market and install on your site. Next, connect your account using Envato API key and configure the plugin using instructions as described on the plugin page. After successful configuration, all your Envato plugins and themes will update automatically if any new update is released.
By default a value of 50 seconds is assigned to AJAX queries in this plugin. You can change this by navigating to Settings > SS Ajax Tabs Settings > Ajax timeout delay. Provide a value in miliseconds. i.e. for 60 seconds you would provide 60000. Next, save these changes.
The content of WooCommerce tabs is not directly editable. But if you are using a plugin like "YITH WooCommerce Customize My Account Page", you can edit tabs and it's content. While doing so, you need to add a class name to the link, as shown below:
<a class="sswcmaat-ajax-link" href="xx">Link text</a>
After adding sswcmaat-ajax-link
class, those links will load content via AJAX into the currently opened tab.
The native tabs of WooCommerce are the ones which appears by default on the My Account page. These are Dashboard, Orders, Downloads, Address, Logout, etc. In order to rename and reorder a tab, follow these steps:
Step 1: Navigate to WordPress admin's Settings > SS Ajax Tabs Settings > Custom Tabs.
Step 2: Create a new tab for the native tab which you want to reorder. For example, create a new custom tab with the name "My New Dashboard". It's endpoint name should be same as that of the native "Dashboard" tab. i.e. "dashboard". Leave the tab content empty.
Create Dashboard Tab
Step 3: Similarly, create a new tab for another native tab which you want to reorder. For example, create a new custom tab with the name "My Orders". It's endpoint name should be same as that of the native "Orders" tab. i.e. "orders".
Create Orders Tab
Step 4: Create more tabs if required, and then reorder them by dragging up or down. Finally, click on "Save changes" button.
Important: The endpoint names for native tabs should be same as you would find inside WooCommerce > Settings > Advanced > Page Setup > Account Endpoints.
Navigate to WordPress admin's WooCommerce > Settings > Advanced > Page Setup > Account Endpoints. Then delete the endpoint for the tab which you wish to remove. Then save settings.
The plugin uses following files and resources, as listed:
jQuery library (as shipped with WordPress)
http://jquery.com/
weDevs Settings API wrapper class
http://tareq.weDevs.com Tareq's Planet
WordPress for providing a platform on which we can create plugins.
Once again, thanks so much for purchasing this plugin. I'd be glad to help you if you have any questions relating to this plugin. If you have a more general question relating to the plugins on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Saurabh Sharma