Hướng dẫn custom woocommerce – phần 4

20/01/2016 02:07 9283

Table of Contents

Cập nhật trạng thái giỏ hàng mini ngay tức thì

Có nghĩa là khi khách hàng click vào nút add to cart thì ngay lập tức số lượng và tổng giá trị đơn hàng được hiển thị trên giỏ hàng mini mà không cần refresh trang

Code làm việt này:

add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cartplus_fragment', '1');
function woocommerce_header_add_to_cartplus_fragment( $fragments ) {
	global $woocommerce;
 ob_start();
 ?>
 <a href="<?php echo WC()->cart->get_cart_url(); ?>" title="Xem giỏ hàng" rel="nofollow" class ='my-cart-total'><?php echo sprintf(_n('%d item', '%d sản phẩm', WC()->cart->cart_contents_count, 'woothemes'), WC()->cart->cart_contents_count);?> - <?php echo WC()->cart->get_cart_total(); ?>   </a>
 <?php
 $fragments['a.my-cart-total'] = ob_get_clean();
 return $fragments;
}

add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cartplus_fragment', '1');

function woocommerce_header_add_to_cartplus_fragment( $fragments ) {

global $woocommerce;

ob_start();

<a href="<?php echo WC()->cart->get_cart_url(); ?>" title="Xem giỏ hàng" rel="nofollow" class ='my-cart-total'><?php echo sprintf(_n('%d item', '%d sản phẩm', WC()->cart->cart_contents_count, 'woothemes'), WC()->cart->cart_contents_count);?> - <?php echo WC()->cart->get_cart_total(); ?> </a>

<?php

$fragments['a.my-cart-total'] = ob_get_clean();

return $fragments;

}

Làm cho trạng thái add to cart xuất hiện icon quay tròn khi gọi sản phẩm ra trang chủ

Khi khách hàng click add to cart thì anh chị thấy rằng có xuất hiện một icon quay tròn, để chỉ trạng thái sản phẩm được đang được thêm vào, tuy nhiên khi ngoài trang chủ class woocommerce không được add vào thẻ body nên chúng ta sẽ không thấy điều đó, bây giờ chúng ta phải đi add nó vào

add_filter( 'body_class', 'tung_class_names' );
function tung_class_names( $classes ) {
	// add 'class-name' to the $classes array
	$classes[] = 'woocommerce';
	// return the $classes array
	return $classes;
}

add_filter( 'body_class', 'tung_class_names' );

function tung_class_names( $classes ) {

// add 'class-name' to the $classes array

$classes[] = 'woocommerce';

// return the $classes array

return $classes;

}

Viết widget sản phẩm mới (lastest products, recent products)

