Hi everyone, today i am going to show you how to implement slider for woocommerce related products.

Required condition:
1> Here we are using bx slider so i hope you everyone know how to set up bx slider on our theme.
Here is the link: http://bxslider.com/
2> All of you know how hook function on wordpress.

Here we start:

Our first steps is to align all the related products on single row so we are using [woocommerce_output_related_products_args ] hooks. And on customizer i have given user interface to select how many product to display on slider.For this you can see here: https://sushilwp.wordpress.com/2016/01/31/how-to-change-number-of-woocommerce-related-through-customizer-setting/

Here is the code , how i did it:

step 1:

add_filter( 'woocommerce_output_related_products_args', 'themeslug_related_products_argsS' );

function themeslug_related_products_argsS( $args ) {

$args['posts_per_page'] = get_theme_mod( 'stwo_number_related_products', '5' );
$args['rows'] = 1;

return $args;
}

Then we should remove the float of related product. so place this code somewhere on css files:

.st-woocommerce-related-product .related ul.products li.first, .st-woocommerce-related-product .related ul.products:after {
clear: none;
}

Step: Finally you need to apply bx slider at the parent elements. Then add this following code on js file:

$('.related ul.products').bxSlider({
slideWidth: 173,
minSlides: 2,
maxSlides: 2,
moveSlides: 4,
slideMargin: 20,
pager: false,
responsive: true
});

Please refer on tutorial on how to make responisve slider. YOu can learn on above option here http://bxslider.com/options

Here is the final output:

relatedproduct

Let me know if you have any question or queries or any other best solution.

Thanks

Advertisements

Join the Conversation

2 Comments

  1. Hi,

    you call this tutorial “XXX” and then all you mention according to this is “Finally you need to apply bx slider at the parent elements.”
    How? Wasn’t this what the tuorial should be about? I hate how people try to improve their SEO, but in the end there is no real benefit for the user. Google doesn’t like that either as short visits are interpreted as misleading informations guiding the user there/user doesn’t find what he was looking for.
    Maybe I am wrong, but you see too many of these websites or so called ‘helpful tutorials’ when all they do is advertising another plugin.

    Nevermind, best regards,

    -Björn

    Like

    1. Hi Björn, Thank you for your feedback, this blog was not build for doing any advertisement neither for earning. I create this blog just to share my experience so other developer may got some clue our of it…This same things I had implemented on Styled Store

      You can download free styled store theme and can get some clue out there.
      Thank you

      Like

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: