آموزش ساخت اسلایدر محصولات ووکامرس بدون پلاگین

در این آموزش با استفاده از کد سفارشی، یک شورتکد اسلایدر محصولات میسازیم. شما میتوانید این شورتکد را در صفحات خود استفاده کنید.

مزیت استفاده از کد سفارشی به جای نصب پلاگین

  • استفاده از آن رایگان است.
  • قابل استفاده در گوتنبرگ، المنتور و سایر صفحه‌سازها.
  • بر خلاف پلاگین‌ها این کد وردپرس شما را کند نمیکند.
  • امکان توسعه بیشتر و افزودن امکانات دلخواه.

آموزش ساخت اسلایدر محصولات ووکامرس با کد سفارشی

روش کار بسیار ساده است، ابتدا کد ساخت شورتکد را در سایت قرار میدهیم، سپس با استفاده از بلوک شورتکد، اسلایدر محصولات را در صفحات خود قرار میدهیم.

کد شورتکد اسلایدر محصولات

کد سفارشی زیر را در وب‌سایت خود قرار دهید.

برای قرار دادن کد سفارشی در سایت‌های وردپرسی از سه روش زیر می‌توانید استفاده کنید:

  • قرار دادن کد در فایل functions.php تم فرزند
  • استفاده از پلاگین‌های کمکی مانند code snippets
  • ساخت پلاگین اختصاصی خود

بیشتر بخوانید: آموزش نحوه اضافه کردن کد سفارشی در وردپرس