<?php
class lastest_products extends WP_Widget
{
     function lastest_products(){
        $widget_ops = array('description' => 'Lastest products');
        $control_ops = array('width' => 300, 'height' => 300);
        parent::WP_Widget(false,$name='Lastest products',$widget_ops,$control_ops);
    }
	function form($instance){
		global $wpdb;
        //Defaults
        $instance = wp_parse_args( (array) $instance, array('title'=>'','numbershow'=>'') );
		$title = htmlspecialchars($instance['title']);
		$numbershow = htmlspecialchars($instance['numbershow']);
		?>
      	<p><label for="<?php echo $this->get_field_id('title'); ?>">Title </label>      
        <input type="text" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" style="width:100%" value="<?php echo $title; ?>">
        </p>
        	<p><label for="<?php echo $this->get_field_id('numbershow'); ?>">Show number: </label>      
        <input type="text" name="<?php echo $this->get_field_name('numbershow'); ?>" id="<?php echo $this->get_field_id('numbershow'); ?>" style="width:100%" value="<?php echo $numbershow; ?>">
        </p>
        
<?php		 
		
    }
    /*Saves the settings. */
    function update($new_instance, $old_instance){
        $instance = $old_instance;
		$instance['title'] = stripslashes($new_instance['title']);
		$instance['numbershow'] = stripslashes($new_instance['numbershow']);
        return $instance;
    }
	function widget($args, $instance) {
		global $wpdb,$post, $product;
		extract($args);
		$title= empty($instance['title']) ? '' : $instance['title'];
		$numbershow= empty($instance['numbershow']) ? '' : $instance['numbershow'];
		echo $before_widget;
		if ( ! empty( $instance['title'] ) ) {
			echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
		}
		?>
        <div class="lastest-product-list">
        <?php
			$args = array(
			'post_type' => 'product',
			'posts_per_page' => $numbershow,
			'post_status' => 'publish'
			);
			$wp_query = new WP_Query( $args );
			
			if ( $wp_query->have_posts() ) :  while ( $wp_query->have_posts() ) : $wp_query->the_post(); 
		?>
       
<div class="cutom-woocommerce-product-item">
	<div class="cutom-woocommerce-product-item-featured-image">
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
				<?php echo get_the_post_thumbnail(get_the_ID(), 'cumtom-featured-image-for-shop' ); ?>

                </a>
    </div>	
    <div class="cutom-woocommerce-product-item-title-and-price">
    	<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <p><?php woocommerce_get_template( 'loop/price.php' ); ?></p>
          <?php
$product = wc_get_product( get_the_ID() );
$add_to_cart_link = sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" class=" add_to_cart_button single_add_to_cart_button button product_type_%s">%s</a>',
      esc_url( $product->add_to_cart_url() ),
      $product->id,
      esc_attr( $product->product_type ),
      'Mua ngay'
     );
echo $add_to_cart_link;
    ?>

    </div>
</div>
 <?php
					
		endwhile;
		
		 wp_reset_postdata();
endif;
 
	
?>  </div>
         <?php
        echo $after_widget;
		?>
       <?php
		}
}// end class
register_widget('lastest_products');
?>

<?php

class lastest_products extends WP_Widget

{

function lastest_products(){

$widget_ops = array('description' => 'Lastest products');

$control_ops = array('width' => 300, 'height' => 300);

parent::WP_Widget(false,$name='Lastest products',$widget_ops,$control_ops);

}

function form($instance){

global $wpdb;

//Defaults

$instance = wp_parse_args( (array) $instance, array('title'=>'','numbershow'=>'') );

$title = htmlspecialchars($instance['title']);

$numbershow = htmlspecialchars($instance['numbershow']);

<p><label for="<?php echo $this->get_field_id('title'); ?>">Title </label>

<input type="text" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" style="width:100%" value="<?php echo $title; ?>">

</p>

<p><label for="<?php echo $this->get_field_id('numbershow'); ?>">Show number: </label>

<input type="text" name="<?php echo $this->get_field_name('numbershow'); ?>" id="<?php echo $this->get_field_id('numbershow'); ?>" style="width:100%" value="<?php echo $numbershow; ?>">

</p>

<?php

}

/*Saves the settings. */

function update($new_instance, $old_instance){

$instance = $old_instance;

$instance['title'] = stripslashes($new_instance['title']);

$instance['numbershow'] = stripslashes($new_instance['numbershow']);

return $instance;

}

function widget($args, $instance) {

global $wpdb,$post, $product;

extract($args);

$title= empty($instance['title']) ? '' : $instance['title'];

$numbershow= empty($instance['numbershow']) ? '' : $instance['numbershow'];

echo $before_widget;

if ( ! empty( $instance['title'] ) ) {

echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];

}

<?php

$args = array(

'post_type' => 'product',

'posts_per_page' => $numbershow,

'post_status' => 'publish'

);

$wp_query = new WP_Query( $args );

if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">

<?php echo get_the_post_thumbnail(get_the_ID(), 'cumtom-featured-image-for-shop' ); ?>

</a>

</div>

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<?php

$product = wc_get_product( get_the_ID() );

$add_to_cart_link = sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" class=" add_to_cart_button single_add_to_cart_button button product_type_%s">%s</a>',

esc_url( $product->add_to_cart_url() ),

$product->id,

esc_attr( $product->product_type ),

'Mua ngay'

);

