Sliders are very effective on eCommerce websites in terms of improving visitor’s engagement and for providing more information. One can easily create product slider with SliderVilla WordPress Slider plugins using WooCommerce data. The slider plugins are having deep integration with WooCommerce and that’s why in just few clicks and less than 3 minutes, following type of product sliders can be created.
- Featured Products Slider
- Recent Products Slider
- Up-sell Products Slider
- Cross-sell Products Slider
- External Products Slider
- Group Products Slider
Up-sell and Cross-sell products slider placement is helpful either on single product page or cart page. It is obvious that if you embed these sliders properly, you will see more conversion, sale and revenue.
Embed Product Slider on WooCommerce Cart Page
To embed a slider on existing WordPress theme, there are few ways e.g. Widget, Shortcode and Template Tag. Widget allows you to place the slider in widget ready areas. Some themes have sidebar or special widget for cart pages. If you are using a page builder like Visual Composer or Divi Builder or Beaver Builder, you can embed widgets inside pages too. With widget, you can not place the slider at non-widget ready areas without coding skills. Shortcodes are for the placement of sliders inside post or page content. Even if you are having any custom post types, you can place the slider inside the content area of those posts.
With Template Tag, you can embed the product slider anywhere on your site. Once you create a product slider with any SliderVilla WordPress Slider plugin, you get all embed options i.e. Template Tag, Widget and Shortcode. Copy the template tag and paste it in theme file where you want the slider.
To place the slider on cart page, you can use shortcode method. When you activate WooCommerce plugin, it auto creates a page for Cart or you can create a page and put the WooCommerce Cart Shortcode [woocommerce_cart] in the content. Now you need to locate that page on WooCommerce ==> Settings ==> Checkout Options panel. Now below the Cart shortcode, you can place the product slider shortcode to make it appear below the cart. Here is a demo showing product slider below the cart page.
In this example, I embedded a product slider created with Roster Slider WordPress Plugin of SliderVilla and pasted the shortcode [rosterslider id=’6′] to embed the same. You can choose from all responsive slider designs of SliderVilla and get a product slider on Cart page using same method.
-
- WooCommerce Cart page editor showing slider shortcode
-
- Show Product Slider on WooCommerce Cart Page
Embed SliderVilla Product Slider on Single Product Page
WooCommerce comes with its own layout for the single product pages. You need to call action hooks and filters to place the product slider at specific location. You can use Template Tag method to embed the slider. For example, to place the slider below description, use the following piece of code in your active theme’s functions.php:
//@hooked mycode_add_roster_slider - 10
add_action('woocommerce_after_single_product', 'mycode_add_roster_slider', 10);
//Function to display Roster Slider below the single WooCommerce product
function mycode_add_roster_slider(){
if ( function_exists( "get_roster_slider" ) )
{ get_roster_slider($slider_id="3"); }
}
Put the slider ID generated by SliderVilla Slider installed on your dashboard.
You can hook the ‘mycode_add_roster_slider’ function to other hooks depending upon where to show the slider as follows:
1. To show slider before product details on single product page:
add_action('woocommerce_before_single_product', 'mycode_add_roster_slider', 10);
2. To show the slider after the content on Single Product page as well as on the shop page/products archive page
add_action('woocommerce_after_main_content', 'mycode_add_roster_slider', 10);
3. To show the slider only after shop/product archives page, once all the products are displayed:
add_action('woocommerce_after_shop_loop', 'mycode_add_roster_slider', 10);
All SliderVilla WordPress Slider Plugins are compatible with WooCommerce and capable of creating all kind of product sliders. Browse the sliders and pick as per your choice or get the complete package.
You can place any of our SliderVilla Sliders with any kind of data i.e. either product slider or featured slider or category slider or video slider anywhere on your store. It is as easy as a piece of cake! Write us in case you have any queries on what options are available or if you need a particular kind of slider embedded at a particular location.