نمایش کد
add_shortcode( 'nargil-woo-slider', function ( $atts ) {
    $atts = shortcode_atts(
        [
            "image" => "on",
            "check_stock" => "off", // on
            "description" => "on", // off
            "price" => "on", // off
            "num" => "10",
            "card" => "4",
            "add_to_card" => "on",
            "cats" => "", // 10,15,
            "auto_paly" => "off", 
            "on_sale" => "", 
            "type" => "", // featured or bestselling
            "sale_badge" => "on", 
            "rating" => "on", 
            "theme" => "", 
        ],
        $atts,
        "woo-slider"
    );	
	
	
static $woo_slider_first_call = 1;

    $num = $atts["num"];
    $card = $atts["card"];
    $image = $atts["image"];
    $cat = $atts["cats"];
    $check_stock = $atts["check_stock"];
    $description = $atts["description"];
    $price = $atts["price"];
    $add_to_card = $atts["add_to_card"];	
	$on_sale = $atts["on_sale"];
	$sale_badge = $atts["sale_badge"];
	$rating = $atts["rating"];
	$type = $atts["type"];
	$theme = $atts["theme"];
	$auto_paly = $atts["auto_paly"];
	$auto_paly = ( $atts["auto_paly"] == "on"  ) ? "slider-nav-autoplay" : "";
    $tax_query = $meta_key = $total_sales = $type_arr = "";
    $tax_query_arr = [];
    $orderby = 'date';
    $max_num_pages = 1;
    
    if ( $check_stock == "on" )  { $check_stock_term =  ['key'     => '_stock_status','value'   => 'outofstock','compare' => 'NOT LIKE']; } else { $check_stock_term = []; }
	
	if ( $on_sale == "on" )  { $on_sal_meta =WC()->query->get_meta_query(); $on_sale_q = array_merge(array(0), wc_get_product_ids_on_sale()); } else { $on_sal_meta = $on_sale_q = []; }
	
	if ( $cat != "" )  { $tax_query_arr[] = ['taxonomy'  => 'product_cat','field' => 'term_id', 'terms' => explode(",", $cat) ]; $tax_query= 'tax_query'; } 
	
	if ( $type == "featured" )  { $tax_query_arr[] = [    'taxonomy' => 'product_visibility','field'    => 'name','terms'    => 'featured','operator' => 'IN',  ]; $tax_query= 'tax_query'; } else if ( $type == "bestselling" ) { $orderby = "meta_value_num"; $meta_key = 'meta_key'; $total_sales = 'total_sales'; }

	$class= 'woo_slider'.$woo_slider_first_call; 

	
	$output ="<div class='Main_wrapper swiffy-slider slider-item-show".$card." ".$auto_paly." slider-item-show2-sm slider-nav-round slider-nav-sm slider-nav-visible slider-item-first-visible slider-nav-autopause slider-indicators-round slider-indicators-dark slider-indicators-outside slider-indicators-sm ".$auto_paly." ".$class."'>  <ul class='slider-container'>";

$arr = [
    'post_type'      => 'product',
    'post_status'	 => 'publish', 
    'posts_per_page' =>  $num,
    $meta_key		 =>  $total_sales,
    'orderby'        =>  $orderby, // order by title or date 
	'order'          => 'DESC',
	'meta_query'     => [$check_stock_term,$on_sal_meta],
	$tax_query     => $tax_query_arr,
	'post__in'		 => $on_sale_q,
];

$the_query = new WP_Query($arr);
$number_of_result = $the_query->found_posts;
$count = min( $number_of_result,$num );


if ($the_query->have_posts()){
	   
	while ($the_query->have_posts()):
		
		$the_query->the_post();
		$product = wc_get_product();

		$current_price = $product->get_price_html();
		$sale_badge_e = "";
		ob_start(); 
		the_permalink();  
		$link = ob_get_clean();

		ob_start(); 
		the_title();  
		$title = ob_get_clean();
		
		if ( has_post_thumbnail( get_the_ID() ) ) {
                        $img =  get_the_post_thumbnail( get_the_ID(), 'shop_single' );
                    } else {
                         $img = '<img src="' . woocommerce_placeholder_img_src() . '" alt="'.$title.'" />';
                    } 
		
		$output .="<li class='slider_card slide-visible'> <div class='post_card'>";
		
		

		if ( $product->is_on_sale() )  {  $sale_badge_e = ( $sale_badge != "off" ) ? "<span class='onsale'>تخفیف!</span>" : ""; }	
		if ( $image == "on" ) { $output .='<a href="'.$link .'" style="position: relative;">'.$sale_badge_e.$img.'</a>';	 }
		$output .= "<span class='wwo_card_details'>";
		$output .='<a class="p_title" href="'.$link .'">'.$title.'</a>';
		if ( $product->get_average_rating() && $rating !="off" ) { $output .='<span class="woocommerce">'.wc_get_rating_html($product->get_average_rating())."</span>"; }		
		if ( $description == "on" ) { $output .='<p >'.$product->get_short_description().'</p>';	 }
		if ( $price == "on" ) { $output .='<span class="price">'.$current_price.'</span>';	 }
		
		if ( $add_to_card == "on" ) {  
			ob_start(); 
			woocommerce_template_loop_add_to_cart();  
			$add_to_cart_button = ob_get_clean();
			$output .= '<span class="woo_add_to_card">'.$add_to_cart_button.'</span>'; 	 }
		
		
		$output .= "</span'>";
		
		$output .= "</div></li>"; 
		
        endwhile;

        wp_reset_postdata();
    } // end of loop		    
     
     $output .= "</ul>";
     $output .= '
         <button type="button" class="slider-nav" aria-label="Go left"></button>
    <button type="button" class="slider-nav slider-nav-next" aria-label="Go left"></button>

    <div class="slider-indicators">
        <button class="active" aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
    </div>
     ';
     
     
        
     $output .= "</div>";   
    
if ( $woo_slider_first_call == 1 ) {
add_action( 'wp_footer', function () use($class) { ?>
<script >const swiffyslider={version:"1.6.0",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let i=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,i),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let i=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))i.observe(t)},slide(e,t=!0){const i=e.querySelector(".slider-container"),s=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),r=e.classList.contains("slider-nav-nodelay"),o=i.children,n=parseInt(window.getComputedStyle(i).columnGap),a=o[0].offsetWidth+n;let d=t?i.scrollLeft+a:i.scrollLeft-a;s&&(d=t?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft<1&&!t&&!l&&(d=i.scrollWidth-i.offsetWidth),i.scrollLeft>=i.scrollWidth-i.offsetWidth&&t&&!l&&(d=0),i.scroll({left:d,behavior:r?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),i=e.parentElement.children.length,s=e.closest(".swiffy-slider"),l=s.querySelector(".slider-container").children.length/i*t;this.slideTo(s,l)},slideTo(e,t){const i=e.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),l=i.children[0].offsetWidth+s,r=e.classList.contains("slider-nav-nodelay");i.scroll({left:l*t,behavior:r?"auto":"smooth"})},onSlideEnd(e,t,i=125){let s;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(t,i)}),{capture:!1,passive:!0})},autoPlay(e,t,i){t=t<750?750:t;let s=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,i);return i&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),s},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),i=t.scrollWidth-t.offsetWidth,s=t.scrollLeft/i;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,i=Math.abs(Math.round((e.length-1)*s));for(let t of e)t.classList.remove("active");e[i].classList.add("active")}}};window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||(document.currentScript.hasAttribute("defer")?swiffyslider.init():document.onreadystatechange=()=>{"interactive"===document.readyState&&swiffyslider.init()});
//# sourceMappingURL=swiffy-slider.min.js.map</script>

