View full feature at a glance
XL Product Carousel is a WordPress plugin which creates product slider to display anywhere of your site using the 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 the 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
You will find setting panel at-
Settings > XL Woo Product Slider
XL Woo Product Slider Admin options available only at PRO version. At Basic Settings, instructions added with each field.
XL Woo Product Slider Admin options available only at PRO version. At Color Settings instructions added with each field.
XL Woo Product Slider Admin options available only at PRO version. At Advanced Settings instructions added with each field.
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. |
Some screenshots of different styles
