وب کافه

یک سایت دیگر با وردپرس فارسی

نمایش محصولات برجسته ووکامرس بدون Shortcode

نویسنده:
28 آگوست 14

 

همانطور که میدانید ووکامرس برای نمایش محصولات برجسته خود از shortcode استفاده میکنه اما شاید شما بخواهید که این محصولات برجسته خود را در صفحه اصلی سایت و یا در صفحه اصلی فروشگاه داشته باشید و حتی بخواهید که کدهای آنها را ویرایش کنید تا بتوانید بطور مثال یک افکت به آن اضافه کنید با کدی که  در ادامه قرار خواهم داد شما یک حلقه از محصولات برجسته ووکامرس را خواهید داشت و میتوانید تغییرات دلخواه خود را در آن ایجاد کنید

کد:

<?php
     $args = array( 'post_type' => 'product', 'meta_key' => '_featured','posts_per_page' => 15,'columns' => '3', 'meta_value' => 'yes' );
     $loop = new WP_Query( $args );
     while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
                        <li class="product">    
                            <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
                                <h3><?php the_title(); ?></h3><br /><span class="price"><?php echo $product->get_price_html(); ?></span><br />
                                <?php woocommerce_show_product_sale_flash( $post, $product ); ?>
                                <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="300px" height="300px" />'; ?></a>
                                <span class="motangan"><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></span><br />
                        </li>
                <?php
            /**
             * woocommerce_pagination hook
             *
             * @hooked woocommerce_pagination - 10
             * @hooked woocommerce_catalog_ordering - 20
             */
            do_action( 'woocommerce_pagination' );
        ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>

 

کد افزودن به سبد خرید ووکامرس Ajax

نویسنده:
28 آگوست 14

ووکامرس یک افزونه فروشگاه ساز وردپرس می باشد که بسیاری از کاربران وردپرس از آن برای فروش محصول خود استفاده میکنند و دوست دارند که قابلیتهای دیگری بصورت آژاکس به این افزونه اضافه نمایند خوشبختانه پوسته پیش فرض ووکامرس را میتوان دستخوش تغییراتی قرارد داد و هر آنچه را که نیاز است بدست آورد .

قبلا در رابطه با اینکه چگونه میتوان اسلایدر برای محصولات خود اضافه کرد آموزش قرار داده ام اما اینبار میخواهم قرار دادن کد Ajax برای افزودن به سبد خرید را آموزش دهم با این کد دیگر نیاز نیست که صفحه فروشگاه شما دوباره رفرش شود و خریدار می تواند در انتهای خرید و گشت زنی خود در سایت شما سبد خرید را ببیند

ابتدا باید در پوسته خود پوشه ای به نام woocommerce ساخته و در زیر مجموعه آن یک پوشه دیگر به نام loop  ایجاد کرده و یک فایل php  به نام add-to-cart ایجاد کنیم

بطور مثال  my-theme/woocoomece/loop/add-to-cart.php

حالا کدهای زیر را درون فایل add-to-cart.php که ساختیم کپی میکنیم