<style> .swiffy-slider{position:relative;display:block;width:100%;--swiffy-slider-snap-align:center;--swiffy-slider-item-width:100%;--swiffy-slider-item-gap:1rem;--swiffy-slider-item-reveal:0rem;--swiffy-slider-item-ratio:2/1;--swiffy-slider-item-count:1;--swiffy-slider-nav-light:#fff;--swiffy-slider-nav-dark:#333;--swiffy-slider-nav-zoom:1;--swiffy-slider-track-opacity:0.1;--swiffy-slider-track-height:0;--swiffy-slider-nav-outside-size:3.5rem;--swiffy-slider-indicator-outside-size:1.5rem;--swiffy-slider-animation-duration:.75s;--swiffy-slider-animation-delay:0s;--swiffy-slider-animation-timing:ease-in-out}.swiffy-slider,.swiffy-slider::after,.swiffy-slider::before{box-sizing:border-box}.swiffy-slider ::-webkit-scrollbar{height:var(--swiffy-slider-track-height)}.swiffy-slider ::-webkit-scrollbar-track{background:rgba(0,0,0,var(--swiffy-slider-track-opacity))}.swiffy-slider ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.4);border-radius:1rem}.swiffy-slider ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.6)}.slider-container{--swiffy-slider-item-gap-totalwidth:calc(var(--swiffy-slider-item-gap) * (var(--swiffy-slider-item-count) - 1));--swiffy-slider-item-width:calc((100% - var(--swiffy-slider-item-reveal) - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count));overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scroll-behavior:smooth;display:grid;align-items:center;height:100%;grid:auto/auto-flow -webkit-max-content;grid:auto/auto-flow max-content;grid-auto-rows:100%;grid-auto-columns:var(--swiffy-slider-item-width);grid-auto-flow:column;grid-gap:var(--swiffy-slider-item-gap);list-style:none;margin:0;padding:0;scrollbar-width:none;scrollbar-color:rgba(0,0,0,.4) rgba(0,0,0,var(--swiffy-slider-track-opacity));background-clip:padding-box}.slider-container>*{scroll-snap-align:var(--swiffy-slider-snap-align);position:relative;width:100%;height:100%}.slider-item-helper .slider-container>*{background-size:cover;background-color:#e1e1e1;background-position:50% 50%;display:flex;justify-content:center;align-items:center}.slider-item-helper:not(.slider-item-ratio) .slider-container>*{min-height:20rem}.slider-item-ratio .slider-container>*>*{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.slider-item-ratio-contain .slider-container>*>*{-o-object-fit:contain;object-fit:contain}.slider-item-ratio .slider-container>::after{display:block;padding-top:calc(100% / (var(--swiffy-slider-item-ratio)));content:""}.slider-item-ratio-32x9{--swiffy-slider-item-ratio:32/9}.slider-item-ratio-21x9{--swiffy-slider-item-ratio:21/9}.slider-item-ratio-16x9{--swiffy-slider-item-ratio:16/9}.slider-item-ratio-4x3{--swiffy-slider-item-ratio:4/3}.slider-item-ratio-2x1{--swiffy-slider-item-ratio:2/1}.slider-item-ratio-1x1{--swiffy-slider-item-ratio:1/1}.slider-item-ratio-3x4{--swiffy-slider-item-ratio:3/4}.slider-nav-scrollbar{--swiffy-slider-track-height:0.5rem}.slider-nav-scrollbar .slider-container{scrollbar-width:thin}.slider-nav-nodelay .slider-container{scroll-behavior:auto}.slider-indicators{position:absolute;right:2rem;bottom:0;left:2rem;display:flex;justify-content:center;padding:0;margin-bottom:1rem;list-style:none}.slider-nav-scrollbar .slider-indicators{margin-bottom:calc(1rem + var(--swiffy-slider-track-height))}.slider-indicators>.active{opacity:1}.swiffy-slider.slider-indicators-outside .slider-nav{margin-bottom:var(--swiffy-slider-indicator-outside-size)}.swiffy-slider.slider-indicators-outside{padding-bottom:var(--swiffy-slider-indicator-outside-size)}.swiffy-slider.slider-indicators-outside .slider-indicators,.swiffy-slider.slider-indicators-outside.slider-indicators{margin-bottom:0}.slider-indicators>*{box-sizing:content-box;flex:0 1 auto;width:2rem;height:.2rem;padding:0;border:.4rem solid transparent;cursor:pointer;background-color:#fff;background-clip:padding-box;opacity:.5;transition:opacity .4s ease}.slider-indicators-square .slider-indicators>*,.slider-indicators-square.slider-indicators>*{width:.5rem;height:.5rem;border:.4rem solid transparent}.slider-indicators-round .slider-indicators>*,.slider-indicators-round.slider-indicators>*{width:.5rem;height:.5rem;border:.4rem solid transparent;border-radius:50%}.slider-indicators-highlight .slider-indicators>.active,.slider-indicators-highlight.slider-indicators>.active{border:.33rem solid transparent;padding:.07rem}.slider-nav{position:absolute;top:0;left:0;bottom:0;border:0;background-color:transparent;cursor:pointer;padding:0;visibility:hidden;opacity:.8;transition:visibility .1s,opacity .2s linear;margin-bottom:var(--swiffy-slider-track-height);display:flex;align-items:center;padding:0 .5rem;-webkit-filter:drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));filter:drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));transform:scale(var(--swiffy-slider-nav-zoom))}.slider-nav::before{position:absolute;content:"";padding:.5rem;width:3rem;height:3rem}.slider-nav::after{content:"";-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'></path></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'></path></svg>");-webkit-mask-size:cover;mask-size:cover;background-color:var(--swiffy-slider-nav-light);background-origin:content-box;width:3rem;height:3rem}.slider-nav-arrow .slider-nav::after{-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'></path></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'></path></svg>")}.slider-nav-chevron .slider-nav::after{-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M9.224 1.553a.5.5 0 0 1 .223.67L6.56 8l2.888 5.776a.5.5 0 1 1-.894.448l-3-6a.5.5 0 0 1 0-.448l3-6a.5.5 0 0 1 .67-.223z'></path></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M9.224 1.553a.5.5 0 0 1 .223.67L6.56 8l2.888 5.776a.5.5 0 1 1-.894.448l-3-6a.5.5 0 0 1 0-.448l3-6a.5.5 0 0 1 .67-.223z'></path></svg>")}.slider-nav-caret .slider-nav::after{-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z'></path></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z'></path></svg>")}.slider-nav-caretfill .slider-nav::after{-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'></path></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'></path></svg>")}.swiffy-slider:hover .slider-nav{visibility:visible}.swiffy-slider.slider-nav-autohide.slider-item-first-visible .slider-nav:not(.slider-nav-next){visibility:hidden}.swiffy-slider.slider-nav-autohide.slider-item-last-visible .slider-nav.slider-nav-next{visibility:hidden}.slider-nav-outside .slider-container{margin:0 var(--swiffy-slider-nav-outside-size)}.slider-nav-outside .slider-nav{padding:0}.swiffy-slider .slider-nav:hover{opacity:1}.slider-nav-square .slider-nav{padding:0}.slider-nav-round .slider-nav::before,.slider-nav-square .slider-nav::before{background-color:var(--swiffy-slider-nav-light)}.slider-nav-round .slider-nav::after,.slider-nav-square .slider-nav::after{background-color:var(--swiffy-slider-nav-dark);width:2rem;height:2rem;margin:.5rem}.slider-nav-round .slider-nav::before{border-radius:50%}.slider-nav-round .slider-nav::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'%3E%3C/path%3E%3C/svg%3E");mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'%3E%3C/path%3E%3C/svg%3E")}.slider-nav-dark .slider-nav::after{background-color:var(--swiffy-slider-nav-dark)}.slider-nav-dark.slider-nav-round .slider-nav::before,.slider-nav-dark.slider-nav-square .slider-nav::before{background-color:var(--swiffy-slider-nav-dark)}.slider-nav-dark.slider-nav-round .slider-nav::after,.slider-nav-dark.slider-nav-square .slider-nav::after{background-color:var(--swiffy-slider-nav-light)}.slider-nav-sm{--swiffy-slider-nav-zoom:.75;--swiffy-slider-nav-outside-size:2.5rem}.slider-nav.slider-nav-next::after{transform:rotate(180deg)}.slider-nav.slider-nav-next{right:0;left:unset}.slider-nav-visible .slider-nav{visibility:visible}.slider-nav-dark .slider-nav{opacity:.6}.slider-indicators-dark .slider-indicators>*,.slider-indicators-dark.slider-indicators>*{-webkit-filter:invert(1);filter:invert(1)}.slider-item-snapstart{--swiffy-slider-snap-align:start}.slider-item-nosnap{--swiffy-slider-snap-align:unset}.slider-item-nogap{--swiffy-slider-item-gap:0rem}.slider-item-reveal{--swiffy-slider-item-reveal:8rem}.slider-item-snapstart.slider-item-reveal{--swiffy-slider-item-reveal:4rem}.slider-item-show2{--swiffy-slider-item-count:2}.slider-item-show3{--swiffy-slider-item-count:3}.slider-item-show4{--swiffy-slider-item-count:4}.slider-item-show5{--swiffy-slider-item-count:5}.slider-item-show6{--swiffy-slider-item-count:6}.slider-nav-mousedrag .slider-container{cursor:-webkit-grab;cursor:grab}.slider-nav-mousedrag.dragging .slider-container{-ms-scroll-snap-type:unset;scroll-snap-type:unset;scroll-behavior:unset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.slider-nav-mousedrag.dragging .slider-nav{visibility:hidden}@media (hover:hover){.slider-nav-mousedrag .slider-container::after{content:"";position:absolute;width:100%;height:100%}}@media (prefers-reduced-motion:no-preference){.slider-nav-animation.slider-nav-animation-fast{--swiffy-slider-animation-duration:.25s}.slider-nav-animation.slider-nav-animation-slow{--swiffy-slider-animation-duration:1.25s}.slider-nav-animation .slider-container>*>*{transition:opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing),transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing);transition-delay:var(--swiffy-slider-animation-delay)}.slider-nav-animation .slider-container .slide-visible>*{transition:opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing),transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing);transition-delay:var(--swiffy-slider-animation-delay)}.slider-nav-animation.slider-nav-animation-fadein .slider-container>*>*{opacity:.5}.slider-nav-animation.slider-nav-animation-scale .slider-container>*>*{transform:scale(.9)}.slider-nav-animation.slider-nav-animation-appear .slider-container>*>*{opacity:.3;transform:scale(.9)}.slider-nav-animation.slider-nav-animation-scaleup .slider-container>*>*{transform:scale(.25)}.slider-nav-animation.slider-nav-animation-zoomout .slider-container>*{overflow:hidden}.slider-nav-animation.slider-nav-animation-zoomout .slider-container>*>*{transform:scale(1.3)}.slider-nav-animation.slider-nav-animation-turn .slider-container>*>*{transform:rotateY(70deg)}.slider-nav-animation.slider-nav-animation-slideup .slider-container>*>*{transform:translateY(60%) scale(.99)}.slider-nav-animation.slider-nav-animation-slideup .slider-container{overflow-y:hidden}.slider-nav-animation .slider-container>.slide-visible>*{opacity:1;transform:none}}@media (min-width:62rem){.slider-item-show2:not(.slider-item-snapstart) .slider-container>*,.slider-item-show4:not(.slider-item-snapstart) .slider-container>*,.slider-item-show6:not(.slider-item-snapstart) .slider-container>*{scroll-snap-align:unset}.slider-item-show2:not(.slider-item-snapstart) .slider-container>::before,.slider-item-show4:not(.slider-item-snapstart) .slider-container>::before,.slider-item-show6:not(.slider-item-snapstart) .slider-container>::before{content:" ";display:block;position:absolute;left:calc((var(--swiffy-slider-item-gap)/2)*-1);top:0;width:1px;height:1px;scroll-snap-align:var(--swiffy-slider-snap-align)}.slider-nav-outside-expand .slider-nav{margin-left:-4rem}.slider-nav-outside-expand .slider-nav.slider-nav-next{margin-right:-4rem}.slider-nav-sm.slider-nav-outside-expand .slider-nav{margin-left:-3.5rem}.slider-nav-sm.slider-nav-outside-expand .slider-nav.slider-nav-next{margin-right:-3.5rem}.slider-indicators-sm.slider-indicators{display:none}}@media (max-width:62rem){.swiffy-slider{--swiffy-slider-track-height:0rem;--swiffy-slider-item-reveal:0rem;--swiffy-slider-item-count:1;--swiffy-slider-nav-zoom:.875}.swiffy-slider .slider-item-show2-sm{--swiffy-slider-item-count:2}.slider-item-reveal{--swiffy-slider-item-reveal:4rem}.slider-item-snapstart.slider-item-reveal{--swiffy-slider-item-reveal:2rem}.slider-item-show6 .slider-container{grid-auto-columns:calc(25% - (var(--swiffy-slider-item-gap)/ 4*3))}.slider-item-show6.slider-item-reveal .slider-container{grid-auto-columns:calc(25% - (var(--swiffy-slider-item-gap)/ 4*3) - .5rem)}.slider-item-show6.slider-item-reveal .slider-container>*{scroll-snap-align:unset}.slider-item-show6.slider-item-reveal .slider-container>::before{content:" ";display:block;position:absolute;left:calc((var(--swiffy-slider-item-gap)/2)*-1);top:0;width:1px;height:1px;scroll-snap-align:center}.slider-nav::after,.slider-nav::before{width:2rem;height:2rem;padding:.3rem}.slider-nav-round .slider-nav::after,.slider-nav-square .slider-nav::after{width:1.75rem;height:1.75rem;margin:.125rem}.slider-nav-outside .slider-container,.slider-nav-outside-expand .slider-container{margin:0 2rem}.slider-nav-outside-expand .slider-container{margin:0 var(--swiffy-slider-nav-outside-size)}.slider-nav-outside-expand .slider-nav{padding:0}.slider-indicators-round .slider-indicators>*,.slider-indicators-round.slider-indicators>*,.slider-indicators-square .slider-indicators>*,.slider-indicators-square.slider-indicators>*{width:.3rem;height:.3rem}.slider-indicators{margin-bottom:.5rem;display:none}.slider-nav-scrollbar .slider-indicators{margin-bottom:0}.slider-indicators>*{width:1rem;height:.125rem;border-width:.25rem}.slider-indicators-sm .slider-indicators,.slider-indicators-sm.slider-indicators{display:flex}}@media (max-width:48rem){.slider-item-show6 .slider-container{grid-auto-columns:calc(50% - (var(--swiffy-slider-item-gap)/ 2))}.slider-item-show6.slider-item-reveal .slider-container{grid-auto-columns:calc(50% - (var(--swiffy-slider-item-gap)/ 2) - 1.5rem)}}@media (hover:none){.swiffy-slider.slider-nav-touch .slider-nav{visibility:visible}.swiffy-slider:not(.slider-nav-touch).slider-nav-outside .slider-container,.swiffy-slider:not(.slider-nav-touch).slider-nav-outside-expand .slider-container{margin:0 0}.slider-item-nosnap-touch{--swiffy-slider-snap-align:unset}}
/*# sourceMappingURL=swiffy-slider.min.css.map */
.star-rating span {
    font-family: "star";
}
.swiffy-slider span.price {
    display: grid;
    justify-content: center;
}
.swiffy-slider p:empty {
  display: none;
}
span.wwo_card_details p {
    text-align: right;
}
.swiffy-slider {
    direction: ltr;
}
button.slider-nav , button.slider-nav:hover , button.slider-nav:active{
    box-shadow: none;
}
span.wwo_card_details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
}
span.wwo_card_details {
    padding: 30px;
    padding-top: 5px;
}	
button.slider-nav:hover, button.slider-nav:focus {
    background: none;
}
.entry-content ul, .entry-content ol {
    padding-bottom: 34px;
    padding-top: 15px;
}
div.post_card {
    transition: all 0.3s ease!important;
    padding: 0px;
    min-height: 200px;
    background-color: white;
    border: 0px solid #e7e7e7;
    border-radius: 5px;
    box-shadow: 0 0.35em 1.25em rgba(0, 0, 0, 0.085);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;    
}
		
