Hello,
Thanks for reaching here.
Please refer to the below screenshot and I think you want to display the same line “add to cart” button.
https://prnt.sc/16ouh84
Please go to your Admin Panel->Appearance->Customize->Additional CSS.
Please put the below CSS on your “additional CSS” section.
We have set two way in your requirement.
.wcpscwc-product-slider .woocommerce-LoopProduct-link.woocommerce-loop-product__link{height:auto !important; min-height:300px !important}
Please check and let me know if you have anything else.
Thanks,
Hi there Ketan Patel,
Thank you so much for the code provided above. The alignment has drastically improved and its looking really nice now 🙂 The code snippet you provided worked first time around so well done!
Also amazing support service , thank you for the swift response too 🙂
Regards
Miles
Hi there, your css worked great to set a height for the product slider, however, i am wondering if its possible to set different heights for differ product sliders/ I noticed in the docs there is a parameter called “extra_class”, perhaps i can use this to write custom CSS?
Regards
Miles
Hello @techguymiles
Yes you can use this parameter extra_class to add your class say extra_class="my-custom-class" and write the custom css.
Thank you @anoopranawat ;
I would like to make the slider smaller in height (150px) and perhaps even remove the “add to cart” buttons. Would you be able to help with the CSS?
Hello @techguymiles
You can use this css to remove the cart button:
.wcps-design-1 .woocommerce ul.products li.product .button{display:none;}
Also you are showing 8 columns in the sliders, it almost displaying image height around 150px
Thank you for the swift response, this code worked first time 🙂
If you look at this screenshot: https://snipboard.io/oH9dx4.jpg
I am trying to figure out a way to make the product slider height smaller so that it lines up with the image on the left. Thank you again for your amazing help thus far!
Regards
Miles
Hello @techguymiles
Please try this css as well:
.wcpscwc-product-slider .slick-slide img{width: auto !important; height:100px; margin-bottom:5px !important; }
I hope this will work for you.
Hi, your customer service is great! For the above code:
.wcpscwc-product-slider .slick-slide img{width: auto !important; height:100px; margin-bottom:5px !important; }
How do I include the extra_class parameter here so that the changes do not affect all sliders on the website, but only for the one with extra_class=”custom-slider-height”
Thank you again for your swift responses and knowledgeable help 🙂
Hello,
Please add the “extra_class” parameter in your shortcode.
Ex: [wcpscwc_pdt_slider extra_class="custom-slider-height"]
Please put the below CSS on your “additional CSS” section.
.custom-slider-height .wcpscwc-product-slider .slick-slide img{width: auto !important; height:100px; margin-bottom:5px !important; }
If you like our plugin please give you an important Rate and Review it Here…
Thanks,
Hi there @patelketan & @anoopranawat
Thank you so much for you the help you provided with my query. My slider is now customised to exactly how i had envisioned, you guys are amazing! I would definitely recommend this plugin and give you a 5/5 for customer service 🙂
Regards
Miles
Hello,
If you like our plugin please give you an important Rate and Review it Here…
https://wordpress.org/support/plugin/woo-product-slider-and-carousel-with-category/reviews/
Thanks,
