Getting started
Woo Product Slider and Carousel with category Pro works with WooCommerce Products where you can add Product Name, Product Description, Price, Image etc.
Screen shows “Products” tab in the left side and all Products added
Add Product
- Go to Products and click on Add Product.
- Add Name, Descriptiopn, Price, Other Product Data.
- You can select the category for product from the ‘Product Categories’ box at right side.
- You can add category for Product from the Products > Categories menu.
Bellow screen shows how to add a product
Add Product Category
If you want to display product category wise then go to Products > Categories and select the respective category shortcode.
Bellow screen show category shortcode
Shortcode Builder
Check the Result of any Shortcode with Preview using “Shortcode Builder“
Please Go To Admin Menu ->WooCommerce Product Slider Pro.
Gutenberg Blocks
Please go to page or post and add “Gutenberg Blocks“.
How to Display Shortcode
To display Products in slider is very simple. Just add the following shortcodes on any page or post:
Woo Product Slider and Carousel with Category Pro contain 2 shortcode.
[wcpscwc_pdt_grid]
[wcpscwc_pdt_slider]
<?php echo do_shortcode('[wcpscwc_pdt_grid]'); ?>
<?php echo do_shortcode('[wcpscwc_pdt_slider]'); ?>
Product Grid Shortcode Parameters
[wcpscwc_pdt_grid]
-
Type
[wcpscwc_pdt_grid type="products"]
You can display “products”, “featured”, “bestselling”, “rating”, “regular_price” and “sale_price”. -
Design (Layout)
[wcpscwc_pdt_grid design="design-1"]
Choose design for product grid. Where Designs values are design-1 to design-15.
Note: If you want to display default design(according to your theme) then you can use like this : design=”default” -
Grid
[wcpscwc_pdt_grid grid="2"]
You can display product grid wise. -
Number of Products (Limit)
[wcpscwc_pdt_grid limit="5"]
Display latest number of products on your website. You can display all product by set limit=”-1″ -
Product Ratings
[wcpscwc_pdt_grid show_rating="true"]
Want to show product ratings or not ? Values are “true” OR “false”. -
Product Sale Tag
[wcpscwc_pdt_grid show_sale="true"]
Want to show product Sale Tag or not ? Values are “true” OR “false”. -
Link Behavior
[wcpscwc_pdt_grid link_target="self"]
Want to show product in same tab or new tab ? Values are “self” OR “blank”. -
Product Description
[wcpscwc_pdt_grid show_desc="true"]
Show product description or not ? Values are “true” OR “false”. -
Product Full Description
[wcpscwc_pdt_grid show_full_content="false"]
Show full product description or not ? Values are “true” OR “false”. -
Content Words Limit:
[wcpscwc_pdt_grid content_words_limit="20"]
Limit number of product content words. You can enter numeric value. -
Content Tail:
[wcpscwc_pdt_grid content_tail="..."]
Display dots after short content for continue reading. -
Display Specific Post (Posts)
[wcpscwc_pdt_grid posts="1,5,8"]
Display only specific products. You can add multiple post ids with comma separated. -
Taxonomy
[wcpscwc_pdt_grid tax="product_cat"]
You can display product by category of product. -
Display Category wise
[wcpscwc_pdt_grid cats="56,78,15"]
Display products category wise. You can enter multiple category id with comma separated. -
Show Category
[wcpscwc_pdt_grid show_category="true"]
Want to show product category name or not ? Values are “true” OR “false”. -
Display Child Category
[wcpscwc_pdt_grid include_cat_child="true"]
Display child category. Values are “true” and “false”. -
Exclude Category
[wcpscwc_pdt_grid exclude_cat="32,19,42"]
Exclude some category from your product grid.You can enter multiple category id with comma separated. -
Exclude Post
[wcpscwc_pdt_grid exclude_post="4,7,9"]
You can exclude some products which you do not want to display. You can add multiple post ids with comma separated. -
Sort By (Order)
[wcpscwc_pdt_grid order="DESC"]
Display products in an “ASC” or “DESC” order. -
Order Products (Orderby)
[wcpscwc_pdt_grid orderby="post_date"]
Display products in your desired order. Values are “post_date”,
“modified”, “title”, “name” (Post Slug), “ID”, “rand”, “menu_order”, “sales( For Best Selling Product Type )”, “rating( For Rating Product type )”and “price( For Ragular Price & Sale Price Product Type )”. -
Pagination
[wcpscwc_pdt_grid pagination="true"]
Show/Hide pagination links. By default value is “true”. Values are “true” and “false” -
Pagination Type
[wcpscwc_pdt_grid pagination_type="numeric"]
Pagination type works when pagination set to true.Two types can be used for pagination “Numeric” and “Previous-next” -
Query Offset :
[wcpscwc_pdt_grid query_offset="5"]
This will hide first five post. E.g I have set offset 5 then it will skip first five post.
Note: This will not work with pagination and limit=”-1″ parameter. -
Image Size
[wcpscwc_pdt_grid image_size="full"]
Enter WordPress registered image size. e.g thumbnail, medium, medium_large, large or full. -
Image Height
[wcpscwc_pdt_grid image_height=""]
Control height of the product image. You can enter any numeric number. e.g 250. Leave empty for default height. -
Image Fit
[wcpscwc_pdt_grid image_fit="true"]
Fill the product image in a whole container. -
Extra Class:
[wcpscwc_pdt_grid extra_class=""]
You can add extra class here.
Note: Extra class added as parent so using extra class you customize your design.
Product Slider Shortcode Parameters
[wcpscwc_pdt_slider]
-
Type
[wcpscwc_pdt_slider type="products"]
You can display “products”, “featured”, “bestselling”, “rating”, “regular_price” and “sale_price”. -
Design (Layout)
[wcpscwc_pdt_slider design="design-1"]
Choose design for product slider. Where Designs values are design-1 to design-15.
Note: If you want to display default(according to your theme) design then you can use like this : design=”default” -
Number of Products (Limit)
[wcpscwc_pdt_slider limit="5"]
Display latest number of products on your website. -
Product Ratings
[wcpscwc_pdt_slider show_rating="true"]
Want to show product ratings or not ? Values are “true” OR “false”. -
Product Sale Tag
[wcpscwc_pdt_slider show_sale="true"]
Want to show product Sale Tag or not ? Values are “true” OR “false”. -
Link Behavior
[wcpscwc_pdt_slider link_target="self"]
Want to show product in same tab or new tab ? Values are “self” OR “blank”. -
Product Description
[wcpscwc_pdt_slider show_desc="true"]
Show product description or not ? Values are “true” OR “false”. -
Product Full Description
[wcpscwc_pdt_slider show_full_content="false"]
Show full product description or not ? Values are “true” OR “false”. -
Content Words Limit:
[wcpscwc_pdt_slider content_words_limit="20"]
Limit number of product content words. You can enter numeric value. -
Content Tail:
[wcpscwc_pdt_slider content_tail="..."]
Display dots after short content for continue reading. -
Slides Column
[wcpscwc_pdt_slider slide_to_show="3"]
Display number of product at a time in slider just like as a grid. -
Slides Scroll
[wcpscwc_pdt_slider slide_to_scroll="1"]
When slider scroll, determine number of product to slide at a time. -
Pagination and Arrows
[wcpscwc_pdt_slider dots="false" arrows="false"]
Display slider navigation dots and prev-next arrows. Values are “true” or “false”. -
Autoplay
[wcpscwc_pdt_slider autoplay="true"]
Enable slider auto play. Values are “true” or “false” -
Slider Speed
[wcpscwc_pdt_slider speed="3000"]
Set slider slide speed. -
AutoPlay Interval
[wcpscwc_pdt_slider autoplay_speed="3000"]
Set delay between two slides. -
Loop
[wcpscwc_pdt_slider loop="true"]
Create a infinite loop sliding. By default value is “true”. Options are “true” OR “false”. -
Adaptive Height
[wcpscwc_pdt_slider adaptiveheight="true"]
You can set slider adaptive height. By default value is “false”. Options are “true” OR “false”. -
Center Mode
[wcpscwc_pdt_slider centermode="true"]
You can set slider in center. By default value is “false”. Options are “true” OR “false”.
It will work with odd number of slides to show -
Hover Pause
[wcpscwc_pdt_slider hover_pause="true"]
Pause slider autoplay on hover. By default value is “true”. Options are “true” OR “false”. -
Focus Pause
[wcpscwc_pdt_slider focus_pause="false"]
Pause slider autoplay when slider element is focused. By default value is “false”. Options are “true” OR “false”. -
Display Specific Post (Posts)
[wcpscwc_pdt_slider posts="1,5,8"]
Display only specific products. You can add multiple post ids with comma separated. -
Taxonomy
[wcpscwc_pdt_slider tax="product_cat"]
You can display product by category of product. -
Display Category wise
[wcpscwc_pdt_slider cats="56,78,15"]
Display products category wise. You can enter multiple category id with comma separated. -
Show Category
[wcpscwc_pdt_slider show_category="true"]
Want to show product category name or not ? Values are “true” OR “false”. -
Display Child Category
[wcpscwc_pdt_slider include_cat_child="true"]
Display child category.Values are “true” and “false”. -
Exclude Category
[wcpscwc_pdt_slider exclude_cat="32,19,42"]
Exclude some category from your product slider.You can enter multiple category id with comma separated. -
Exclude Post
[wcpscwc_pdt_slider exclude_post="4,7,9"]
You cam exclude some products which you do not want to display. You can add multiple post ids with comma separated. -
Sort By (Order)
[wcpscwc_pdt_slider order="DESC"]
Display products in an “ASC” or “DESC” order. -
Order Products (Orderby)
[wcpscwc_pdt_slider orderby="post_date"]
Display products in your desired order. Values are “post_date”,
“modified”, “title”, “name” (Post Slug), “ID”, “rand”, “menu_order”, “sales( For Best Selling Product Type )”, “rating( For Rating Product type )”and “price( For Ragular Price & Sale Price Product Type )”. -
Query Offset :
[wcpscwc_pdt_slider query_offset="5"]
This will hide first five post. E.g I have set offset 5 then it will skip first five post.
Note: This will not work with pagination and limit=”-1″ parameter. -
Default Slider Class:
[wcpscwc_pdt_slider default_slider_cls=""]
Control default slider cls.
Note: This is only used when you are using default Woo Commerce design and your theme has different class name instead of products. -
Image Size
[wcpscwc_pdt_slider image_size="full"]
Enter WordPress registered image size. e.g thumbnail, medium, medium_large, large or full. -
Image Height
[wcpscwc_pdt_slider image_height=""]
Control height of the product image. You can enter any numeric number. e.g 250. Leave empty for default height. -
Image Fit
[wcpscwc_pdt_slider image_fit="true"]
Fill the product image in a whole container. -
Slider Lazyload
[wcpscwc_pdt_slider lazyload=""]
Select option to use lazy loading in slider. Values are “ondemand”, “progressive”. -
Extra Class:
[wcpscwc_pdt_slider extra_class=""]
You can add extra class here.
Note: Extra class added as parent so using extra class you customize your design.
WooCommerce Widgets
Three Widgets Support Added!
We have added 3 widgets support to show your WooCommerce products, Best Selling products and Featured products in Grid view or Slider View.
Template Structure + Overriding templates via a theme
The template files of woo product slider and carousel contain the markup and template structure for the front-end of your site. If you open these files you’ll notice they all contain many hooks which will allow you to add / move content without having to edit the template files themselves. This method protects even further against any upgrade issues as the template files can be left completely untouched.
Alternatively, you can edit these files in an upgrade safe way through overrides. Simply copy it into a directory within your theme named /woo-product-slider-carousel, keeping the same file structure.
The copied file will now override the woo product slider and carousel default template file. Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost.
The following template files can be found within the /woo-product-slider-and-carousel-with-category-pro/templates/ directory:
-
Click Here To See Template Hierarchy
- designs
- design-1.php to design-15.php
- grid
- loop-start.php
- loop-end.php
- slider
- loop-start.php
- loop-end.php
- widgets
- grid
- loop-start.php
- loop-end.php
- slider
- loop-start.php
- loop-end.php
- default
- loop-start.php
- loop-end.php