div.post_card:hover {
			transform: translateY(-3px);
			box-shadow: 0 0.75em 1.85em rgba(0, 0, 0, 0.185);
}
div.post_card a {
			color: black;
			font-weight: bold;
			display: block;
			font-size: 1.05rem;
}
span.onsale {
    position: absolute;
    color: white;
    background-color: #a46464;
    padding: 3px 8px;
    left: 7px;
    top: 7px;
    border-radius: 5px;
    font-size: 0.9em;
    direction: rtl;
} font-size: 0.9em;
}
a.p_title {
    font-size: 1.2em;
}
.Main_wrapper a {
    text-decoration: none!important;
}
.Main_wrapper img {
    aspect-ratio: 1;
    object-fit: cover;
}
span.woo_add_to_card a {
    color: white;
    background-color: gray;
    padding: 11px 27px;
    border-radius: 5px;
}
</style>

<?php }); }
	


add_action( 'wp_footer', function () use($class, $theme ) { if ( $theme == "2"   ) {  ?>
<style>
div.<?= $class ?> li.slider_card.slide-visible {
    overflow: hidden;
}

div.<?= $class ?> span.wwo_card_details {
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: absolute;
    inset: 0;
    background-color: #ffffffe6;
    justify-content: center;
    transform: translateY(100%);
}

div.<?= $class ?> .slider-container .post_card:hover span.wwo_card_details {
    transform: translateY(0px);
}
</style>
<?php }
}); 