echo $add_to_cart_link;

</div>

<?php

endwhile;

wp_reset_postdata();

endif;

?> </div>

<?php

echo $after_widget;

<?php

}

}// end class

register_widget('lastest_products');

Widget hiển thị các sản phẩm nổi bật (featured products)

<?php
class products_featured extends WP_Widget
{
     function products_featured(){
        $widget_ops = array('description' => 'Products featured');
        $control_ops = array('width' => 300, 'height' => 300);
        parent::WP_Widget(false,$name='Products featured',$widget_ops,$control_ops);
    }
	function form($instance){
		global $wpdb;
        //Defaults
        $instance = wp_parse_args( (array) $instance, array('title'=>'','numbershow'=>'') );
		$title = htmlspecialchars($instance['title']);
		$numbershow = htmlspecialchars($instance['numbershow']);
		?>
      	<p><label for="<?php echo $this->get_field_id('title'); ?>">Title </label>      
        <input type="text" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" style="width:100%" value="<?php echo $title; ?>">
        </p>
        	<p><label for="<?php echo $this->get_field_id('numbershow'); ?>">Show number: </label>      
        <input type="text" name="<?php echo $this->get_field_name('numbershow'); ?>" id="<?php echo $this->get_field_id('numbershow'); ?>" style="width:100%" value="<?php echo $numbershow; ?>">
        </p>
        
<?php		 
		
    }
    /*Saves the settings. */
    function update($new_instance, $old_instance){
        $instance = $old_instance;
		$instance['title'] = stripslashes($new_instance['title']);
		$instance['numbershow'] = stripslashes($new_instance['numbershow']);
        return $instance;
    }
	function widget($args, $instance) {
		global $wpdb,$post, $product;
		extract($args);
		$title= empty($instance['title']) ? '' : $instance['title'];
		$numbershow= empty($instance['numbershow']) ? '' : $instance['numbershow'];
		echo $before_widget;
		if ( ! empty( $instance['title'] ) ) {
			echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
		}
		?>
        <div class="lastest-product-list">
        <?php
			$args = array(
			'post_type' => 'product',
			'meta_key'     => '_featured',
			'meta_value'   => 'yes',
			'meta_compare' => '=',
			'posts_per_page' => $numbershow,
			'post_status' => 'publish'
			);
			$wp_query = new WP_Query( $args );
			
			if ( $wp_query->have_posts() ) :  while ( $wp_query->have_posts() ) : $wp_query->the_post(); 
		?>
       
<div class="cutom-woocommerce-product-item">
	<div class="cutom-woocommerce-product-item-featured-image">
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
				<?php echo get_the_post_thumbnail(get_the_ID(), 'cumtom-featured-image-for-shop' ); ?>

                </a>
    </div>	
    <div class="cutom-woocommerce-product-item-title-and-price">
    	<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <p><?php woocommerce_get_template( 'loop/price.php' ); ?></p>
          <?php
$product = wc_get_product( get_the_ID() );
$add_to_cart_link = sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" class=" add_to_cart_button single_add_to_cart_button button product_type_%s">%s</a>',
      esc_url( $product->add_to_cart_url() ),
      $product->id,
      esc_attr( $product->product_type ),
      'Mua ngay'
     );
echo $add_to_cart_link;
    ?>

    </div>
</div>
 <?php
					
		endwhile;
		
		 wp_reset_postdata();
endif;
 
	
?>  </div>
         <?php
        echo $after_widget;
		?>
       <?php
		}
}// end class
register_widget('products_featured');
?>

<?php

class products_featured extends WP_Widget