<?php
/**
 * Custom Loop Add to Cart.
 *
 * Template with quantity and ajax.
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly.

global $product;
?>

<?php if ( ! $product->is_in_stock() ) : ?>

    <a href="<?php echo apply_filters( 'out_of_stock_add_to_cart_url', get_permalink( $product->id ) ); ?>" class="button"><?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?></a>

<?php else : ?>

    <?php
        $link = array(
            'url'   => '',
            'label' => '',
            'class' => ''
        );

        switch ( $product->product_type ) {
            case "variable" :
                $link['url']    = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
                $link['label']  = apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
            break;
            case "grouped" :
                $link['url']    = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
                $link['label']  = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
            break;
            case "external" :
                $link['url']    = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
                $link['label']  = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
            break;
            default :
                if ( $product->is_purchasable() ) {
                    $link['url']    = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
                    $link['label']  = apply_filters( 'add_to_cart_text', __( 'Add to cart', 'woocommerce' ) );
                    $link['class']  = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
                } else {
                    $link['url']    = apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
                    $link['label']  = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
                }
            break;
        }

        // If there is a simple product.
        if ( $product->product_type == 'simple' ) {
            ?>
            <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype="multipart/form-data">
                <?php
                    // Displays the quantity box.
                    woocommerce_quantity_input();

                    // Display the submit button.
                    echo sprintf( '<button type="submit" data-product_id="%s" data-product_sku="%s" data-quantity="1" class="%s button product_type_simple">%s</button>', esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_html( $link['label'] ) );
                ?>
            </form>
            <?php
        } else {
          echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s">%s</a>', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
        }

    ?>

<?php endif; ?>

در قدم دوم باید فایل function.php پوسته خود را باز کرده و کد زیر را کپی نمایید.

 

function cs_wc_loop_add_to_cart_scripts() {
    if ( is_shop() || is_product_category() || is_product_tag() || is_product() ) : ?>

<script>
    jQuery(document).ready(function($) {
        $(document).on( 'change', '.quantity .qty', function() {
            $(this).parent('.quantity').next('.add_to_cart_button').attr('data-quantity', $(this).val());
        });
    });
</script>

    <?php endif;
}

add_action( 'wp_footer', 'cs_wc_loop_add_to_cart_scripts' );

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

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

نویسنده:
24 آگوست 14

Parallax-Content-Slider

 

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

ابتدا ما نیاز به  پلاگین جاوا اسکریپت اسلاید داریم که من یک نمونه بطور مثال ParallaxContentSlider انتخاب کردم .

ابتدا باید در هدر سایتتون css و java  را فراخوانی کنید پس ما کد زیر را بین تگ head قرار میدهیم

	<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/modernizr.custom.28468.js"></script>
			<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.7.1.min.js"></script>
		<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.cslider.js"></script>

و برای css کد زیر ار قرار میدهیم

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/daslider.css" />

اسلاید ما برای نمایش از کد زیر تبعیت می کند که ما باید حلقه محصولات خود را درون این کد قرار دهیم

		<div id="da-slider" class="da-slider">
				
				<div class="da-slide">
					<h2>نام محصول</h2>
					<p>توضیحات محصول</p>
					<a href="#" class="da-link"></a>
					<div class="da-img"><img src="لینک عکس" alt="image01" /></div>
				</div>
				<nav class="da-arrows">
					<span class="da-arrows-prev"></span>
					<span class="da-arrows-next"></span>
				</nav>
			</div>

 

حالا ما نیاز داریم که یه فایل php ساخته و کد های مربوط به محصولات را داخل آن قرار دهیم بطور مثال شما میتوانید یک فایل ایجاد کرده و نام آن را slider .php قرار دهید و کدهای زیر را کپی کنید

<div id="da-slider" class="da-slider">
							 <?php
            args = array( 'post_type' => 'product', 'product_cat' => 'نام دسته مورد نظر برای نمایش محصول', 'posts_per_page' => 4, 'orderby' =>'date','order' => 'DESC' );
            $loop = new WP_Query( $args );
            while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
				<div class="da-slide">
					<h2><?php the_title(); ?></h2>
					<p><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></p>
					<a href="<?php the_permalink(); ?>" class="da-link">خرید</a>
					<div class="da-img">
					<a href="<?php the_permalink(); ?>"> <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'"  />'; ?>
                    </a>
					</div>
				</div>
			<?php endwhile; ?>
            <?php wp_reset_query(); ?>
				
				<nav class="da-arrows">
					<span class="da-arrows-prev"></span>
					<span class="da-arrows-next"></span>
				</nav>
			</div>
				
			<script>
			
			$(function() {

				$( '#da-slider' ).cslider({
					autoplay	: true,
					bgincrement	: 950
				});

			});
		   </script>
		

خب کار تمام شد فقط کافیه که این فایل slider.php را درون قالب خود فراخوانی کنید که میتوانید از کد زیر استفاده کنید

<?php include(TEMPLATEPATH.'/slider.php')?>

برای راحتی کار فایلهای بالا را برای دانلود قرار دادم که میتوانید دانلود کرده و استفاده نمایید توجه داشته باشید شما میتوانید کدهای حلقه محصولات را در هر اسلایدری که دوست داشتید استفاده کنید

دانود نمونه اسلایدر