$woo_slider_first_call++;
return $output;

});

یک صفحه جدید بسازید، یک بلوک شورتکد به آن اضافه کنید و شورتکد زیر را در آن قرار دهید.

[nargil-woo-slider]

تنظیمات اسلایدر محصولات

برای این شورتکد بیش از ده اتریبیوت در نظر گرفته‌ام که با تغییر هر کدام از آنها میتوانید اسلایدر خود را سفارشی‌سازی کنید.

theme: تغییر پوسته اسلایدر (1 و 2)
پوسته 1. تصویر بالای مقاله، پوسته 2. تصویر زیر:

[nargil-woo-slider theme="2"]

card: تعداد محصولات قابل مشاهده یا تعداد کارت محصولات (مقدار پیش‌فرض: 4)

[nargil-woo-slider card="4"]

sale_badge: نمایش برچسب تخفیف! (on و off)
در صورتی که میخواهید به جای تخفیف! کلمه دیگری نمایش داده شود، در کد دنبال تخفیف! بگردید و آن را با کلمه مورد نظر خود جایگزین کنید.

[nargil-woo-slider sale_badge="on"]

rating: نمایش یا عدم نمایش امتیاز محصول (مقدار پیش‌فرض: on)

[nargil-woo-slider rating="off"]

description: نمایش یا عدم نمایش توضیحات کوتاه محصول (مقدار پیش‌فرض: on)