{

function products_featured(){

$widget_ops = array('description' => 'Products featured');

$control_ops = array('width' => 300, 'height' => 300);

parent::WP_Widget(false,$name='Products featured',$widget_ops,$control_ops);

}

function form($instance){

global $wpdb;

//Defaults

$instance = wp_parse_args( (array) $instance, array('title'=>'','numbershow'=>'') );

$title = htmlspecialchars($instance['title']);

$numbershow = htmlspecialchars($instance['numbershow']);

<p><label for="<?php echo $this->get_field_id('title'); ?>">Title </label>

<input type="text" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" style="width:100%" value="<?php echo $title; ?>">

</p>

<p><label for="<?php echo $this->get_field_id('numbershow'); ?>">Show number: </label>

<input type="text" name="<?php echo $this->get_field_name('numbershow'); ?>" id="<?php echo $this->get_field_id('numbershow'); ?>" style="width:100%" value="<?php echo $numbershow; ?>">

</p>

<?php

}

/*Saves the settings. */

function update($new_instance, $old_instance){

$instance = $old_instance;

$instance['title'] = stripslashes($new_instance['title']);

$instance['numbershow'] = stripslashes($new_instance['numbershow']);

return $instance;

}

function widget($args, $instance) {

global $wpdb,$post, $product;

extract($args);

$title= empty($instance['title']) ? '' : $instance['title'];

$numbershow= empty($instance['numbershow']) ? '' : $instance['numbershow'];

echo $before_widget;

if ( ! empty( $instance['title'] ) ) {

echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];

}

<?php

$args = array(

'post_type' => 'product',

'meta_key' => '_featured',

'meta_value' => 'yes',

'meta_compare' => '=',

'posts_per_page' => $numbershow,

'post_status' => 'publish'

);

$wp_query = new WP_Query( $args );

if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">

<?php echo get_the_post_thumbnail(get_the_ID(), 'cumtom-featured-image-for-shop' ); ?>

</a>

</div>

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<?php

$product = wc_get_product( get_the_ID() );

$add_to_cart_link = sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" class=" add_to_cart_button single_add_to_cart_button button product_type_%s">%s</a>',

esc_url( $product->add_to_cart_url() ),

$product->id,

esc_attr( $product->product_type ),

'Mua ngay'

);

echo $add_to_cart_link;

</div>

<?php

endwhile;

wp_reset_postdata();

endif;

?> </div>

<?php

echo $after_widget;

<?php

}

}// end class

register_widget('products_featured');

Các bài viết khác có thể hữu ích với bạn

5/5 (16 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Tạo slide danh mục sản phẩm nổi bật trong woocommece bằng slick [ 05/11/2023 04:13 ]
Các vấn đề liên quan tới customize woocommerce [ 15/05/2023 02:30 ]
Thêm một item menu vào my account woocommerce [ 25/03/2023 08:38 ]
Cho phép chỉnh sửa xóa sản phẩm ở trang thanh toán checkout [ 31/08/2022 02:43 ]
Add to cart woocommerce with meta item [ 13/07/2022 08:11 ]
Code xử lý giỏ hàng cart woocommerce [ 08/07/2022 11:32 ]
Cách làm sản phẩm đã xem woocommerce [ 25/06/2022 09:31 ]
Thêm một item vào nav my account woocommerce [ 21/06/2022 14:48 ]
Tùy biến địa chỉ trong my account woocommerce [ 21/06/2022 06:49 ]
Thêm “Liên hệ” vào price woocommerce khi không nhập giá cũng như hết hàng [ 09/05/2022 03:38 ]

Hướng dẫn custom woocommerce – phần 4

Cập nhật trạng thái giỏ hàng mini ngay tức thì

Làm cho trạng thái add to cart xuất hiện icon quay tròn khi gọi sản phẩm ra trang chủ

Viết widget sản phẩm mới (lastest products, recent products)

Widget hiển thị các sản phẩm nổi bật (featured products)

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)