Table of Contents
View full feature at a glance
XL Product Carousel is a WordPress plugin which create product slider to display anywhere of your site using shortcode. It is a simple but flexible & powerful plugin.
Upgrade to PRO »
View live Demos »
Support Forum »
Contact Us »
Plugin Features
- Shortcode ready product carousel
- Responsive product carousel.
- Very light weight.
- No need any settings.
- Work with all WordPress theme.
- Easy to use.
- Developer friendly & easy to customize.
- Powered by Owl Carousel 2.
- Its easy user interface allows you to manage plugin.
Pro Features
- Advance setting panel with all necessary settings.
- Multiple sliders can be shown from different product categories.
- Responsive settings. Can be control product item to show on tablet & mobile.
- Great settings panel.
- On / Off – stop on hover
- On / Off infinite loop.
- 3 way to display slider navigation
- 5 nav arrow styles.
- 4 border style
- Unlimited colors select.
- Auto select font from your website
- Number of product to move on transition.
- Lot’s of shortcode parameters
- Works with any WordPress Theme.
- Build with HTML5 & CSS3.
- Responsive. Work on any device.
- Easy and user-friendly setup.
- Well documentation
- 24/7 support.
- And many more.
Shortcode
Basic Usage – Use following shortcode to display product carousel.
[xl_product]
5 Theme Style
- Default
- xl_style_1
- xl_style_2
- xl_style_3
- xl_style_4
3 Caption Style
- xl_left
- xl_right
- xl_center
10 Button Style
- xl_btn_1
- xl_btn_2
- xl_btn_3
- xl_btn_4
- xl_btn_5
- xl_btn_6
- xl_btn_7
- xl_btn_8
- xl_btn_9
- xl_btn_10
4 border styles
- solid
- dotted
- dashed
- double
5 Navigation Arrow styles
- Top right corner – trc
- Top left corner – tlc
- Bottom left corner – blc
- Bottom right corner – brc
- Default
Example Uses
Use following shortcode to display product slider combined with 4 product in large desktop, 4 in medium desktop, 4,3 and 2 accordingly in tablets, large phone and small phone, nav arrow in top right corner, 20px margin between two products. and 1px solid light gray border.
[xl_product theme="xl_style_1" caption_alignment="xl_center" large_desktops="4" medium_desktops="4" tablets="4" large_phones="3" small_phones="2" nav_arow_style="trc" logo_margin="20" product_border_style="solid" product_border_thickness="1" product_border_color="#ddd"]
Still have any confusion?
View live Demos »
Normally product will display by descending order, latest will show first. But if you wish to display ascending order, oldest at first then pass order=”ASC” parameter to shortcode like
[xl_product order='ASC']
Installation process of XL Product Carousel
Install by Upload Plugin
Download the latest version of XL Product Carousel (.zip file)
Go to Dashboard > Plugins > Add New
Select “Upload Plugin”
Click on “Choose File”
Select downloaded xl-product-carousel & click on ‘Install Now’ button
Activate the plugin
Install Plugin using FTP
Upload xl-product-carousel folder inside the /wp-content/plugins/ directory
Go to WordPress dashboard > Plugins & Activate the XL Product Carousel
Manage XL Product
Settings > XL Woo Product Slider
XL Product Carousel shortcode usage
Basic Usages
[xl_product]
Shortcode attributes Usage
| No. | Attribute | Default value | Options | Description |
|---|---|---|---|---|
| 1 | cat_name | All | Product Category Slug | To get your Product category slug, Go to Products > Categories. Here you will find Products Categories & all the slugs. |
| 2 | order | DESC | DESC / ASC | Normally Product will show by descending order, latest will show first. But if you wish to display ascending order, oldest at first then pass order=’ASC’ parameter |
| 3 | theme | Default | xl_style_1 / xl_style_2 / xl_style_3 / xl_style_4 | To change Product style use theme attributes. Ignore, if you don’t want change theme. Default will show. |
| 4 | default_items | 5 | Any positive real number | Use any positive real number. eg. 1,2,3,4,5… |
| 5 | large_desktops | 5 | Any positive real number | Use any positive real number. eg. 1,2,3,4,5… By default it will display ‘default_items’ value. |
| 6 | medium_desktops | 4 | Any positive real number | Use any positive real number. eg. 1,2,3,4,5… By default it will display ‘default_items’ value. |
| 7 | tablets | 4 | Any positive real number | Use any positive real number. eg. 1,2,3,4,5… By default it will display ‘default_items’ value. |
| 8 | large_phones | 3 | Any positive real number | Use any positive real number. eg. 1,2,3,4,5… By default it will display ‘default_items’ value. |
| 9 | small_phones | 2 | Any positive real number | Use any positive real number. eg. 1,2,3,4,5… By default it will display ‘default_items’ value. |
| 10 | autoplay_speed | 500 | Any positive real number. Not less then 100. | Any positive real number. Not less then 100. Use higher value for slow speed. |
| 11 | autoplay_timeout | 1000 | Any positive real number. Not less then 100. | Any positive real number. Not less then 100. Use higher value for long delay. |
| 12 | product_margin | 20 | Any positive real number. | Use any positive real number. eg. 1,2,3,4,5… |
| 13 | caption_alignment | Default | xl_left / xl_right / xl_center | Use preferred caption style attribute from 3 different caption styles |
| 14 | nav_arow_style | Default | trc / tlc / brc / blc | Use preferred nav arrow style attribute from 5 Different nav arrow styles |
| 15 | product_border_style | None | solid / dotted / dashed / double | Use any of them to display border. Ignore, If you don’t want any border. |
| 16 | product_border_thickness | None | Any positive real number | Use any positive real number. eg. 1,2,3,4,5… Border thickness should be 4 for border style “double”. Ignore, If you don’t want any border. |
| 17 | product_border_color | None | Use any color code. | Use any color code. We preferred Hexadecimal color code like #dddddd. Ignore, If you don’t want any border. |
| 18 | product_border_hover_color | None | Use any color code. | Use any color code. We preferred Hexadecimal color code like #dddddd. Ignore, If you don’t want. |
| 19 | product_padding | None | Any positive real number | Use any positive real number. eg. 1,2,3,4,5… Ignore, If you don’t want any padding. |
| 20 | btn_style | Default | xl_btn_1 / xl_btn_2 / xl_btn_3 / xl_btn_4 / xl_btn_5 / xl_btn_6 / xl_btn_7 / xl_btn_8 / xl_btn_9 / xl_btn_10 | Use preferred button style from 10 different button styles. |
| 21 | caption_bg | None | Use any color code. | Use any color code. We preferred RGBA color code like rgba(221, 221, 221, 0.9). You also can use Hexadecimal. |
| 22 | featured_product | no | yes / no | If you want to display only featured product then use this this attributes or ignore if you do not want. |
| 23 | view_cart_style | xl_vcs_2 | xl_vcs_1 / xl_vcs_2 | Use preferred style. Ignore for default value. |
XL Logo Carousel screenshots of different styles