[nargil-woo-slider description="off"]

auto_paly: حرکت خودکار کارت محصولات در اسلایدر (مقدار پیش‌فرض: off)

[nargil-woo-slider auto_paly="on"]

num: تعداد محصولات لود شده در اسلایدر (مقدار پیش‌فرض: 10)
در فروشگاه‌های با تعداد محصول زیاد با این گزینه می‌توانید تعداد کارت محصولات را محدود کنید و از کند شدن سایت جلوگیری کنید.

[nargil-woo-slider num="10"]

cats: آی‌دی کتگوری محصولاتی که میخواهید در اسلایدر نمایش داده شود.
مثال: ساخت اسلایدر برای شامپو و نرم‌کننده ها:
فرض کنید آی‌دی کتگوری شامپو 10 است و آی‌دی کتگوری نرم‌کننده 20، شورتکد مانند زیر خواهد بود:

[nargil-woo-slider cats="10,20"]

check_stock: حذف محصولات ناموجود از اسلایدر (مقدار پیش‌فرض: off)
on= حذف محصولات ناموجود – off= نمایش محصولات ناموجود

[nargil-woo-slider check_stock="on"]

on_sale: نمایش محصولات تخفیف‌دار (مقدار پیش‌فرض: off)
با این گزینه می‌توانید فقط محصولات دارای تخفیف را نمایش دهید.

[nargil-woo-slider on_sale="on"]

type: نمایش محصولات ویژه یا پرفروش (در حالت پیش‌فرض غیرفعال است)
اگر این اتریبیوت برابر featured باشد فقط محصولات ویژه نمایش داده میشوند.
اگر این اتریبیوت برابر bestselling باشد محصولات پرفروش نمایش داده میشوند.

[nargil-woo-slider type="featured"]

اکنون می‌توانید با ترکیب اتریبیوت‌های بالا اسلایدر مورد نظر خود را بسازید.

[nargil-woo-slider card="4" num="10" sale_badge="on" rating="on" description="off" check_stock="off" on_sale="off" cats="" type="" auto_paly="on" theme="1"]

توضیحاتی درمورد نحوه کار این کد (برای علاقه‌مندان به توسعه پلاگین وردپرس)

در این کد با ترکیب کلاس WP_Query وردپرس و کتابخانه swiffy slider ، اسلایدر (کاروسل) محصولات را میسازیم.
کتابخانه swiffy slider یکی از سبکترین کتابخانه‌های ساخت اسلایدر است و خروجی نهایی زیبایی دارد که میتوانید آن را به دلخواه خود سفارشی سازی کنید.

در این شورتکد ابتدا تنظیمات مورد نظر کاربر را با استفاده از اتریبیوتها دریافت میکنیم، سپس با ترکیب این اتریبیوت‌ها کوئری مناسب را ساخته و با استفاده از کلاس WP_Query، آبجکت محصولات درخواستی را استخراج میکنیم و در فرمت استاندارد swiffy slider نمایش میدهیم.

https://www.youtube.com/watch?v=IHwUmuqNCAo

مقالات مشابه

آموزش ساخت جستجوی زنده محصولات در ووکامرس بدون پلاگین

آموزش ساخت اسلایدر محصولات ووکامرس بدون پلاگین

آموزش اتصال وردپرس به گوگل شیت برای ذخیره فرم‌ها

آموزش آپدیت قیمت در وردپرس با استفاده گوگل شیت

دیدگاه‌ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

افزونه کشف قیمت

افزونه برورسانی اتوماتیک قیمت از سایتهای دیگر

دانلود رادار قیمت